svelte-dnd-action 0.9.11 → 0.9.15

package/README.md

@@ -189,6 +189,7 @@ If you want to implement your own custom screen-reader alerts, roles and instruc
 -   [Generic List Component (Alternative to Slots)](https://svelte.dev/repl/028674733f67409c94bd52995d5906f1?version=3.31.0)
 -   [Maitaining internal scroll poisition on scrollable dragabble](https://svelte.dev/repl/eb2f5988bd2f46488810606c1fb13392?version=3.29.4)
 -   [Scrabble like board using over a 100 single slot dnd-zones](https://svelte.dev/repl/ed2e138417094281be6db1aef23d7859?version=3.37.0)
+-   [Select multiple elements to drag (multi-drag) with mouse or keyboard](https://svelte.dev/repl/c4eb917bb8df42c4b17402a7dda54856?version=3.24.1)
 
 -   [Fade in/out but without using Svelte transitions](https://svelte.dev/repl/3f1e68203ef140969a8240eba3475a8d?version=3.24.1)
 -   [Nested fade in/out without using Svelte transitions](https://svelte.dev/repl/49b09aedfe0543b4bc8f575c8dbf9a53?version=3.24.1)
@@ -205,7 +206,7 @@ If you want to implement your own custom screen-reader alerts, roles and instruc
 -   The host component must refresh the items that are passed in to the custom-action when receiving consider and finalize events (do not omit any handler).
 -   FYI, the library assumes it is okay to add a temporary item to the items list in any of the dnd-zones while an element is dragged around.
 -   If you want dragged items to be able to scroll the container, make sure the scroll-container (the element with overflow:scroll) is the dnd-zone (the element decorated with this custom action)
--   Svelte's built-in transitions might not play nice with this library. Luckily, it is an easy issue to work around. There are examples below.
+-   Svelte's built-in transitions might not play nice with this library. Luckily, it is an easy issue to work around. There are examples above.
 
 ### Overriding the item id key name
 

package/dist/index.d.ts

@@ -27,7 +27,7 @@ export interface Options {
     morphDisabled?: boolean;
     dropFromOthersDisabled?: boolean;
     zoneTabIndex?: number; // set the tabindex of the list container when not dragging
-    dropTargetClasses?: [string];
+    dropTargetClasses?: string[];
     dropTargetStyle?: Record<string, string>;
     transformDraggedElement?: TransformDraggedElementFunction;
     autoAriaDisabled?: boolean;

package/dist/index.js

@@ -599,6 +599,17 @@
     dzToShadowIndexToRect = new Map();
   }
   resetIndexesCache();
+  /**
+   * Resets the cache that allows for smarter "would be index" resolution for a specific dropzone, should be called after the zone was scrolled
+   * @param {HTMLElement} dz
+   */
+
+  function resetIndexesCacheForDz(dz) {
+    printDebug(function () {
+      return "resetting indexes cache for dz";
+    });
+    dzToShadowIndexToRect["delete"](dz);
+  }
   /**
    * Caches the coordinates of the shadow element when it's in a certain index in a certain dropzone.
    * Helpful in order to determine "would be index" more effectively
@@ -931,6 +942,7 @@
       try {
         for (_iterator.s(); !(_step = _iterator.n()).done;) {
           var dz = _step.value;
+          if (scrolled) resetIndexesCacheForDz(lastDropZoneFound);
           var indexObj = findWouldBeIndex(draggedEl, dz);
 
           if (indexObj === null) {
@@ -1008,7 +1020,8 @@
 
   function loop() {
     if (mousePosition) {
-      scrollIfNeeded$1(mousePosition, document.documentElement);
+      var scrolled = scrollIfNeeded$1(mousePosition, document.documentElement);
+      if (scrolled) resetIndexesCache();
     }
 
     next$1 = window.setTimeout(loop, INTERVAL_MS$1);
@@ -1942,7 +1955,12 @@
   var alertsDiv;
 
   function initAriaOnBrowser() {
-    // setting the dynamic alerts
+    if (alertsDiv) {
+      // it is already initialized
+      return;
+    } // setting the dynamic alerts
+
+
     alertsDiv = document.createElement("div");
 
     (function initAlertsDiv() {
@@ -1986,6 +2004,20 @@
 
     return _objectSpread2({}, INSTRUCTION_IDs);
   }
+  /**
+   * Removes all the artifacts (dom elements) added by this module
+   */
+
+  function destroyAria() {
+    if (isOnServer || !alertsDiv) return;
+    Object.keys(ID_TO_INSTRUCTION).forEach(function (id) {
+      var _document$getElementB;
+
+      return (_document$getElementB = document.getElementById(id)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.remove();
+    });
+    alertsDiv.remove();
+    alertsDiv = undefined;
+  }
 
   function instructionToHiddenDiv(id, txt) {
     var div = document.createElement("div");
@@ -2003,6 +2035,12 @@
 
 
   function alertToScreenReader(txt) {
+    if (isOnServer) return;
+
+    if (!alertsDiv) {
+      initAriaOnBrowser();
+    }
+
     alertsDiv.innerHTML = "";
     var alertText = document.createTextNode(txt);
     alertsDiv.appendChild(alertText); // this is needed for Safari
@@ -2033,7 +2071,7 @@
    * maybe keep focus on the last dragged item upon drop?
    */
 
-  var INSTRUCTION_IDs$1 = initAria();
+  var INSTRUCTION_IDs$1;
   /* drop-zones registration management */
 
   function registerDropZone$1(dropZoneEl, type) {
@@ -2045,6 +2083,7 @@
       printDebug(function () {
         return "adding global keydown and click handlers";
       });
+      INSTRUCTION_IDs$1 = initAria();
       window.addEventListener("keydown", globalKeyDownHandler);
       window.addEventListener("click", globalClickHandler);
     }
@@ -2081,6 +2120,8 @@
       });
       window.removeEventListener("keydown", globalKeyDownHandler);
       window.removeEventListener("click", globalClickHandler);
+      INSTRUCTION_IDs$1 = undefined;
+      destroyAria();
     }
   }
 
@@ -2398,18 +2439,19 @@
       config.dropTargetClasses = dropTargetClasses;
       config.autoAriaDisabled = autoAriaDisabled;
 
-      if (!autoAriaDisabled) {
-        node.setAttribute("aria-disabled", dragDisabled);
-        node.setAttribute("role", "list");
-        node.setAttribute("aria-describedby", dragDisabled ? INSTRUCTION_IDs$1.DND_ZONE_DRAG_DISABLED : INSTRUCTION_IDs$1.DND_ZONE_ACTIVE);
-      }
-
       if (config.type && newType !== config.type) {
         unregisterDropZone$1(node, config.type);
       }
 
       config.type = newType;
       registerDropZone$1(node, newType);
+
+      if (!autoAriaDisabled) {
+        node.setAttribute("aria-disabled", dragDisabled);
+        node.setAttribute("role", "list");
+        node.setAttribute("aria-describedby", dragDisabled ? INSTRUCTION_IDs$1.DND_ZONE_DRAG_DISABLED : INSTRUCTION_IDs$1.DND_ZONE_ACTIVE);
+      }
+
       dzToConfig$1.set(node, config);
 
       if (isDragging) {

package/dist/index.mjs

@@ -593,6 +593,17 @@ function resetIndexesCache() {
   dzToShadowIndexToRect = new Map();
 }
 resetIndexesCache();
+/**
+ * Resets the cache that allows for smarter "would be index" resolution for a specific dropzone, should be called after the zone was scrolled
+ * @param {HTMLElement} dz
+ */
+
+function resetIndexesCacheForDz(dz) {
+  printDebug(function () {
+    return "resetting indexes cache for dz";
+  });
+  dzToShadowIndexToRect["delete"](dz);
+}
 /**
  * Caches the coordinates of the shadow element when it's in a certain index in a certain dropzone.
  * Helpful in order to determine "would be index" more effectively
@@ -925,6 +936,7 @@ function observe(draggedEl, dropZones) {
     try {
       for (_iterator.s(); !(_step = _iterator.n()).done;) {
         var dz = _step.value;
+        if (scrolled) resetIndexesCacheForDz(lastDropZoneFound);
         var indexObj = findWouldBeIndex(draggedEl, dz);
 
         if (indexObj === null) {
@@ -1002,7 +1014,8 @@ var next$1;
 
 function loop() {
   if (mousePosition) {
-    scrollIfNeeded$1(mousePosition, document.documentElement);
+    var scrolled = scrollIfNeeded$1(mousePosition, document.documentElement);
+    if (scrolled) resetIndexesCache();
   }
 
   next$1 = window.setTimeout(loop, INTERVAL_MS$1);
@@ -1936,7 +1949,12 @@ var ALERT_DIV_ID = "dnd-action-aria-alert";
 var alertsDiv;
 
 function initAriaOnBrowser() {
-  // setting the dynamic alerts
+  if (alertsDiv) {
+    // it is already initialized
+    return;
+  } // setting the dynamic alerts
+
+
   alertsDiv = document.createElement("div");
 
   (function initAlertsDiv() {
@@ -1980,6 +1998,20 @@ function initAria() {
 
   return _objectSpread2({}, INSTRUCTION_IDs);
 }
+/**
+ * Removes all the artifacts (dom elements) added by this module
+ */
+
+function destroyAria() {
+  if (isOnServer || !alertsDiv) return;
+  Object.keys(ID_TO_INSTRUCTION).forEach(function (id) {
+    var _document$getElementB;
+
+    return (_document$getElementB = document.getElementById(id)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.remove();
+  });
+  alertsDiv.remove();
+  alertsDiv = undefined;
+}
 
 function instructionToHiddenDiv(id, txt) {
   var div = document.createElement("div");
@@ -1997,6 +2029,12 @@ function instructionToHiddenDiv(id, txt) {
 
 
 function alertToScreenReader(txt) {
+  if (isOnServer) return;
+
+  if (!alertsDiv) {
+    initAriaOnBrowser();
+  }
+
   alertsDiv.innerHTML = "";
   var alertText = document.createTextNode(txt);
   alertsDiv.appendChild(alertText); // this is needed for Safari
@@ -2027,7 +2065,7 @@ var typeToDropZones$1 = new Map();
  * maybe keep focus on the last dragged item upon drop?
  */
 
-var INSTRUCTION_IDs$1 = initAria();
+var INSTRUCTION_IDs$1;
 /* drop-zones registration management */
 
 function registerDropZone$1(dropZoneEl, type) {
@@ -2039,6 +2077,7 @@ function registerDropZone$1(dropZoneEl, type) {
     printDebug(function () {
       return "adding global keydown and click handlers";
     });
+    INSTRUCTION_IDs$1 = initAria();
     window.addEventListener("keydown", globalKeyDownHandler);
     window.addEventListener("click", globalClickHandler);
   }
@@ -2075,6 +2114,8 @@ function unregisterDropZone$1(dropZoneEl, type) {
     });
     window.removeEventListener("keydown", globalKeyDownHandler);
     window.removeEventListener("click", globalClickHandler);
+    INSTRUCTION_IDs$1 = undefined;
+    destroyAria();
   }
 }
 
@@ -2392,18 +2433,19 @@ function dndzone$1(node, options) {
     config.dropTargetClasses = dropTargetClasses;
     config.autoAriaDisabled = autoAriaDisabled;
 
-    if (!autoAriaDisabled) {
-      node.setAttribute("aria-disabled", dragDisabled);
-      node.setAttribute("role", "list");
-      node.setAttribute("aria-describedby", dragDisabled ? INSTRUCTION_IDs$1.DND_ZONE_DRAG_DISABLED : INSTRUCTION_IDs$1.DND_ZONE_ACTIVE);
-    }
-
     if (config.type && newType !== config.type) {
       unregisterDropZone$1(node, config.type);
     }
 
     config.type = newType;
     registerDropZone$1(node, newType);
+
+    if (!autoAriaDisabled) {
+      node.setAttribute("aria-disabled", dragDisabled);
+      node.setAttribute("role", "list");
+      node.setAttribute("aria-describedby", dragDisabled ? INSTRUCTION_IDs$1.DND_ZONE_DRAG_DISABLED : INSTRUCTION_IDs$1.DND_ZONE_ACTIVE);
+    }
+
     dzToConfig$1.set(node, config);
 
     if (isDragging) {

package/package.json

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

package/src/helpers/aria.js

@@ -13,6 +13,10 @@ const ALERT_DIV_ID = "dnd-action-aria-alert";
 let alertsDiv;
 
 function initAriaOnBrowser() {
+    if (alertsDiv) {
+        // it is already initialized
+        return;
+    }
     // setting the dynamic alerts
     alertsDiv = document.createElement("div");
     (function initAlertsDiv() {
@@ -47,6 +51,17 @@ export function initAria() {
     }
     return {...INSTRUCTION_IDs};
 }
+
+/**
+ * Removes all the artifacts (dom elements) added by this module
+ */
+export function destroyAria() {
+    if (isOnServer || !alertsDiv) return;
+    Object.keys(ID_TO_INSTRUCTION).forEach(id => document.getElementById(id)?.remove());
+    alertsDiv.remove();
+    alertsDiv = undefined;
+}
+
 function instructionToHiddenDiv(id, txt) {
     const div = document.createElement("div");
     div.id = id;
@@ -62,6 +77,10 @@ function instructionToHiddenDiv(id, txt) {
  * @param {string} txt
  */
 export function alertToScreenReader(txt) {
+    if (isOnServer) return;
+    if (!alertsDiv) {
+        initAriaOnBrowser();
+    }
     alertsDiv.innerHTML = "";
     const alertText = document.createTextNode(txt);
     alertsDiv.appendChild(alertText);

package/src/helpers/listUtil.js

@@ -12,6 +12,15 @@ export function resetIndexesCache() {
 }
 resetIndexesCache();
 
+/**
+ * Resets the cache that allows for smarter "would be index" resolution for a specific dropzone, should be called after the zone was scrolled
+ * @param {HTMLElement} dz
+ */
+export function resetIndexesCacheForDz(dz) {
+    printDebug(() => "resetting indexes cache for dz");
+    dzToShadowIndexToRect.delete(dz);
+}
+
 /**
  * Caches the coordinates of the shadow element when it's in a certain index in a certain dropzone.
  * Helpful in order to determine "would be index" more effectively

package/src/helpers/observer.js

@@ -1,4 +1,4 @@
-import {findWouldBeIndex, resetIndexesCache} from "./listUtil";
+import {findWouldBeIndex, resetIndexesCache, resetIndexesCacheForDz} from "./listUtil";
 import {findCenterOfElement, isElementOffDocument} from "./intersection";
 import {
     dispatchDraggedElementEnteredContainer,
@@ -57,6 +57,7 @@ export function observe(draggedEl, dropZones, intervalMs = INTERVAL_MS) {
         // this is a simple algorithm, potential improvement: first look at lastDropZoneFound
         let isDraggedInADropZone = false;
         for (const dz of dropZonesFromDeepToShallow) {
+            if (scrolled) resetIndexesCacheForDz(lastDropZoneFound);
             const indexObj = findWouldBeIndex(draggedEl, dz);
             if (indexObj === null) {
                 // it is not inside

package/src/helpers/windowScroller.js

@@ -1,5 +1,6 @@
 import {makeScroller} from "./scroller";
 import {printDebug} from "../constants";
+import {resetIndexesCache} from "./listUtil";
 
 const INTERVAL_MS = 300;
 let mousePosition;
@@ -18,7 +19,8 @@ let next;
 
 function loop() {
     if (mousePosition) {
-        scrollIfNeeded(mousePosition, document.documentElement);
+        const scrolled = scrollIfNeeded(mousePosition, document.documentElement);
+        if (scrolled) resetIndexesCache();
     }
     next = window.setTimeout(loop, INTERVAL_MS);
 }

package/src/keyboardAction.js

@@ -1,7 +1,7 @@
 import {decrementActiveDropZoneCount, incrementActiveDropZoneCount, ITEM_ID_KEY, SOURCES, TRIGGERS} from "./constants";
 import {styleActiveDropZones, styleInactiveDropZones} from "./helpers/styler";
 import {dispatchConsiderEvent, dispatchFinalizeEvent} from "./helpers/dispatcher";
-import {initAria, alertToScreenReader} from "./helpers/aria";
+import {initAria, alertToScreenReader, destroyAria} from "./helpers/aria";
 import {toString} from "./helpers/util";
 import {printDebug} from "./constants";
 
@@ -29,13 +29,14 @@ const typeToDropZones = new Map();
  * maybe keep focus on the last dragged item upon drop?
  */
 
-const INSTRUCTION_IDs = initAria();
+let INSTRUCTION_IDs;
 
 /* drop-zones registration management */
 function registerDropZone(dropZoneEl, type) {
     printDebug(() => "registering drop-zone if absent");
     if (typeToDropZones.size === 0) {
         printDebug(() => "adding global keydown and click handlers");
+        INSTRUCTION_IDs = initAria();
         window.addEventListener("keydown", globalKeyDownHandler);
         window.addEventListener("click", globalClickHandler);
     }
@@ -61,6 +62,8 @@ function unregisterDropZone(dropZoneEl, type) {
         printDebug(() => "removing global keydown and click handlers");
         window.removeEventListener("keydown", globalKeyDownHandler);
         window.removeEventListener("click", globalClickHandler);
+        INSTRUCTION_IDs = undefined;
+        destroyAria();
     }
 }
 
@@ -280,16 +283,16 @@ export function dndzone(node, options) {
         config.dropTargetStyle = dropTargetStyle;
         config.dropTargetClasses = dropTargetClasses;
         config.autoAriaDisabled = autoAriaDisabled;
-        if (!autoAriaDisabled) {
-            node.setAttribute("aria-disabled", dragDisabled);
-            node.setAttribute("role", "list");
-            node.setAttribute("aria-describedby", dragDisabled ? INSTRUCTION_IDs.DND_ZONE_DRAG_DISABLED : INSTRUCTION_IDs.DND_ZONE_ACTIVE);
-        }
         if (config.type && newType !== config.type) {
             unregisterDropZone(node, config.type);
         }
         config.type = newType;
         registerDropZone(node, newType);
+        if (!autoAriaDisabled) {
+            node.setAttribute("aria-disabled", dragDisabled);
+            node.setAttribute("role", "list");
+            node.setAttribute("aria-describedby", dragDisabled ? INSTRUCTION_IDs.DND_ZONE_DRAG_DISABLED : INSTRUCTION_IDs.DND_ZONE_ACTIVE);
+        }
         dzToConfig.set(node, config);
 
         if (isDragging) {
@@ -298,8 +301,8 @@ export function dndzone(node, options) {
                 focusedItem.contains(node) ||
                 config.dropFromOthersDisabled ||
                 (focusedDz && config.type !== dzToConfig.get(focusedDz).type)
-                ? -1
-                : 0;
+                    ? -1
+                    : 0;
         } else {
             node.tabIndex = config.zoneTabIndex;
         }