Update code to work with latest html5sortable (#62)

* Update code to work with latest html5sortable (0.9.16)

* Move forEach function callback to constant variable

* Extract inline function into method

extensions/tags/js/package-lock.json

@@ -2779,9 +2779,9 @@
       }
     },
     "html5sortable": {
-      "version": "0.9.8",
-      "resolved": "https://registry.npmjs.org/html5sortable/-/html5sortable-0.9.8.tgz",
-      "integrity": "sha512-QodBiv8LdTZHot3EMzNHTeKn/nHm66BlvmcFvMFMPVm4mYN5S0uKvDxFnzRltFvrIjvps7OVRrxBJQX8aLnxWg=="
+      "version": "0.9.16",
+      "resolved": "https://registry.npmjs.org/html5sortable/-/html5sortable-0.9.16.tgz",
+      "integrity": "sha512-GjCFl7w+Z6bQNs6lU5fhPqLoC5aRbFbQtL9rgqGR3Fs0GCRCrGjoRusZkhWaQpMr4eN25BlkviYA2nH+hFnDoA=="
     },
     "https-browserify": {
       "version": "1.0.0",

extensions/tags/js/package.json

@@ -3,7 +3,7 @@
   "name": "@flarum/tags",
   "dependencies": {
     "flarum-webpack-config": "0.1.0-beta.10",
-    "html5sortable": "^0.9.8",
+    "html5sortable": "^0.9.16",
     "webpack": "^4.26.0",
     "webpack-cli": "^3.1.2"
   },

extensions/tags/js/src/admin/components/TagsPage.js

@@ -1,4 +1,4 @@
-import 'html5sortable';
+import sortable from 'html5sortable/dist/html5sortable.es.js';
 
 import Page from 'flarum/components/Page';
 import Button from 'flarum/components/Button';
@@ -80,70 +80,74 @@ export default class TagsPage extends Page {
   }
 
   config() {
-    this.$('ol, ul')
-      .sortable({connectWith: 'primary'})
-      .on('sortupdate', (e, ui) => {
-        // If we've moved a tag from 'primary' to 'secondary', then we'll update
-        // its attributes in our local store so that when we redraw the change
-        // will be made.
-        if (ui.startparent.is('ol') && ui.endparent.is('ul')) {
-          app.store.getById('tags', ui.item.data('id')).pushData({
-            attributes: {
-              position: null,
-              isChild: false
-            },
-            relationships: {parent: null}
-          });
-        }
+    sortable(this.$('ol, ul'), {
+      acceptFrom: 'ol,ul'
+    }).forEach(this.onSortUpdate.bind(this));
+  }
 
-        // Construct an array of primary tag IDs and their children, in the same
-        // order that they have been arranged in.
-        const order = this.$('.TagList--primary > li')
-          .map(function() {
-            return {
-              id: $(this).data('id'),
-              children: $(this).find('li')
-                .map(function() {
-                  return $(this).data('id');
-                }).get()
-            };
-          }).get();
+  onSortUpdate(el) {
+    el.addEventListener('sortupdate', (e) => {
+      // If we've moved a tag from 'primary' to 'secondary', then we'll update
+      // its attributes in our local store so that when we redraw the change
+      // will be made.
+      if (e.detail.origin.container instanceof HTMLOListElement && e.detail.destination.container instanceof HTMLUListElement) {
+        app.store.getById('tags', e.detail.item.getAttribute('data-id')).pushData({
+          attributes: {
+            position: null,
+            isChild: false
+          },
+          relationships: {parent: null}
+        });
+      }
 
-        // Now that we have an accurate representation of the order which the
-        // primary tags are in, we will update the tag attributes in our local
-        // store to reflect this order.
-        order.forEach((tag, i) => {
-          const parent = app.store.getById('tags', tag.id);
-          parent.pushData({
-            attributes: {
-              position: i,
-              isChild: false
-            },
-            relationships: {parent: null}
-          });
+      // Construct an array of primary tag IDs and their children, in the same
+      // order that they have been arranged in.
+      const order = this.$('.TagList--primary > li')
+        .map(function() {
+          return {
+            id: $(this).data('id'),
+            children: $(this).find('li')
+              .map(function() {
+                return $(this).data('id');
+              }).get()
+          };
+        }).get();
 
-          tag.children.forEach((child, j) => {
-            app.store.getById('tags', child).pushData({
-              attributes: {
-                position: j,
-                isChild: true
-              },
-              relationships: {parent}
-            });
-          });
+      // Now that we have an accurate representation of the order which the
+      // primary tags are in, we will update the tag attributes in our local
+      // store to reflect this order.
+      order.forEach((tag, i) => {
+        const parent = app.store.getById('tags', tag.id);
+        parent.pushData({
+          attributes: {
+            position: i,
+            isChild: false
+          },
+          relationships: {parent: null}
         });
 
-        app.request({
-          url: app.forum.attribute('apiUrl') + '/tags/order',
-          method: 'POST',
-          data: {order}
+        tag.children.forEach((child, j) => {
+          app.store.getById('tags', child).pushData({
+            attributes: {
+              position: j,
+              isChild: true
+            },
+            relationships: {parent}
+          });
         });
-
-        // A diff redraw won't work here, because sortable has mucked around
-        // with the DOM which will confuse Mithril's diffing algorithm. Instead
-        // we force a full reconstruction of the DOM.
-        m.redraw.strategy('all');
-        m.redraw();
       });
+
+      app.request({
+        url: app.forum.attribute('apiUrl') + '/tags/order',
+        method: 'POST',
+        data: {order}
+      });
+
+      // A diff redraw won't work here, because sortable has mucked around
+      // with the DOM which will confuse Mithril's diffing algorithm. Instead
+      // we force a full reconstruction of the DOM.
+      m.redraw.strategy('all');
+      m.redraw();
+    });
   }
 }