From c65aa52726c81727aa03a96bd0e832f3b3121d29 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Sevilla=20Mart=C3=ADn?= Date: Mon, 3 Jun 2019 05:46:48 -0400 Subject: [PATCH] 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 | 6 +- extensions/tags/js/package.json | 2 +- .../tags/js/src/admin/components/TagsPage.js | 122 +++++++++--------- 3 files changed, 67 insertions(+), 63 deletions(-) diff --git a/extensions/tags/js/package-lock.json b/extensions/tags/js/package-lock.json index 1cb15213a..6188459bb 100644 --- a/extensions/tags/js/package-lock.json +++ b/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", diff --git a/extensions/tags/js/package.json b/extensions/tags/js/package.json index fc9ac1770..ffd3d0887 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.8", + "html5sortable": "^0.9.16", "webpack": "^4.26.0", "webpack-cli": "^3.1.2" }, diff --git a/extensions/tags/js/src/admin/components/TagsPage.js b/extensions/tags/js/src/admin/components/TagsPage.js index 29e8fd884..7c58d2cc7 100644 --- a/extensions/tags/js/src/admin/components/TagsPage.js +++ b/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(); + }); } }