New implementation without a third-party lib.
This commit is contained in:
parent
1ad5f6bb35
commit
a3a8065c6a
117
package-lock.json
generated
117
package-lock.json
generated
@ -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"
|
||||
}
|
||||
|
||||
@ -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"
|
||||
}
|
||||
|
||||
219
tp-sortable.js
219
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`
|
||||
<slot name="list"></slot>
|
||||
<slot></slot>
|
||||
`;
|
||||
}
|
||||
|
||||
@ -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);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user