svelte-dnd-action - npm Package Compare versions

Comparing version 0.1.4 to 0.1.5

dist/index.js

@@ -489,8 +489,9 @@ (function (global, factory) {
      * @param {HTMLElement} draggableEl
+     * @param {boolean} dragDisabled
      */
-    function styleDraggable(draggableEl) {
+    function styleDraggable(draggableEl, dragDisabled) {
         draggableEl.draggable = false;
         draggableEl.ondragstart = () => false;
         draggableEl.style.userSelect = 'none';
-        draggableEl.style.cursor = 'grab';
+        draggableEl.style.cursor = dragDisabled? '': 'grab';
     }
@@ -593,3 +594,7 @@
         console.debug('dragged entered', e.currentTarget, e.detail);
-        let {items} = dzToConfig.get(e.currentTarget);
+        let {items, dropFromOthersDisabled} = dzToConfig.get(e.currentTarget);
+        if (dropFromOthersDisabled && e.currentTarget !== originDropZone) {
+            console.debug('drop is currently disabled');
+            return;
+        }
         // this deals with another svelte related race condition. in rare occasions (super rapid operations) the list hasn't updated yet
@@ -606,3 +611,7 @@ items = items.filter(i => i.id !== shadowElData.id);
         console.debug('dragged left', e.currentTarget, e.detail);
-        const {items} = dzToConfig.get(e.currentTarget);
+        const {items, dropFromOthersDisabled} = dzToConfig.get(e.currentTarget);
+        if (dropFromOthersDisabled && e.currentTarget !== originDropZone) {
+            console.debug('drop is currently disabled');
+            return;
+        }
         items.splice(shadowElIdx, 1);
@@ -615,3 +624,7 @@ shadowElIdx = undefined;
         console.debug('dragged is over index', e.currentTarget, e.detail);
-        const {items} = dzToConfig.get(e.currentTarget);
+        const {items, dropFromOthersDisabled} = dzToConfig.get(e.currentTarget);
+        if (dropFromOthersDisabled && e.currentTarget !== originDropZone) {
+            console.debug('drop is currently disabled');
+            return;
+        }
         const {index} = e.detail.indexObj;
@@ -719,3 +732,3 @@ items.splice(shadowElIdx, 1);
     function dndzone(node, options) {
-        const config =  {items: [], type: undefined};
+        const config =  {items: [], type: undefined, flipDurationMs: 0, dragDisabled: false, dropFromOthersDisabled: false};
         console.debug("dndzone good to go", {node, options, config});
@@ -783,3 +796,6 @@ let elToIdx = new Map();
             document.body.appendChild(draggedEl);
-            styleActiveDropZones(typeToDropZones.get(config.type));
+            styleActiveDropZones(
+                Array.from(typeToDropZones.get(config.type))
+                .filter(dz => dz === originDropZone || !dzToConfig.get(dz).dropFromOthersDisabled)
+            );
 
@@ -798,6 +814,7 @@ // removing the original element by removing its data entry
 
-        function configure(opts) {
-            console.debug(`configuring ${JSON.stringify(opts)}`);
-            config.dropAnimationDurationMs = opts.flipDurationMs || 0;
-            const newType  = opts.type|| DEFAULT_DROP_ZONE_TYPE;
+        function configure({items = [], flipDurationMs:dropAnimationDurationMs = 0, type:newType = DEFAULT_DROP_ZONE_TYPE, dragDisabled = false, dropFromOthersDisabled = false, ...rest }) {
+            if (Object.keys(rest).length > 0) {
+                console.warn(`dndzone will ignore unknown options`, rest);
+            }
+            config.dropAnimationDurationMs = dropAnimationDurationMs;
             if (config.type && newType !== config.type) {
@@ -809,7 +826,18 @@ unregisterDropZone(node, config.type);
 
-            config.items = opts.items || []; 
+            config.items = items;
+
+            config.dragDisabled = dragDisabled;
+
+            if (isWorkingOnPreviousDrag && config.dropFromOthersDisabled !== dropFromOthersDisabled) {
+                if (dropFromOthersDisabled) {
+                    styleInActiveDropZones([node]);
+                } else {
+                    styleActiveDropZones([node]);
+                }
+            }
+            config.dropFromOthersDisabled = dropFromOthersDisabled;
             dzToConfig.set(node, config);
-            for (let idx=0; idx< node.children.length; idx++) {
+            for (let idx = 0; idx < node.children.length; idx++) {
                 const draggableEl = node.children[idx];
-                styleDraggable(draggableEl);
+                styleDraggable(draggableEl, dragDisabled);
                 if (config.items[idx].hasOwnProperty('isDndShadowItem')) {
@@ -820,3 +848,5 @@ morphDraggedElementToBeLike(draggedEl, draggableEl, currentMousePosition.x, currentMousePosition.y);
                 }
-                if (!elToIdx.has(draggableEl)) {
+                draggableEl.removeEventListener('mousedown', handleMouseDown);
+                draggableEl.removeEventListener('touchstart', handleMouseDown);
+                if (!dragDisabled) {
                     draggableEl.addEventListener('mousedown', handleMouseDown);
@@ -823,0 +853,0 @@ draggableEl.addEventListener('touchstart', handleMouseDown);

package.json

@@ -33,3 +33,3 @@ {
   "description": "*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.1.4",
+  "version": "0.1.5",
   "dependencies": {
@@ -36,0 +36,0 @@ "acorn": "^7.1.1",

README.md

@@ -89,4 +89,6 @@ # SVELTE DND ACTION
 - `items`: Array. The data array that is used to produce the list with the draggable items (the same thing you run your #each block on)
-- `flipDurationMs`: Number. The same value you give the flip animation on the items (to make them animated as they "make space" for the dragged item). Set to zero or leave out if you don't want animations.
-- `type`: Optional. String. dnd-zones that share the same type can have elements from one dragged into another. By default all dnd-zones have the same type.   
+- `flipDurationMs`: Optional. Number. The same value you give the flip animation on the items (to make them animated as they "make space" for the dragged item). Set to zero or leave out if you don't want animations.
+- `type`: Optional. String. dnd-zones that share the same type can have elements from one dragged into another. By default all dnd-zones have the same type. 
+- `dragDisabled`: Optional. Boolean. Setting it to true will make it impossible to drag elements out of the dnd-zone. You can change it at any time, and the zone will adjust on the fly.
+- `dropFromOthersDisabled`: Optional. Boolean. Setting it to true will make it impossible to drop elements from other dnd-zones of the same type. Can be useful if you want to limit the max number of items for example. You can change it at any time, and the zone will adjust on the fly.   
 
@@ -93,0 +95,0 @@ #### Output:

src/action.js

@@ -80,3 +80,7 @@ import { observe, unobserve } from './helpers/observer';
     console.debug('dragged entered', e.currentTarget, e.detail);
-    let {items} = dzToConfig.get(e.currentTarget);
+    let {items, dropFromOthersDisabled} = dzToConfig.get(e.currentTarget);
+    if (dropFromOthersDisabled && e.currentTarget !== originDropZone) {
+        console.debug('drop is currently disabled');
+        return;
+    }
     // this deals with another svelte related race condition. in rare occasions (super rapid operations) the list hasn't updated yet
@@ -93,3 +97,7 @@ items = items.filter(i => i.id !== shadowElData.id)
     console.debug('dragged left', e.currentTarget, e.detail);
-    const {items} = dzToConfig.get(e.currentTarget);
+    const {items, dropFromOthersDisabled} = dzToConfig.get(e.currentTarget);
+    if (dropFromOthersDisabled && e.currentTarget !== originDropZone) {
+        console.debug('drop is currently disabled');
+        return;
+    }
     items.splice(shadowElIdx, 1);
@@ -102,3 +110,7 @@ shadowElIdx = undefined;
     console.debug('dragged is over index', e.currentTarget, e.detail);
-    const {items} = dzToConfig.get(e.currentTarget);
+    const {items, dropFromOthersDisabled} = dzToConfig.get(e.currentTarget);
+    if (dropFromOthersDisabled && e.currentTarget !== originDropZone) {
+        console.debug('drop is currently disabled');
+        return;
+    }
     const {index} = e.detail.indexObj;
@@ -206,3 +218,3 @@ items.splice(shadowElIdx, 1);
 export function dndzone(node, options) {
-    const config =  {items: [], type: undefined};
+    const config =  {items: [], type: undefined, flipDurationMs: 0, dragDisabled: false, dropFromOthersDisabled: false};
     console.debug("dndzone good to go", {node, options, config});
@@ -270,3 +282,6 @@ let elToIdx = new Map();
         document.body.appendChild(draggedEl);
-        styleActiveDropZones(typeToDropZones.get(config.type));
+        styleActiveDropZones(
+            Array.from(typeToDropZones.get(config.type))
+            .filter(dz => dz === originDropZone || !dzToConfig.get(dz).dropFromOthersDisabled)
+        );
 
@@ -285,6 +300,7 @@ // removing the original element by removing its data entry
 
-    function configure(opts) {
-        console.debug(`configuring ${JSON.stringify(opts)}`);
-        config.dropAnimationDurationMs = opts.flipDurationMs || 0;
-        const newType  = opts.type|| DEFAULT_DROP_ZONE_TYPE;
+    function configure({items = [], flipDurationMs:dropAnimationDurationMs = 0, type:newType = DEFAULT_DROP_ZONE_TYPE, dragDisabled = false, dropFromOthersDisabled = false, ...rest }) {
+        if (Object.keys(rest).length > 0) {
+            console.warn(`dndzone will ignore unknown options`, rest);
+        }
+        config.dropAnimationDurationMs = dropAnimationDurationMs;
         if (config.type && newType !== config.type) {
@@ -296,7 +312,18 @@ unregisterDropZone(node, config.type);
 
-        config.items = opts.items || []; 
+        config.items = items;
+
+        config.dragDisabled = dragDisabled;
+
+        if (isWorkingOnPreviousDrag && config.dropFromOthersDisabled !== dropFromOthersDisabled) {
+            if (dropFromOthersDisabled) {
+                styleInActiveDropZones([node]);
+            } else {
+                styleActiveDropZones([node]);
+            }
+        }
+        config.dropFromOthersDisabled = dropFromOthersDisabled;
         dzToConfig.set(node, config);
-        for (let idx=0; idx< node.children.length; idx++) {
+        for (let idx = 0; idx < node.children.length; idx++) {
             const draggableEl = node.children[idx];
-            styleDraggable(draggableEl);
+            styleDraggable(draggableEl, dragDisabled);
             if (config.items[idx].hasOwnProperty('isDndShadowItem')) {
@@ -307,3 +334,5 @@ morphDraggedElementToBeLike(draggedEl, draggableEl, currentMousePosition.x, currentMousePosition.y);
             }
-            if (!elToIdx.has(draggableEl)) {
+            draggableEl.removeEventListener('mousedown', handleMouseDown);
+            draggableEl.removeEventListener('touchstart', handleMouseDown);
+            if (!dragDisabled) {
                 draggableEl.addEventListener('mousedown', handleMouseDown);
@@ -310,0 +339,0 @@ draggableEl.addEventListener('touchstart', handleMouseDown);

src/helpers/styler.js

@@ -79,8 +79,9 @@ const TRANSITION_DURATION_SECONDS = 0.2;
  * @param {HTMLElement} draggableEl
+ * @param {boolean} dragDisabled
  */
-export function styleDraggable(draggableEl) {
+export function styleDraggable(draggableEl, dragDisabled) {
     draggableEl.draggable = false;
     draggableEl.ondragstart = () => false;
     draggableEl.style.userSelect = 'none';
-    draggableEl.style.cursor = 'grab';
+    draggableEl.style.cursor = dragDisabled? '': 'grab';
 }
@@ -87,0 +88,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

114564

increased by4.56%

Lines of code

2419

increased by3.6%

Number of lines in readme file

113

increased by1.8%

No dependency changes