mirror/php-flarum
1
0
Fork 0
mirror of https://github.com/flarum/core.git synced 2025-08-15 12:54:47 +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": {
"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",

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

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

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 Button from 'flarum/components/Button';
@@ -21,7 +21,7 @@ function tagItem(tag) {
})}
</div>
{!tag.isChild() && tag.position() !== null ? (
<ol className="TagListItem-children">
<ol className="TagListItem-children TagList">
{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();
});
}
}