From 4a6d69c002e66f13e5b4676e816f8cd396e4a25f Mon Sep 17 00:00:00 2001
From: FreneticScribbler <aj@aronajones.com>
Date: Mon, 22 Feb 2021 13:42:39 +0000
Subject: [PATCH] Drop jquery-ui in favour of html5sortable

10x smaller dependency!
---
 RIGS/templates/event_checklist_form.html |  2 --
 RIGS/templates/event_form.html           |  1 -
 RIGS/templates/risk_assessment_form.html |  2 --
 assets/templates/asset_audit_list.html   |  2 --
 gulpfile.js                              |  4 +++-
 package-lock.json                        | 22 +++++++++++-----------
 package.json                             |  2 +-
 pipeline/source_assets/js/interaction.js | 22 ++++------------------
 8 files changed, 19 insertions(+), 38 deletions(-)

diff --git a/RIGS/templates/event_checklist_form.html b/RIGS/templates/event_checklist_form.html
index a1fe1759..6cb89b4a 100644
--- a/RIGS/templates/event_checklist_form.html
+++ b/RIGS/templates/event_checklist_form.html
@@ -18,8 +18,6 @@
 {% block js %}
     {{ block.super }}
     <script src="{% static 'js/autocompleter.js' %}"></script>
-    <script src="{% static 'js/jquery-ui.js' %}"></script><!--TODO optimise-->
-    <script src="{% static 'js/interaction.js' %}"></script>
     <script src="{% static 'js/tooltip.js' %}"></script>
 
     {% include 'partials/datetime-fix.html' %}
diff --git a/RIGS/templates/event_form.html b/RIGS/templates/event_form.html
index 572a4271..674fd82f 100644
--- a/RIGS/templates/event_form.html
+++ b/RIGS/templates/event_form.html
@@ -18,7 +18,6 @@
 {% block js %}
     {{ block.super }}
     <script src="{% static 'js/autocompleter.js' %}"></script>
-    <script src="{% static 'js/jquery-ui.js' %}"></script><!--TODO optimise--->
     <script src="{% static 'js/interaction.js' %}"></script>
     <script src="{% static 'js/tooltip.js' %}"></script>
 
diff --git a/RIGS/templates/risk_assessment_form.html b/RIGS/templates/risk_assessment_form.html
index 30c47c1b..54b43bef 100644
--- a/RIGS/templates/risk_assessment_form.html
+++ b/RIGS/templates/risk_assessment_form.html
@@ -17,8 +17,6 @@
 {% block js %}
     {{ block.super }}
     <script src="{% static 'js/autocompleter.js' %}"></script>
-    <script src="{% static 'js/jquery-ui.js' %}"></script><!--TODO optimise--->
-    <script src="{% static 'js/interaction.js' %}"></script>
     <script src="{% static 'js/tooltip.js' %}"></script>
 
     <script>
diff --git a/assets/templates/asset_audit_list.html b/assets/templates/asset_audit_list.html
index e6eb41fb..e90eb337 100644
--- a/assets/templates/asset_audit_list.html
+++ b/assets/templates/asset_audit_list.html
@@ -4,8 +4,6 @@
 {% load widget_tweaks %}
 
 {% block js %}
-    <script src="{% static 'js/jquery-ui.js' %}"></script>
-    <script src="{% static "js/interaction.js" %}"></script>
     <script>
     $('document').ready(function(){
         $('#asset-search-form').submit(function () {
diff --git a/gulpfile.js b/gulpfile.js
index a09f52c7..72dd0626 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -43,9 +43,9 @@ function scripts() {
     const dest = 'pipeline/built_assets/js';
     const base_scripts = ["src.js", "util.js", "alert.js", "collapse.js", "dropdown.js", "modal.js", "konami.js"];
     const bs_select = ["bootstrap-select.js", "ajax-bootstrap-select.js"]
+    const interaction = ["html5sortable.min.js", "interaction.js"]
     return gulp.src(['node_modules/jquery/dist/jquery.js',
                     /* JQuery Plugins */
-                    'node_modules/jquery-ui-dist/jquery-ui.js',
                     'node_modules/popper.js/dist/umd/popper.js',
                     /* Bootstrap Plugins */
                     'node_modules/bootstrap/js/dist/util.js',
@@ -56,6 +56,7 @@ function scripts() {
                     'node_modules/bootstrap/js/dist/modal.js',
                     'node_modules/bootstrap/js/dist/alert.js',
 
+                    'node_modules/html5sortable/dist/html5sortable.min.js',
                     'node_modules/clipboard/dist/clipboard.min.js',
                     'node_modules/flatpickr/dist/flatpickr.min.js',
                     'node_modules/moment/moment.js',
@@ -66,6 +67,7 @@ function scripts() {
                     'pipeline/source_assets/js/**/*.js',])
     .pipe(gulpif(function(file) { return base_scripts.includes(file.relative);}, con('base.js')))
     .pipe(gulpif(function(file) { return bs_select.includes(file.relative);}, con('selects.js')))
+    .pipe(gulpif(function(file) { return interaction.includes(file.relative);}, con('interaction.js')))
     .pipe(flatten())
     .pipe(terser())
     .pipe(gulp.dest(dest))
diff --git a/package-lock.json b/package-lock.json
index 35a30b68..803a4d1a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,8 +27,8 @@
         "gulp-sass": "^4.1.0",
         "gulp-sourcemaps": "^2.6.5",
         "gulp-uglify": "^3.0.2",
+        "html5sortable": "^0.10.0",
         "jquery": "^3.5.1",
-        "jquery-ui-dist": "^1.12.1",
         "konami": "^1.6.2",
         "moment": "^2.27.0",
         "node-sass": "^5.0.0",
@@ -4072,6 +4072,11 @@
       "resolved": "https://registry.npmjs.org/html-comment-regex/-/html-comment-regex-1.1.2.tgz",
       "integrity": "sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ=="
     },
+    "node_modules/html5sortable": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/html5sortable/-/html5sortable-0.10.0.tgz",
+      "integrity": "sha512-/F2sUHnSlqXY8Pg1AxLjR5i/ijngpkl2u1x6a6JfwSsoVRZ5b/ZO9MDZopSSzjo7bTZinQbXACTrZI6mpGugMw=="
+    },
     "node_modules/http-errors": {
       "version": "1.7.3",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz",
@@ -4640,11 +4645,6 @@
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz",
       "integrity": "sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg=="
     },
-    "node_modules/jquery-ui-dist": {
-      "version": "1.12.1",
-      "resolved": "https://registry.npmjs.org/jquery-ui-dist/-/jquery-ui-dist-1.12.1.tgz",
-      "integrity": "sha1-XAgV08xvkP9fqvWyaKbiO0ypBPo="
-    },
     "node_modules/js-base64": {
       "version": "2.6.4",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
@@ -12652,6 +12652,11 @@
       "resolved": "https://registry.npmjs.org/html-comment-regex/-/html-comment-regex-1.1.2.tgz",
       "integrity": "sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ=="
     },
+    "html5sortable": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/html5sortable/-/html5sortable-0.10.0.tgz",
+      "integrity": "sha512-/F2sUHnSlqXY8Pg1AxLjR5i/ijngpkl2u1x6a6JfwSsoVRZ5b/ZO9MDZopSSzjo7bTZinQbXACTrZI6mpGugMw=="
+    },
     "http-errors": {
       "version": "1.7.3",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz",
@@ -13071,11 +13076,6 @@
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz",
       "integrity": "sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg=="
     },
-    "jquery-ui-dist": {
-      "version": "1.12.1",
-      "resolved": "https://registry.npmjs.org/jquery-ui-dist/-/jquery-ui-dist-1.12.1.tgz",
-      "integrity": "sha1-XAgV08xvkP9fqvWyaKbiO0ypBPo="
-    },
     "js-base64": {
       "version": "2.6.4",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
diff --git a/package.json b/package.json
index d9bbb520..61dd8749 100644
--- a/package.json
+++ b/package.json
@@ -24,8 +24,8 @@
     "gulp-sass": "^4.1.0",
     "gulp-sourcemaps": "^2.6.5",
     "gulp-uglify": "^3.0.2",
+    "html5sortable": "^0.10.0",
     "jquery": "^3.5.1",
-    "jquery-ui-dist": "^1.12.1",
     "konami": "^1.6.2",
     "moment": "^2.27.0",
     "node-sass": "^5.0.0",
diff --git a/pipeline/source_assets/js/interaction.js b/pipeline/source_assets/js/interaction.js
index 56f04dec..a362ec3f 100644
--- a/pipeline/source_assets/js/interaction.js
+++ b/pipeline/source_assets/js/interaction.js
@@ -117,23 +117,9 @@ $('body').on('submit', '.itemised_form', function (e) {
     $('#id_items_json').val(JSON.stringify(objectitems));
 });
 
-// Return a helper with preserved width of cells
-var fixHelper = function (e, ui) {
-    ui.children().each(function () {
-        $(this).width($(this).width());
-    });
-    return ui;
-};
-
-$("#item-table tbody").sortable({
-    helper: fixHelper,
-    update: function (e, ui) {
-        info = $(this).sortable("toArray");
-        itemorder = new Array();
-        $.each(info, function (key, value) {
-            pk = $('#' + value).data('pk');
-            objectitems[pk].fields.order = key;
-        });
-
+sortable("#item-table tbody")[0].addEventListener('sortupdate', function (e) {
+    var items = e.detail.destination.items;
+    for(var i in items) {
+        objectitems[items[i].dataset.pk].fields.order = i;
     }
 });