fl-builder-save-manager.js 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  1. (function($, FLBuilder) {
  2. /**
  3. * Save Manager Object
  4. */
  5. var SaveManager = {
  6. /**
  7. * Indicates whether or not the current layout is clean or has changes that require
  8. * publish actions.
  9. *
  10. * @var bool
  11. */
  12. layoutNeedsPublish: false,
  13. /**
  14. * The message that is displayed whenever `resetStatusMessage()` is called.
  15. *
  16. * @var string
  17. */
  18. defaultIndicatorMessage: "",
  19. /**
  20. * The tooltip that is displayed whenever 'resetStatusMessage()' is called.
  21. *
  22. * @var string
  23. */
  24. defaultTooltipMessage: "",
  25. /**
  26. * Local reference to strings pertaining to saving states.
  27. *
  28. * @var object
  29. */
  30. messages: null,
  31. /**
  32. * Setup the Save Manager object.
  33. *
  34. * @return void
  35. */
  36. init: function() {
  37. this.messages = FLBuilderStrings.savedStatus;
  38. this.$savingIndicator = $('.fl-builder--saving-indicator');
  39. FLBuilder.addHook('didBeginAJAX', this.onLayoutSaving.bind(this));
  40. FLBuilder.addHook('didCompleteAJAX', this.onLayoutSaved.bind(this));
  41. FLBuilder.addHook('didPublishLayout', this.onLayoutPublished.bind(this));
  42. FLBuilder.addHook('publishAndRemain', this.onPublishAndRemain.bind(this));
  43. // We have to set the layout as needing publish when settings are opened because
  44. // we can't yet reliably set it to needing publish when settings are changed.
  45. FLBuilder.addHook('didShowLightbox', this.setLayoutNeedsPublish.bind(this));
  46. if (FLBuilderConfig.layoutHasDraftedChanges || ! FLBuilderConfig.builderEnabledd) {
  47. this.setLayoutNeedsPublish();
  48. this.resetStatusMessage();
  49. }
  50. },
  51. /**
  52. * Flag the layout as needing to be published.
  53. *
  54. * @return void
  55. */
  56. setLayoutNeedsPublish: function() {
  57. if ( !this.layoutNeedsPublish ) {
  58. this.layoutNeedsPublish = true;
  59. $('body').addClass('fl-builder--layout-has-drafted-changes');
  60. }
  61. },
  62. /**
  63. * Fires when layout begins saving.
  64. *
  65. * @return void
  66. */
  67. onLayoutSaving: function(e, data) {;
  68. if ( this.isPublishingLayout( data.action ) ) {
  69. this.showStatusMessage( this.messages.publishing, this.messages.publishingTooltip );
  70. }
  71. else if ( this.isUpdatingLayout( data.action ) ) {
  72. this.setLayoutNeedsPublish();
  73. this.showStatusMessage( this.messages.saving, this.messages.savingTooltip );
  74. }
  75. },
  76. /**
  77. * Check if the current ajax action is publishing the layout
  78. *
  79. * @var String action
  80. * @return bool
  81. */
  82. isPublishingLayout: function( action ) {
  83. if ( 'save_layout' == action ) {
  84. return true;
  85. }
  86. return false;
  87. },
  88. /**
  89. * Checks if the current ajax action is updating the layout or some other part of the system.
  90. *
  91. * @var String action
  92. * @return bool
  93. */
  94. isUpdatingLayout: function( action ) {
  95. if ( this.isPublishingLayout() ) return false;
  96. if ( action.startsWith('render') ) {
  97. if ( action.startsWith('render_new') ) return true;
  98. return false;
  99. }
  100. if ( action.startsWith('duplicate') ) return false;
  101. if ( action.startsWith('refresh') ) return false; // Like refresh_revision_items
  102. if ( 'save_ui_skin' == action ) return false;
  103. if ( 'save_lightbox_position' == action ) return false;
  104. if ( 'save_pinned_ui_position' == action ) return false;
  105. if ( 'fl_builder_notifications' == action ) return false;
  106. return true;
  107. },
  108. /**
  109. * Fires after layout has been successfully saved.
  110. * Display the "Saved" message, wait a bit and reset to the default message.
  111. *
  112. * @return void
  113. */
  114. onLayoutSaved: function( e, data ) {
  115. if ( this.isUpdatingLayout( data.fl_builder_data.action ) ) {
  116. this.showStatusMessage(this.messages.saved, this.messages.savedTooltip);
  117. var obj = this;
  118. setTimeout(function() {
  119. obj.resetStatusMessage();
  120. }, 2000);
  121. }
  122. },
  123. /**
  124. * Handle layout published
  125. *
  126. * @return void
  127. */
  128. onLayoutPublished: function() {
  129. this.layoutNeedsPublish = false;
  130. $('body').removeClass('fl-builder--layout-has-drafted-changes');
  131. this.resetStatusMessage();
  132. },
  133. /**
  134. * Set the status message area to a string of text.
  135. *
  136. * @var string Message to display
  137. * @return void
  138. */
  139. showStatusMessage: function(message, toolTip) {
  140. this.$savingIndicator.html(message);
  141. if (!_.isUndefined(toolTip)) {
  142. this.$savingIndicator.attr('title', toolTip);
  143. $('.fl-builder--saving-indicator').tipTip({
  144. defaultPosition: 'bottom',
  145. edgeOffset: 14
  146. });
  147. }
  148. },
  149. /**
  150. * Set the status message back to it's default state.
  151. *
  152. * @return void
  153. */
  154. resetStatusMessage: function() {
  155. if(this.layoutNeedsPublish) {
  156. this.defaultIndicatorMessage = this.messages.edited + '<i class="fas fa-question-circle"></i>';
  157. this.defaultTooltipMessage = this.messages.editedTooltip;
  158. } else {
  159. this.defaultIndicatorMessage = "";
  160. this.defaultTooltipMessage = "";
  161. }
  162. this.showStatusMessage(this.defaultIndicatorMessage, this.defaultTooltipMessage );
  163. },
  164. /**
  165. * Handle publish key command
  166. *
  167. * @return void
  168. */
  169. onPublishAndRemain: function() {
  170. if (this.layoutNeedsPublish) {
  171. FLBuilder._publishLayout(false);
  172. } else {
  173. this.showStatusMessage(this.messages.noChanges);
  174. var manager = this;
  175. setTimeout(function() {
  176. manager.resetStatusMessage();
  177. }, 2000);
  178. }
  179. }
  180. };
  181. /**
  182. * Pubic Interface
  183. */
  184. FLBuilder.SaveManager = {
  185. /**
  186. * Check if the current layout has unpublished changes
  187. *
  188. * @return bool
  189. */
  190. layoutNeedsPublish: function() {
  191. return SaveManager.layoutNeedsPublish;
  192. },
  193. /**
  194. * Show a status message
  195. *
  196. * @var String message
  197. * @var String toolTip
  198. * @return void
  199. */
  200. showStatusMessage: function(message, toolTip) {
  201. SaveManager.showStatusMessage(message, toolTip);
  202. },
  203. /**
  204. * Reset status message to contextual default
  205. *
  206. * @return void
  207. */
  208. resetStatusMessage: function() {
  209. SaveManager.resetStatusMessage();
  210. }
  211. }
  212. /**
  213. * Kick off init.
  214. */
  215. $(function() {
  216. SaveManager.init();
  217. });
  218. })(jQuery, FLBuilder);