fl-theme-builder-post-module-settings.js 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. (function($){
  2. /**
  3. * Handles custom logic for the settings forms of the
  4. * post modules.
  5. *
  6. * @class FLThemeBuilderPostModuleSettings
  7. * @since 1.0
  8. */
  9. FLThemeBuilderPostModuleSettings = {
  10. /**
  11. * Cached settings used to replace the current settings
  12. * if the post layout changes are canceled.
  13. *
  14. * @since 1.0
  15. * @access private
  16. * @property {String} _previousSettings
  17. */
  18. _previousSettings: null,
  19. /**
  20. * Initialize.
  21. *
  22. * @since 1.0
  23. * @access private
  24. * @method _init
  25. */
  26. _init: function()
  27. {
  28. FLBuilder.addHook( 'settings-form-init', $.proxy( this._loaded, this ) );
  29. },
  30. /**
  31. * Fires when the settings form has loaded.
  32. *
  33. * @since 1.0
  34. * @access private
  35. * @method _loaded
  36. */
  37. _loaded: function()
  38. {
  39. if ( $( '.fl-builder-post-grid-settings:visible' ).length > 0 ) {
  40. this._bindMainSettings();
  41. } else if ( $( '[data-type="custom_post_layout"]:visible' ).length > 0 ) {
  42. this._bindCustomPostLayoutSettings();
  43. }
  44. },
  45. /**
  46. * Bind events to the main settings lightbox.
  47. *
  48. * @since 1.0
  49. * @access _bindMainSettings
  50. * @method _bind
  51. */
  52. _bindMainSettings: function()
  53. {
  54. this._layoutChanged();
  55. this._postLayoutChanged();
  56. $( 'select[name=layout]' ).on( 'change', this._layoutChanged );
  57. $( 'select[name=post_layout]' ).on( 'change', this._postLayoutChanged );
  58. },
  59. /**
  60. * Bind events to the custom post layout lightbox.
  61. *
  62. * @since 1.0
  63. * @access _bindCustomPostLayoutSettings
  64. * @method _bind
  65. */
  66. _bindCustomPostLayoutSettings: function()
  67. {
  68. var form = $( '[data-type="custom_post_layout"]:visible' ),
  69. html = form.find( 'textarea[name="html"]' ),
  70. css = form.find( 'textarea[name="css"]' ),
  71. cancel = form.find( '.fl-builder-settings-cancel' );
  72. html.on( 'change', $.proxy( this._doCustomPostLayoutPreview, this ) );
  73. css.on( 'change', $.proxy( this._doCustomPostLayoutPreview, this ) );
  74. cancel.on( 'click', $.proxy( this._cancelClicked, this ) );
  75. },
  76. /**
  77. * Fires when the layout select changes.
  78. *
  79. * @since 1.0
  80. * @access private
  81. * @method _layoutChanged
  82. */
  83. _layoutChanged: function()
  84. {
  85. var val = $( 'select[name=layout]' ).val(),
  86. settings = $( 'form.fl-builder-settings' );
  87. settings.removeClass( 'fl-post-grid-layout-columns' );
  88. settings.removeClass( 'fl-post-grid-layout-grid' );
  89. settings.removeClass( 'fl-post-grid-layout-gallery' );
  90. settings.removeClass( 'fl-post-grid-layout-feed' );
  91. settings.addClass( 'fl-post-grid-layout-' + val );
  92. },
  93. /**
  94. * Fires when the post layout select changes.
  95. *
  96. * @since 1.0
  97. * @access private
  98. * @method _postLayoutChanged
  99. */
  100. _postLayoutChanged: function()
  101. {
  102. var val = $( 'select[name=post_layout]' ).val(),
  103. settings = $( 'form.fl-builder-settings' );
  104. if ( 'default' == val ) {
  105. settings.removeClass( 'fl-post-grid-layout-custom' );
  106. } else {
  107. settings.addClass( 'fl-post-grid-layout-custom' );
  108. }
  109. },
  110. /**
  111. * Callback for previewing custom post layouts.
  112. *
  113. * @since 1.0
  114. * @access private
  115. * @method _doCustomPostLayoutPreview
  116. */
  117. _doCustomPostLayoutPreview: function()
  118. {
  119. var moduleForm = $( '.fl-builder-module-settings' ),
  120. moduleSettings = FLBuilder._getSettings( moduleForm ),
  121. postForm = $( '.fl-builder-settings[data-type="custom_post_layout"]' ),
  122. postSettings = FLBuilder._getSettings( postForm ),
  123. postField = moduleForm.find( '[name="custom_post_layout"]' ),
  124. preview = FLBuilder.preview;
  125. if ( ! this._previousSettings ) {
  126. this._previousSettings = moduleSettings.custom_post_layout
  127. }
  128. postField.val( JSON.stringify( postSettings ) );
  129. preview.delay( 2000, $.proxy( preview.preview, preview ) );
  130. },
  131. /**
  132. * Callback for when the custom post layout settings
  133. * lightbox cancel button is clicked.
  134. *
  135. * @since 1.0
  136. * @access private
  137. * @method _cancelClicked
  138. */
  139. _cancelClicked: function()
  140. {
  141. var postField = $( '.fl-builder-module-settings' ).find( '[name="custom_post_layout"]' );
  142. if ( this._previousSettings ) {
  143. postField.val( this._previousSettings ).trigger( 'change' );
  144. this._previousSettings = null;
  145. }
  146. }
  147. };
  148. $( function(){ FLThemeBuilderPostModuleSettings._init() } );
  149. })(jQuery);