From 0c7866d85005a883387623919eb85e87247f440a Mon Sep 17 00:00:00 2001 From: Cyperghost Date: Tue, 26 Nov 2024 12:50:11 +0100 Subject: [PATCH] Use sortablejs --- .../Field/Devtools/Project/Instructions.ts | 2 +- ts/WoltLabSuite/Core/Ui/Poll/Editor.ts | 2 +- ts/WoltLabSuite/Core/Ui/Sortable/List.ts | 58 ++++++------------- .../Field/Devtools/Project/Instructions.js | 2 +- .../js/WoltLabSuite/Core/Ui/Poll/Editor.js | 2 +- .../js/WoltLabSuite/Core/Ui/Sortable/List.js | 46 ++++++--------- wcfsetup/install/files/js/require.config.js | 1 + 7 files changed, 40 insertions(+), 73 deletions(-) diff --git a/ts/WoltLabSuite/Core/Acp/Form/Builder/Field/Devtools/Project/Instructions.ts b/ts/WoltLabSuite/Core/Acp/Form/Builder/Field/Devtools/Project/Instructions.ts index e6f626cf68..d2607dabb1 100644 --- a/ts/WoltLabSuite/Core/Acp/Form/Builder/Field/Devtools/Project/Instructions.ts +++ b/ts/WoltLabSuite/Core/Acp/Form/Builder/Field/Devtools/Project/Instructions.ts @@ -295,7 +295,7 @@ class Instructions { containerId: instructionListContainer.id, isSimpleSorting: true, options: { - toleranceElement: "> div", + //TODO toleranceElement: "> div", }, }); diff --git a/ts/WoltLabSuite/Core/Ui/Poll/Editor.ts b/ts/WoltLabSuite/Core/Ui/Poll/Editor.ts index 56dc74f2c9..747dd2babf 100644 --- a/ts/WoltLabSuite/Core/Ui/Poll/Editor.ts +++ b/ts/WoltLabSuite/Core/Ui/Poll/Editor.ts @@ -123,7 +123,7 @@ class UiPollEditor { new UiSortableList({ containerId: containerId, options: { - toleranceElement: "> div", + //TODO toleranceElement: "> div", }, }); diff --git a/ts/WoltLabSuite/Core/Ui/Sortable/List.ts b/ts/WoltLabSuite/Core/Ui/Sortable/List.ts index e2689da042..71d63e7f8f 100644 --- a/ts/WoltLabSuite/Core/Ui/Sortable/List.ts +++ b/ts/WoltLabSuite/Core/Ui/Sortable/List.ts @@ -8,7 +8,7 @@ */ import * as Core from "../../Core"; -import * as UiScreen from "../Screen"; +import Sortable from "sortablejs"; interface UnknownObject { [key: string]: unknown; @@ -18,13 +18,14 @@ interface SortableListOptions { containerId: string; className: string; offset: number; - options: UnknownObject; + options: Sortable.Options; isSimpleSorting: boolean; additionalParameters: UnknownObject; } class UiSortableList { protected readonly _options: SortableListOptions; + readonly #container: HTMLElement | null; /** * Initializes the sortable list controller. @@ -35,52 +36,29 @@ class UiSortableList { containerId: "", className: "", offset: 0, - options: {}, + options: { + animation: 150, + chosenClass: "sortablePlaceholder", + fallbackOnBody: true, + swapThreshold: 0.65, + filter: (event: Event | TouchEvent, target: HTMLElement, sortable: Sortable) => { + //TODO + console.log(event, target, sortable); + return true; + }, + }, isSimpleSorting: false, additionalParameters: {}, }, opts, ) as SortableListOptions; - UiScreen.on("screen-sm-md", { - match: () => this._enable(true), - unmatch: () => this._disable(), - setup: () => this._enable(true), - }); - - UiScreen.on("screen-lg", { - match: () => this._enable(false), - unmatch: () => this._disable(), - setup: () => this._enable(false), - }); - } - - /** - * Enables sorting with an optional sort handle. - */ - protected _enable(hasHandle: boolean): void { - const options = this._options.options; - if (hasHandle) { - options.handle = ".sortableNodeHandle"; + this.#container = document.getElementById(this._options.containerId); + if (!this.#container) { + throw new Error(`Container '${this._options.containerId}' not found.`); } - new window.WCF.Sortable.List( - this._options.containerId, - this._options.className, - this._options.offset, - options, - this._options.isSimpleSorting, - this._options.additionalParameters, - ); - } - - /** - * Disables sorting for registered containers. - */ - protected _disable(): void { - window - .jQuery(`#${this._options.containerId} .sortableList`) - [this._options.isSimpleSorting ? "sortable" : "nestedSortable"]("destroy"); + new Sortable(this.#container.querySelector(".sortableList")!, this._options.options); } } diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Form/Builder/Field/Devtools/Project/Instructions.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Form/Builder/Field/Devtools/Project/Instructions.js index 63ee145b64..6ff996b89c 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Form/Builder/Field/Devtools/Project/Instructions.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Form/Builder/Field/Devtools/Project/Instructions.js @@ -206,7 +206,7 @@ define(["require", "exports", "tslib", "../../../../../../Core", "../../../../.. containerId: instructionListContainer.id, isSimpleSorting: true, options: { - toleranceElement: "> div", + //TODO toleranceElement: "> div", }, }); if (instructionsData.type === "update") { diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Poll/Editor.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Poll/Editor.js index 96ff25fe48..248e323839 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Poll/Editor.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Poll/Editor.js @@ -66,7 +66,7 @@ define(["require", "exports", "tslib", "../../Core", "../../Language", "../Sorta new List_1.default({ containerId: containerId, options: { - toleranceElement: "> div", + //TODO toleranceElement: "> div", }, }); if (this.options.isAjax) { diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Sortable/List.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Sortable/List.js index b9f6b16c37..c7a6b3d041 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Sortable/List.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Sortable/List.js @@ -6,12 +6,13 @@ * @license GNU Lesser General Public License * @woltlabExcludeBundle tiny */ -define(["require", "exports", "tslib", "../../Core", "../Screen"], function (require, exports, tslib_1, Core, UiScreen) { +define(["require", "exports", "tslib", "../../Core", "sortablejs"], function (require, exports, tslib_1, Core, sortablejs_1) { "use strict"; Core = tslib_1.__importStar(Core); - UiScreen = tslib_1.__importStar(UiScreen); + sortablejs_1 = tslib_1.__importDefault(sortablejs_1); class UiSortableList { _options; + #container; /** * Initializes the sortable list controller. */ @@ -20,37 +21,24 @@ define(["require", "exports", "tslib", "../../Core", "../Screen"], function (req containerId: "", className: "", offset: 0, - options: {}, + options: { + animation: 150, + chosenClass: "sortablePlaceholder", + fallbackOnBody: true, + swapThreshold: 0.65, + filter: (event, target, sortable) => { + console.log(event, target, sortable); + return true; + }, + }, isSimpleSorting: false, additionalParameters: {}, }, opts); - UiScreen.on("screen-sm-md", { - match: () => this._enable(true), - unmatch: () => this._disable(), - setup: () => this._enable(true), - }); - UiScreen.on("screen-lg", { - match: () => this._enable(false), - unmatch: () => this._disable(), - setup: () => this._enable(false), - }); - } - /** - * Enables sorting with an optional sort handle. - */ - _enable(hasHandle) { - const options = this._options.options; - if (hasHandle) { - options.handle = ".sortableNodeHandle"; + this.#container = document.getElementById(this._options.containerId); + if (!this.#container) { + throw new Error(`Container '${this._options.containerId}' not found.`); } - new window.WCF.Sortable.List(this._options.containerId, this._options.className, this._options.offset, options, this._options.isSimpleSorting, this._options.additionalParameters); - } - /** - * Disables sorting for registered containers. - */ - _disable() { - window - .jQuery(`#${this._options.containerId} .sortableList`)[this._options.isSimpleSorting ? "sortable" : "nestedSortable"]("destroy"); + new sortablejs_1.default(this.#container.querySelector(".sortableList"), this._options.options); } } return UiSortableList; diff --git a/wcfsetup/install/files/js/require.config.js b/wcfsetup/install/files/js/require.config.js index b48080d70c..c4531f8476 100644 --- a/wcfsetup/install/files/js/require.config.js +++ b/wcfsetup/install/files/js/require.config.js @@ -18,6 +18,7 @@ requirejs.config({ "ckeditor5-translation": "3rdParty/ckeditor/translations", "diff-match-patch": "3rdParty/diff-match-patch/diff_match_patch.min", "emoji-picker-element": "3rdParty/emoji-picker-element.min", + sortablejs: "3rdParty/Sortable.min", }, packages: [ { -- 2.20.1