PageRenderTime 3293ms CodeModel.GetById 22ms RepoModel.GetById 1ms app.codeStats 0ms

/plugins/js_composer/assets/js/backend/composer-automapper.js

https://gitlab.com/mattswann/launch-housing
JavaScript | 723 lines | 691 code | 12 blank | 20 comment | 59 complexity | d533540e20fb23c9aa8825e30c6e7ac6 MD5 | raw file
  1. /* =========================================================
  2. * composer-automapper.js v0.2.1
  3. * =========================================================
  4. * Copyright 2013 Wpbakery
  5. *
  6. * Visual composer automapper for shortcodes
  7. * ========================================================= */
  8. var vc_am = {
  9. current_form: false
  10. };
  11. (function ( $ ) {
  12. "use strict";
  13. _.extend( wp.shortcode.prototype, {
  14. taggedString: function () {
  15. var text = '[<span class="vc_preview-tag">' + this.tag + '</span>';
  16. _.each( this.attrs.numeric, function ( value ) {
  17. if ( /\s/.test( value ) ) {
  18. text += ' <span class="vc_preview-param">"' + value + '"</span>';
  19. } else {
  20. text += ' <span class="vc_preview-param">' + value + '</span>';
  21. }
  22. } );
  23. _.each( this.attrs.named, function ( value, name ) {
  24. text += ' <span class="vc_preview-param">' + name + '="' + value + '"</span>';
  25. } );
  26. // If the tag is marked as `single` or `self-closing`, close the
  27. // tag and ignore any additional content.
  28. if ( 'single' === this.type ) {
  29. return text + ']';
  30. } else if ( 'self-closing' === this.type ) {
  31. return text + ' /]';
  32. }
  33. // Complete the opening tag.
  34. text += ']';
  35. if ( this.content ) {
  36. text += '<span class="vc_preview-content">' + this.content + '</span>';
  37. }
  38. // Add the closing tag.
  39. return text + '[/<span class="vc_preview-tag">' + this.tag + '</span>]';
  40. }
  41. } );
  42. wp.shortcode.atmPreview = function ( options ) {
  43. return new wp.shortcode( options ).taggedString();
  44. };
  45. var message_timer, show_message = function ( text, type ) {
  46. if ( message_timer ) {
  47. window.clearTimeout( message_timer );
  48. $( '.vc_settings-automapper' ).remove();
  49. message_timer = false;
  50. }
  51. var $message = $( '<div class="vc_atm-message updated' + (type ? ' vc_message-' + type : '') + '" style="display: none;"></div>' );
  52. $message.text( text );
  53. $message.prependTo( $( '#vc_settings-automapper' ) ).fadeIn( 500, function () {
  54. var $message = $( this );
  55. window.setTimeout( function () {
  56. $message.remove();
  57. }, 2000 );
  58. } );
  59. },
  60. template_options = {
  61. evaluate: /<#([\s\S]+?)#>/g,
  62. interpolate: /\{\{\{([\s\S]+?)\}\}\}/g,
  63. escape: /\{\{([^\}]+?)\}\}(?!\})/g
  64. },
  65. to_title = function ( string ) {
  66. string = string.replace( /_|-/, ' ' );
  67. return string.charAt( 0 ).toUpperCase() + string.slice( 1 );
  68. };
  69. var showMessageMore = function ( text, typeClass, timeout, remove ) {
  70. if ( remove ) {
  71. $( '.vc_atm-message' ).remove();
  72. }
  73. var $message = $( '<div class="vc_atm-message ' + (typeClass ? typeClass : '') + '" style="display: none;"></div>' );
  74. $message.text( text );
  75. if ( ! _.isUndefined( timeout ) ) {
  76. window.setTimeout( function () {
  77. $message.remove();
  78. }, timeout );
  79. }
  80. return $message;
  81. };
  82. var showValidationError = function ( text, $el ) {
  83. if ( _.isUndefined( $el ) || ! $el.length ) {
  84. $el = $( '.tab_intro' );
  85. }
  86. showMessageMore( text, 'error', undefined, true ).insertBefore( $el ).fadeIn( 500 );
  87. };
  88. var request_url = window.ajaxurl + '?vc_action=automapper',
  89. sync_callback = function ( method, model, options ) {
  90. var data;
  91. if ( method === 'create' ) {
  92. model.set( 'id', window.vc_guid() );
  93. data = {
  94. vc_action: 'create',
  95. data: model.toJSON()
  96. };
  97. } else if ( method === 'update' ) {
  98. data = {
  99. vc_action: 'update',
  100. id: model.get( 'id' ),
  101. data: model.toJSON()
  102. };
  103. } else if ( method === 'delete' ) {
  104. data = {
  105. vc_action: 'delete',
  106. id: model.get( 'id' )
  107. };
  108. } else {
  109. data = {
  110. vc_action: 'read'
  111. };
  112. }
  113. $.ajax( {
  114. method: 'POST',
  115. url: request_url,
  116. dataType: 'json',
  117. data: _.extend( data, { action: 'vc_automapper' } ),
  118. context: this
  119. } ).done( function ( data ) {
  120. var result = model;
  121. if ( data && method === 'read' ) {
  122. result = data;
  123. }
  124. // Response
  125. if ( result ) {
  126. (method === 'read') && options.success( result );
  127. } else {
  128. options.error( "Not found" );
  129. }
  130. } ).error( function ( data ) {
  131. } );
  132. };
  133. var ShortcodeModel = Backbone.Model.extend( {
  134. defaults: function () {
  135. return {
  136. tag: '',
  137. name: '',
  138. category: '',
  139. description: '',
  140. params: []
  141. };
  142. },
  143. sync: sync_callback
  144. } );
  145. var ShortcodesCollection = Backbone.Collection.extend( {
  146. model: ShortcodeModel,
  147. sync: sync_callback
  148. } );
  149. vc_am.shortcodes = new ShortcodesCollection;
  150. var ShortcodeView = Backbone.View.extend( {
  151. tagName: 'li',
  152. // className: 'vc_automapper-item',
  153. className: 'widget',
  154. events: {
  155. 'click .vc_automapper-edit-btn': 'edit',
  156. 'click h4, widget-action': 'edit',
  157. 'click .vc_automapper-delete-btn': 'clear'
  158. },
  159. template_html: $( '#vc_automapper-item-tpl' ).html() || '<span>{{ tag }}</span>',
  160. initialize: function () {
  161. this.listenTo( this.model, 'change', this.render );
  162. this.listenTo( this.model, 'destroy', this.removeView )
  163. },
  164. render: function () {
  165. this.$el.html( _.template( this.template_html,
  166. this.model.toJSON(),
  167. template_options ) ).attr( 'data-item-id', this.model.get( 'id' ) );
  168. return this;
  169. },
  170. edit: function ( e ) {
  171. e && e.preventDefault();
  172. new EditFormView( { model: this.model } ).render();
  173. },
  174. clear: function ( e ) {
  175. e && e.preventDefault();
  176. if ( confirm( window.i18nLocaleVcAutomapper.are_you_sure_delete ) ) {
  177. this.model.destroy();
  178. }
  179. },
  180. removeView: function () {
  181. this.$el.remove();
  182. }
  183. } );
  184. var FormView = Backbone.View.extend( {
  185. render: function () {
  186. vc_am.current_form && vc_am.current_form.close();
  187. vc_am.current_form = this;
  188. return this;
  189. },
  190. getType: function () {
  191. return 'form';
  192. },
  193. validate: function ( attrs ) {
  194. var result = false;
  195. if ( ! attrs.name ) {
  196. return window.i18nLocaleVcAutomapper.error_shortcode_name_is_required;
  197. }
  198. if ( ! attrs.tag || ! attrs.tag.match( /^\S+$/ ) ) {
  199. return window.i18nLocaleVcAutomapper.error_enter_valid_shortcode_tag;
  200. }
  201. var fields_required = [
  202. 'param_name',
  203. 'heading',
  204. 'type'
  205. ];
  206. _.each( attrs.params, function ( param ) {
  207. _.each( fields_required, function ( field ) {
  208. if ( param[ field ] === '' ) {
  209. result = window.i18nLocaleVcAutomapper.error_enter_required_fields // '';
  210. } else if ( field == 'param_name' && ! param[ field ].match( /^[a-z0-9_]+$/g ) ) {
  211. result = window.i18nLocaleVcAutomapper.error_enter_required_fields;
  212. }
  213. }, this );
  214. }, this );
  215. return result || null;
  216. },
  217. isValid: function ( data ) {
  218. this.validationError = this.validate( data );
  219. return this.validationError ? false : true;
  220. },
  221. close: function ( e ) {
  222. e && e.preventDefault();
  223. vc_am.current_form = false;
  224. this.remove();
  225. }
  226. } );
  227. var ComplexShortcodeView = Backbone.View.extend( {
  228. _$widget_title: false,
  229. _$form_view: false,
  230. edit_view: false,
  231. tagName: 'li',
  232. className: 'widget',
  233. events: {
  234. 'click .vc_automapper-edit-btn': 'edit',
  235. 'click h4, .widget-action': 'edit'
  236. },
  237. template_html: $( '#vc_automapper-item-complex-tpl' ).html() || '<span>{{ tag }}</span>',
  238. header_template_html: '<h4>{{ name }}<span class="in-widget-title"></span></h4>',
  239. initialize: function () {
  240. _.bindAll( this, 'removeEditForm' );
  241. // this.listenTo(this.model, 'change', this.renderTitle);
  242. this.listenTo( this.model, 'destroy', this.removeView );
  243. this.model.view = this;
  244. },
  245. render: function () {
  246. this.$el.html( _.template( this.template_html,
  247. this.model.toJSON(),
  248. template_options ) ).attr( 'data-item-id', this.model.get( 'id' ) );
  249. return this;
  250. },
  251. renderTitle: function () {
  252. this.$widgetTitle().html( _.template( this.header_template_html, this.model.toJSON(), template_options ) );
  253. },
  254. edit: function ( e ) {
  255. e && e.preventDefault();
  256. if ( this.$editForm().is( ':animated' ) ) {
  257. return false;
  258. }
  259. this.$el.addClass( 'vc_opened' );
  260. if ( this.edit_view ) {
  261. this.close();
  262. } else {
  263. this.edit_view = new EditFormInnerView( { model: this.model } ).render();
  264. }
  265. },
  266. $widgetTitle: function () {
  267. if ( ! this._$widget_title ) {
  268. this._$widget_title = this.$el.find( '.widget-title' );
  269. }
  270. return this._$widget_title;
  271. },
  272. $editForm: function () {
  273. if ( ! this._$edit_form ) {
  274. this._$edit_form = this.$el.find( '.widget-inside' );
  275. }
  276. return this._$edit_form;
  277. },
  278. removeEditForm: function () {
  279. this.edit_view && this.edit_view.remove();
  280. this.edit_view = false;
  281. },
  282. beforeSave: function () {
  283. this.$el.find( '#vc_atm-name' ).val( $( '#vc_atm-header-name' ).val() );
  284. },
  285. close: function () {
  286. vc_am.current_form = false;
  287. this.$el.removeClass( 'vc_opened' );
  288. this.renderTitle();
  289. this.$editForm().slideUp( 200 );
  290. this.removeEditForm(); // delayed call causes bug with empty params(remove called with delay)
  291. },
  292. clear: function ( e ) {
  293. e && e.preventDefault();
  294. this.model.destroy();
  295. },
  296. removeView: function () {
  297. this.remove();
  298. }
  299. } );
  300. var AddFormView = FormView.extend( {
  301. className: 'vc_add-form-atm',
  302. template_html: $( '#vc_automapper-add-form-tpl' ).html(),
  303. events: {
  304. 'click #vc_atm-parse-string': 'parseShortcode',
  305. 'click .vc_atm-cancel': 'close'
  306. },
  307. getType: function () {
  308. return 'create';
  309. },
  310. render: function () {
  311. AddFormView.__super__.render.call( this );
  312. this.$el.html( _.template( this.template_html, {}, template_options ) );
  313. this.$el.insertAfter( '.vc_automapper-toolbar' );
  314. return this;
  315. },
  316. parseShortcode: function ( e ) {
  317. var string, matches, data, params = [], attr;
  318. e && e.preventDefault && e.preventDefault();
  319. string = $( '#vc_atm-shortcode-string' ).val();
  320. if ( _.isEmpty( string ) ) {
  321. this.$el.addClass( 'form-invalid' );
  322. showValidationError( window.i18nLocaleVcAutomapper.error_enter_valid_shortcode, this.$el );
  323. return false;
  324. }
  325. matches = string.match( vc_regexp_shortcode() );
  326. if ( ! matches ) {
  327. this.$el.addClass( 'form-invalid' );
  328. showValidationError( window.i18nLocaleVcAutomapper.error_enter_valid_shortcode, this.$el );
  329. return false;
  330. }
  331. attr = wp.shortcode.attrs( matches[ 3 ] );
  332. _.each( attr.named, function ( value, key ) {
  333. params.push( {
  334. param_name: key,
  335. type: "textfield",
  336. heading: to_title( key ),
  337. description: 'Example: ' + value,
  338. value: value
  339. } );
  340. }, this );
  341. if ( matches[ 5 ] ) {
  342. params.push( {
  343. param_name: 'content',
  344. type: "textarea",
  345. heading: 'Content',
  346. description: '',
  347. value: matches[ 5 ]
  348. } );
  349. }
  350. data = {
  351. tag: matches[ 2 ],
  352. name: to_title( matches[ 2 ] ),
  353. category: window.i18nLocaleVcAutomapper.my_shortcodes_category,
  354. params: params
  355. };
  356. if ( this.isValid( data ) ) {
  357. vc_am.shortcodes.create( data );
  358. show_message( window.i18nLocaleVcAutomapper.new_shortcode_mapped, 'success' );
  359. // new EditFormView({model: vc_am.shortcodes.last()}).render();
  360. $( '.vc_atm-message' ).remove();
  361. vc_am.shortcodes.last().view.edit();
  362. } else {
  363. this.$el.addClass( 'form-invalid' );
  364. showValidationError( this.validationError );
  365. }
  366. }
  367. } );
  368. var EditFormView = FormView.extend( {
  369. className: 'vc_edit-form',
  370. active_preview: false,
  371. events: {
  372. 'click #vc_atm-save': 'save',
  373. 'click .vc_atm-cancel': 'close',
  374. 'click .vc_atm-delete': 'clear',
  375. 'click #vc_atm-add-param': 'addParam',
  376. 'click .vc_delete-param': 'deleteParam',
  377. 'change #vc_atm-is-container': 'setContentParam',
  378. 'keyup .vc_param-name, .vc_param-value, #vc_atm-tag': 'setPreview',
  379. 'focus #vc_atm-tag': 'setTagFieldActive',
  380. 'focus .vc_params input, .vc_params textarea': 'setParamFieldActive',
  381. 'focus .vc_param.vc_content input, .vc_param.vc_content textarea': 'setContentParamFieldActive',
  382. 'blur #vc_atm-tag, vc_param input': 'unsetFieldActive',
  383. 'change .vc_param-field [name="type"]': 'changeParamType'
  384. },
  385. new: false,
  386. template_html: $( '#vc_automapper-form-tpl' ).html(),
  387. param_template_html: $( '#vc_atm-form-param-tpl' ).html(),
  388. getType: function () {
  389. return 'edit';
  390. },
  391. render: function () {
  392. EditFormView.__super__.render.call( this );
  393. this.$el.html( _.template( this.template_html, this.model.toJSON(), template_options ) );
  394. this.$el.insertAfter( $( '[data-item-id=' + this.model.id + ']' ).hide() );
  395. this.addAllParams();
  396. return this;
  397. },
  398. changeParamType: function ( e ) {
  399. var $this, $parent;
  400. $this = $( e.currentTarget );
  401. $parent = $this.parents( '.vc_fields' );
  402. if ( $this.val() === 'hidden' ) {
  403. $parent.find( '[name="heading"]' ).attr( 'disabled', true );
  404. $parent.find( '[name="description"]' ).attr( 'disabled', true );
  405. } else {
  406. $parent.find( '[name="heading"]' ).attr( 'disabled', false );
  407. $parent.find( '[name="description"]' ).attr( 'disabled', false );
  408. }
  409. },
  410. setTagFieldActive: function ( e ) {
  411. this.active_preview && $( this.active_preview ).removeClass( 'vc_active' );
  412. this.active_preview = '#vc_shortcode-preview .vc_preview-tag';
  413. $( this.active_preview ).addClass( 'vc_active' );
  414. },
  415. setParamFieldActive: function ( e ) {
  416. var $control = $( e.currentTarget ),
  417. index = $control.parents( '.vc_param:first' ).index();
  418. this.active_preview && $( this.active_preview ).removeClass( 'vc_active' );
  419. this.active_preview = '#vc_shortcode-preview .vc_preview-param:eq(' + index + ')';
  420. $( this.active_preview ).addClass( 'vc_active' );
  421. },
  422. setContentParamFieldActive: function ( e ) {
  423. this.active_preview && $( this.active_preview ).removeClass( 'vc_active' );
  424. this.active_preview = '#vc_shortcode-preview .vc_preview-content';
  425. $( this.active_preview ).addClass( 'vc_active' );
  426. },
  427. unsetFieldActive: function ( e ) {
  428. $( this.active_preview ).removeClass( 'vc_active' );
  429. this.active_preview = false;
  430. },
  431. /***
  432. * Escape double quotes in params value.
  433. * @param value
  434. * @return {*}
  435. */
  436. escapeParam: function ( value ) {
  437. return value && value.replace( /"/g, '``' );
  438. },
  439. getPreview: function ( data ) {
  440. var params = data.params,
  441. content = false,
  442. params_to_string = {};
  443. _.each( params, function ( value, key ) {
  444. if ( value.param_name !== 'content' ) {
  445. params_to_string[ value.param_name ] = this.escapeParam( value.value );
  446. } else {
  447. content = value.value;
  448. }
  449. }, this );
  450. return wp.shortcode.atmPreview( {
  451. tag: data.tag,
  452. attrs: params_to_string,
  453. content: content,
  454. type: content === false ? 'single' : ''
  455. } );
  456. },
  457. setPreview: function () {
  458. var data = {
  459. params: this.getParams(),
  460. tag: $( '#vc_atm-tag' ).val()
  461. };
  462. $( '#vc_shortcode-preview' ).html( this.getPreview( data ) );
  463. this.active_preview && $( this.active_preview ).addClass( 'vc_active' );
  464. },
  465. save: function ( e ) {
  466. e && e.preventDefault && e.preventDefault();
  467. this.$el.find( '.vc_error' ).removeClass( 'vc_error' );
  468. var data = {
  469. tag: $( '#vc_atm-tag' ).val(),
  470. name: $( '#vc_atm-name' ).val(),
  471. category: $( '#vc_atm-category' ).val(),
  472. description: $( '#vc_atm-description' ).val(),
  473. params: this.getParams()
  474. };
  475. if ( this.isValid( data ) ) {
  476. this.model.save( data );
  477. show_message( window.i18nLocaleVcAutomapper.shortcode_updated, 'success' );
  478. this.close();
  479. } else {
  480. showValidationError( this.validationError, this.$el.find( '#vc_atm-save' ) );
  481. }
  482. },
  483. validate: function ( attrs ) {
  484. $( '.vc_error,.form-invalid' ).removeClass( 'vc_error form-invalid' );
  485. var result = false, added_param_names = {};
  486. if ( ! attrs.name ) {
  487. $( '#vc_atm-name' ).addClass( 'vc_error' );
  488. $( '#vc_atm-header-name' ).parent().addClass( 'form-invalid' );
  489. return window.i18nLocaleVcAutomapper.error_shortcode_name_is_required;
  490. }
  491. if ( ! attrs.tag || ! attrs.tag.match( /^\S+$/ ) ) {
  492. $( '#vc_atm-tag' ).addClass( 'vc_error' ).parent().addClass( 'form-invalid' );
  493. return window.i18nLocaleVcAutomapper.error_enter_valid_shortcode_tag;
  494. }
  495. var fields_required = [
  496. 'param_name',
  497. 'heading',
  498. 'type'
  499. ];
  500. _.each( attrs.params, function ( param, index ) {
  501. var $field_el = $( '#vc_atm-params-list [name=param_name]:eq(' + index + ')' );
  502. if ( param.param_name === 'content' && ! $field_el.data( 'system' ) ) {
  503. result = window.i18nLocaleVcAutomapper.error_content_param_not_manually;
  504. $field_el.addClass( 'vc_error' );
  505. $field_el.closest( '.vc_param-field' ).addClass( 'form-invalid' );
  506. return;
  507. }
  508. if ( _.isBoolean( added_param_names[ param.param_name ] ) && added_param_names[ param.param_name ] == true ) {
  509. $field_el.addClass( 'vc_error' );
  510. $field_el.closest( '.vc_param-field' ).addClass( 'form-invalid' );
  511. if ( ! result ) {
  512. result = window.i18nLocaleVcAutomapper.error_param_already_exists.replace( /\%s/,
  513. param.param_name );
  514. }
  515. }
  516. added_param_names[ param.param_name ] = true;
  517. _.each( fields_required, function ( field ) {
  518. if ( (param.type !== 'hidden' && param[ field ] === '') || (param.type === 'hidden' && field !== 'heading' && param[ field ] === '') ) {
  519. $( '#vc_atm-params-list [name=' + field + ']:eq(' + index + ')' )
  520. .addClass( 'vc_error' )
  521. .closest( '.vc_param-field' )
  522. .addClass( 'form-invalid' );
  523. if ( ! result ) {
  524. result = window.i18nLocaleVcAutomapper.error_enter_required_fields;
  525. }
  526. } else if ( field == 'param_name' && ! param[ field ].match( /^[a-z0-9_]+$/g ) ) {
  527. $field_el
  528. .addClass( 'vc_error' )
  529. .closest( '.vc_param-field' )
  530. .addClass( 'form-invalid' );
  531. if ( ! result ) {
  532. result = window.i18nLocaleVcAutomapper.error_wrong_param_name;
  533. }
  534. }
  535. }, this );
  536. }, this );
  537. return result || null;
  538. },
  539. setContentParam: function ( e ) {
  540. var $control = $( e.currentTarget );
  541. if ( $control.is( ':checked' ) ) {
  542. this.addParamField( {
  543. type: 'textarea',
  544. heading: 'Content',
  545. description: '',
  546. param_name: 'content',
  547. value: ''
  548. } );
  549. this.setParamSorting();
  550. } else {
  551. this.removeParamField( 'content' );
  552. }
  553. this.setPreview();
  554. },
  555. addAllParams: function () {
  556. $( '#vc_atm-params-list' ).empty();
  557. _.each( this.model.get( 'params' ), function ( param ) {
  558. this.addParamField( param );
  559. if ( param.param_name === 'content' ) {
  560. $( '#vc_atm-is-container' ).prop( 'checked', true );
  561. }
  562. }, this );
  563. this.setParamSorting();
  564. },
  565. getParams: function () {
  566. var params = [];
  567. _.each( $( '.vc_param' ), function ( param ) {
  568. var $param = $( param );
  569. params.push( {
  570. param_name: $param.find( '[name=param_name]' ).val(),
  571. type: $param.find( '[name=type]' ).val(),
  572. description: $param.find( '[name=description]' ).val(),
  573. heading: $param.find( '[name=heading]' ).val(),
  574. value: $param.find( '[name=value]' ).val()
  575. } );
  576. }, this );
  577. return params;
  578. },
  579. addParam: function ( e ) {
  580. e && e.preventDefault();
  581. this.addParamField( { type: '', heading: '', description: '', param_name: '', value: '' } );
  582. this.setPreview();
  583. },
  584. removeParamField: function ( name ) {
  585. $( '.vc_param-name[value="' + name + '"]' ).parents( '.vc_param' ).remove();
  586. },
  587. addParamField: function ( attr ) {
  588. var $block = $( '<div class="vc_param wpb_vc_row' + ( attr.param_name === 'content' ? ' vc_content' : '' ) + '"/>' ).appendTo( '#vc_atm-params-list' );
  589. $block.html( _.template( this.param_template_html, attr, template_options ) );
  590. },
  591. setParamSorting: function () {
  592. $( '#vc_atm-params-list' ).sortable( {
  593. items: '> .vc_param',
  594. tolerance: "pointer",
  595. handle: '.vc_move-param',
  596. update: this.setPreview,
  597. placeholder: "vc_sortable-placeholder"
  598. } );
  599. },
  600. deleteParam: function ( e ) {
  601. var $control;
  602. e && e.preventDefault();
  603. if ( confirm( window.i18nLocaleVcAutomapper.are_you_sure_delete_param ) ) {
  604. $control = $( e.currentTarget );
  605. $control.parents( '.vc_param' ).remove();
  606. this.setPreview();
  607. }
  608. },
  609. close: function ( e ) {
  610. e && e.preventDefault();
  611. this.model && $( '[data-item-id=' + this.model.get( 'id' ) + ']' ).show();
  612. vc_am.current_form = false;
  613. $( '.vc_atm-message' ).remove();
  614. this.remove();
  615. },
  616. clear: function ( e ) {
  617. e && e.preventDefault();
  618. if ( confirm( window.i18nLocaleVcAutomapper.are_you_sure_delete ) ) {
  619. this.model.destroy();
  620. this.close();
  621. }
  622. }
  623. } );
  624. var EditFormInnerView = EditFormView.extend( {
  625. template_html: $( '#vc_automapper-form-tpl' ).html(),
  626. getType: function () {
  627. return 'edit';
  628. },
  629. initialize: function () {
  630. _.bindAll( this, 'setPreview' );
  631. },
  632. render: function () {
  633. var params, content,
  634. parent = this.model.view;
  635. params = this.model.get( 'params' );
  636. EditFormView.__super__.render.call( this );
  637. this.$el.html( _.template( this.template_html,
  638. _.extend( { shortcode_preview: this.getPreview( this.model.toJSON() ) }, this.model.toJSON() ),
  639. template_options ) );
  640. this.$el.appendTo( parent.$editForm() );
  641. parent.$widgetTitle().html( '<span class="vc_atm-header"><input type="text" name="name" value="" id="vc_atm-header-name" class="vc_header-name"></span><span class="in-widget-title"></span>' );
  642. $( '#vc_atm-header-name' ).val( this.model.get( 'name' ) );
  643. this.addAllParams();
  644. parent.$editForm().slideDown();
  645. return this;
  646. },
  647. save: function ( e ) {
  648. e && e.preventDefault();
  649. this.model.view.beforeSave();
  650. EditFormInnerView.__super__.save.call( this );
  651. },
  652. close: function ( e ) {
  653. e && e.preventDefault();
  654. vc_am.current_form = false;
  655. this.model.view.close();
  656. },
  657. clear: function ( e ) {
  658. e && e.preventDefault();
  659. if ( confirm( window.i18nLocaleVcAutomapper.are_you_sure_delete ) ) {
  660. this.model.view.clear();
  661. this.remove();
  662. }
  663. }
  664. } );
  665. var AppView = Backbone.View.extend( {
  666. events: {
  667. 'click #vc_automapper-add-btn': 'create',
  668. 'submit': 'formSubmit'
  669. },
  670. className: 'vc_atm-form',
  671. addFormView: false,
  672. initialize: function () {
  673. this.listenTo( vc_am.shortcodes, 'add', this.addOne );
  674. this.listenTo( vc_am.shortcodes, 'reset', this.addAll );
  675. this.listenTo( vc_am.shortcodes, 'all', this.render );
  676. this.$list = $( '.vc_automapper-list' );
  677. vc_am.shortcodes.fetch();
  678. },
  679. formSubmit: function ( e ) {
  680. e && e.preventDefault && e.preventDefault();
  681. if ( _.isObject( e ) && this.addFormView && ! _.isEmpty( e.currentTarget ) && ! _.isEmpty( e.currentTarget[ 0 ] ) ) {
  682. var node, $el;
  683. node = e.currentTarget[ 0 ];
  684. $el = $( node );
  685. if ( $el.is( '#vc_atm-shortcode-string' ) ) {
  686. this.addFormView.parseShortcode();
  687. }
  688. }
  689. },
  690. addAll: function ( models ) {
  691. models.each( function ( model ) {
  692. this.addOne( model );
  693. }, this );
  694. },
  695. addOne: function ( model ) {
  696. var view = new ComplexShortcodeView( { model: model } );
  697. this.$list.append( view.render().el );
  698. },
  699. create: function ( e ) {
  700. e && e.preventDefault && e.preventDefault();
  701. if ( ! vc_am.current_form || vc_am.current_form.getType() !== 'create' ) {
  702. this.addFormView = new AddFormView().render();
  703. }
  704. },
  705. render: function () {
  706. }
  707. } );
  708. new AppView( { el: $( '#vc_settings-automapper' ) } );
  709. })( window.jQuery );