Fixed performance of Plugins / Themes sort in the installation table

themes/grav/app/utils/packages.js

@@ -5,8 +5,9 @@ import { Instance as gpm } from '../utils/gpm';
 
 class Sorter {
     getElements(elements, container) {
-        this.elements = elements || $('[data-gpm-plugin], [data-gpm-theme]');
-        this.container = container || $('.gpm-plugins > table > tbody, .gpm-themes > .themes.card-row');
+        this.elements = elements || document.querySelectorAll('[data-gpm-plugin], [data-gpm-theme]');
+        this.container = container || document.querySelector('.gpm-plugins > table > tbody, .gpm-themes > .themes.card-row');
+
         return this.elements;
     }
 
@@ -18,50 +19,78 @@ class Sorter {
     }
 
     byCommon(direction = 'asc', data = '') {
-        let elements = this.getElements().sort((a, b) => {
-            let A = $(a).data(data).toString().toLowerCase();
-            let B = $(b).data(data).toString().toLowerCase();
+        const elements = this.getElements();
+        this.removeGumroad();
+
+        Array.from(elements).sort((a, b) => {
+            let A = a.dataset[data].toString().toLowerCase();
+            let B = b.dataset[data].toString().toLowerCase();
 
             return Sorter.sort(A, B, direction);
+        }).forEach((element) => {
+          this.container.appendChild(element);
         });
 
-        return elements.appendTo(this.container);
+        this.addGumroad();
+        return this.container;
     }
 
-    byName(direction = 'asc', data = 'gpm-name') {
+    byName(direction = 'asc', data = 'gpmName') {
         return this.byCommon(direction, data);
     }
 
-    byAuthor(direction = 'asc', data = 'gpm-author') {
+    byAuthor(direction = 'asc', data = 'gpmAuthor') {
         return this.byCommon(direction, data);
     }
 
-    byOfficial(direction = 'asc', data = 'gpm-official') {
-        return this.byCommon(direction, data);
+    byOfficial(direction = 'asc', data = 'gpmOfficial') {
+      return this.byCommon(direction, data);
     }
 
-    byReleaseDate(direction = 'asc', data = 'gpm-release-date') {
-        let elements = this.getElements().sort((a, b) => {
-            let A = new Date($(a).data(data)).getTime();
-            let B = new Date($(b).data(data)).getTime();
+    byPremium(direction = 'asc', data = 'gpmPremium') {
+      return this.byCommon(direction, data);
+    }
+
+    byReleaseDate(direction = 'asc', data = 'gpmReleaseDate') {
+        const elements = this.getElements();
+
+        this.removeGumroad();
+        Array.from(elements).sort((a, b) => {
+            let A = new Date(a.dataset[data]).getTime();
+            let B = new Date(b.dataset[data]).getTime();
 
             return Sorter.sort(A, B, direction === 'asc' ? 'desc' : 'asc');
+        }).forEach((element) => {
+          this.container.appendChild(element);
         });
 
-        elements.appendTo(this.container);
+      this.addGumroad();
+      return this.container;
     }
 
-    byUpdatable(direction = 'asc', data = 'gpm-updatable') {
+    byUpdatable(direction = 'asc', data = 'gpmUpdatable') {
         return this.byCommon(direction, data);
     }
 
-    byEnabled(direction = 'asc', data = 'gpm-enabled') {
+    byEnabled(direction = 'asc', data = 'gpmEnabled') {
         return this.byCommon(direction, data);
     }
 
-    byTesting(direction = 'asc', data = 'gpm-testing') {
+    byTesting(direction = 'asc', data = 'gpmTesting') {
         return this.byCommon(direction, data);
     }
+
+    addGumroad() {
+      if (window.GumroadOverlay) {
+        window.GumroadOverlay.startNodeAdditionObserver();
+      }
+    }
+
+    removeGumroad() {
+      if (window.GumroadOverlay) {
+        window.GumroadOverlay.nodeAdditionObserver.disconnect();
+      }
+    }
 }
 
 class Packages {