Layout Editor Performance fix: part 1 (#2378)

relates to xibosignageltd/xibo-private#627 - Updated select2 - Add common method to clear container - Clear flatpickr, colorpicker, select2, masonry and CKEditor - ESLint new line tidying
xibosignage · Feb 21, 2024 · 2c6f020 · 2c6f020
1 parent 01232b6
commit 2c6f020
Show file tree

Hide file tree

Showing 14 changed files with 118 additions and 71 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -117,7 +117,7 @@
     "persian-date": "^0.3.1-b",
     "persian-datepicker": "^1.2.0",
     "popper.js": "^1.16.1",
-    "select2": "^4.0.13",
+    "select2": "4.1.0-rc.0",
     "select2-bootstrap-theme": "0.1.0-beta.10",
     "serialize-javascript": "^3.1.0",
     "toastr": "~2.1.4",

diff --git a/ui/src/editor-core/common.js b/ui/src/editor-core/common.js
@@ -166,4 +166,40 @@ module.exports = {
     }
     return false;
   },
+
+  /**
+     * Clear UI elements from container
+     * @param {object} $container
+      */
+  clearContainer: function($container) {
+    // Flatpickr
+    $container.find('.flatpickr-input').each((_idx, fp) => {
+      if (fp._flatpickr) {
+        fp._flatpickr.destroy();
+      }
+    });
+
+    // Select2
+    $container.find('select[data-select2-id]')
+      .select2('destroy');
+
+    // Colorpicker
+    $container.find('.colorpicker-element').colorpicker('destroy');
+
+    // JqueryUI
+    $container.find('.ui-droppable').droppable('destroy');
+    $container.find('.ui-draggable').draggable('destroy');
+    $container.find('.ui-sortable').sortable('destroy');
+
+    // Masonry
+    $container.find('.masonry-container').masonry('destroy');
+
+    // CKEditor
+    $container.find('.rich-text').each((_idx, fp) => {
+      const richTextId = $(fp).attr('id');
+      if (CKEDITOR.instances[richTextId]) {
+        CKEDITOR.instances[richTextId].destroy();
+      }
+    });
+  },
 };
diff --git a/ui/src/editor-core/history-manager.js b/ui/src/editor-core/history-manager.js
@@ -253,7 +253,6 @@ HistoryManager.prototype.uploadChange = function(
   });
 };
 
-
 /**
  * Revert change by ID or the last one in the history array
  * @return {Promise} - Promise that resolves when the change is reverted
@@ -455,7 +454,6 @@ HistoryManager.prototype.removeAllChanges = function(targetType, targetId) {
   });
 };
 
-
 /**
  * Remove last change
 */

diff --git a/ui/src/editor-core/properties-panel.js b/ui/src/editor-core/properties-panel.js
@@ -500,6 +500,9 @@ PropertiesPanel.prototype.render = function(
   // Reset inline editor to false on each refresh
   this.inlineEditor = false;
 
+  // Clear temp data
+  app.common.clearContainer(this.DOMObject);
+
   // Show loading template
   this.DOMObject.html(loadingTemplate());
 

diff --git a/ui/src/editor-core/toolbar.js b/ui/src/editor-core/toolbar.js
@@ -852,6 +852,9 @@ Toolbar.prototype.render = function({savePrefs = true} = {}) {
     ),
   });
 
+  // Clear temp data
+  app.common.clearContainer(this.DOMObject);
+
   // Append toolbar html to the main div
   this.DOMObject.html(html);
 
@@ -1368,6 +1371,7 @@ Toolbar.prototype.deselectCardsAndDropZones = function() {
  */
 Toolbar.prototype.mediaContentCreateWindow = function(menu) {
   const self = this;
+  const app = this.parent;
 
   // Deselect previous selections
   self.deselectCardsAndDropZones();
@@ -1384,6 +1388,9 @@ Toolbar.prototype.mediaContentCreateWindow = function(menu) {
     showSort: true,
   });
 
+  // Clear temp data
+  app.common.clearContainer(self.DOMObject.find('#media-container-' + menu));
+
   // Append template to the search main div
   self.DOMObject.find('#media-container-' + menu).html(html);
 
@@ -1520,7 +1527,7 @@ Toolbar.prototype.mediaContentPopulate = function(menu) {
         columnWidth: '.toolbar-card-sizer',
         percentPosition: true,
         gutter: 8,
-      });
+      }).addClass('masonry-container');
 
       if (
         (!res.data || res.data.length == 0) &&
@@ -1824,6 +1831,7 @@ Toolbar.prototype.elementsContentCreateWindow = function(
  */
 Toolbar.prototype.layoutTemplatesContentCreateWindow = function(menu) {
   const self = this;
+  const app = this.parent;
 
   // Deselect previous selections
   self.deselectCardsAndDropZones();
@@ -1837,6 +1845,11 @@ Toolbar.prototype.layoutTemplatesContentCreateWindow = function(menu) {
     headerMessage: toolbarTrans.layoutTemplatesMessage,
   });
 
+  // Clear temp data
+  app.common.clearContainer(
+    self.DOMObject.find('#layout_templates-container-' + menu),
+  );
+
   // Append template to the search main div
   self.DOMObject.find('#layout_templates-container-' + menu).html(html);
 
@@ -1890,7 +1903,7 @@ Toolbar.prototype.layoutTemplatesContentPopulate = function(menu) {
       columnWidth: '.toolbar-card-sizer',
       percentPosition: true,
       gutter: 8,
-    });
+    }).addClass('masonry-container');
 
     // Manage request length
     const requestLength = 15;
@@ -2138,20 +2151,29 @@ Toolbar.prototype.handleCardsBehaviour = function() {
   if (!readOnlyModeOn) {
     this.DOMObject.find('.toolbar-card:not(.toolbar-card-menu)')
       .each(function(idx, el) {
-        $(el).draggable({
-          appendTo: $(el).parents('.toolbar-pane:first'),
+        const $card = $(el);
+        $card.draggable({
+          appendTo: $card.parents('.toolbar-pane:first'),
           cursorAt: {
             top:
             (
-              $(el).height() + ($(el).outerWidth(true) - $(el).outerWidth()) / 2
+              $card.height() + ($card.outerWidth(true) - $card.outerWidth()) / 2
             ) / 2,
             left:
             (
-              $(el).width() + ($(el).outerWidth(true) - $(el).outerWidth()) / 2
+              $card.width() + ($card.outerWidth(true) - $card.outerWidth()) / 2
             ) / 2,
           },
           opacity: 0.7,
-          helper: 'clone',
+          helper: function(ev) {
+            const $clone = $(ev.currentTarget).clone();
+
+            // Remove events
+            $clone.tooltip('dispose');
+            $clone.find('[data-toggle="tooltip"]').tooltip('dispose');
+
+            return $clone;
+          },
           start: function() {
           // Deselect previous selections
             self.deselectCardsAndDropZones();
@@ -2160,28 +2182,22 @@ Toolbar.prototype.handleCardsBehaviour = function() {
             $('.custom-overlay').show();
 
             // Mark card as being dragged
-            $(this).addClass('card-dragged');
+            $card.addClass('card-dragged');
 
             // Mark content as selected
-            $(this).parents('.toolbar-pane-content').addClass('selected');
-            $(this).parents('nav.navbar').addClass('card-selected');
-
-            // Reload tooltips to avoid floating detached elements
-            app.common.reloadTooltips(self.DOMObject);
+            $card.parents('.toolbar-pane-content').addClass('selected');
+            $card.parents('nav.navbar').addClass('card-selected');
           },
           stop: function() {
           // Hide overlay
             $('.custom-overlay').hide();
 
             // Remove card class as being dragged
-            $(this).removeClass('card-dragged');
+            $card.removeClass('card-dragged');
 
             // Mark content as unselected
-            $(this).parents('.toolbar-pane-content').removeClass('selected');
-            $(this).parents('nav.navbar').removeClass('card-selected');
-
-            // Reload tooltips to avoid floating detached elements
-            app.common.reloadTooltips(self.DOMObject);
+            $card.parents('.toolbar-pane-content').removeClass('selected');
+            $card.parents('nav.navbar').removeClass('card-selected');
           },
         });
       });
@@ -2323,7 +2339,9 @@ Toolbar.prototype.createMediaPreview = function(media) {
   };
 
   // Clean all selected elements
+  app.common.clearContainer($mediaPreviewContent);
   $mediaPreviewContent.html('').removeData('mediaId');
+  app.common.clearContainer($mediaPreviewInfo);
   $mediaPreviewInfo.html('');
 
   const mediaData = media.data();
@@ -2348,6 +2366,7 @@ Toolbar.prototype.createMediaPreview = function(media) {
 
   $mediaPreview.find('#closeBtn').off('click').on('click', function() {
     // Close preview and empty content
+    app.common.clearContainer($mediaPreview.find('#content'));
     $mediaPreview.find('#content').html('');
     $mediaPreview.removeClass('show');
     $mediaPreview.remove();
@@ -2433,6 +2452,7 @@ Toolbar.prototype.openSubMenu = function(
   savePrefs = true,
 ) {
   const self = this;
+  const app = this.parent;
   const openedMenu = self.openedMenu;
   const $submenuContainer = self.DOMObject.find('#content-' + openedMenu);
   const cardData = data ? data : $card.data();
@@ -2449,6 +2469,7 @@ Toolbar.prototype.openSubMenu = function(
 
   // Append HTML
   $submenuContainer.addClass('toolbar-cards-pane');
+  app.common.clearContainer($submenuContainer);
   $submenuContainer.html(
     ToolbarContentSubmenuTemplate({
       data: cardData,
@@ -2505,6 +2526,7 @@ Toolbar.prototype.openGroupMenu = function(
   savePrefs = true,
 ) {
   const self = this;
+  const app = this.parent;
   const openedMenu = self.openedMenu;
   const $submenuContainer = self.DOMObject.find('#content-' + openedMenu);
   const cardData = data ? data : $card.data();
@@ -2527,6 +2549,7 @@ Toolbar.prototype.openGroupMenu = function(
 
   // Append HTML
   $submenuContainer.addClass('toolbar-group-pane');
+  app.common.clearContainer($submenuContainer);
   $submenuContainer.html(
     ToolbarContentGroupTemplate({
       data: cardData,
@@ -2659,6 +2682,11 @@ Toolbar.prototype.loadTemplates = function(
         $container.find('.loading-container-toolbar')
           .remove();
 
+        // Clear temp data
+        app.common.clearContainer(
+          $container.find('.toolbar-pane-container'),
+        );
+
         $container.find('.toolbar-pane-container').html(
           ToolbarContentSubmenuCardsTemplate({
             elements: elements,

diff --git a/ui/src/editor-core/topbar.js b/ui/src/editor-core/topbar.js
@@ -73,6 +73,9 @@ Topbar.prototype.render = function() {
   // Get topbar trans
   const newTopbarTrans = $.extend({}, toolbarTrans, topbarTrans, editorsTrans);
 
+  // Clear temp data
+  app.common.clearContainer(this.DOMObject);
+
   // Compile layout template with data
   const html = topbarTemplate({
     customDropdownOptions: this.customDropdownOptions,
@@ -157,8 +160,11 @@ Topbar.prototype.render = function() {
   }
 
   // Set layout jumpList if exists
-  if (!$.isEmptyObject(this.jumpList) && $('#layoutJumpList').length == 0) {
-    this.setupJumpList($('#layoutJumpListContainer'));
+  if (
+    !$.isEmptyObject(this.jumpList) &&
+    self.DOMObject.find('#layoutJumpList').length == 0
+  ) {
+    self.setupJumpList();
   }
 
   // Options menu
@@ -187,9 +193,11 @@ Topbar.prototype.render = function() {
 
 /**
 * Setup layout jumplist
-* @param {object} jumpListContainer
 */
-Topbar.prototype.setupJumpList = function(jumpListContainer) {
+Topbar.prototype.setupJumpList = function() {
+  const app = this.parent;
+  const $jumpListContainer = $('#layoutJumpListContainer');
+
   // If we are in template edit mode, don't show
   if (
     this.parent.templateEditMode != undefined &&
@@ -200,13 +208,14 @@ Topbar.prototype.setupJumpList = function(jumpListContainer) {
 
   const html = topbarLayoutJumpList(this.jumpList);
 
-  // Append layout html to the main div
-  jumpListContainer.html(html);
-
-  jumpListContainer.removeClass('d-none');
+  // Clear temp data
+  app.common.clearContainer($jumpListContainer);
 
-  const jumpList = jumpListContainer.find('#layoutJumpList');
+  // Append layout html to the main div
+  $jumpListContainer.html(html);
+  $jumpListContainer.removeClass('d-none');
 
+  const jumpList = $jumpListContainer.find('#layoutJumpList');
   jumpList.select2({
     ajax: {
       url: jumpList.data().url,
@@ -324,7 +333,6 @@ Topbar.prototype.setupJumpList = function(jumpListContainer) {
   });
 };
 
-
 /**
  * Update layout status in the info fields
  */

diff --git a/ui/src/helpers/form-helpers.js b/ui/src/helpers/form-helpers.js
@@ -481,7 +481,6 @@ const formHelpers = function() {
       }
     };
 
-
     // Function to switch off all the bootstrapSwitch
     const forceBootstrapSwitchesOff = function() {
       // If one of the targets is a boostrap switch, switch it off

diff --git a/ui/src/layout-editor/canvas.js b/ui/src/layout-editor/canvas.js
@@ -176,7 +176,6 @@ Canvas.prototype.getActiveWidgetOfType = function(
   return targetWidget;
 };
 
-
 /**
  * Move elements between widgets
  * @param {object} sourceWidgetId - Old widget id
@@ -297,7 +296,6 @@ Canvas.prototype.moveElementsBetweenWidgets = function(
   });
 };
 
-
 /**
  * Remove elements or group from canvas widget
  * @param {object} widgetId - Old widget
@@ -317,7 +315,6 @@ Canvas.prototype.removeFromCanvasWidget = function(
   }
 };
 
-
 /**
  * Edit property by type
  * @param {string} property - property to edit

diff --git a/ui/src/layout-editor/layout.js b/ui/src/layout-editor/layout.js
@@ -786,7 +786,6 @@ Layout.prototype.updateStatus = function(
   lD.topbar.updateLayoutStatus();
 };
 
-
 /**
  * Calculate layout values for the layout based on the scale of this container
  * @param {object} container - Container DOM object