svelte-dnd-action 0.9.13 → 0.9.16

package/README.md

@@ -206,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.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);
@@ -1636,6 +1649,7 @@
   }
 
   function dndzone(node, options) {
+    var initialized = false;
     var config = {
       items: undefined,
       type: undefined,
@@ -1839,7 +1853,7 @@
       config.transformDraggedElement = transformDraggedElement;
       config.centreDraggedOnCursor = centreDraggedOnCursor; // realtime update for dropTargetStyle
 
-      if (isWorkingOnPreviousDrag && !finalizingPreviousDrag && (!areObjectsShallowEqual(dropTargetStyle, config.dropTargetStyle) || !areArraysShallowEqualSameOrder(dropTargetClasses, config.dropTargetClasses))) {
+      if (initialized && isWorkingOnPreviousDrag && !finalizingPreviousDrag && (!areObjectsShallowEqual(dropTargetStyle, config.dropTargetStyle) || !areArraysShallowEqualSameOrder(dropTargetClasses, config.dropTargetClasses))) {
         styleInactiveDropZones([node], function () {
           return config.dropTargetStyle;
         }, function () {
@@ -1859,7 +1873,7 @@
         return dzToConfig.get(dz) ? dzToConfig.get(dz)[propName] : config[propName];
       }
 
-      if (isWorkingOnPreviousDrag && config.dropFromOthersDisabled !== dropFromOthersDisabled) {
+      if (initialized && isWorkingOnPreviousDrag && config.dropFromOthersDisabled !== dropFromOthersDisabled) {
         if (dropFromOthersDisabled) {
           styleInactiveDropZones([node], function (dz) {
             return getConfigProp(dz, "dropTargetStyle");
@@ -1905,6 +1919,10 @@
 
 
         elToIdx.set(draggableEl, idx);
+
+        if (!initialized) {
+          initialized = true;
+        }
       };
 
       for (var idx = 0; idx < node.children.length; idx++) {
@@ -1942,7 +1960,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 +2009,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 +2040,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 +2076,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 +2088,7 @@
       printDebug(function () {
         return "adding global keydown and click handlers";
       });
+      INSTRUCTION_IDs$1 = initAria();
       window.addEventListener("keydown", globalKeyDownHandler);
       window.addEventListener("click", globalClickHandler);
     }
@@ -2081,6 +2125,8 @@
       });
       window.removeEventListener("keydown", globalKeyDownHandler);
       window.removeEventListener("click", globalClickHandler);
+      INSTRUCTION_IDs$1 = undefined;
+      destroyAria();
     }
   }
 
@@ -2398,18 +2444,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);
@@ -1630,6 +1643,7 @@ function cleanupPostDrop() {
 }
 
 function dndzone(node, options) {
+  var initialized = false;
   var config = {
     items: undefined,
     type: undefined,
@@ -1833,7 +1847,7 @@ function dndzone(node, options) {
     config.transformDraggedElement = transformDraggedElement;
     config.centreDraggedOnCursor = centreDraggedOnCursor; // realtime update for dropTargetStyle
 
-    if (isWorkingOnPreviousDrag && !finalizingPreviousDrag && (!areObjectsShallowEqual(dropTargetStyle, config.dropTargetStyle) || !areArraysShallowEqualSameOrder(dropTargetClasses, config.dropTargetClasses))) {
+    if (initialized && isWorkingOnPreviousDrag && !finalizingPreviousDrag && (!areObjectsShallowEqual(dropTargetStyle, config.dropTargetStyle) || !areArraysShallowEqualSameOrder(dropTargetClasses, config.dropTargetClasses))) {
       styleInactiveDropZones([node], function () {
         return config.dropTargetStyle;
       }, function () {
@@ -1853,7 +1867,7 @@ function dndzone(node, options) {
       return dzToConfig.get(dz) ? dzToConfig.get(dz)[propName] : config[propName];
     }
 
-    if (isWorkingOnPreviousDrag && config.dropFromOthersDisabled !== dropFromOthersDisabled) {
+    if (initialized && isWorkingOnPreviousDrag && config.dropFromOthersDisabled !== dropFromOthersDisabled) {
       if (dropFromOthersDisabled) {
         styleInactiveDropZones([node], function (dz) {
           return getConfigProp(dz, "dropTargetStyle");
@@ -1899,6 +1913,10 @@ function dndzone(node, options) {
 
 
       elToIdx.set(draggableEl, idx);
+
+      if (!initialized) {
+        initialized = true;
+      }
     };
 
     for (var idx = 0; idx < node.children.length; idx++) {
@@ -1936,7 +1954,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 +2003,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 +2034,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 +2070,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 +2082,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 +2119,8 @@ function unregisterDropZone$1(dropZoneEl, type) {
     });
     window.removeEventListener("keydown", globalKeyDownHandler);
     window.removeEventListener("click", globalClickHandler);
+    INSTRUCTION_IDs$1 = undefined;
+    destroyAria();
   }
 }
 
@@ -2392,18 +2438,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.13",
+    "version": "0.9.16",
     "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;
         }

package/src/pointerAction.js

@@ -301,6 +301,7 @@ function cleanupPostDrop() {
 }
 
 export function dndzone(node, options) {
+    let initialized = false;
     const config = {
         items: undefined,
         type: undefined,
@@ -442,7 +443,6 @@ export function dndzone(node, options) {
         }
         config.type = newType;
         registerDropZone(node, newType);
-
         config.items = [...items];
         config.dragDisabled = dragDisabled;
         config.morphDisabled = morphDisabled;
@@ -451,6 +451,7 @@ export function dndzone(node, options) {
 
         // realtime update for dropTargetStyle
         if (
+            initialized &&
             isWorkingOnPreviousDrag &&
             !finalizingPreviousDrag &&
             (!areObjectsShallowEqual(dropTargetStyle, config.dropTargetStyle) ||
@@ -474,7 +475,7 @@ export function dndzone(node, options) {
         function getConfigProp(dz, propName) {
             return dzToConfig.get(dz) ? dzToConfig.get(dz)[propName] : config[propName];
         }
-        if (isWorkingOnPreviousDrag && config.dropFromOthersDisabled !== dropFromOthersDisabled) {
+        if (initialized && isWorkingOnPreviousDrag && config.dropFromOthersDisabled !== dropFromOthersDisabled) {
             if (dropFromOthersDisabled) {
                 styleInactiveDropZones(
                     [node],
@@ -514,6 +515,10 @@ export function dndzone(node, options) {
             }
             // updating the idx
             elToIdx.set(draggableEl, idx);
+
+            if (!initialized) {
+                initialized = true;
+            }
         }
     }
     configure(options);