API tools faq
paste
Guest User

Untitled

a guest
Nov 22nd, 2017
83
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.72 KB | None | 0 0
raw download clone embed print report
  1. /**
  2. * Сборщик ЛГ формы
  3. * @tihoho, 07.07.2016
  4. */
  5.  
  6. // Сбрасываем возможность перетаскивания панелей
  7. handleDraggablePanel = function(){};
  8.  
  9. // Слайдеры
  10. var slider_w_w,
  11. slider_w_h,
  12. slider_b_br,
  13. slider_b_pad,
  14. slider_w_fs,
  15. slider_el_fs,
  16. slider_el_tah,
  17. slider_msg_fs,
  18. slider_msg_pad;
  19.  
  20. // параметры конфига
  21. var w_w, w_h, b_br, b_pad,
  22. w_fs, el_fs, el_tah, msg_fs,
  23. msg_pad,msg_bg, msg_fg, b_dis,
  24. el_fg, wh_bg, wh_fg, el_bg,
  25. w_fg, w_bg, b_bg, b_fg;
  26.  
  27.  
  28.  
  29. var LGFormBuilder = {
  30.  
  31. /**
  32. * �˜нициализация
  33. */
  34. init: function() {
  35.  
  36. this.config = {};
  37. this.config.elements = {};
  38. this.config.elements.arr = [];
  39. this.config.elements.string = '';
  40. this.config.styles = {};
  41. this.config.texts = {};
  42.  
  43. this.elementsContainer = $('.elements-list');
  44. this.elementsPreviewContainer = $('#lgf_window #lgf_body');
  45. this.elementsMax = 5;
  46.  
  47. this.wContainer = $('#lgf_window');
  48. this.wBtnSend = this.wContainer.find('#lgf_btn_send');
  49. this.wBtnSendTypes = ['', 'lgf-btn-send-default','lgf-btn-send-fullwidth','lgf-btn-send-winpart'];
  50.  
  51. // Временные хранилища значений при ре-рендере формы
  52. this.__wc = false;
  53. this.__elc = false;
  54. this.__elbg = false;
  55. this.__wfs = false;
  56. this.__elfs = false;
  57. this.__msgfs = false;
  58.  
  59. $('.lgfb-wrap input').trigger('onkeyup');
  60.  
  61. },
  62.  
  63. /**
  64. * �˜нициализация UI элементов билдера
  65. * (подставление текущих значений из конфига)
  66. */
  67. initUI: function(config) {
  68.  
  69. console.log(config);
  70. this.config = config;
  71.  
  72. // Перестраиваем DOM билдера
  73. for(elem in config.elements.arr) {
  74.  
  75. var clone = $('.elements-item:eq(0)').clone();
  76.  
  77. clone.find('[type=text]').val(config.elements.arr[elem].title);
  78. clone.find('[data-name="type"]').attr('data-value', config.elements.arr[elem].type);
  79. clone.find('[data-name="assoc"]').val(config.elements.arr[elem].assoc);
  80. clone.find('[type=checkbox]').attr('checked', config.elements.arr[elem].require);
  81.  
  82. // меняем тип поля (input|textarea)
  83. if(config.elements.arr[elem].type == 'textarea') {
  84. clone.find('[data-name="type"]').find('a').toggleClass('active');
  85. }
  86.  
  87. // добавляем клон в контейнер
  88. $('.elements-list').append(clone);
  89.  
  90. }
  91.  
  92. // Удаляем первый элемент, с которого делали копии
  93. $('.elements-item:eq(0)').remove();
  94.  
  95. // Обновляем текста (приветствие, и кнопка)
  96. $('[name="msg_text"]').val(config.texts.msg);
  97. $('[name="b_send"]').val(config.texts.b_send);
  98. $('[name="b_send"]').trigger('keyup');
  99.  
  100. // Обновляем тип кнопки отправки
  101. $('#btnSendDisplay').val(config.styles.b_dis);
  102. $('#btnSendDisplay').trigger('change');
  103.  
  104. // Обновляем параметры конфига
  105. w_w = parseInt(config.styles.w_w.replace('px','')),
  106. w_h = parseInt(config.styles.w_h.replace('px','')),
  107. b_br = parseInt(config.styles.b_br.replace('px','')),
  108. b_pad = parseInt(config.styles.b_pad.replace('px','')),
  109. w_fs = parseInt(config.styles.w_fs.replace('px','')),
  110. el_fs = parseInt(config.styles.el_fs.replace('px','')),
  111. el_tah = parseInt(config.styles.el_tah.replace('px','')),
  112. msg_fs = parseInt(config.styles.msg_fs.replace('px','')),
  113. msg_pad = parseInt(config.styles.msg_pad.replace('px','')),
  114. msg_bg = config.styles.msg_bg,
  115. msg_fg = config.styles.msg_fg,
  116. b_dis = config.styles.b_dis,
  117. el_fg = config.styles.el_fg,
  118. wh_bg = config.styles.wh_bg,
  119. wh_fg = config.styles.wh_fg,
  120. el_bg = config.styles.el_bg,
  121. w_fg = config.styles.w_fg,
  122. w_bg = config.styles.w_bg,
  123. b_bg = config.styles.b_bg,
  124. b_fg = config.styles.b_fg;
  125.  
  126. // Без таймаута слайдеры по нормальному инициализироваться не хотят
  127. setTimeout(function(){
  128.  
  129. slider_w_w = new Powerange($('[name=window_w]')[0], { min: 200, max: 450, start: w_w });
  130. slider_w_h = new Powerange($('[name=window_h]')[0], { min: 300, max: 600, start: w_h });
  131. slider_b_br = new Powerange($('[name=btn_send_radius]')[0], { min: 0, max: 20, start: b_br, hideRange: true });
  132. slider_b_pad = new Powerange($('[name=btn_send_padding]')[0], { min: 0, max: 20, start: b_pad, hideRange: true });
  133. slider_w_fs = new Powerange($('[name=window_fontsize]')[0], { min: 11, max: 20, start: w_fs, hideRange: true, callback:function(){lgfb.__wfs = $('[name=window_fontsize]').val() + 'px'; lgfb.config.styles.w_fs = lgfb.__wfs; } });
  134. slider_el_fs = new Powerange($('[name=elements_fontsize]')[0], { min: 12, max: 20, start: el_fs, hideRange: true, callback:function(){lgfb.__elfs = $('[name=elements_fontsize]').val() + 'px'; lgfb.config.styles.el_fs = lgfb.__elfs; } });
  135. slider_el_tah = new Powerange($('[name=elements_textarea_h]')[0], { min: 40, max: 130, start: el_tah, hideRange: true, callback:function(){lgfb.__elth = $('[name=elements_textarea_h]').val() + 'px'; lgfb.config.styles.el_tah = lgfb.__elth; } });
  136. slider_msg_fs = new Powerange($('[name=msg_fontsize]')[0], { min: 12, max: 20, start: msg_fs, hideRange: true, callback:function(){lgfb.__msgfs = $('[name=msg_fontsize]').val() + 'px'; lgfb.config.styles.msg_fs = lgfb.__msgfs; } });
  137. slider_msg_pad = new Powerange($('[name=msg_padding]')[0], { min: 5, max: 20, start: msg_pad, hideRange: true });
  138.  
  139. }, 100);
  140.  
  141. // Красим триггеры колорпикеров
  142. $('#msgBackground').css('background', msg_bg);
  143. $('#msgColor').css('background', msg_fg);
  144. $('#btnSendBackground').css('background', b_bg);
  145. $('#btnSendColor').css('background', b_fg);
  146. $('#windowBackground').css('background', w_bg);
  147. $('#windowColor').css('background', w_fg);
  148. $('#elementsBackground').css('background', el_bg);
  149. $('#elementsColor').css('background', el_fg);
  150. $('#headerBackground').css('background', wh_bg);
  151. $('#headerColor').css('background', wh_fg);
  152.  
  153. // Красим форму
  154. $('#lgf_btn_send').css('color', b_fg);
  155. $('#lgf_btn_send').css('background', b_bg);
  156. $('#lgf_window').css('background', w_bg);
  157. $('#lgf_window label').css('color', w_fg);
  158. $('#lgf_window input, #lgf_window textarea').css('background', el_bg);
  159. $('#lgf_window input, #lgf_window textarea').css('color', el_fg);
  160. $('#lgf_header').css('background', wh_bg);
  161. $('#lgf_title').css('color', wh_fg);
  162. $('#lgf_msg').css('color', msg_fg);
  163. //$('#lgf_msg').css('background', msg_bg);
  164.  
  165. this.update();
  166.  
  167. },
  168.  
  169. /**
  170. * Возвращает готовый JSON конфиг формы
  171. */
  172. get: function() {
  173.  
  174. this.update();
  175. return this.config;
  176.  
  177. },
  178.  
  179. /**
  180. * Обновляем всё
  181. */
  182. update: function() {
  183.  
  184. this.elementsUpdate();
  185.  
  186. },
  187.  
  188. /**
  189. * Сохраняем настройки
  190. */
  191. save: function() {
  192.  
  193. this.update();
  194.  
  195. /**
  196. * Пробегаемся по всем стилям в конфиге
  197. * и если какой-то не определен - подставляем из конфига по умолчанию
  198. */
  199. for(param in this.config.styles) {
  200.  
  201. var _current = this.config.styles[param];
  202.  
  203. if(typeof(_current) == 'string' && _current == 'NaNpx') {
  204. this.config.styles[param] = lgfb_defaultConfig.styles[param];
  205. }
  206.  
  207. }
  208.  
  209. $.post('page|lgsettings_form.html', { lgsettingsform: JSON.stringify(this.config) })
  210. .done(function(response){
  211. notify('success', 'Успешно!', 'Настройки формы сохранены');
  212. console.log(response);
  213. })
  214. .fail(function(response){
  215. notify('error', 'Ошибка!', 'Сохранение настроек формы невозможно');
  216. console.log('XHR Error: ', response);
  217.  
  218. });
  219. return this.get();
  220.  
  221. },
  222.  
  223. /**
  224. * Добавление элемента
  225. */
  226. addElement: function() {
  227.  
  228. event.stopPropagation();
  229.  
  230. if(this.config.elements.arr.length < this.elementsMax) {
  231. var elem = this.elementsContainer.find('.elements-item:last').clone();
  232. elem.find('input').val('');
  233. this.elementsContainer.append(elem);
  234. this.elementsUpdate();
  235. }
  236. },
  237.  
  238. /**
  239. * Удаление элемента
  240. */
  241. removeElement: function(el) {
  242.  
  243. if(this.config.elements.arr.length > 1) {
  244. $(el).parent().parent().parent().parent().remove();
  245. this.elementsUpdate();
  246. }
  247.  
  248. },
  249.  
  250. /**
  251. * Выбор типа элемента (input|textarea)
  252. */
  253. typeElement: function(el, type) {
  254.  
  255. $(el).parent().attr('data-value', type);
  256. $(el).parent().find('a').removeClass('active');
  257. $(el).addClass('active');
  258.  
  259. this.elementsUpdate();
  260. },
  261.  
  262. /**
  263. * �­лементы формы в массив объектов
  264. */
  265. elementsUpdate: function() {
  266.  
  267. this.config.elements.arr = [];
  268.  
  269. var _class = this;
  270.  
  271. $('[data-element]').each(function(i,e){
  272.  
  273. var title = $(e).find('[data-name=title]').val();
  274. var type = $(e).find('[data-name=type]').attr('data-value');
  275. var require = $(e).find('[data-name=require]').is(':checked') ? 1 : 0;
  276. var assoc = $(e).find('[data-name=assoc]').val();
  277.  
  278. _class.config.elements.arr.push({
  279. title: title,
  280. type: type,
  281. require: require,
  282. assoc: assoc
  283. });
  284.  
  285. });
  286.  
  287. this.elementsToString();
  288. this.elementsPreview();
  289.  
  290. // Временные хранилища значений при ре-рендере формы
  291. if(this.__wc) { $('#lgf_window label').css('color', this.__wc); }
  292. if(this.__elc) { $('#lgf_window input, #lgf_window textarea').css('color', this.__elc); }
  293. if(this.__elbg) { $('#lgf_window input, #lgf_window textarea').css('background', this.__elbg); }
  294. if(this.__wfs) { this.wContainer.find('label').css('font-size', this.__wfs); }
  295. if(this.__elfs) { this.wContainer.find('input, textarea').css('font-size', this.__elfs); }
  296. if(this.__elth) { this.wContainer.find('textarea').css('height', this.__elth); }
  297.  
  298. // Обновляем цвета (т.к. они стираются при ре-рендере)
  299. $('#lgf_window input, #lgf_window textarea').css('background', this.config.styles.el_bg);
  300. $('#lgf_window input, #lgf_window textarea').css('color', this.config.styles.el_fg);
  301. $('#lgf_window label').css('color', this.config.styles.w_fg);
  302.  
  303. },
  304.  
  305. /**
  306. * Массив объектов элементов в строку
  307. * "type|title|require,..."
  308. */
  309. elementsToString: function() {
  310.  
  311. var encoded = '';
  312.  
  313. for(el in this.config.elements.arr) {
  314. var o = this.config.elements.arr[el];
  315. encoded += o.type + '|' + o.title + '|' + o.require + '|' + o.assoc + ',';
  316. }
  317.  
  318. encoded = encoded.slice(0, -1);
  319.  
  320. this.config.elements.string = encoded;
  321. return encoded;
  322.  
  323. },
  324.  
  325. /**
  326. * Превью элементов в окне
  327. */
  328. elementsPreview: function() {
  329.  
  330. this.elementsPreviewContainer.empty();
  331.  
  332. for(el in this.config.elements.arr) {
  333.  
  334. var o = this.config.elements.arr[el];
  335.  
  336. switch(o.type) {
  337. case 'input':
  338. $('<div class="form-group" style="margin-bottom:5px;"><label for="">' + o.title + '</label><input type="text" class="form-control" style="border:1px solid #b3b3b3;"></div>').appendTo(this.elementsPreviewContainer);
  339. break;
  340. case 'textarea':
  341. $('<div class="form-group" style="margin-bottom:5px;"><label for="">' + o.title + '</label><textarea class="form-control" style="border:1px solid #b3b3b3;"></textarea></div>').appendTo(this.elementsPreviewContainer);
  342. break;
  343. case 'checkbox':
  344. $('<div class="form-group" style="margin-bottom:5px;"><label for="">' + o.title + '</label>   <input type="checkbox" checked="checked" /></div>').appendTo(this.elementsPreviewContainer);
  345. break;
  346.  
  347. default:
  348. break;
  349. }
  350. }
  351.  
  352. },
  353.  
  354. /**
  355. * �˜зменение свойств окна
  356. */
  357. wChange: function(el, param) {
  358.  
  359. switch(param) {
  360.  
  361. // � азмер шрифта сообщения
  362. case 'msg_fontsize':
  363. this.wContainer.find('#lgf_msg').css('font-size', el.value + 'px');
  364. this.config.styles.msg_fs = el.value + 'px';
  365. break;
  366.  
  367. // Padding сообщения
  368. case 'msg_padding':
  369. this.wContainer.find('#lgf_msg').css('padding', el.value + 'px');
  370. this.config.styles.msg_pad = el.value + 'px';
  371. break;
  372.  
  373. // Padding сообщения
  374. case 'msg_text':
  375. this.wContainer.find('#lgf_msg').text(el.value);
  376. this.config.texts.msg = el.value;
  377. break;
  378.  
  379. // � азмер шрифта окна
  380. case 'window_fontsize':
  381. this.wContainer.find('label').css('font-size', el.value + 'px');
  382. this.config.styles.w_fs = el.value + 'px';
  383. break;
  384.  
  385. // � азмер шрифта полей
  386. case 'elements_fontsize':
  387. this.wContainer.find('input, textarea').css('font-size', el.value + 'px');
  388. this.config.styles.el_fs = el.value + 'px';
  389. break;
  390.  
  391. // Высота textarea
  392. case 'elements_textarea_h':
  393. this.wContainer.find('textarea').css('height', el.value + 'px');
  394. this.config.styles.el_tah = el.value + 'px';
  395. break;
  396.  
  397. // Ширина окна
  398. case 'window_w':
  399. this.wContainer.css('width', el.value + 'px');
  400. this.config.styles.w_w = el.value + 'px';
  401. break;
  402.  
  403. // Высота окна
  404. case 'window_h':
  405. this.wContainer.css('height', el.value + 'px');
  406. this.config.styles.w_h = el.value + 'px';
  407. break;
  408.  
  409. // Текст кнопки отправки
  410. case 'btn_send_text':
  411. this.wBtnSend.text(el.value);
  412. this.config.texts.b_send = el.value;
  413. break;
  414.  
  415. // � адиус кнопки отправки
  416. case 'btn_send_radius':
  417. this.wBtnSend.css('border-radius', el.value + 'px');
  418. this.config.styles.b_br = el.value + 'px';
  419. break;
  420.  
  421. // Padding кнопки отправки
  422. case 'btn_send_padding':
  423. this.wBtnSend.css('padding', el.value + 'px');
  424. this.config.styles.b_pad = el.value + 'px';
  425. break;
  426.  
  427. // Тип отображения кнопки отправки
  428. case 'btn_send_display':
  429. this.wBtnSend.removeClass().addClass(this.wBtnSendTypes[parseInt(el.value)]);
  430. this.config.styles.b_dis = parseInt(el.value);
  431. break;
  432.  
  433. default:
  434. break;
  435.  
  436. }
  437.  
  438. }
  439.  
  440. };
  441.  
  442. var lgfb = LGFormBuilder;
  443.  
  444. $(function(){
  445.  
  446. lgfb.init();
  447.  
  448. // Если есть пользовательский конфиг
  449. if(lgfb_isCurrentConfig) {
  450. // инициализируем из него
  451. lgfb.initUI(lgfb_currentConfig);
  452. } else {
  453. // иначе из конфига по умолчанию
  454. lgfb.initUI(lgfb_defaultConfig);
  455. }
  456.  
  457. //lgfb.update();
  458.  
  459. $('[name=msg_text]').trigger('keyup');
  460.  
  461. // Перемещение окна
  462. $('#lgf_window').draggable({ containment: 'body'});
  463.  
  464. // Сортировка элементов
  465. $('.elements-list').sortable({ handle: '.sortable-trigger', update: function(e, ui){ lgfb.update(); }});
  466.  
  467. $('#btnSendColor').ColorPicker({
  468. color: b_fg,
  469. onShow: function (colpkr) { $(colpkr).fadeIn(500); return false; },
  470. onHide: function (colpkr) { $(colpkr).fadeOut(500); return false; },
  471. onChange: function (hsb, hex, rgb) {
  472. $('#btnSendColor').css('backgroundColor', '#' + hex);
  473. $('#lgf_btn_send').css('color', '#' + hex);
  474. lgfb.config.styles.b_fg = '#' + hex;
  475. }
  476. });
  477.  
  478. $('#btnSendBackground').ColorPicker({
  479. color: b_bg,
  480. onShow: function (colpkr) { $(colpkr).fadeIn(500); return false; },
  481. onHide: function (colpkr) { $(colpkr).fadeOut(500); return false; },
  482. onChange: function (hsb, hex, rgb) {
  483. $('#btnSendBackground').css('backgroundColor', '#' + hex);
  484. $('#lgf_btn_send').css('background', '#' + hex);
  485. lgfb.config.styles.b_bg = '#' + hex;
  486. }
  487. });
  488.  
  489. $('#windowBackground').ColorPicker({
  490. color: w_bg,
  491. onShow: function (colpkr) { $(colpkr).fadeIn(500); return false; },
  492. onHide: function (colpkr) { $(colpkr).fadeOut(500); return false; },
  493. onChange: function (hsb, hex, rgb) {
  494. $('#windowBackground').css('backgroundColor', '#' + hex);
  495. $('#lgf_window').css('background', '#' + hex);
  496. lgfb.config.styles.w_bg = '#' + hex;
  497. }
  498. });
  499.  
  500. $('#windowColor').ColorPicker({
  501. color: w_fg,
  502. onShow: function (colpkr) { $(colpkr).fadeIn(500); return false; },
  503. onHide: function (colpkr) { $(colpkr).fadeOut(500); return false; },
  504. onChange: function (hsb, hex, rgb) {
  505. $('#windowColor').css('backgroundColor', '#' + hex);
  506. $('#lgf_window label').css('color', '#' + hex);
  507. lgfb.__wc = '#' + hex;
  508. lgfb.config.styles.w_fg = '#' + hex;
  509. }
  510. });
  511.  
  512. $('#elementsBackground').ColorPicker({
  513. color: el_bg,
  514. onShow: function (colpkr) { $(colpkr).fadeIn(500); return false; },
  515. onHide: function (colpkr) { $(colpkr).fadeOut(500); return false; },
  516. onChange: function (hsb, hex, rgb) {
  517. $('#elementsBackground').css('backgroundColor', '#' + hex);
  518. $('#lgf_window input, #lgf_window textarea').css('background', '#' + hex);
  519. lgfb.__elbg = '#' + hex;
  520. lgfb.config.styles.el_bg = '#' + hex;
  521. }
  522. });
  523.  
  524. $('#elementsColor').ColorPicker({
  525. color: el_fg,
  526. onShow: function (colpkr) { $(colpkr).fadeIn(500); return false; },
  527. onHide: function (colpkr) { $(colpkr).fadeOut(500); return false; },
  528. onChange: function (hsb, hex, rgb) {
  529. $('#elementsColor').css('backgroundColor', '#' + hex);
  530. $('#lgf_window input, #lgf_window textarea').css('color', '#' + hex);
  531. lgfb.__elc = '#' + hex;
  532. lgfb.config.styles.el_fg = '#' + hex;
  533. }
  534. });
  535.  
  536. $('#headerBackground').ColorPicker({
  537. color: wh_bg,
  538. onShow: function (colpkr) { $(colpkr).fadeIn(500); return false; },
  539. onHide: function (colpkr) { $(colpkr).fadeOut(500); return false; },
  540. onChange: function (hsb, hex, rgb) {
  541. $('#headerBackground').css('backgroundColor', '#' + hex);
  542. $('#lgf_header').css('background', '#' + hex);
  543. lgfb.config.styles.wh_bg = '#' + hex;
  544. }
  545. });
  546.  
  547. $('#headerColor').ColorPicker({
  548. color: wh_fg,
  549. onShow: function (colpkr) { $(colpkr).fadeIn(500); return false; },
  550. onHide: function (colpkr) { $(colpkr).fadeOut(500); return false; },
  551. onChange: function (hsb, hex, rgb) {
  552. $('#headerColor').css('backgroundColor', '#' + hex);
  553. $('#lgf_title').css('color', '#' + hex);
  554. lgfb.config.styles.wh_fg = '#' + hex;
  555. }
  556. });
  557.  
  558. $('#msgColor').ColorPicker({
  559. color: msg_fg,
  560. onShow: function (colpkr) { $(colpkr).fadeIn(500); return false; },
  561. onHide: function (colpkr) { $(colpkr).fadeOut(500); return false; },
  562. onChange: function (hsb, hex, rgb) {
  563. $('#msgColor').css('backgroundColor', '#' + hex);
  564. $('#lgf_msg').css('color', '#' + hex);
  565. lgfb.config.styles.msg_fg = '#' + hex;
  566. }
  567. });
  568.  
  569. $('#msgBackground').ColorPicker({
  570. color: msg_bg,
  571. onShow: function (colpkr) { $(colpkr).fadeIn(500); return false; },
  572. onHide: function (colpkr) { $(colpkr).fadeOut(500); return false; },
  573. onChange: function (hsb, hex, rgb) {
  574. $('#msgBackground').css('backgroundColor', '#' + hex);
  575. $('#lgf_msg').css('background', '#' + hex);
  576. lgfb.config.styles.msg_bg = '#' + hex;
  577. }
  578. });
  579.  
  580. });
  581.  
  582. function notify(type, title, message) {
  583.  
  584. var title = title || 'Успешно!';
  585. var message = message || 'Действие выполнено';
  586. var type = type || 'success';
  587. $.gritter.add({title: title, text: message, image:'/assets/img/icon_'+type+'.png', sticky: false, time: 3000 });
  588.  
  589. }
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!