Use sortable js instead of jquery

This commit is contained in:
Daoud Clarke 2023-11-09 10:48:41 +00:00
parent 5f47f45ebc
commit 7dd131df9f
6 changed files with 43 additions and 17 deletions

Binary file not shown.

View file

@ -236,6 +236,10 @@ a {
display: flex;
}
.result-link a {
background: white;
}
.curation-buttons {
padding: 20px;
}
@ -345,3 +349,16 @@ 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;*/
/*}*/

View file

@ -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",

View file

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

View file

@ -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();

View file

@ -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 %}