diff --git a/devdata/index-v2.tinysearch b/devdata/index-v2.tinysearch index a2dc808..d814247 100644 Binary files a/devdata/index-v2.tinysearch and b/devdata/index-v2.tinysearch differ diff --git a/front-end/assets/css/global.css b/front-end/assets/css/global.css index 9d817a2..08a6034 100644 --- a/front-end/assets/css/global.css +++ b/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; -} \ No newline at end of file +} + +/* Sortable styling is not working in HTML 5 yet */ +/*.sortable-drag {*/ +/* opacity: 1.0;*/ +/*}*/ + +/*.sortable-ghost {*/ +/* opacity: 1.0;*/ +/*}*/ + +/*.sortable-chosen {*/ +/* opacity: 0;*/ +/*}*/ diff --git a/front-end/package-lock.json b/front-end/package-lock.json index af0e754..f6c979a 100644 --- a/front-end/package-lock.json +++ b/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", diff --git a/front-end/package.json b/front-end/package.json index 53a57e0..2343e5a 100644 --- a/front-end/package.json +++ b/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" } } diff --git a/front-end/src/components/organisms/results.js b/front-end/src/components/organisms/results.js index 0cbd481..1bcf3c7 100644 --- a/front-end/src/components/organisms/results.js +++ b/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(); diff --git a/mwmbl/templates/index.html b/mwmbl/templates/index.html index b098809..1820c6a 100644 --- a/mwmbl/templates/index.html +++ b/mwmbl/templates/index.html @@ -37,10 +37,6 @@ - - - - {% vite_hmr_client %}