fl-builder-ui-settings-forms.js 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928
  1. ( function( $ ) {
  2. /**
  3. * Helper for rendering builder settings forms.
  4. *
  5. * @since 2.0
  6. * @class FLBuilderSettingsForms
  7. */
  8. FLBuilderSettingsForms = {
  9. /**
  10. * Config for the current form that is rendering.
  11. *
  12. * @since 2.0
  13. * @property {Object} config
  14. */
  15. config : null,
  16. /**
  17. * Settings cache for the current form so we can compare
  18. * later and see if settings have changed before saving.
  19. *
  20. * @since 2.0
  21. * @property {Object} settings
  22. */
  23. settings : null,
  24. /**
  25. * A reference to the AJAX object for rendering legacy settings.
  26. *
  27. * @since 2.0
  28. * @property {Object} legacyXhr
  29. */
  30. legacyXhr : null,
  31. /**
  32. * @since 2.0
  33. * @method init
  34. */
  35. init: function() {
  36. this.bind();
  37. },
  38. /**
  39. * @since 2.0
  40. * @method bind
  41. */
  42. bind: function() {
  43. FLBuilder.addHook( 'didDeleteRow', this.closeOnDeleteNode );
  44. FLBuilder.addHook( 'didDeleteColumn', this.closeOnDeleteNode );
  45. FLBuilder.addHook( 'didDeleteModule', this.closeOnDeleteNode );
  46. },
  47. /**
  48. * Renders a settings form.
  49. *
  50. * @since 2.0
  51. * @method render
  52. * @param {Object} config
  53. * @param {Function} callback
  54. */
  55. render: function( config, callback ) {
  56. var forms = FLBuilderSettingsConfig.forms,
  57. modules = FLBuilderSettingsConfig.modules,
  58. defaults = {
  59. type : 'general',
  60. id : null,
  61. nodeId : null,
  62. className : '',
  63. attrs : '',
  64. title : '',
  65. badges : [],
  66. tabs : [],
  67. buttons : [],
  68. settings : {},
  69. legacy : null,
  70. rules : null,
  71. preview : null,
  72. helper : null
  73. };
  74. // Load settings from the server if we have a node but no settings.
  75. if ( config.nodeId && ! config.settings ) {
  76. this.loadNodeSettings( config, callback );
  77. return;
  78. }
  79. // Merge the config into the defaults and make sure we have a callback.
  80. config = $.extend( defaults, config );
  81. callback = undefined === callback ? function(){} : callback;
  82. // Add the form data to the config.
  83. if ( ! config.id ) {
  84. return;
  85. } else if ( 'general' === config.type && undefined !== forms[ config.id ] ) {
  86. config = $.extend( true, config, forms[ config.id ] );
  87. } else if ( 'module' === config.type && undefined !== modules[ config.id ] ) {
  88. config = $.extend( true, config, modules[ config.id ] );
  89. } else {
  90. return;
  91. }
  92. // Store the config so it can be accessed by forms.
  93. this.config = config;
  94. // Render the lightbox and form.
  95. if ( this.renderLightbox( config ) ) {
  96. // Finish rendering.
  97. if ( config.legacy || ! this.renderLegacySettings( config, callback ) ) {
  98. this.renderComplete( config, callback );
  99. } else {
  100. this.showLightboxLoader();
  101. }
  102. }
  103. },
  104. /**
  105. * Loads node settings for a form if they do not exist in
  106. * the settings config cache.
  107. *
  108. * @since 2.1
  109. * @method loadNodeSettings
  110. * @param {Object} config
  111. * @param {Function} callback
  112. * @return {Boolean}
  113. */
  114. loadNodeSettings: function( config, callback ) {
  115. FLBuilder.showAjaxLoader();
  116. FLBuilder.ajax( {
  117. action : 'get_node_settings',
  118. node_id : config.nodeId,
  119. }, function( response ) {
  120. config.settings = JSON.parse( response );
  121. FLBuilderSettingsConfig.nodes[ config.nodeId ] = config.settings;
  122. FLBuilderSettingsForms.render( config, callback );
  123. FLBuilder.hideAjaxLoader();
  124. } );
  125. },
  126. /**
  127. * Renders the lightbox for a settings form.
  128. *
  129. * @since 2.0
  130. * @method renderLightbox
  131. * @param {Object} config
  132. * @return {Boolean}
  133. */
  134. renderLightbox: function( config ) {
  135. var template = wp.template( 'fl-builder-settings' ),
  136. form = FLBuilder._lightbox._node.find( 'form.fl-builder-settings' ),
  137. nested = $( '.fl-lightbox-wrap[data-parent]' );
  138. // Don't render a node form if it's already open.
  139. if ( config.nodeId && config.nodeId === form.data( 'node' ) && ! config.lightbox ) {
  140. FLBuilder._focusFirstSettingsControl();
  141. return false;
  142. }
  143. // Render the lightbox and form.
  144. if ( ! config.lightbox ) {
  145. // Save existing settings first if any exist. Don't proceed if it fails.
  146. if ( ! FLBuilder._triggerSettingsSave( true, true ) ) {
  147. return false;
  148. }
  149. // Cancel any preview refreshes.
  150. if ( FLBuilder.preview ) {
  151. FLBuilder.preview.cancel();
  152. }
  153. FLBuilder._closePanel();
  154. FLBuilder._showLightbox();
  155. FLBuilder._setLightboxContent( template( config ) );
  156. } else {
  157. config.lightbox.setContent( template( config ) );
  158. }
  159. return true;
  160. },
  161. /**
  162. * Initializes a form when rendering is complete.
  163. *
  164. * @since 2.0
  165. * @method renderComplete
  166. * @param {Object} config
  167. * @param {Function} callback
  168. */
  169. renderComplete: function( config, callback ) {
  170. var form = $( '.fl-builder-settings:visible' );
  171. // This is done on a timeout to keep it from delaying painting
  172. // of the settings form in the DOM by a fraction of a second.
  173. setTimeout( function() {
  174. if ( config.legacy ) {
  175. this.renderLegacySettingsComplete( config.legacy );
  176. }
  177. callback();
  178. FLBuilder._initSettingsForms();
  179. if ( config.rules ) {
  180. FLBuilder._initSettingsValidation( config.rules );
  181. }
  182. if ( config.preview ) {
  183. FLBuilder.preview = new FLBuilderPreview( config.preview );
  184. }
  185. if ( config.helper ) {
  186. config.helper.init();
  187. }
  188. // Cache the original settings.
  189. if ( ! form.closest( '.fl-lightbox-wrap[data-parent]' ).length ) {
  190. this.settings = FLBuilder._getSettingsForChangedCheck( this.config.nodeId, form );
  191. }
  192. }.bind( this ), 1 );
  193. },
  194. /**
  195. * Renders the fields for a section in a settings form.
  196. *
  197. * @since 2.0
  198. * @method renderFields
  199. * @param {Object} fields
  200. * @param {Object} settings
  201. * @return {String}
  202. */
  203. renderFields: function( fields, settings ) {
  204. var template = wp.template( 'fl-builder-settings-row' ),
  205. html = '',
  206. field = null,
  207. name = null,
  208. value = null,
  209. isMultiple = false,
  210. responsive = null,
  211. responsiveFields = [ 'dimension', 'unit' ],
  212. settings = ! settings ? this.config.settings : settings,
  213. globalSettings = FLBuilderConfig.global;
  214. for ( name in fields ) {
  215. field = fields[ name ];
  216. isMultiple = field.multiple ? true : false;
  217. supportsResponsive = $.inArray( field['type'], responsiveFields ) > -1,
  218. value = ! _.isUndefined( settings[ name ] ) ? settings[ name ] : '';
  219. // Use a default value if not set in the settings.
  220. if ( _.isUndefined( settings[ name ] ) && field['default'] ) {
  221. value = field['default'];
  222. }
  223. // Check to see if responsive is enabled for this field.
  224. if ( field['responsive'] && globalSettings.responsive_enabled && ! isMultiple && supportsResponsive ) {
  225. responsive = field['responsive'];
  226. } else {
  227. responsive = null;
  228. }
  229. html += template( {
  230. field : field,
  231. name : name,
  232. rootName : name,
  233. value : value,
  234. preview : JSON.stringify( field['preview'] ? field['preview'] : { type: 'refresh' } ),
  235. responsive : responsive,
  236. rowClass : field['row_class'] ? ' ' + field['row_class'] : '',
  237. isMultiple : isMultiple,
  238. supportsMultiple : 'editor' !== field.type && 'photo' !== field.type && 'service' !== field.type,
  239. settings : settings,
  240. globalSettings : globalSettings,
  241. template : $( '#tmpl-fl-builder-field-' + field.type )
  242. } );
  243. }
  244. return html;
  245. },
  246. /**
  247. * Renders a single field for a settings form.
  248. *
  249. * @since 2.0
  250. * @method renderField
  251. * @param {Object} config
  252. * @return {String}
  253. */
  254. renderField: function( config ) {
  255. var template = wp.template( 'fl-builder-field' );
  256. return template( config );
  257. },
  258. /**
  259. * Renders a custom template for a section.
  260. *
  261. * @since 2.0
  262. * @method renderSectionTemplate
  263. * @param {Object} section
  264. * @param {Object} settings
  265. * @return {String}
  266. */
  267. renderSectionTemplate: function( section, settings ) {
  268. var template = wp.template( section.template.id );
  269. return template( {
  270. section : section,
  271. settings : settings
  272. } );
  273. },
  274. /**
  275. * Renders a custom template for a tab.
  276. *
  277. * @since 2.0
  278. * @method renderTabTemplate
  279. * @param {Object} tab
  280. * @param {Object} settings
  281. * @return {String}
  282. */
  283. renderTabTemplate: function( tab, settings ) {
  284. var template = wp.template( tab.template.id );
  285. return template( {
  286. tab : tab,
  287. settings : settings
  288. } );
  289. },
  290. /**
  291. * Renders any legacy custom fields that need to be
  292. * rendered on the server with PHP.
  293. *
  294. * @since 2.0
  295. * @method renderLegacyField
  296. * @param {Object} config
  297. * @param {Function} callback
  298. * @return {Boolean}
  299. */
  300. renderLegacySettings: function( config, callback ) {
  301. var form = $( '.fl-builder-settings:visible' ),
  302. name = null,
  303. ele = null,
  304. render = false,
  305. data = {
  306. 'tabs' : [],
  307. 'sections' : [],
  308. 'fields' : [],
  309. 'settings' : null,
  310. 'node_id' : null
  311. };
  312. // Fields
  313. form.find( '.fl-legacy-field' ).each( function() {
  314. ele = $( this );
  315. data.fields.push( ele.attr( 'data-field' ) );
  316. FLBuilderSettingsForms.showFieldLoader( ele );
  317. render = true;
  318. } );
  319. // Sections
  320. form.find( '.fl-legacy-settings-section' ).each( function() {
  321. ele = $( this );
  322. data.sections.push( { tab: ele.attr( 'data-tab' ), section: ele.attr( 'data-section' ) } );
  323. render = true;
  324. } );
  325. // Tabs
  326. form.find( '.fl-legacy-settings-tab' ).each( function() {
  327. ele = $( this );
  328. data.tabs.push( ele.attr( 'data-tab' ) );
  329. render = true;
  330. } );
  331. // Send a node ID if we have it, otherwise, send the settings.
  332. if ( form.attr( 'data-node' ) ) {
  333. data.node_id = form.attr( 'data-node' );
  334. } else {
  335. data.settings = FLBuilder._getOriginalSettings( form, true );
  336. }
  337. // Cancel an existing legacy AJAX request if we have one.
  338. if ( this.legacyXhr ) {
  339. this.legacyXhr.abort();
  340. this.legacyXhr = null;
  341. }
  342. // We still fire the AJAX request even if we don't need to render new
  343. // tabs, sections or fields just in case any field extras need to render.
  344. this.legacyXhr = FLBuilder.ajax( $.extend( this.getLegacyVars(), {
  345. action : 'render_legacy_settings',
  346. data : data,
  347. form : form.attr( 'data-form-id' ),
  348. group : form.attr( 'data-form-group' ),
  349. lightbox : form.closest( '.fl-builder-lightbox' ).attr( 'data-instance-id' )
  350. } ), function( response ) {
  351. FLBuilderSettingsForms.renderLegacySettingsComplete( response );
  352. if ( render ) {
  353. FLBuilderSettingsForms.renderComplete( config, callback );
  354. }
  355. FLBuilderSettingsForms.hideLightboxLoader();
  356. } );
  357. return render;
  358. },
  359. /**
  360. * Callback for when legacy settings are done rendering.
  361. *
  362. * @since 2.0
  363. * @method renderLegacySettingsComplete
  364. * @param {String} response
  365. */
  366. renderLegacySettingsComplete: function( response ) {
  367. var data = 'object' === typeof response ? response : JSON.parse( response ),
  368. lightbox = null,
  369. form = null,
  370. name = '',
  371. field = null,
  372. section = null,
  373. tab = null,
  374. settings = null;
  375. // Get the form object.
  376. if ( data.lightbox ) {
  377. lightbox = $( '.fl-builder-lightbox[data-instance-id=' + data.lightbox + ']' );
  378. form = lightbox.length ? lightbox.find( '.fl-builder-settings' ) : null;
  379. } else {
  380. form = $( '.fl-builder-settings:visible' );
  381. lightbox = form.closest( '.fl-builder-lightbox' );
  382. }
  383. // Bail if the form no longer exists.
  384. if ( ! form || ! form.length ) {
  385. return;
  386. }
  387. // Fields
  388. for ( name in data.fields ) {
  389. field = $( '#fl-field-' + name ).attr( 'id', '' );
  390. field.after( data.fields[ name ] ).remove();
  391. }
  392. // Field extras
  393. for ( name in data.extras ) {
  394. field = $( '#fl-field-' + name ).find( '.fl-field-control-wrapper' );
  395. if ( data.extras[ name ].multiple ) {
  396. field.each( function( i, field_item ) {
  397. if ( ( i in data.extras[ name ].before ) && ( data.extras[ name ].before[ i ] != "" ) ) {
  398. $( this ).prepend(
  399. '<div class="fl-form-field-before">' +
  400. data.extras[ name ].before[ i ] +
  401. '</div>'
  402. );
  403. }
  404. if ( ( i in data.extras[ name ].after ) && ( data.extras[ name ].after[ i ] != "" ) ) {
  405. $( this ).append(
  406. '<div class="fl-form-field-after">' +
  407. data.extras[name].after[ i ] +
  408. '</div>'
  409. );
  410. }
  411. });
  412. } else {
  413. if ( data.extras[ name ].before != "" ) {
  414. field.prepend(
  415. '<div class="fl-form-field-before">' +
  416. data.extras[name].before +
  417. '</div>'
  418. );
  419. }
  420. if ( data.extras[ name ].after != "" ) {
  421. field.append(
  422. '<div class="fl-form-field-after">' +
  423. data.extras[name].after +
  424. '</div>'
  425. );
  426. }
  427. }
  428. }
  429. // Sections
  430. for ( tab in data.sections ) {
  431. for ( name in data.sections[ tab ] ) {
  432. section = $( '#fl-builder-settings-section-' + name );
  433. section.html( data.sections[ tab ][ name ] );
  434. }
  435. }
  436. // Tabs
  437. for ( name in data.tabs ) {
  438. tab = $( '#fl-builder-settings-tab-' + name );
  439. tab.html( data.tabs[ name ] );
  440. }
  441. // Refresh cached settings only if it's the main form.
  442. if ( ! lightbox.data( 'parent' ) ) {
  443. this.settings = FLBuilder._getSettingsForChangedCheck( this.config.nodeId, form );
  444. if ( FLBuilder.preview ) {
  445. FLBuilder.preview._savedSettings = this.settings;
  446. }
  447. }
  448. // Support for Themer before it supported JS fields. This can be removed in a future version.
  449. if ( ! _.isUndefined( window.FLThemeBuilderFieldConnections ) ) {
  450. FLThemeBuilderFieldConnections._initSettingsForms();
  451. }
  452. // Clear the legacy AJAX object.
  453. this.legacyXhr = null;
  454. },
  455. /**
  456. * Returns legacy variables that were sent in AJAX requests
  457. * when a nested settings form was rendered.
  458. *
  459. * @since 2.0
  460. * @method getLegacyVars
  461. * @return {Object}
  462. */
  463. getLegacyVars: function() {
  464. var form = $( '.fl-builder-settings:visible' ),
  465. lightbox = form.closest( '.fl-builder-lightbox' ),
  466. parent = lightbox.attr( 'data-parent' ),
  467. settings = null,
  468. nodeId = null,
  469. vars = {};
  470. if ( parent ) {
  471. parent = $( '.fl-builder-lightbox[data-instance-id=' + parent + ']' );
  472. form = parent.find( 'form.fl-builder-settings' );
  473. settings = FLBuilder._getSettings( form );
  474. nodeId = form.attr( 'data-node' );
  475. if ( nodeId ) {
  476. vars.node_id = nodeId;
  477. vars.node_settings = settings;
  478. }
  479. }
  480. return vars;
  481. },
  482. /**
  483. * Checks to see if the main form settings has changed.
  484. *
  485. * @since 2.0
  486. * @method settingsHaveChanged
  487. * @return {Boolean}
  488. */
  489. settingsHaveChanged: function()
  490. {
  491. var form = FLBuilder._lightbox._node.find( 'form.fl-builder-settings' ),
  492. settings = FLBuilder._getSettings( form ),
  493. result = ! this.settings ? false : JSON.stringify( this.settings ) != JSON.stringify( settings );
  494. return result;
  495. },
  496. /**
  497. * Closes the settings lightbox when an associated node is deleted.
  498. *
  499. * @since 2.0
  500. * @method closeOnDeleteNode
  501. * @param {Object} e
  502. * @param {String} nodeId
  503. */
  504. closeOnDeleteNode: function( e, nodeId )
  505. {
  506. var settings = $( '.fl-builder-settings[data-node]' ),
  507. selector = FLBuilder._contentClass + ' .fl-node-' + settings.data( 'node' );
  508. if ( settings.length && ! $( selector ).length ) {
  509. FLLightbox.closeAll();
  510. }
  511. },
  512. /**
  513. * Shows the loader for the current lightbox that is visible.
  514. *
  515. * @since 2.0
  516. * @method showLightboxLoader
  517. */
  518. showLightboxLoader: function() {
  519. $( '.fl-builder-settings:visible' ).append( '<div class="fl-builder-loading"></div>' );
  520. },
  521. /**
  522. * Hides the loader for the current lightbox that is visible.
  523. *
  524. * @since 2.0
  525. * @method hideLightboxLoader
  526. */
  527. hideLightboxLoader: function( ele ) {
  528. $( '.fl-builder-settings:visible .fl-builder-loading' ).remove();
  529. },
  530. /**
  531. * Shows the loader for a field that is loading.
  532. *
  533. * @since 2.0
  534. * @method showFieldLoader
  535. * @param {Object} ele
  536. */
  537. showFieldLoader: function( ele ) {
  538. var wrapper = ele.closest( '.fl-field-control' ).find( '.fl-field-control-wrapper' );
  539. wrapper.hide().after( '<div class="fl-field-loader">' + FLBuilderStrings.fieldLoading + '</div>' );
  540. },
  541. /**
  542. * Hides the loader for a field that is loading.
  543. *
  544. * @since 2.0
  545. * @method hideFieldLoader
  546. * @param {Object} ele
  547. */
  548. hideFieldLoader: function( ele ) {
  549. var field = ele.closest( '.fl-field' ),
  550. wrapper = ele.closest( '.fl-field-control' ).find( '.fl-field-control-wrapper' );
  551. wrapper.show();
  552. field.find( '.fl-field-loader' ).remove();
  553. }
  554. };
  555. /**
  556. * Helper for working with settings forms config.
  557. *
  558. * @since 2.0
  559. * @class FLBuilderSettingsConfig
  560. */
  561. FLBuilderSettingsConfig = 'undefined' === typeof FLBuilderSettingsConfig ? {} : FLBuilderSettingsConfig;
  562. $.extend( FLBuilderSettingsConfig, {
  563. /**
  564. * @since 2.0
  565. * @method init
  566. */
  567. init: function() {
  568. // Save settings
  569. FLBuilder.addHook( 'didSaveNodeSettings', this.updateOnNodeEvent.bind( this ) );
  570. FLBuilder.addHook( 'didSaveNodeSettingsComplete', this.updateOnNodeEvent.bind( this ) );
  571. FLBuilder.addHook( 'didSaveGlobalSettingsComplete', this.updateOnSaveGlobalSettings.bind( this ) );
  572. FLBuilder.addHook( 'didSaveLayoutSettingsComplete', this.updateOnSaveLayoutSettings.bind( this ) );
  573. // Add nodes
  574. FLBuilder.addHook( 'didAddRow', this.updateOnNodeEvent.bind( this ) );
  575. FLBuilder.addHook( 'didAddColumnGroup', this.updateOnNodeEvent.bind( this ) );
  576. FLBuilder.addHook( 'didAddColumn', this.updateOnNodeEvent.bind( this ) );
  577. FLBuilder.addHook( 'didAddModule', this.updateOnNodeEvent.bind( this ) );
  578. // Delete nodes
  579. FLBuilder.addHook( 'didDeleteRow', this.updateOnNodeEvent.bind( this ) );
  580. FLBuilder.addHook( 'didDeleteColumn', this.updateOnNodeEvent.bind( this ) );
  581. FLBuilder.addHook( 'didDeleteModule', this.updateOnNodeEvent.bind( this ) );
  582. // Duplicate nodes
  583. FLBuilder.addHook( 'didDuplicateRow', this.updateOnNodeEvent.bind( this ) );
  584. FLBuilder.addHook( 'didDuplicateColumn', this.updateOnNodeEvent.bind( this ) );
  585. FLBuilder.addHook( 'didDuplicateModule', this.updateOnNodeEvent.bind( this ) );
  586. // Resize nodes
  587. FLBuilder.addHook( 'didResizeRow', this.updateOnRowResize.bind( this ) );
  588. FLBuilder.addHook( 'didResizeColumn', this.updateOnColumnResize.bind( this ) );
  589. // Reset node widths
  590. FLBuilder.addHook( 'didResetRowWidth', this.updateOnResetRowWidth.bind( this ) );
  591. FLBuilder.addHook( 'didResetColumnWidths', this.updateOnResetColumnWidths.bind( this ) );
  592. // Apply templates
  593. FLBuilder.addHook( 'didApplyTemplateComplete', this.updateOnApplyTemplate.bind( this ) );
  594. FLBuilder.addHook( 'didApplyRowTemplateComplete', this.updateOnApplyTemplate.bind( this ) );
  595. FLBuilder.addHook( 'didApplyColTemplateComplete', this.updateOnApplyTemplate.bind( this ) );
  596. FLBuilder.addHook( 'didSaveGlobalNodeTemplate', this.updateOnApplyTemplate.bind( this ) );
  597. FLBuilder.addHook( 'didRestoreRevisionComplete', this.updateOnApplyTemplate.bind( this ) );
  598. },
  599. /**
  600. * Updates the global settings when they are saved.
  601. *
  602. * @since 2.0
  603. * @method updateOnSaveGlobalSettings
  604. * @param {Object} e
  605. * @param {Object} settings
  606. */
  607. updateOnSaveGlobalSettings: function( e, settings ) {
  608. this.settings.global = settings;
  609. },
  610. /**
  611. * Updates the layout settings when they are saved.
  612. *
  613. * @since 2.0
  614. * @method updateOnSaveLayoutSettings
  615. * @param {Object} e
  616. * @param {Object} settings
  617. */
  618. updateOnSaveLayoutSettings: function( e, settings ) {
  619. this.settings.layout = settings;
  620. },
  621. /**
  622. * Updates the node config when an event is triggered.
  623. *
  624. * @since 2.0
  625. * @method updateOnNodeEvent
  626. */
  627. updateOnNodeEvent: function() {
  628. var event = arguments[0];
  629. if ( event.namespace.indexOf( 'didAdd' ) > -1 ) {
  630. this.addNode( arguments[1] );
  631. } else if ( event.namespace.indexOf( 'didSaveNodeSettings' ) > -1 ) {
  632. this.updateNode( arguments[1].nodeId, arguments[1].settings );
  633. } else if ( event.namespace.indexOf( 'didDelete' ) > -1 ) {
  634. this.deleteNodes();
  635. } else if ( event.namespace.indexOf( 'didDuplicate' ) > -1 ) {
  636. this.duplicateNode( arguments[1].oldNodeId, arguments[1].newNodeId );
  637. }
  638. },
  639. /**
  640. * Updates the node config when a row is resized.
  641. *
  642. * @since 2.0
  643. * @method updateOnRowResize
  644. * @param {Object} e
  645. * @param {Object} data
  646. */
  647. updateOnRowResize: function( e, data ) {
  648. this.nodes[ data.rowId ].max_content_width = data.rowWidth;
  649. },
  650. /**
  651. * Updates the node config when a row width is reset.
  652. *
  653. * @since 2.0
  654. * @method updateOnResetRowWidth
  655. * @param {Object} e
  656. * @param {String} nodeId
  657. */
  658. updateOnResetRowWidth: function( e, nodeId ) {
  659. this.nodes[ nodeId ].max_content_width = '';
  660. },
  661. /**
  662. * Updates the node config when a column is resized.
  663. *
  664. * @since 2.0
  665. * @method updateOnColumnResize
  666. * @param {Object} e
  667. * @param {Object} data
  668. */
  669. updateOnColumnResize: function( e, data ) {
  670. this.nodes[ data.colId ].size = data.colWidth;
  671. this.nodes[ data.siblingId ].size = data.siblingWidth;
  672. },
  673. /**
  674. * Updates the node config when column widths are reset.
  675. *
  676. * @since 2.0
  677. * @method updateOnResetColumnWidths
  678. * @param {Object} e
  679. * @param {Object} data
  680. */
  681. updateOnResetColumnWidths: function( e, data ) {
  682. var self = this;
  683. data.cols.each( function() {
  684. var col = $( this ),
  685. colId = col.attr( 'data-node' );
  686. if ( self.nodes[ colId ] ) {
  687. self.nodes[ colId ].size = parseFloat( col[0].style.width );
  688. }
  689. } );
  690. },
  691. /**
  692. * Updates the node config when a template is applied.
  693. *
  694. * @since 2.0
  695. * @method updateOnApplyTemplate
  696. * @param {Object} e
  697. * @param {Object} config
  698. */
  699. updateOnApplyTemplate: function( e, config ) {
  700. this.nodes = config.nodes;
  701. this.attachments = config.attachments;
  702. },
  703. /**
  704. * Adds the settings config for a new node.
  705. *
  706. * @since 2.0
  707. * @method addNode
  708. * @param {String} nodeId
  709. * @param {Object} settings
  710. */
  711. addNode: function( nodeId, settings ) {
  712. var node = $( '.fl-node-' + nodeId ),
  713. isRow = node.hasClass( 'fl-row' ),
  714. isCol = node.hasClass( 'fl-col' ),
  715. isColGroup = node.hasClass( 'fl-col-group' ),
  716. isModule = node.hasClass( 'fl-module' ),
  717. self = this;
  718. if ( this.nodes[ nodeId ] ) {
  719. return;
  720. }
  721. if ( ! settings ) {
  722. if ( isRow ) {
  723. settings = $.extend( {}, this.defaults.row );
  724. } else if ( isCol ) {
  725. settings = $.extend( {}, this.defaults.column );
  726. } else if ( isModule ) {
  727. settings = $.extend( {}, this.defaults.modules[ node.attr( 'data-type' ) ] );
  728. }
  729. if ( isRow || isColGroup ) {
  730. node.find( '.fl-col' ).each( function() {
  731. var col = $( this ), defaults = $.extend( {}, self.defaults.column );
  732. defaults.size = parseFloat( col[0].style.width );
  733. self.addNode( col.attr( 'data-node' ), defaults );
  734. } );
  735. } else if ( isModule ) {
  736. self.addNode( node.closest( '.fl-row' ).attr( 'data-node' ) );
  737. self.addNode( node.closest( '.fl-col' ).attr( 'data-node' ) );
  738. self.updateOnResetColumnWidths( null, {
  739. cols: node.closest( '.fl-col-group' ).find( '> .fl-col' )
  740. } );
  741. }
  742. }
  743. if ( settings ) {
  744. this.nodes[ nodeId ] = settings;
  745. }
  746. },
  747. /**
  748. * Update the settings config for a node.
  749. *
  750. * @since 2.0
  751. * @method updateNode
  752. * @param {String} nodeId
  753. * @param {Object} settings
  754. */
  755. updateNode: function( nodeId, settings ) {
  756. var node = $( '.fl-node-' + nodeId ),
  757. self = this;
  758. if ( node.hasClass( 'fl-col' ) ) {
  759. node.closest( '.fl-col-group' ).find( '> .fl-col' ).each( function() {
  760. var col = $( this ), colId = col.attr( 'data-node' );
  761. self.nodes[ colId ].size = parseFloat( col[0].style.width );
  762. self.nodes[ colId ].equal_height = settings.equal_height;
  763. self.nodes[ colId ].content_alignment = settings.content_alignment;
  764. self.nodes[ colId ].responsive_order = settings.responsive_order;
  765. } );
  766. }
  767. this.nodes[ nodeId ] = settings;
  768. },
  769. /**
  770. * Duplicates settings config for a node.
  771. *
  772. * @since 2.0
  773. * @method duplicateNode
  774. * @param {String} oldNode
  775. * @param {String} newNode
  776. */
  777. duplicateNode: function( oldNodeId, newNodeId ) {
  778. var newNode = $( '.fl-node-' + newNodeId ),
  779. newNodes = newNode.find( '[data-node]' ),
  780. oldNode = $( '.fl-node-' + oldNodeId ),
  781. oldNodes = oldNode.find( '[data-node]' ),
  782. self = this;
  783. this.nodes[ newNodeId ] = this.nodes[ oldNodeId ];
  784. newNodes.each( function( i ) {
  785. oldNodeId = oldNodes.eq( i ).attr( 'data-node' );
  786. newNodeId = $( this ).attr( 'data-node' );
  787. if ( self.nodes[ oldNodeId ] ) {
  788. self.nodes[ newNodeId ] = self.nodes[ oldNodeId ];
  789. }
  790. } );
  791. },
  792. /**
  793. * Deletes any nodes that are no longer in the DOM.
  794. *
  795. * @since 2.0
  796. * @method deleteNodes
  797. */
  798. deleteNodes: function() {
  799. var nodeId = '',
  800. content = $( FLBuilder._contentClass ).html();
  801. for ( nodeId in this.nodes ) {
  802. if ( content.indexOf( nodeId ) === -1 ) {
  803. this.nodes[ nodeId ] = null;
  804. delete this.nodes[ nodeId ];
  805. }
  806. }
  807. }
  808. } );
  809. $( function() {
  810. FLBuilderSettingsConfig.init();
  811. FLBuilderSettingsForms.init();
  812. } );
  813. } )( jQuery );