mirror/php-flarum
1
0
Fork 0
mirror of https://github.com/flarum/core.git synced 2025-08-16 13:24:11 +02:00
Code Issues Releases Wiki Activity

Fix buggy drag and drop (#82)

Browse Source 
Switch to the SortableJs library to fix the buggy tags drag-and-drop admin UI.
This commit is contained in:
Charlie
2020-05-31 08:54:52 -07:00
committed by GitHub
parent 713efcfa3c
commit 94799aad72
3 changed files with 33 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
extensions/tags/js/package-lock.json generated
View File

@@ -2770,8 +2770,7 @@
}, },
"ansi-regex": { "ansi-regex": {
"version": "2.1.1", "version": "2.1.1",
"bundled": true, "bundled": true
"optional": true
}, },
"aproba": { "aproba": {
"version": "1.2.0", "version": "1.2.0",
@@ -2789,13 +2788,11 @@
}, },
"balanced-match": { "balanced-match": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true
"optional": true
}, },
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
@@ -2808,18 +2805,15 @@
}, },
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"bundled": true, "bundled": true
"optional": true
}, },
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
@@ -2922,8 +2916,7 @@
}, },
"inherits": { "inherits": {
"version": "2.0.4", "version": "2.0.4",
"bundled": true, "bundled": true
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
@@ -2933,7 +2926,6 @@
"is-fullwidth-code-point": { "is-fullwidth-code-point": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
@@ -2946,20 +2938,17 @@
"minimatch": { "minimatch": {
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
}, },
"minimist": { "minimist": {
"version": "1.2.5", "version": "1.2.5",
"bundled": true, "bundled": true
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.9.0", "version": "2.9.0",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.2", "safe-buffer": "^5.1.2",
"yallist": "^3.0.0" "yallist": "^3.0.0"
@@ -2976,7 +2965,6 @@
"mkdirp": { "mkdirp": {
"version": "0.5.3", "version": "0.5.3",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"minimist": "^1.2.5" "minimist": "^1.2.5"
} }
@@ -3032,8 +3020,7 @@
}, },
"npm-normalize-package-bin": { "npm-normalize-package-bin": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true, "bundled": true
"optional": true
}, },
"npm-packlist": { "npm-packlist": {
"version": "1.4.8", "version": "1.4.8",
@@ -3058,8 +3045,7 @@
}, },
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true, "bundled": true
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
@@ -3069,7 +3055,6 @@
"once": { "once": {
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
@@ -3138,8 +3123,7 @@
}, },
"safe-buffer": { "safe-buffer": {
"version": "5.1.2", "version": "5.1.2",
"bundled": true, "bundled": true
"optional": true
}, },
"safer-buffer": { "safer-buffer": {
"version": "2.1.2", "version": "2.1.2",
@@ -3169,7 +3153,6 @@
"string-width": { "string-width": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",
@@ -3187,7 +3170,6 @@
"strip-ansi": { "strip-ansi": {
"version": "3.0.1", "version": "3.0.1",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"ansi-regex": "^2.0.0" "ansi-regex": "^2.0.0"
} }
@@ -3226,13 +3208,11 @@
}, },
"wrappy": { "wrappy": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true
"optional": true
}, },
"yallist": { "yallist": {
"version": "3.1.1", "version": "3.1.1",
"bundled": true, "bundled": true
"optional": true
} }
} }
}, },
@@ -3426,11 +3406,6 @@
"parse-passwd": "^1.0.0" "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": { "https-browserify": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz", "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": { "source-list-map": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz", "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",

2
extensions/tags/js/package.json
View File

@@ -3,7 +3,7 @@
"name": "@flarum/tags", "name": "@flarum/tags",
"dependencies": { "dependencies": {
"flarum-webpack-config": "0.1.0-beta.10", "flarum-webpack-config": "0.1.0-beta.10",
"html5sortable": "^0.9.16", "sortablejs": "^1.10.2",
"webpack": "^4.43.0", "webpack": "^4.43.0",
"webpack-cli": "^3.3.11" "webpack-cli": "^3.3.11"
}, },

25
extensions/tags/js/src/admin/components/TagsPage.js
View File

@@ -1,4 +1,4 @@
import sortable from 'html5sortable/dist/html5sortable.es.js'; import sortable from 'sortablejs';
import Page from 'flarum/components/Page'; import Page from 'flarum/components/Page';
import Button from 'flarum/components/Button'; import Button from 'flarum/components/Button';
@@ -21,7 +21,7 @@ function tagItem(tag) {
})} })}
</div> </div>
{!tag.isChild() && tag.position() !== null ? ( {!tag.isChild() && tag.position() !== null ? (
<ol className="TagListItem-children"> <ol className="TagListItem-children TagList">
{sortTags(app.store.all('tags')) {sortTags(app.store.all('tags'))
.filter(child => child.parent() === tag) .filter(child => child.parent() === tag)
.map(tagItem)} .map(tagItem)}
@@ -80,18 +80,24 @@ export default class TagsPage extends Page {
} }
config() { config() {
sortable(this.$('ol, ul'), { this.$('.TagList').get().map(e => {
acceptFrom: 'ol,ul' sortable.create(e, {
}).forEach(this.onSortUpdate.bind(this)); group: 'tags',
animation: 150,
swapThreshold: 0.65,
dragClass: 'sortable-dragging',
ghostClass: 'sortable-placeholder',
onSort: (e) => this.onSortUpdate(e)
})
});
} }
onSortUpdate(el) { onSortUpdate(e) {
el.addEventListener('sortupdate', (e) => {
// If we've moved a tag from 'primary' to 'secondary', then we'll update // 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 // its attributes in our local store so that when we redraw the change
// will be made. // will be made.
if (e.detail.origin.container instanceof HTMLOListElement && e.detail.destination.container instanceof HTMLUListElement) { if (e.from instanceof HTMLOListElement && e.to instanceof HTMLUListElement) {
app.store.getById('tags', e.detail.item.getAttribute('data-id')).pushData({ app.store.getById('tags', e.item.getAttribute('data-id')).pushData({
attributes: { attributes: {
position: null, position: null,
isChild: false isChild: false
@@ -148,6 +154,5 @@ export default class TagsPage extends Page {
// we force a full reconstruction of the DOM. // we force a full reconstruction of the DOM.
m.redraw.strategy('all'); m.redraw.strategy('all');
m.redraw(); m.redraw();
});
} }
} }