diff --git a/package-lock.json b/package-lock.json
index e0195f9..ee2cd76 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,56 +1,67 @@
{
"name": "@tp/tp-sortable",
- "version": "0.0.1",
+ "version": "2.0.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@tp/tp-sortable",
- "version": "0.0.1",
+ "version": "2.0.0",
"license": "Apache-2.0",
"dependencies": {
- "lit": "^2.2.0",
+ "@tp/helpers": "^2.2.0",
+ "lit": "^2.8.0",
"sortablejs": "^1.15.0"
}
},
+ "node_modules/@lit-labs/ssr-dom-shim": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.0.tgz",
+ "integrity": "sha512-yWJKmpGE6lUURKAaIltoPIE/wrbY3TEkqQt+X0m+7fQNnAv0keydnYvbiJFP1PnMhizmIWRWOG5KLhYyc/xl+g=="
+ },
"node_modules/@lit/reactive-element": {
- "version": "1.3.1",
- "resolved": "https://verdaccio.codeblob.work/@lit%2freactive-element/-/reactive-element-1.3.1.tgz",
- "integrity": "sha512-nOJARIr3pReqK3hfFCSW2Zg/kFcFsSAlIE7z4a0C9D2dPrgD/YSn3ZP2ET/rxKB65SXyG7jJbkynBRm+tGlacw==",
- "license": "BSD-3-Clause"
+ "version": "1.6.3",
+ "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.3.tgz",
+ "integrity": "sha512-QuTgnG52Poic7uM1AN5yJ09QMe0O28e10XzSvWDz02TJiiKee4stsiownEIadWm8nYzyDAyT+gKzUoZmiWQtsQ==",
+ "dependencies": {
+ "@lit-labs/ssr-dom-shim": "^1.0.0"
+ }
+ },
+ "node_modules/@tp/helpers": {
+ "version": "2.2.0",
+ "resolved": "https://gitea.codeblob.work/api/packages/tp-elements/npm/%40tp%2Fhelpers/-/2.2.0/helpers-2.2.0.tgz",
+ "integrity": "sha512-kf+ieedMdYZOnQ6xUUQxTlP8cQEp4obpSs3vI7V/3xnex7VvMbiWzgFHU+wr1D2eR/IA0Cl1cZxvJ3E052EQew==",
+ "license": "Apache-2.0"
},
"node_modules/@types/trusted-types": {
- "version": "2.0.2",
- "resolved": "https://verdaccio.codeblob.work/@types%2ftrusted-types/-/trusted-types-2.0.2.tgz",
- "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==",
- "license": "MIT"
+ "version": "2.0.7",
+ "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+ "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="
},
"node_modules/lit": {
- "version": "2.2.1",
- "resolved": "https://verdaccio.codeblob.work/lit/-/lit-2.2.1.tgz",
- "integrity": "sha512-dSe++R50JqrvNGXmI9OE13de1z5U/Y3J2dTm/9GC86vedI8ILoR8ZGnxfThFpvQ9m0lR0qRnIR4IiKj/jDCfYw==",
- "license": "BSD-3-Clause",
+ "version": "2.8.0",
+ "resolved": "https://registry.npmjs.org/lit/-/lit-2.8.0.tgz",
+ "integrity": "sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA==",
"dependencies": {
- "@lit/reactive-element": "^1.3.0",
- "lit-element": "^3.2.0",
- "lit-html": "^2.2.0"
+ "@lit/reactive-element": "^1.6.0",
+ "lit-element": "^3.3.0",
+ "lit-html": "^2.8.0"
}
},
"node_modules/lit-element": {
- "version": "3.2.0",
- "resolved": "https://verdaccio.codeblob.work/lit-element/-/lit-element-3.2.0.tgz",
- "integrity": "sha512-HbE7yt2SnUtg5DCrWt028oaU4D5F4k/1cntAFHTkzY8ZIa8N0Wmu92PxSxucsQSOXlODFrICkQ5x/tEshKi13g==",
- "license": "BSD-3-Clause",
+ "version": "3.3.3",
+ "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.3.3.tgz",
+ "integrity": "sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==",
"dependencies": {
+ "@lit-labs/ssr-dom-shim": "^1.1.0",
"@lit/reactive-element": "^1.3.0",
- "lit-html": "^2.2.0"
+ "lit-html": "^2.8.0"
}
},
"node_modules/lit-html": {
- "version": "2.2.1",
- "resolved": "https://verdaccio.codeblob.work/lit-html/-/lit-html-2.2.1.tgz",
- "integrity": "sha512-AiJ/Rs0awjICs2FioTnHSh+Np5dhYSkyRczKy3wKjp8qjLhr1Ov+GiHrUQNdX8ou1LMuznpIME990AZsa/tR8g==",
- "license": "BSD-3-Clause",
+ "version": "2.8.0",
+ "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.8.0.tgz",
+ "integrity": "sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==",
"dependencies": {
"@types/trusted-types": "^2.0.2"
}
@@ -63,39 +74,53 @@
}
},
"dependencies": {
+ "@lit-labs/ssr-dom-shim": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.0.tgz",
+ "integrity": "sha512-yWJKmpGE6lUURKAaIltoPIE/wrbY3TEkqQt+X0m+7fQNnAv0keydnYvbiJFP1PnMhizmIWRWOG5KLhYyc/xl+g=="
+ },
"@lit/reactive-element": {
- "version": "1.3.1",
- "resolved": "https://verdaccio.codeblob.work/@lit%2freactive-element/-/reactive-element-1.3.1.tgz",
- "integrity": "sha512-nOJARIr3pReqK3hfFCSW2Zg/kFcFsSAlIE7z4a0C9D2dPrgD/YSn3ZP2ET/rxKB65SXyG7jJbkynBRm+tGlacw=="
+ "version": "1.6.3",
+ "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.3.tgz",
+ "integrity": "sha512-QuTgnG52Poic7uM1AN5yJ09QMe0O28e10XzSvWDz02TJiiKee4stsiownEIadWm8nYzyDAyT+gKzUoZmiWQtsQ==",
+ "requires": {
+ "@lit-labs/ssr-dom-shim": "^1.0.0"
+ }
+ },
+ "@tp/helpers": {
+ "version": "2.2.0",
+ "resolved": "https://gitea.codeblob.work/api/packages/tp-elements/npm/%40tp%2Fhelpers/-/2.2.0/helpers-2.2.0.tgz",
+ "integrity": "sha512-kf+ieedMdYZOnQ6xUUQxTlP8cQEp4obpSs3vI7V/3xnex7VvMbiWzgFHU+wr1D2eR/IA0Cl1cZxvJ3E052EQew=="
},
"@types/trusted-types": {
- "version": "2.0.2",
- "resolved": "https://verdaccio.codeblob.work/@types%2ftrusted-types/-/trusted-types-2.0.2.tgz",
- "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg=="
+ "version": "2.0.7",
+ "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+ "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="
},
"lit": {
- "version": "2.2.1",
- "resolved": "https://verdaccio.codeblob.work/lit/-/lit-2.2.1.tgz",
- "integrity": "sha512-dSe++R50JqrvNGXmI9OE13de1z5U/Y3J2dTm/9GC86vedI8ILoR8ZGnxfThFpvQ9m0lR0qRnIR4IiKj/jDCfYw==",
+ "version": "2.8.0",
+ "resolved": "https://registry.npmjs.org/lit/-/lit-2.8.0.tgz",
+ "integrity": "sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA==",
"requires": {
- "@lit/reactive-element": "^1.3.0",
- "lit-element": "^3.2.0",
- "lit-html": "^2.2.0"
+ "@lit/reactive-element": "^1.6.0",
+ "lit-element": "^3.3.0",
+ "lit-html": "^2.8.0"
}
},
"lit-element": {
- "version": "3.2.0",
- "resolved": "https://verdaccio.codeblob.work/lit-element/-/lit-element-3.2.0.tgz",
- "integrity": "sha512-HbE7yt2SnUtg5DCrWt028oaU4D5F4k/1cntAFHTkzY8ZIa8N0Wmu92PxSxucsQSOXlODFrICkQ5x/tEshKi13g==",
+ "version": "3.3.3",
+ "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.3.3.tgz",
+ "integrity": "sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==",
"requires": {
+ "@lit-labs/ssr-dom-shim": "^1.1.0",
"@lit/reactive-element": "^1.3.0",
- "lit-html": "^2.2.0"
+ "lit-html": "^2.8.0"
}
},
"lit-html": {
- "version": "2.2.1",
- "resolved": "https://verdaccio.codeblob.work/lit-html/-/lit-html-2.2.1.tgz",
- "integrity": "sha512-AiJ/Rs0awjICs2FioTnHSh+Np5dhYSkyRczKy3wKjp8qjLhr1Ov+GiHrUQNdX8ou1LMuznpIME990AZsa/tR8g==",
+ "version": "2.8.0",
+ "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.8.0.tgz",
+ "integrity": "sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==",
"requires": {
"@types/trusted-types": "^2.0.2"
}
diff --git a/package.json b/package.json
index 2e83519..52a436d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@tp/tp-sortable",
- "version": "1.0.1",
+ "version": "2.0.0",
"description": "",
"main": "tp-sortable.js",
"scripts": {
@@ -13,6 +13,7 @@
"author": "trading_peter",
"license": "Apache-2.0",
"dependencies": {
+ "@tp/helpers": "^2.2.0",
"lit": "^2.8.0",
"sortablejs": "^1.15.0"
}
diff --git a/tp-sortable.js b/tp-sortable.js
index 2aa2ed2..e97d7ae 100644
--- a/tp-sortable.js
+++ b/tp-sortable.js
@@ -1,18 +1,23 @@
/**
@license
-Copyright (c) 2022 trading_peter
+Copyright (c) 2024 trading_peter
This program is available under Apache License Version 2.0
*/
import { LitElement, html, css } from 'lit';
-import Sortable from 'sortablejs/modular/sortable.core.esm.js';
+import { EventHelpers } from '@tp/helpers/event-helpers.js';
+import { closest } from '@tp/helpers/closest.js';
-class TpSortable extends LitElement {
+class TpSortable extends EventHelpers(LitElement) {
static get styles() {
return [
css`
:host {
display: block;
+
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
user-select: none;
}
`
@@ -21,7 +26,7 @@ class TpSortable extends LitElement {
render() {
return html`
-
+
`;
}
@@ -36,6 +41,8 @@ class TpSortable extends LitElement {
sorting: { type: Boolean, reflect: true },
+ tracking: { type: Boolean },
+
_sortables: { type: Array }
};
}
@@ -46,19 +53,211 @@ class TpSortable extends LitElement {
this.handle = null;
this.longPress = false;
this.sorting = false;
+ this.tracking = false;
this._sortables = [];
}
firstUpdated() {
- this.sortable = Sortable.create(this.querySelector('[slot="list"]'), {
- animation: 150,
- draggable: this.selector,
- handle: this.handle,
- onSort: e => {
- this.dispatchEvent(new CustomEvent('sorting-changed', { detail: e, bubbles: true, composed: true }));
- }
+ this.listen(this, 'track', '_onTrack');
+ this.listen(this, 'mousedown', '_onMouseDown');
+ }
+
+ _onTrack(e) {
+ switch (e.detail.state) {
+ case 'track':
+ if (!this.sorting && this._longPressJob !== false && (Math.abs(e.detail.dy) > 10 || Math.abs(e.detail.dx) > 10)) {
+ this._cancelLongPress();
+ return;
+ }
+
+ if (this.sorting) {
+ this._dy = e.detail.dy;
+ this._direction = this._dy < 0 ? 1 : -1;
+ this._translate3d('0px', this._dy + 'px', '0px', this._target);
+ this._moveSiblings();
+ }
+ break;
+ case 'end':
+ if (this.sorting) {
+ const result = this._calcOverlap();
+ this._target.style.zIndex = '';
+ this._target.removeAttribute('is-dragged');
+ this._dy = 0;
+ this._translate3d('0px', '0px', '0px', this._target);
+ this._resetSortables();
+ this.sorting = false;
+ this.dispatchEvent(new CustomEvent('items-rearranged', { detail: result, bubbles: true, composed: true }));
+ }
+ break;
+ }
+ }
+
+ _onMouseDown(e) {
+ this._longPressTarget = closest(e.composedPath()[0], this.handle || this.selector, true);
+ if (this._longPressTarget) {
+ this._startX = e.detail.x;
+ this._startY = e.detail.y;
+ const path = e.composedPath();
+
+ this._longPressJob = setTimeout(() => {
+ this._setTouchAction(this, 'none');
+ this._setupTarget(path);
+ this._longPressTarget.setAttribute('long-pressed', '');
+ }, this.longPress ? 200 : 0);
+ }
+ }
+
+ onMouseUp() {
+ this._cancelLongPress();
+ setTimeout(() => {
+ this.sorting = false;
});
}
+
+ _setupTarget(path) {
+ this._target = closest(path[0], this.selector, true);
+ if (this._target) {
+ this._target.setAttribute('is-dragged', '');
+ this._rect = this._target.getBoundingClientRect();
+ this._registerSortableElements();
+ this.sorting = true;
+ this._translate3d('0px', this._dy + 'px', '0px', this._target);
+ }
+ }
+
+ _cancelLongPress() {
+ clearTimeout(this._longPressJob);
+ this._longPressJob = false;
+ if (this._longPressTarget) {
+ this._longPressTarget.removeAttribute('long-pressed');
+ }
+ this._setTouchAction(this, 'auto');
+ }
+
+ _moveSiblings() {
+ const targetTop = this._rect.top + this._dy;
+ const targetHeight = this._rect.height;
+
+ const isTrackingDown = () => this._dy > 0;
+ const itemsBeforeTarget = () => {
+ const idx = this._sortables.findIndex(item => item.el === this._target);
+ return this._sortables.slice(0, idx);
+ }
+
+ const itemsAfterTarget = () => {
+ const idx = this._sortables.findIndex(item => item.el === this._target);
+ return this._sortables.slice(idx + 1);
+ }
+
+ if (isTrackingDown()) {
+ const items = itemsAfterTarget();
+
+ for (let i = 0, li = items.length; i < li; ++i) {
+ const item = items[i];
+ if (item.el !== this._target) {
+
+ if (targetTop + targetHeight > item.rect.top + (item.rect.height * 0.5)) {
+ this._translate3d('0px', -targetHeight + 'px', '0px', item.el);
+ }
+
+ if (targetTop + targetHeight < item.rect.top + (item.rect.height * 0.5)) {
+ this._translate3d('0px', '0px', '0px', item.el);
+ }
+ }
+ }
+ } else {
+ const items = itemsBeforeTarget();
+
+ for (let i = 0, li = items.length; i < li; ++i) {
+ const item = items[i];
+ if (item.el !== this._target) {
+ if (targetTop - (item.rect.height * 0.5) > item.rect.top) {
+ this._translate3d('0px', '0px', '0px', item.el);
+ }
+
+ if (targetTop - (item.rect.height * 0.5) < item.rect.top) {
+ this._translate3d('0px', targetHeight + 'px', '0px', item.el);
+ }
+ }
+ }
+ }
+ }
+
+ /**
+ * Finds the next nearest sibling and returns the distance.
+ * @return {Object} Distance and item of the next nearest sibling.
+ */
+ _calcOverlap() {
+ let oldIndex = 0;
+
+ const list = [];
+ for (let i = 0, li = this._sortables.length; i < li; ++i) {
+ if (this._sortables[i].el === this._target) {
+ oldIndex = i;
+ }
+
+ if (this._sortables[i].el !== undefined) {
+ list.push({ top: parseInt(this._sortables[i].el.getBoundingClientRect().top, 10), el: this._sortables[i].el });
+ }
+ }
+
+ list.sort((a, b) => {
+ return a.top - b.top;
+ });
+
+ const newOrder = list.map(item => item.el);
+ const targetIdx = newOrder.findIndex(el => el === this._target);
+
+ return {
+ oldIndex: oldIndex,
+ newIndex: targetIdx,
+ newOrder: newOrder,
+ siblingBefore: targetIdx > 0 ? newOrder[targetIdx - 1] : null,
+ siblingAfter: targetIdx < newOrder.length - 1 ? newOrder[targetIdx + 1] : null,
+ target: this._target
+ };
+ }
+
+ _registerSortableElements() {
+ this._sortables = [];
+ let sortables = Array.from(this.querySelectorAll(this.selector));
+
+ for (let i = 0, li = sortables.length; i < li; ++i) {
+ const el = sortables[i];
+ el.style.position = el.style.position || 'relative';
+ el.style.transition = 'transform 300ms ease-in-out';
+ el.style.zIndex = '0';
+ this._sortables.push({
+ el: el,
+ rect: el.getBoundingClientRect()
+ });
+ }
+
+ this._target.style.zIndex = '9999';
+ this._target.style.transition = '';
+ }
+
+ _resetSortables() {
+ for (var i = 0, li = this._sortables.length; i < li; ++i) {
+ var item = this._sortables[i];
+ item.el.style.transition = '';
+ item.el.style.transform = '';
+ item.el.style.zIndex = '';
+ }
+
+ this._target = null;
+ }
+
+ _translate3d(x, y, z, node) {
+ node = (node || this);
+ const transformText = 'translate3d(' + x + ',' + y + ',' + z + ')';
+ node.style.webkitTransform = transformText;
+ node.style.transform = transformText;
+ }
+
+ _setTouchAction(node, value) {
+ node.style.touchAction = value;
+ }
}
window.customElements.define('tp-sortable', TpSortable);