Move `toleranceElement` into `SortableListOptions`

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 d2607dabb146c502b963cef8e1c7e1cc3ac0ff35..9b298670d4f43a61b13b275faf8f57e10c040476 100644 (file)
--- a/ts/WoltLabSuite/Core/Acp/Form/Builder/Field/Devtools/Project/Instructions.ts
+++ b/ts/WoltLabSuite/Core/Acp/Form/Builder/Field/Devtools/Project/Instructions.ts
@@ -294,9 +294,7 @@ class Instructions {
     new UiSortableList({
       containerId: instructionListContainer.id,
       isSimpleSorting: true,
-      options: {
-        //TODO toleranceElement: "> div",
-      },
+      toleranceElement: "div",
     });
 
     if (instructionsData.type === "update") {

diff --git a/ts/WoltLabSuite/Core/Ui/Poll/Editor.ts b/ts/WoltLabSuite/Core/Ui/Poll/Editor.ts
index 747dd2babf891a509cbbce0c28eb2109b59aaf86..c763363481216d13b18c85399f4fc015ae78c0f7 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/Poll/Editor.ts
+++ b/ts/WoltLabSuite/Core/Ui/Poll/Editor.ts
@@ -122,9 +122,7 @@ class UiPollEditor {
 
     new UiSortableList({
       containerId: containerId,
-      options: {
-        //TODO toleranceElement: "> div",
-      },
+      toleranceElement: "div",
     });
 
     if (this.options.isAjax) {

diff --git a/ts/WoltLabSuite/Core/Ui/Sortable/List.ts b/ts/WoltLabSuite/Core/Ui/Sortable/List.ts
index 71d63e7f8f30dcadbb9a3a89565515c7977fdbb8..35a3db08ea6bb9ee406af22388bddcbca40a61ca 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/Sortable/List.ts
+++ b/ts/WoltLabSuite/Core/Ui/Sortable/List.ts
@@ -20,6 +20,7 @@ interface SortableListOptions {
   offset: number;
   options: Sortable.Options;
   isSimpleSorting: boolean;
+  toleranceElement: string;
   additionalParameters: UnknownObject;
 }
 
@@ -38,15 +39,24 @@ class UiSortableList {
         offset: 0,
         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;
+          fallbackOnBody: true,
+          chosenClass: "sortablePlaceholder",
+          ghostClass: "",
+          draggable: "li:not(.sortableNoSorting)",
+          toleranceElement: "span",
+          filter: (event: Event | TouchEvent, target: HTMLElement) => {
+            const eventTarget = event.target as HTMLElement;
+            if (eventTarget === target) {
+              return false;
+            }
+            if (eventTarget.parentElement !== target) {
+              return false;
+            }
+
+            return eventTarget.nodeName !== this._options.toleranceElement;
           },
-        },
+        } as Sortable.Options,
         isSimpleSorting: false,
         additionalParameters: {},
       },
@@ -58,7 +68,24 @@ class UiSortableList {
       throw new Error(`Container '${this._options.containerId}' not found.`);
     }
 
-    new Sortable(this.#container.querySelector(".sortableList")!, this._options.options);
+    if (this._options.isSimpleSorting) {
+      const sortableList = this.#container.querySelector<HTMLElement>(".sortableList")!;
+      if (sortableList.nodeName === "TBODY") {
+        this._options.options.draggable = "tr:not(.sortableNoSorting)";
+      }
+
+      new Sortable(sortableList, {
+        direction: "vertical",
+        ...this._options.options,
+      });
+    } else {
+      this.#container.querySelectorAll(".sortableList").forEach((list: HTMLElement) => {
+        new Sortable(list, {
+          group: "nested",
+          ...this._options.options,
+        });
+      });
+    }
   }
 }
 

diff --git a/wcfsetup/install/files/acp/templates/useroptionsOptionType.tpl b/wcfsetup/install/files/acp/templates/useroptionsOptionType.tpl
index 32769149bca70988357722a8ad37ba4d1606d23c..326161184509669be90bd720f71ca0a98ecfb0d9 100644 (file)
--- a/wcfsetup/install/files/acp/templates/useroptionsOptionType.tpl
+++ b/wcfsetup/install/files/acp/templates/useroptionsOptionType.tpl
@@ -12,9 +12,7 @@
                                
                                new UiSortableList({
                                        containerId: '{$option->optionName}SortableList',
-                                       options: {
-                                               toleranceElement: ''
-                                       }
+                                       toleranceElement: '',
                                });
                                
                                // re-select the previously selected tab

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 6ff996b89cf0d35259f322375ef8b9d3e3e2da5b..dc6aa25adcb89c92692bbf73bdde0a66f6a7fa57 100644 (file)
--- 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
@@ -205,9 +205,7 @@ define(["require", "exports", "tslib", "../../../../../../Core", "../../../../..
             new List_1.default({
                 containerId: instructionListContainer.id,
                 isSimpleSorting: true,
-                options: {
-                //TODO toleranceElement: "> div",
-                },
+                toleranceElement: "div",
             });
             if (instructionsData.type === "update") {
                 document

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 248e3238397651f1c70f9e7ec6824c55a36a06f3..899411ec9492a2f751f54a9854afb4e06b819e98 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Poll/Editor.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Poll/Editor.js
@@ -65,9 +65,7 @@ define(["require", "exports", "tslib", "../../Core", "../../Language", "../Sorta
             this.createOptionList(pollOptions || []);
             new List_1.default({
                 containerId: containerId,
-                options: {
-                //TODO toleranceElement: "> div",
-                },
+                toleranceElement: "div",
             });
             if (this.options.isAjax) {
                 const element = document.getElementById(this.wysiwygId);

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 c7a6b3d041573b29493f6949b3d7cb046bb61100..ec432202e42654258d65d873e3c94697c23bf6a6 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Sortable/List.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Sortable/List.js
@@ -23,12 +23,21 @@ define(["require", "exports", "tslib", "../../Core", "sortablejs"], function (re
                 offset: 0,
                 options: {
                     animation: 150,
-                    chosenClass: "sortablePlaceholder",
-                    fallbackOnBody: true,
                     swapThreshold: 0.65,
-                    filter: (event, target, sortable) => {
-                        console.log(event, target, sortable);
-                        return true;
+                    fallbackOnBody: true,
+                    chosenClass: "sortablePlaceholder",
+                    ghostClass: "",
+                    draggable: "li:not(.sortableNoSorting)",
+                    toleranceElement: "span",
+                    filter: (event, target) => {
+                        const eventTarget = event.target;
+                        if (eventTarget === target) {
+                            return false;
+                        }
+                        if (eventTarget.parentElement !== target) {
+                            return false;
+                        }
+                        return eventTarget.nodeName !== this._options.toleranceElement;
                     },
                 },
                 isSimpleSorting: false,
@@ -38,7 +47,24 @@ define(["require", "exports", "tslib", "../../Core", "sortablejs"], function (re
             if (!this.#container) {
                 throw new Error(`Container '${this._options.containerId}' not found.`);
             }
-            new sortablejs_1.default(this.#container.querySelector(".sortableList"), this._options.options);
+            if (this._options.isSimpleSorting) {
+                const sortableList = this.#container.querySelector(".sortableList");
+                if (sortableList.nodeName === "TBODY") {
+                    this._options.options.draggable = "tr:not(.sortableNoSorting)";
+                }
+                new sortablejs_1.default(sortableList, {
+                    direction: "vertical",
+                    ...this._options.options,
+                });
+            }
+            else {
+                this.#container.querySelectorAll(".sortableList").forEach((list) => {
+                    new sortablejs_1.default(list, {
+                        group: "nested",
+                        ...this._options.options,
+                    });
+                });
+            }
         }
     }
     return UiSortableList;

diff --git a/wcfsetup/install/files/style/ui/listSortable.scss b/wcfsetup/install/files/style/ui/listSortable.scss
index 6f2fa33459a93db633fba7bb2a544d9d75b60df7..f72130bcaf49df57dc017bb68e147c40171d6247 100644 (file)
--- a/wcfsetup/install/files/style/ui/listSortable.scss
+++ b/wcfsetup/install/files/style/ui/listSortable.scss
@@ -78,13 +78,17 @@
        background-color: var(--wcfStatusWarningBackground);
        border: 1px solid var(--wcfStatusWarningBorder);
        color: var(--wcfStatusWarningText);
-       padding: 10px;
 
        &.sortableInvalidTarget {
                background-color: var(--wcfStatusErrorBackground);
                border-color: var(--wcfStatusErrorBorder);
                color: var(--wcfStatusErrorText);
        }
+
+
+       .sortableNodeLabel {
+               background-color: transparent;
+       }
 }
 
 @include screen-xs {