svelte-dnd-action - npm Package Compare versions

Comparing version 0.6.18 to 0.6.19

dist/index.d.ts

@@ -71,2 +71,7 @@ /**
 
-export declare const SHADOW_ITEM_MARKER_PROPERTY_NAME: "isDndShadowItem";
+export declare const SHADOW_ITEM_MARKER_PROPERTY_NAME: "isDndShadowItem";
+
+/**
+ * Allows the user to show/hide console debug output
+ */
+export declare function setDebug(isDebug: boolean): void;

package.json

@@ -39,3 +39,3 @@ {
   "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.6.18",
+  "version": "0.6.19",
   "repository": {
@@ -42,0 +42,0 @@ "type": "git",

README.md

@@ -23,3 +23,3 @@ # SVELTE DND ACTION [![Known Vulnerabilities](https://snyk.io/test/github/isaacHagoel/svelte-dnd-action/badge.svg?targetFile=package.json)](https://snyk.io/test/github/isaacHagoel/svelte-dnd-action?targetFile=package.json)
 - Performant and small footprint (no external dependencies, no fluff code)  
-- Fully accessible (beta) - keyboard support, aria attributes and assistive instructions for screen readers  
+- Fully accessible (beta) - keyboard support, aria attributes and assistive instructions for screen readers
 
@@ -90,3 +90,20 @@ ### Installation
 ```
+### More Examples and Recipes
+* [Super basic, single list, no animation](https://svelte.dev/repl/bbd709b1a00b453e94658392c97a018a?version=3.24.1)
+* [Super basic, single list, with animation](https://svelte.dev/repl/3d544791e5c24fd4aa1eb983d749f776?version=3.24.1) 
+* [Multiple dndzones, multiple types](https://svelte.dev/repl/4d23eb3b9e184b90b58f0867010ad258?version=3.24.1)
+* [Board (nested zones and multiple types), scrolling containers, scrolling page](https://svelte.dev/repl/e2ef044af75c4b16b424b8219fb31fd9?version=3.22.2)
+* [Selectively enable/disable drag/drop](https://svelte.dev/repl/44c9229556f3456e9883c10fc0aa0ee9?version=3)
+* [Custom active dropzone styling](https://svelte.dev/repl/4ceecc5bae54490b811bd62d4d613e59?version=3.24.1) 
+* [Customizing the dragged element](https://svelte.dev/repl/438fca28bb1f4eb1b34eff9dc6a728dc?version=3)
+* [Customizing the placeholder(shadow) element](https://svelte.dev/repl/9c8db8b91b2142d19dcf9bc963a27838?version=3)
 
+* [Copy on drag, simple and Dragula like](https://svelte.dev/repl/924b4cc920524065a637fa910fe10193?version=3.24.1)
+* [Drag handles](https://svelte.dev/repl/4949485c5a8f46e7bdbeb73ed565a9c7?version=3.24.1), courtesy of @gleuch
+* [Unsortable lists with custom aria instructions](https://svelte.dev/repl/e020ea1051dc4ae3ac2b697064f234bc?version=3.29.0)
+* [Crazy nesting](https://svelte.dev/repl/fe8c9eca04f9417a94a8b6041df77139?version=3), courtesy of @zahachtah
+
+* [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)
+
 ##### Input:
@@ -170,20 +187,10 @@ An options-object with the following attributes:
 
-### Examples
-* [Super basic, single list, no animation](https://svelte.dev/repl/bbd709b1a00b453e94658392c97a018a?version=3.24.1)
-* [Super basic, single list, with animation](https://svelte.dev/repl/3d544791e5c24fd4aa1eb983d749f776?version=3.24.1) 
-* [Multiple dndzones, multiple types](https://svelte.dev/repl/4d23eb3b9e184b90b58f0867010ad258?version=3.24.1)
-* [Board (nested zones and multiple types), scrolling containers, scrolling page](https://svelte.dev/repl/e2ef044af75c4b16b424b8219fb31fd9?version=3.22.2)
-* [Selectively enable/disable drag/drop](https://svelte.dev/repl/44c9229556f3456e9883c10fc0aa0ee9?version=3)
-* [Custom active dropzone styling](https://svelte.dev/repl/4ceecc5bae54490b811bd62d4d613e59?version=3.24.1) 
-* [Customizing the dragged element](https://svelte.dev/repl/438fca28bb1f4eb1b34eff9dc6a728dc?version=3)
-* [Customizing the placeholder(shadow) element](https://svelte.dev/repl/9c8db8b91b2142d19dcf9bc963a27838?version=3)
+### Debug output
+By default no debug output will be logged to the console. If you want to see internal debug messages, you can enable the debug output like this:
 
-* [Copy on drag, simple and Dragula like](https://svelte.dev/repl/924b4cc920524065a637fa910fe10193?version=3.24.1)
-* [Drag handles](https://svelte.dev/repl/4949485c5a8f46e7bdbeb73ed565a9c7?version=3.24.1), courtesy of @gleuch
-* [Unsortable lists with custom aria instructions](https://svelte.dev/repl/e020ea1051dc4ae3ac2b697064f234bc?version=3.29.0)
-* [Crazy nesting](https://svelte.dev/repl/fe8c9eca04f9417a94a8b6041df77139?version=3), courtesy of @zahachtah
+```javascript
+import {setDebug} from 'svelte-dnd-action';
+setDebug(true);
+``` 
 
-* [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)
-
 ### Typescript
@@ -190,0 +197,0 @@ If you are using Typescript, you will need to add the following block to your `global.d.ts` (at least until [this svelte issue](https://github.com/sveltejs/language-tools/issues/431) is resolved):

src/constants.js

@@ -42,6 +42,28 @@ import {DRAGGED_ENTERED_EVENT_NAME, DRAGGED_LEFT_EVENT_NAME, DRAGGED_OVER_INDEX_EVENT_NAME} from "./helpers/dispatcher";
     }
-    console.debug("overriding item id key name", newKeyName)
+    printDebug(() => ["overriding item id key name", newKeyName])
     ITEM_ID_KEY = newKeyName;
 }
 
-export const isOnServer =  (typeof window === 'undefined');
+export const isOnServer =  (typeof window === 'undefined');
+
+export let printDebug = () => {};
+
+/**
+ * Allows the user to show/hide console debug output
+ * * @param {Boolean} isDebug
+ */
+export function setDebugMode(isDebug) {
+    if (isDebug) {
+        printDebug = (generateMessage, logFunction = console.debug) => {
+            const message = generateMessage();
+            if (Array.isArray(message)) {
+                logFunction(...message)
+            } else {
+                logFunction(message)
+            }
+        }
+    }
+    else {
+        printDebug = () => {};
+    }
+}

src/helpers/observer.js

@@ -10,2 +10,3 @@ import {findWouldBeIndex} from './listUtil';
 import { getDepth } from "./util";
+import {printDebug} from "../constants";
 
@@ -47,3 +48,3 @@ const INTERVAL_MS = 200;
         if (isElementOffDocument(draggedEl)) {
-            console.debug("off document");
+            printDebug(() => "off document");
             dispatchDraggedLeftDocument(draggedEl);
@@ -94,5 +95,5 @@ return;
 export function unobserve() {
-    console.debug("unobserving");
+    printDebug(() => "unobserving");
     clearTimeout(next);
     resetScrolling();
 }

src/helpers/windowScroller.js

 import {makeScroller} from "./scroller";
+import {printDebug} from "../constants";
 
@@ -29,3 +30,3 @@ const INTERVAL_MS = 300;
 export function armWindowScroller() {
-    console.debug('arming window scroller');
+    printDebug(() => 'arming window scroller');
     window.addEventListener('mousemove', updateMousePosition);
@@ -40,3 +41,3 @@ window.addEventListener('touchmove', updateMousePosition);
 export function disarmWindowScroller() {
-    console.debug('disarming window scroller');
+    printDebug(() => 'disarming window scroller');
     window.removeEventListener('mousemove', updateMousePosition);
@@ -43,0 +44,0 @@ window.removeEventListener('touchmove', updateMousePosition);

src/index.js

 export { dndzone } from './action.js';
 export { alertToScreenReader } from './helpers/aria';
-export { TRIGGERS, SOURCES, SHADOW_ITEM_MARKER_PROPERTY_NAME, overrideItemIdKeyNameBeforeInitialisingDndZones } from './constants';
+export { TRIGGERS, SOURCES, SHADOW_ITEM_MARKER_PROPERTY_NAME, overrideItemIdKeyNameBeforeInitialisingDndZones, setDebugMode } from './constants';

src/keyboardAction.js

@@ -12,2 +12,3 @@ import {
 import {toString} from "./helpers/util";
+import {printDebug} from "./constants";
 
@@ -42,5 +43,5 @@ const DEFAULT_DROP_ZONE_TYPE = '--any--';
 function registerDropZone(dropZoneEl, type) {
-    console.debug('registering drop-zone if absent');
+    printDebug(() => 'registering drop-zone if absent');
     if (typeToDropZones.size === 0) {
-      console.debug("adding global keydown and click handlers");
+      printDebug(() => "adding global keydown and click handlers");
       window.addEventListener("keydown", globalKeyDownHandler);
@@ -58,3 +59,3 @@ window.addEventListener('click', globalClickHandler);
 function unregisterDropZone(dropZoneEl, type) {
-    console.debug('unregistering drop-zone');
+    printDebug(() => 'unregistering drop-zone');
     typeToDropZones.get(type).delete(dropZoneEl);
@@ -66,3 +67,3 @@ decrementActiveDropZoneCount();
     if (typeToDropZones.size === 0) {
-        console.debug("removing global keydown and click handlers");
+        printDebug(() => "removing global keydown and click handlers");
         window.removeEventListener("keydown", globalKeyDownHandler);
@@ -86,3 +87,3 @@ window.removeEventListener('click', globalClickHandler);
     if (!allDragTargets.has(document.activeElement)) {
-        console.debug("clicked outside of any draggable");
+        printDebug(() => "clicked outside of any draggable");
         handleDrop();
@@ -93,3 +94,3 @@ }
 function handleZoneFocus(e) {
-    console.debug("zone focus");
+    printDebug(() => "zone focus");
     if (!isDragging) return;
@@ -127,3 +128,3 @@ const newlyFocusedDz = e.currentTarget;
 function handleDrop(dispatchConsider = true) {
-    console.debug("drop");
+    printDebug(() => "drop");
     if (!dzToConfig.get(focusedDz).autoAriaDisabled) {
@@ -165,3 +166,3 @@ alertToScreenReader(`Stopped dragging item ${focusedItemLabel}`);
     function handleKeyDown(e) {
-        console.debug("handling key down", e.key);
+        printDebug(() => ["handling key down", e.key]);
         switch(e.key) {
@@ -193,3 +194,3 @@ case("Enter"):
                 const idx = children.indexOf(e.currentTarget);
-                console.debug("arrow down", idx);
+                printDebug(() => ["arrow down", idx]);
                 if (idx < children.length - 1) {
@@ -212,3 +213,3 @@ if (!config.autoAriaDisabled) {
                 const idx = children.indexOf(e.currentTarget);
-                console.debug("arrow up", idx);
+                printDebug(() => ["arrow up", idx]);
                 if (idx > 0) {
@@ -226,3 +227,3 @@ if (!config.autoAriaDisabled) {
     function handleDragStart(e) {
-        console.debug("drag start");
+        printDebug(() => "drag start");
         if (!config.autoAriaDisabled) {
@@ -304,3 +305,3 @@ alertToScreenReader(`Started dragging item ${focusedItemLabel}. Use the arrow keys to move it within its list ${focusedDzLabel}, or tab to another list in order to move the item into it`);
             if (isDragging && config.items[i][ITEM_ID_KEY] === focusedItemId) {
-                console.debug("focusing on", {i, focusedItemId});
+                printDebug(() => ["focusing on", {i, focusedItemId}]);
                 // if it is a nested dropzone, it was re-rendered and we need to refresh our pointer
@@ -317,7 +318,7 @@ focusedItem = draggableEl;
         update: (newOptions) => {
-            console.debug(`keyboard dndzone will update newOptions: ${toString(newOptions)}`);
+            printDebug(() => `keyboard dndzone will update newOptions: ${toString(newOptions)}`);
             configure(newOptions);
         },
         destroy: () => {
-            console.debug("keyboard dndzone will destroy");
+            printDebug(() => "keyboard dndzone will destroy");
             unregisterDropZone(node, config.type);
@@ -324,0 +325,0 @@ dzToConfig.delete(node);

src/pointerAction.js

@@ -22,2 +22,3 @@ import {
 import {areObjectsShallowEqual, toString} from "./helpers/util";
+import {printDebug} from "./constants";
 
@@ -53,3 +54,3 @@ const DEFAULT_DROP_ZONE_TYPE = '--any--';
 function registerDropZone(dropZoneEl, type) {
-    console.debug('registering drop-zone if absent')
+    printDebug(() => 'registering drop-zone if absent')
     if (!typeToDropZones.has(type)) {
@@ -73,3 +74,3 @@ typeToDropZones.set(type, new Set());
 function watchDraggedElement() {
-    console.debug('watching dragged element');
+    printDebug(() => 'watching dragged element');
     armWindowScroller();
@@ -88,3 +89,3 @@ const dropZones = typeToDropZones.get(draggedElType);
 function unWatchDraggedElement() {
-    console.debug('unwatching dragged element');
+    printDebug(() => 'unwatching dragged element');
     disarmWindowScroller();
@@ -103,6 +104,6 @@ const dropZones = typeToDropZones.get(draggedElType);
 function handleDraggedEntered(e) {
-    console.debug('dragged entered', e.currentTarget, e.detail);
+    printDebug(() => ['dragged entered', e.currentTarget, e.detail]);
     let {items, dropFromOthersDisabled} = dzToConfig.get(e.currentTarget);
     if (dropFromOthersDisabled && e.currentTarget !== originDropZone) {
-        console.debug('drop is currently disabled');
+        printDebug(() => 'drop is currently disabled');
         return;
@@ -112,3 +113,3 @@ }
     items = items.filter(i => i[ITEM_ID_KEY] !== shadowElData[ITEM_ID_KEY])
-    console.debug(`dragged entered items ${toString(items)}`);
+    printDebug(() => `dragged entered items ${toString(items)}`);
     const {index, isProximityBased} = e.detail.indexObj;
@@ -121,6 +122,6 @@ const shadowElIdx = (isProximityBased && index === e.currentTarget.children.length - 1)? index + 1 : index;
 function handleDraggedLeft(e) {
-    console.debug('dragged left', e.currentTarget, e.detail);
+    printDebug(() => ['dragged left', e.currentTarget, e.detail]);
     const {items, dropFromOthersDisabled} = dzToConfig.get(e.currentTarget);
     if (dropFromOthersDisabled && e.currentTarget !== originDropZone) {
-        console.debug('drop is currently disabled');
+        printDebug(() => 'drop is currently disabled');
         return;
@@ -134,6 +135,6 @@ }
 function handleDraggedIsOverIndex(e) {
-    console.debug('dragged is over index', e.currentTarget, e.detail);
+    printDebug(() => ['dragged is over index', e.currentTarget, e.detail]);
     const {items, dropFromOthersDisabled} = dzToConfig.get(e.currentTarget);
     if (dropFromOthersDisabled && e.currentTarget !== originDropZone) {
-        console.debug('drop is currently disabled');
+        printDebug(() => 'drop is currently disabled');
         return;
@@ -157,3 +158,3 @@ }
 function handleDrop() {
-    console.debug('dropped');
+    printDebug(() => 'dropped');
     finalizingPreviousDrag = true;
@@ -169,3 +170,3 @@ // cleanup
     if (shadowElDropZone) { // it was dropped in a drop-zone
-        console.debug('dropped in dz', shadowElDropZone);
+        printDebug(() => ['dropped in dz', shadowElDropZone]);
         let {items, type} = dzToConfig.get(shadowElDropZone);
@@ -189,3 +190,3 @@ styleInactiveDropZones(typeToDropZones.get(type), dz => dzToConfig.get(dz).dropTargetStyle);
     else { // it needs to return to its place
-        console.debug('no dz available');
+        printDebug(() => 'no dz available');
         let {items, type} = dzToConfig.get(originDropZone);
@@ -249,3 +250,3 @@ styleInactiveDropZones(typeToDropZones.get(type), dz => dzToConfig.get(dz).dropTargetStyle);
     };
-    console.debug(`dndzone good to go options: ${toString(options)}, config: ${toString(config)}`, {node});
+    printDebug(() => [`dndzone good to go options: ${toString(options)}, config: ${toString(config)}`, {node}]);
     let elToIdx = new Map();
@@ -284,7 +285,7 @@
         if (e.button) {
-            console.debug(`ignoring none left click button: ${e.button}`);
+            printDebug(() => `ignoring none left click button: ${e.button}`);
             return;
         }
         if (isWorkingOnPreviousDrag) {
-            console.debug('cannot start a new drag before finalizing previous one');
+            printDebug(() => 'cannot start a new drag before finalizing previous one');
             return;
@@ -301,3 +302,3 @@ }
     function handleDragStart() {
-        console.debug(`drag start config: ${toString(config)}`, originalDragTarget);
+        printDebug(() => [`drag start config: ${toString(config)}`, originalDragTarget]);
         isWorkingOnPreviousDrag = true;
@@ -410,7 +411,7 @@
         update: (newOptions) => {
-            console.debug(`pointer dndzone will update newOptions: ${toString(newOptions)}`);
+            printDebug(() => `pointer dndzone will update newOptions: ${toString(newOptions)}`);
             configure(newOptions);
         },
         destroy: () => {
-            console.debug("pointer dndzone will destroy");
+            printDebug(() => "pointer dndzone will destroy");
             unregisterDropZone(node, config.type);
@@ -417,0 +418,0 @@ dzToConfig.delete(node);

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

233302

increased by2.28%

Lines of code

5425

increased by4.37%

Number of lines in readme file

250

increased by2.88%

No dependency changes