diff --git a/extensions/tags/js/package-lock.json b/extensions/tags/js/package-lock.json index 2f10ef0fc..d8c05bb43 100644 --- a/extensions/tags/js/package-lock.json +++ b/extensions/tags/js/package-lock.json @@ -2770,8 +2770,7 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true, - "optional": true + "bundled": true }, "aproba": { "version": "1.2.0", @@ -2789,13 +2788,11 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true, - "optional": true + "bundled": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -2808,18 +2805,15 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "concat-map": { "version": "0.0.1", - "bundled": true, - "optional": true + "bundled": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "core-util-is": { "version": "1.0.2", @@ -2922,8 +2916,7 @@ }, "inherits": { "version": "2.0.4", - "bundled": true, - "optional": true + "bundled": true }, "ini": { "version": "1.3.5", @@ -2933,7 +2926,6 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -2946,20 +2938,17 @@ "minimatch": { "version": "3.0.4", "bundled": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "1.2.5", - "bundled": true, - "optional": true + "bundled": true }, "minipass": { "version": "2.9.0", "bundled": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -2976,7 +2965,6 @@ "mkdirp": { "version": "0.5.3", "bundled": true, - "optional": true, "requires": { "minimist": "^1.2.5" } @@ -3032,8 +3020,7 @@ }, "npm-normalize-package-bin": { "version": "1.0.1", - "bundled": true, - "optional": true + "bundled": true }, "npm-packlist": { "version": "1.4.8", @@ -3058,8 +3045,7 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true, - "optional": true + "bundled": true }, "object-assign": { "version": "4.1.1", @@ -3069,7 +3055,6 @@ "once": { "version": "1.4.0", "bundled": true, - "optional": true, "requires": { "wrappy": "1" } @@ -3138,8 +3123,7 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true, - "optional": true + "bundled": true }, "safer-buffer": { "version": "2.1.2", @@ -3169,7 +3153,6 @@ "string-width": { "version": "1.0.2", "bundled": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -3187,7 +3170,6 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -3226,13 +3208,11 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true, - "optional": true + "bundled": true }, "yallist": { "version": "3.1.1", - "bundled": true, - "optional": true + "bundled": true } } }, @@ -3426,11 +3406,6 @@ "parse-passwd": "^1.0.0" } }, - "html5sortable": { - "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", "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz", @@ -4729,6 +4704,11 @@ } } }, + "sortablejs": { + "version": "1.10.2", + "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz", + "integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A==" + }, "source-list-map": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz", diff --git a/extensions/tags/js/package.json b/extensions/tags/js/package.json index 739190e7c..f291c3b57 100644 --- a/extensions/tags/js/package.json +++ b/extensions/tags/js/package.json @@ -3,7 +3,7 @@ "name": "@flarum/tags", "dependencies": { "flarum-webpack-config": "0.1.0-beta.10", - "html5sortable": "^0.9.16", + "sortablejs": "^1.10.2", "webpack": "^4.43.0", "webpack-cli": "^3.3.11" }, diff --git a/extensions/tags/js/src/admin/components/TagsPage.js b/extensions/tags/js/src/admin/components/TagsPage.js index 7c58d2cc7..ae343b53a 100644 --- a/extensions/tags/js/src/admin/components/TagsPage.js +++ b/extensions/tags/js/src/admin/components/TagsPage.js @@ -1,4 +1,4 @@ -import sortable from 'html5sortable/dist/html5sortable.es.js'; +import sortable from 'sortablejs'; import Page from 'flarum/components/Page'; import Button from 'flarum/components/Button'; @@ -21,7 +21,7 @@ function tagItem(tag) { })} {!tag.isChild() && tag.position() !== null ? ( -
    +
      {sortTags(app.store.all('tags')) .filter(child => child.parent() === tag) .map(tagItem)} @@ -80,18 +80,24 @@ export default class TagsPage extends Page { } config() { - sortable(this.$('ol, ul'), { - acceptFrom: 'ol,ul' - }).forEach(this.onSortUpdate.bind(this)); + this.$('.TagList').get().map(e => { + sortable.create(e, { + group: 'tags', + animation: 150, + swapThreshold: 0.65, + dragClass: 'sortable-dragging', + ghostClass: 'sortable-placeholder', + onSort: (e) => this.onSortUpdate(e) + }) + }); } - onSortUpdate(el) { - el.addEventListener('sortupdate', (e) => { + onSortUpdate(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({ + if (e.from instanceof HTMLOListElement && e.to instanceof HTMLUListElement) { + app.store.getById('tags', e.item.getAttribute('data-id')).pushData({ attributes: { position: null, isChild: false @@ -148,6 +154,5 @@ export default class TagsPage extends Page { // we force a full reconstruction of the DOM. m.redraw.strategy('all'); m.redraw(); - }); } }