Merge pull request #125 from mwmbl/performance-improvements

Use sortable js instead of jquery

front-end/assets/css/global.css

@@ -236,6 +236,10 @@ a {
   display: flex;
 }
 
+.result-link a {
+  background: white;
+}
+
 .curation-buttons {
   padding: 20px;
 }
@@ -344,4 +348,17 @@ a {
 
 .login-info {
   padding: 10px;
-}
+}
+
+/* Sortable styling is not working in HTML 5 yet */
+/*.sortable-drag {*/
+/*    opacity: 1.0;*/
+/*}*/
+
+/*.sortable-ghost {*/
+/*    opacity: 1.0;*/
+/*}*/
+
+/*.sortable-chosen {*/
+/*  opacity: 0;*/
+/*}*/

front-end/package-lock.json

@@ -6,7 +6,8 @@
     "": {
       "name": "front-end",
       "dependencies": {
-        "chart.js": "^4.4.0"
+        "chart.js": "^4.4.0",
+        "sortablejs": "^1.15.0"
       },
       "devDependencies": {
         "@vitejs/plugin-legacy": "^2.3.1",
@@ -683,6 +684,11 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/sortablejs": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.0.tgz",
+      "integrity": "sha512-bv9qgVMjUMf89wAvM6AxVvS/4MX3sPeN0+agqShejLU5z5GX4C75ow1O2e5k4L6XItUyAK3gH6AxSbXrOM5e8w=="
+    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -1189,6 +1195,11 @@
         "fsevents": "~2.3.2"
       }
     },
+    "sortablejs": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.0.tgz",
+      "integrity": "sha512-bv9qgVMjUMf89wAvM6AxVvS/4MX3sPeN0+agqShejLU5z5GX4C75ow1O2e5k4L6XItUyAK3gH6AxSbXrOM5e8w=="
+    },
     "source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",

front-end/package.json

@@ -13,6 +13,7 @@
     "vite": "^3.2.3"
   },
   "dependencies": {
-    "chart.js": "^4.4.0"
+    "chart.js": "^4.4.0",
+    "sortablejs": "^1.15.0"
   }
 }

front-end/src/components/organisms/results.js

@@ -1,4 +1,5 @@
 import {globalBus} from '../../utils/events.js';
+import Sortable from 'sortablejs';
 
 class ResultsHandler {
   constructor() {
@@ -109,19 +110,19 @@ class ResultsHandler {
   __initializeResults() {
     this.results = document.querySelector('.results');
 
-    // Allow the user to re-order search results
-    $(".results").sortable({
-      "activate": this.__sortableActivate.bind(this),
-      "deactivate": this.__sortableDeactivate.bind(this),
+    const sortable = new Sortable(this.results, {
+      "onStart": this.__sortableActivate.bind(this),
+      "onEnd": this.__sortableDeactivate.bind(this),
+      // "forceFallback": true,
     });
 
     this.curating = false;
   }
 
-  __sortableActivate(event, ui) {
-    console.log("Sortable activate", ui);
+  __sortableActivate(event) {
+    console.log("Sortable activate", event);
     this.__beginCurating();
-    this.oldIndex = ui.item.index();
+    this.oldIndex = event.oldIndex;
   }
 
   __beginCurating() {
@@ -159,9 +160,9 @@ class ResultsHandler {
     return results;
   }
 
-  __sortableDeactivate(event, ui) {
-    const newIndex = ui.item.index();
-    console.log('Sortable deactivate', ui, this.oldIndex, newIndex);
+  __sortableDeactivate(event) {
+    const newIndex = event.newIndex;
+    console.log('Sortable deactivate', this.oldIndex, newIndex);
 
     const newResults = this.__getResults();
 

mwmbl/templates/index.html

@@ -37,10 +37,6 @@
   <!-- OpenSearch -->
   <link rel="search" type="application/opensearchdescription+xml" href="/static/assets/opensearch.xml" title="Mwmbl Search">
 
-  <!-- POC temporary use of jQueryUI! -->
-  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
-  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
-  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
   <script src="https://unpkg.com/htmx.org@1.9.6"></script>
 
   {% vite_hmr_client %}