svelte-dnd-action 0.9.45 → 0.9.46

package/README.md

@@ -170,6 +170,73 @@ If you want to implement your own custom screen-reader alerts, roles and instruc
 -   Mouse drag and drop can be preformed independently of keyboard dragging (as in an item can be dragged with the mouse while in or out of keyboard initiated dragging-mode)
 -   Keyboard drag uses the same `consider` (only on drag start) and `finalize` (every time the item is moved) events but share only some of the `TRIGGERS`. The same handlers should work fine for both.
 
+### Drag Handles Support
+
+Due to popular demand, starting in version 0.9.46 the library exports a wrapper action that greatly improves the ergonomics around using drag handles.
+Notes:
+
+-   A draggable item within a `dragHandleZone` would not be draggable unless it has an element that uses the `dragHandle` action inside (doesn't have to be a direct child but has to be inside the bounding rect of the item).
+-   Don't forget an aria-label on the handle
+    Usage:
+
+```html
+<script>
+    import {dragHandleZone, dragHandle} from "svelte-dnd-action";
+    import {flip} from "svelte/animate";
+
+    let items = [
+        {
+            id: 1,
+            text: "Item 1"
+        },
+        {
+            id: 2,
+            text: "Item 2"
+        },
+        {
+            id: 3,
+            text: "Item 3"
+        }
+    ];
+    const flipDurationMs = 100;
+
+    function handleSort(e) {
+        items = e.detail.items;
+    }
+</script>
+
+<style>
+    div {
+        position: relative;
+        height: 1.5em;
+        width: 10em;
+        text-align: center;
+        border: 1px solid black;
+        margin: 0.2em;
+        padding: 0.3em;
+    }
+    .handle {
+        position: absolute;
+        right: 0;
+        width: 1em;
+        height: 0.5em;
+        background-color: grey;
+    }
+</style>
+
+<h3>Drag Handles</h3>
+<p>Items can be dragged using the grey handles via mouse, touch or keyboard. The text on the items can be selected without starting a drag</p>
+<hr />
+<section use:dragHandleZone="{{ items, flipDurationMs }}" on:consider="{handleSort}" on:finalize="{handleSort}">
+    {#each items as item (item.id)}
+    <div animate:flip="{{ duration: flipDurationMs }}">
+        <div use:dragHandle aria-label="drag-handle for {item.text}" class="handle" />
+        <span>{item.text}</span>
+    </div>
+    {/each}
+</section>
+```
+
 ### Examples and Recipes
 
 -   [Super basic, single list, no animation](https://svelte.dev/repl/bbd709b1a00b453e94658392c97a018a?version=3)
@@ -184,7 +251,7 @@ If you want to implement your own custom screen-reader alerts, roles and instruc
 
 -   [Copy on drag, simple and Dragula like](https://svelte.dev/repl/924b4cc920524065a637fa910fe10193?version=3)
 -   [Copy on drop and a drop area with a single slot](https://svelte.dev/repl/b4e120c45c3e48e49a0d637f0cf097d9?version=3)
--   [Drag handles](https://svelte.dev/repl/4949485c5a8f46e7bdbeb73ed565a9c7?version=3), courtesy of @gleuch
+-   [Drag handles](https://svelte.dev/repl/4949485c5a8f46e7bdbeb73ed565a9c7?version=3), legacy - before version 0.9.46, courtesy of @gleuch
 -   [Interaction (save/get items) with an asynchronous server](https://svelte.dev/repl/964fdac31cb9496da9ded35002300abb?version=3)
 -   [Unsortable lists with custom aria instructions](https://svelte.dev/repl/e020ea1051dc4ae3ac2b697064f234bc?version=3)
 -   [Crazy nesting](https://svelte.dev/repl/fe8c9eca04f9417a94a8b6041df77139?version=3), courtesy of @zahachtah

package/dist/index.d.ts

@@ -16,6 +16,27 @@ export declare function dndzone<T extends Item>(
     destroy: () => void;
 };
 
+/**
+ * A wrapper action to make it easy to work with drag handles.
+ * When using this you must also use the 'dragHandle' action on an element inside each item within the zone.
+ */
+export declare function dragHandleZone<T extends Item>(node: HTMLElement, options: Options<T>): ActionReturn<Options<T>, DndZoneAttributes<T>>;
+export declare function dragHandleZone<T extends Item>(
+    node: HTMLElement,
+    options: Options<T>
+): {
+    update: (newOptions: Options<T>) => void;
+    destroy: () => void;
+};
+
+/**
+ * This should be used to mark drag handles inside items that belong to a 'dragHandleZone'
+ */
+export declare function dragHandle(node: HTMLElement): {
+    update: () => void;
+    destroy: () => void;
+};
+
 export type TransformDraggedElementFunction = (
     element?: HTMLElement, // the dragged element.
     draggedElementData?: Item, // the data of the item from the items array

package/dist/index.js

@@ -2524,6 +2524,117 @@
     }(parseFloat(value));
   }
 
+  function createStore(initialValue) {
+    var _val = initialValue;
+    var subs = new Set();
+    return {
+      get: function get() {
+        return _val;
+      },
+      set: function set(newVal) {
+        _val = newVal;
+        Array.from(subs).forEach(function (cb) {
+          return cb(_val);
+        });
+      },
+      subscribe: function subscribe(cb) {
+        subs.add(cb);
+        cb(_val);
+      },
+      unsubscribe: function unsubscribe(cb) {
+        subs["delete"](cb);
+      }
+    };
+  }
+
+  var isItemsDragDisabled = createStore(true);
+  function getAddedOptions() {
+    var isItemsDragDisabled = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+    return {
+      dragDisabled: isItemsDragDisabled,
+      zoneItemTabIndex: -1
+    };
+  }
+
+  /**
+   * This is an action that wraps around the dndzone action to make it easy to work with drag handles
+   * When using this you must also use the 'dragHandle' action (see below) on an element inside each item within the zone
+   * Credit for the idea and initial implementation goes to @gleuch (Greg Leuch) and @geovie (Georg Vienna)
+   *
+   * @param {HTMLElement} node
+   * @param options - will be passed down to the dndzone
+   * @return {{update: (newOptions: Object) => {}, destroy: () => {}}}
+   */
+  function dragHandleZone(node, options) {
+    var currentOptions = options;
+    var zone = dndzone$2(node, _objectSpread2(_objectSpread2({}, currentOptions), getAddedOptions()));
+    function isItemDisabledCB(isItemsDragDisabled) {
+      zone.update(_objectSpread2(_objectSpread2({}, currentOptions), getAddedOptions(isItemsDragDisabled)));
+    }
+    isItemsDragDisabled.subscribe(isItemDisabledCB);
+    function consider(e) {
+      var _e$detail$info = e.detail.info,
+        source = _e$detail$info.source,
+        trigger = _e$detail$info.trigger;
+      // Ensure dragging is stopped on drag finish via keyboard
+      if (source === SOURCES.KEYBOARD && trigger === TRIGGERS.DRAG_STOPPED) {
+        isItemsDragDisabled.set(true);
+      }
+    }
+    function finalize(e) {
+      var source = e.detail.info.source;
+      // Ensure dragging is stopped on drag finish via pointer (mouse, touch)
+      if (source === SOURCES.POINTER) {
+        isItemsDragDisabled.set(true);
+      }
+    }
+    node.addEventListener("consider", consider);
+    node.addEventListener("finalize", finalize);
+    return {
+      update: function update(newOptions) {
+        currentOptions = newOptions;
+        zone.update(_objectSpread2(_objectSpread2({}, currentOptions), getAddedOptions(isItemsDragDisabled.get())));
+      },
+      destroy: function destroy() {
+        node.removeEventListener("consider", consider);
+        node.removeEventListener("finalize", finalize);
+        isItemsDragDisabled.unsubscribe(isItemDisabledCB);
+      }
+    };
+  }
+
+  /**
+   * This should be used to mark drag handles inside items that belong to a 'dragHandleZone' (see above)
+   * @param {HTMLElement} handle
+   * @return {{update: *, destroy: *}}
+   */
+  function dragHandle(handle) {
+    handle.setAttribute("role", "button");
+    function startDrag(e) {
+      // preventing default to prevent lag on touch devices (because of the browser checking for screen scrolling)
+      e.preventDefault();
+      isItemsDragDisabled.set(false);
+    }
+    function handleKeyDown(e) {
+      if (e.key === "Enter" || e.key === " ") isItemsDragDisabled.set(false);
+    }
+    isItemsDragDisabled.subscribe(function (disabled) {
+      handle.tabIndex = disabled ? 0 : -1;
+      handle.style.cursor = disabled ? "grab" : "grabbing";
+    });
+    handle.addEventListener("mousedown", startDrag);
+    handle.addEventListener("touchstart", startDrag);
+    handle.addEventListener("keydown", handleKeyDown);
+    return {
+      update: function update() {},
+      destroy: function destroy() {
+        handle.removeEventListener("mousedown", startDrag);
+        handle.removeEventListener("touchstart", startDrag);
+        handle.removeEventListener("keydown", handleKeyDown);
+      }
+    };
+  }
+
   exports.DRAGGED_ELEMENT_ID = DRAGGED_ELEMENT_ID;
   exports.FEATURE_FLAG_NAMES = FEATURE_FLAG_NAMES;
   exports.SHADOW_ITEM_MARKER_PROPERTY_NAME = SHADOW_ITEM_MARKER_PROPERTY_NAME;
@@ -2532,6 +2643,8 @@
   exports.TRIGGERS = TRIGGERS;
   exports.alertToScreenReader = alertToScreenReader;
   exports.dndzone = dndzone$2;
+  exports.dragHandle = dragHandle;
+  exports.dragHandleZone = dragHandleZone;
   exports.overrideItemIdKeyNameBeforeInitialisingDndZones = overrideItemIdKeyNameBeforeInitialisingDndZones;
   exports.setDebugMode = setDebugMode;
   exports.setFeatureFlag = setFeatureFlag;

package/dist/index.mjs

@@ -2518,4 +2518,115 @@ function isInt(value) {
   }(parseFloat(value));
 }
 
-export { DRAGGED_ELEMENT_ID, FEATURE_FLAG_NAMES, SHADOW_ITEM_MARKER_PROPERTY_NAME, SHADOW_PLACEHOLDER_ITEM_ID, SOURCES, TRIGGERS, alertToScreenReader, dndzone$2 as dndzone, overrideItemIdKeyNameBeforeInitialisingDndZones, setDebugMode, setFeatureFlag };
+function createStore(initialValue) {
+  var _val = initialValue;
+  var subs = new Set();
+  return {
+    get: function get() {
+      return _val;
+    },
+    set: function set(newVal) {
+      _val = newVal;
+      Array.from(subs).forEach(function (cb) {
+        return cb(_val);
+      });
+    },
+    subscribe: function subscribe(cb) {
+      subs.add(cb);
+      cb(_val);
+    },
+    unsubscribe: function unsubscribe(cb) {
+      subs["delete"](cb);
+    }
+  };
+}
+
+var isItemsDragDisabled = createStore(true);
+function getAddedOptions() {
+  var isItemsDragDisabled = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+  return {
+    dragDisabled: isItemsDragDisabled,
+    zoneItemTabIndex: -1
+  };
+}
+
+/**
+ * This is an action that wraps around the dndzone action to make it easy to work with drag handles
+ * When using this you must also use the 'dragHandle' action (see below) on an element inside each item within the zone
+ * Credit for the idea and initial implementation goes to @gleuch (Greg Leuch) and @geovie (Georg Vienna)
+ *
+ * @param {HTMLElement} node
+ * @param options - will be passed down to the dndzone
+ * @return {{update: (newOptions: Object) => {}, destroy: () => {}}}
+ */
+function dragHandleZone(node, options) {
+  var currentOptions = options;
+  var zone = dndzone$2(node, _objectSpread2(_objectSpread2({}, currentOptions), getAddedOptions()));
+  function isItemDisabledCB(isItemsDragDisabled) {
+    zone.update(_objectSpread2(_objectSpread2({}, currentOptions), getAddedOptions(isItemsDragDisabled)));
+  }
+  isItemsDragDisabled.subscribe(isItemDisabledCB);
+  function consider(e) {
+    var _e$detail$info = e.detail.info,
+      source = _e$detail$info.source,
+      trigger = _e$detail$info.trigger;
+    // Ensure dragging is stopped on drag finish via keyboard
+    if (source === SOURCES.KEYBOARD && trigger === TRIGGERS.DRAG_STOPPED) {
+      isItemsDragDisabled.set(true);
+    }
+  }
+  function finalize(e) {
+    var source = e.detail.info.source;
+    // Ensure dragging is stopped on drag finish via pointer (mouse, touch)
+    if (source === SOURCES.POINTER) {
+      isItemsDragDisabled.set(true);
+    }
+  }
+  node.addEventListener("consider", consider);
+  node.addEventListener("finalize", finalize);
+  return {
+    update: function update(newOptions) {
+      currentOptions = newOptions;
+      zone.update(_objectSpread2(_objectSpread2({}, currentOptions), getAddedOptions(isItemsDragDisabled.get())));
+    },
+    destroy: function destroy() {
+      node.removeEventListener("consider", consider);
+      node.removeEventListener("finalize", finalize);
+      isItemsDragDisabled.unsubscribe(isItemDisabledCB);
+    }
+  };
+}
+
+/**
+ * This should be used to mark drag handles inside items that belong to a 'dragHandleZone' (see above)
+ * @param {HTMLElement} handle
+ * @return {{update: *, destroy: *}}
+ */
+function dragHandle(handle) {
+  handle.setAttribute("role", "button");
+  function startDrag(e) {
+    // preventing default to prevent lag on touch devices (because of the browser checking for screen scrolling)
+    e.preventDefault();
+    isItemsDragDisabled.set(false);
+  }
+  function handleKeyDown(e) {
+    if (e.key === "Enter" || e.key === " ") isItemsDragDisabled.set(false);
+  }
+  isItemsDragDisabled.subscribe(function (disabled) {
+    handle.tabIndex = disabled ? 0 : -1;
+    handle.style.cursor = disabled ? "grab" : "grabbing";
+  });
+  handle.addEventListener("mousedown", startDrag);
+  handle.addEventListener("touchstart", startDrag);
+  handle.addEventListener("keydown", handleKeyDown);
+  return {
+    update: function update() {},
+    destroy: function destroy() {
+      handle.removeEventListener("mousedown", startDrag);
+      handle.removeEventListener("touchstart", startDrag);
+      handle.removeEventListener("keydown", handleKeyDown);
+    }
+  };
+}
+
+export { DRAGGED_ELEMENT_ID, FEATURE_FLAG_NAMES, SHADOW_ITEM_MARKER_PROPERTY_NAME, SHADOW_PLACEHOLDER_ITEM_ID, SOURCES, TRIGGERS, alertToScreenReader, dndzone$2 as dndzone, dragHandle, dragHandleZone, overrideItemIdKeyNameBeforeInitialisingDndZones, setDebugMode, setFeatureFlag };

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "svelte-dnd-action",
     "description": "*An awesome drag and drop library for Svelte 3 and 4 (not using the browser's built-in dnd, thanks god): Rich animations, nested containers, touch support and more *",
-    "version": "0.9.45",
+    "version": "0.9.46",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/isaacHagoel/svelte-dnd-action.git"

package/src/index.js

@@ -1,4 +1,5 @@
 export {dndzone} from "./action.js";
+export {dragHandleZone, dragHandle} from "./wrappers/withDragHandles";
 export {alertToScreenReader} from "./helpers/aria";
 export {
     TRIGGERS,

package/src/wrappers/simpleStore.js

@@ -0,0 +1,18 @@
+export function createStore(initialValue) {
+    let _val = initialValue;
+    const subs = new Set();
+    return {
+        get: () => _val,
+        set: newVal => {
+            _val = newVal;
+            Array.from(subs).forEach(cb => cb(_val));
+        },
+        subscribe: cb => {
+            subs.add(cb);
+            cb(_val);
+        },
+        unsubscribe: cb => {
+            subs.delete(cb);
+        }
+    };
+}

package/src/wrappers/withDragHandles.js

@@ -0,0 +1,108 @@
+import {SOURCES, TRIGGERS} from "../constants";
+import {dndzone} from "../action";
+import {createStore} from "./simpleStore";
+
+const isItemsDragDisabled = createStore(true);
+
+function getAddedOptions(isItemsDragDisabled = true) {
+    return {
+        dragDisabled: isItemsDragDisabled,
+        zoneItemTabIndex: -1
+    };
+}
+
+/**
+ * This is an action that wraps around the dndzone action to make it easy to work with drag handles
+ * When using this you must also use the 'dragHandle' action (see below) on an element inside each item within the zone
+ * Credit for the idea and initial implementation goes to @gleuch (Greg Leuch) and @geovie (Georg Vienna)
+ *
+ * @param {HTMLElement} node
+ * @param options - will be passed down to the dndzone
+ * @return {{update: (newOptions: Object) => {}, destroy: () => {}}}
+ */
+export function dragHandleZone(node, options) {
+    let currentOptions = options;
+    const zone = dndzone(node, {
+        ...currentOptions,
+        ...getAddedOptions()
+    });
+    function isItemDisabledCB(isItemsDragDisabled) {
+        zone.update({
+            ...currentOptions,
+            ...getAddedOptions(isItemsDragDisabled)
+        });
+    }
+    isItemsDragDisabled.subscribe(isItemDisabledCB);
+    function consider(e) {
+        const {
+            info: {source, trigger}
+        } = e.detail;
+        // Ensure dragging is stopped on drag finish via keyboard
+        if (source === SOURCES.KEYBOARD && trigger === TRIGGERS.DRAG_STOPPED) {
+            isItemsDragDisabled.set(true);
+        }
+    }
+
+    function finalize(e) {
+        const {
+            info: {source}
+        } = e.detail;
+        // Ensure dragging is stopped on drag finish via pointer (mouse, touch)
+        if (source === SOURCES.POINTER) {
+            isItemsDragDisabled.set(true);
+        }
+    }
+
+    node.addEventListener("consider", consider);
+    node.addEventListener("finalize", finalize);
+
+    return {
+        update: newOptions => {
+            currentOptions = newOptions;
+            zone.update({
+                ...currentOptions,
+                ...getAddedOptions(isItemsDragDisabled.get())
+            });
+        },
+        destroy: () => {
+            node.removeEventListener("consider", consider);
+            node.removeEventListener("finalize", finalize);
+            isItemsDragDisabled.unsubscribe(isItemDisabledCB);
+        }
+    };
+}
+
+/**
+ * This should be used to mark drag handles inside items that belong to a 'dragHandleZone' (see above)
+ * @param {HTMLElement} handle
+ * @return {{update: *, destroy: *}}
+ */
+export function dragHandle(handle) {
+    handle.setAttribute("role", "button");
+
+    function startDrag(e) {
+        // preventing default to prevent lag on touch devices (because of the browser checking for screen scrolling)
+        e.preventDefault();
+        isItemsDragDisabled.set(false);
+    }
+    function handleKeyDown(e) {
+        if (e.key === "Enter" || e.key === " ") isItemsDragDisabled.set(false);
+    }
+
+    isItemsDragDisabled.subscribe(disabled => {
+        handle.tabIndex = disabled ? 0 : -1;
+        handle.style.cursor = disabled ? "grab" : "grabbing";
+    });
+
+    handle.addEventListener("mousedown", startDrag);
+    handle.addEventListener("touchstart", startDrag);
+    handle.addEventListener("keydown", handleKeyDown);
+    return {
+        update: () => {},
+        destroy: () => {
+            handle.removeEventListener("mousedown", startDrag);
+            handle.removeEventListener("touchstart", startDrag);
+            handle.removeEventListener("keydown", handleKeyDown);
+        }
+    };
+}