svelte-dnd-action - npm Package Compare versions

Comparing version 0.3.2 to 0.4.0

dist/index.js

@@ -170,11 +170,25 @@ (function (global, factory) {
 
-    function dispatchFinalizeEvent(el, items) {
+    /**
+     * @typedef {Object} Info
+     * @property {string} trigger
+     * @property {string} id
+     * @param {Node} el
+     * @param {Array} items
+     * @param {Info} info
+     */
+    function dispatchFinalizeEvent(el, items, info) {
         el.dispatchEvent(new CustomEvent(FINALIZE_EVENT_NAME, {
-            detail: {items}
+            detail: {items, info}
         }));
     }
 
-    function dispatchConsiderEvent(el, items) {
+    /**
+     * Dispatches a consider event
+     * @param {Node} el
+     * @param {Array} items
+     * @param {Info} info
+     */
+    function dispatchConsiderEvent(el, items, info) {
         el.dispatchEvent(new CustomEvent(CONSIDER_EVENT_NAME, {
-            detail: {items}
+            detail: {items, info}
         }));
@@ -184,6 +198,6 @@ }
     // internal events
-    const DRAGGED_ENTERED_EVENT_NAME = 'draggedentered';
-    const DRAGGED_LEFT_EVENT_NAME = 'draggedleft';
-    const DRAGGED_OVER_INDEX_EVENT_NAME = 'draggedoverindex';
-    const DRAGGED_LEFT_DOCUMENT_EVENT_NAME = 'draggedleftdocument';
+    const DRAGGED_ENTERED_EVENT_NAME = 'draggedEntered';
+    const DRAGGED_LEFT_EVENT_NAME = 'draggedLeft';
+    const DRAGGED_OVER_INDEX_EVENT_NAME = 'draggedOverIndex';
+    const DRAGGED_LEFT_DOCUMENT_EVENT_NAME = 'draggedLeftDocument';
     function dispatchDraggedElementEnteredContainer(containerEl, indexObj, draggedEl) {
@@ -607,2 +621,3 @@ containerEl.dispatchEvent(new CustomEvent(DRAGGED_ENTERED_EVENT_NAME, {
 
+    const SHADOW_ITEM_MARKER_PROPERTY_NAME = 'isDndShadowItem';
     const ITEM_ID_KEY = "id";
@@ -697,3 +712,3 @@ const DEFAULT_DROP_ZONE_TYPE = '--any--';
         items.splice( shadowElIdx, 0, shadowElData);
-        dispatchConsiderEvent(e.currentTarget, items);
+        dispatchConsiderEvent(e.currentTarget, items, {trigger: TRIGGERS.DRAGGED_ENTERED, id: draggedElData.id});
     }
@@ -710,3 +725,3 @@ function handleDraggedLeft(e) {
         shadowElDropZone = undefined;
-        dispatchConsiderEvent(e.currentTarget, items);
+        dispatchConsiderEvent(e.currentTarget, items, {trigger: TRIGGERS.DRAGGED_LEFT, id: draggedElData.id});
     }
@@ -724,3 +739,3 @@ function handleDraggedIsOverIndex(e) {
         shadowElIdx = index;
-        dispatchConsiderEvent(e.currentTarget, items);
+        dispatchConsiderEvent(e.currentTarget, items, {trigger: TRIGGERS.DRAGGED_OVER_INDEX, id: draggedElData.id});
     }
@@ -750,8 +765,8 @@
             styleInactiveDropZones(typeToDropZones.get(type), dz => dzToConfig.get(dz).dropTargetStyle);
-            items = items.map(item => item.hasOwnProperty('isDndShadowItem')? draggedElData : item);
+            items = items.map(item => item.hasOwnProperty(SHADOW_ITEM_MARKER_PROPERTY_NAME)? draggedElData : item);
             function finalizeWithinZone() {
-                dispatchFinalizeEvent(shadowElDropZone, items);
+                dispatchFinalizeEvent(shadowElDropZone, items, {trigger: TRIGGERS.DROPPED_INTO_ZONE, id: draggedElData.id});
                 if (shadowElDropZone !== originDropZone) {
                     // letting the origin drop zone know the element was permanently taken away
-                    dispatchFinalizeEvent(originDropZone, dzToConfig.get(originDropZone).items);
+                    dispatchFinalizeEvent(originDropZone, dzToConfig.get(originDropZone).items, {trigger: TRIGGERS.DROPPED_INTO_ANOTHER, id: draggedElData.id});
                 }
@@ -770,6 +785,6 @@ shadowElDropZone.children[shadowElIdx].style.visibility = '';
             shadowElIdx = originIndex;
-            dispatchConsiderEvent(originDropZone, items);
+            dispatchConsiderEvent(originDropZone, items, {trigger: TRIGGERS.DROPPED_OUTSIDE_OF_ANY, id: draggedElData.id});
             function finalizeBackToOrigin() {
                 items.splice(originIndex, 1, draggedElData);
-                dispatchFinalizeEvent(originDropZone, items);
+                dispatchFinalizeEvent(originDropZone, items, {trigger: TRIGGERS.DROPPED_OUTSIDE_OF_ANY, id: draggedElData.id});
                 shadowElDropZone.children[shadowElIdx].style.visibility = '';
@@ -815,2 +830,12 @@ cleanupPostDrop();
 
+
+    const TRIGGERS = {
+        DRAG_STARTED: "dragStarted",
+        DRAGGED_ENTERED: DRAGGED_ENTERED_EVENT_NAME,
+        DRAGGED_OVER_INDEX: DRAGGED_OVER_INDEX_EVENT_NAME,
+        DRAGGED_LEFT: DRAGGED_LEFT_EVENT_NAME,
+        DROPPED_INTO_ZONE: "droppedIntoZone",
+        DROPPED_INTO_ANOTHER: "droppedIntoAnother",
+        DROPPED_OUTSIDE_OF_ANY: "droppedOutsideOfAny"
+    };
     /**
@@ -899,3 +924,3 @@ * A Svelte custom action to turn any container to a dnd zone and all of its direct children to draggables
             draggedElType = type;
-            shadowElData = {...draggedElData, isDndShadowItem: true};
+            shadowElData = {...draggedElData, [SHADOW_ITEM_MARKER_PROPERTY_NAME]: true};
 
@@ -926,3 +951,3 @@ // creating the draggable element
             items.splice(currentIdx, 1);
-            dispatchConsiderEvent(originDropZone, items);
+            dispatchConsiderEvent(originDropZone, items, {trigger: TRIGGERS.DRAG_STARTED, id: draggedElData.id});
 
@@ -981,3 +1006,3 @@ // handing over to global handlers - starting to watch the element
                 styleDraggable(draggableEl, dragDisabled);
-                if (config.items[idx].hasOwnProperty('isDndShadowItem')) {
+                if (config.items[idx].hasOwnProperty(SHADOW_ITEM_MARKER_PROPERTY_NAME)) {
                     morphDraggedElementToBeLike(draggedEl, draggableEl, currentMousePosition.x, currentMousePosition.y, () => config.transformDraggedElement(draggedEl, draggedElData, idx));
@@ -1013,2 +1038,4 @@ styleShadowEl(draggableEl);
 
+    exports.SHADOW_ITEM_MARKER_PROPERTY_NAME = SHADOW_ITEM_MARKER_PROPERTY_NAME;
+    exports.TRIGGERS = TRIGGERS;
     exports.dndzone = dndzone;
@@ -1015,0 +1042,0 @@

package.json

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

README.md

@@ -102,6 +102,15 @@ # SVELTE DND ACTION
 - `consider` - dispatched whenever the dragged element needs to make room for itself in a new position in the items list and when it leaves. The host (your component) is expected to update the items list (you can keep a copy of the original list if you need to)
-- `finalize` - dispatched on the target and origin dnd-zones when the dragged element is dropped into position. The expectation is the same - update the list of items.
-In both cases the payload (within e.detail) is the same: an object with a single attribute: `items`, that contains the updated items list.
+- `finalize` - dispatched on the target and origin dnd-zones when the dragged element is dropped into position. 
+
+The expectation is the same - update the list of items.
+In both cases the payload (within e.detail) is the same: an object with two attributes: `items` and `info`.
+- `items`: contains the updated items list.
+- `info`: This one can be used to achieve very advanced custom behaviours (ex: copy on drag). In most cases, don't worry about it. It is an object with the following properties: 
+   * `trigger`: will be one of the exported list of TRIGGERS (Please import if you plan to use): [DRAG_STARTED, DRAGGED_ENTERED, DRAGGED_OVER_INDEX, DRAGGED_LEFT, DROPPED_INTO_ZONE, DROPPED_INTO_ANOTHER, DROPPED_OUTSIDE_OF_ANY]
+   * `id`: the item id of the dragged element  
+
 You have to listen for both events and update the list of items in order for this library to work correctly.
 
+For advanced usecases you might also need to import SHADOW_ITEM_MARKER_PROPERTY_NAME, which marks the place holder element that is temporarily added to the list the dragged element hovers over. I haven't seen a usecase that required it yet, but you might be the first :)
+
 ### Rules/ assumptions to keep in mind
@@ -108,0 +117,0 @@ * Only one element can be dragged in any given time

src/action.js

@@ -16,2 +16,3 @@ import { observe, unobserve } from './helpers/observer';
 
+export const SHADOW_ITEM_MARKER_PROPERTY_NAME = 'isDndShadowItem';
 const ITEM_ID_KEY = "id";
@@ -106,3 +107,3 @@ const DEFAULT_DROP_ZONE_TYPE = '--any--';
     items.splice( shadowElIdx, 0, shadowElData);
-    dispatchConsiderEvent(e.currentTarget, items);
+    dispatchConsiderEvent(e.currentTarget, items, {trigger: TRIGGERS.DRAGGED_ENTERED, id: draggedElData.id});
 }
@@ -119,3 +120,3 @@ function handleDraggedLeft(e) {
     shadowElDropZone = undefined;
-    dispatchConsiderEvent(e.currentTarget, items);
+    dispatchConsiderEvent(e.currentTarget, items, {trigger: TRIGGERS.DRAGGED_LEFT, id: draggedElData.id});
 }
@@ -133,3 +134,3 @@ function handleDraggedIsOverIndex(e) {
     shadowElIdx = index;
-    dispatchConsiderEvent(e.currentTarget, items);
+    dispatchConsiderEvent(e.currentTarget, items, {trigger: TRIGGERS.DRAGGED_OVER_INDEX, id: draggedElData.id});
 }
@@ -159,8 +160,8 @@
         styleInactiveDropZones(typeToDropZones.get(type), dz => dzToConfig.get(dz).dropTargetStyle);
-        items = items.map(item => item.hasOwnProperty('isDndShadowItem')? draggedElData : item);
+        items = items.map(item => item.hasOwnProperty(SHADOW_ITEM_MARKER_PROPERTY_NAME)? draggedElData : item);
         function finalizeWithinZone() {
-            dispatchFinalizeEvent(shadowElDropZone, items);
+            dispatchFinalizeEvent(shadowElDropZone, items, {trigger: TRIGGERS.DROPPED_INTO_ZONE, id: draggedElData.id});
             if (shadowElDropZone !== originDropZone) {
                 // letting the origin drop zone know the element was permanently taken away
-                dispatchFinalizeEvent(originDropZone, dzToConfig.get(originDropZone).items);
+                dispatchFinalizeEvent(originDropZone, dzToConfig.get(originDropZone).items, {trigger: TRIGGERS.DROPPED_INTO_ANOTHER, id: draggedElData.id});
             }
@@ -179,6 +180,6 @@ shadowElDropZone.children[shadowElIdx].style.visibility = '';
         shadowElIdx = originIndex;
-        dispatchConsiderEvent(originDropZone, items);
+        dispatchConsiderEvent(originDropZone, items, {trigger: TRIGGERS.DROPPED_OUTSIDE_OF_ANY, id: draggedElData.id});
         function finalizeBackToOrigin() {
             items.splice(originIndex, 1, draggedElData);
-            dispatchFinalizeEvent(originDropZone, items);
+            dispatchFinalizeEvent(originDropZone, items, {trigger: TRIGGERS.DROPPED_OUTSIDE_OF_ANY, id: draggedElData.id});
             shadowElDropZone.children[shadowElIdx].style.visibility = '';
@@ -224,2 +225,12 @@ cleanupPostDrop();
 
+
+export const TRIGGERS = {
+    DRAG_STARTED: "dragStarted",
+    DRAGGED_ENTERED: DRAGGED_ENTERED_EVENT_NAME,
+    DRAGGED_OVER_INDEX: DRAGGED_OVER_INDEX_EVENT_NAME,
+    DRAGGED_LEFT: DRAGGED_LEFT_EVENT_NAME,
+    DROPPED_INTO_ZONE: "droppedIntoZone",
+    DROPPED_INTO_ANOTHER: "droppedIntoAnother",
+    DROPPED_OUTSIDE_OF_ANY: "droppedOutsideOfAny"
+};
 /**
@@ -308,3 +319,3 @@ * A Svelte custom action to turn any container to a dnd zone and all of its direct children to draggables
         draggedElType = type;
-        shadowElData = {...draggedElData, isDndShadowItem: true};
+        shadowElData = {...draggedElData, [SHADOW_ITEM_MARKER_PROPERTY_NAME]: true};
 
@@ -335,3 +346,3 @@ // creating the draggable element
         items.splice(currentIdx, 1);
-        dispatchConsiderEvent(originDropZone, items);
+        dispatchConsiderEvent(originDropZone, items, {trigger: TRIGGERS.DRAG_STARTED, id: draggedElData.id});
 
@@ -390,3 +401,3 @@ // handing over to global handlers - starting to watch the element
             styleDraggable(draggableEl, dragDisabled);
-            if (config.items[idx].hasOwnProperty('isDndShadowItem')) {
+            if (config.items[idx].hasOwnProperty(SHADOW_ITEM_MARKER_PROPERTY_NAME)) {
                 morphDraggedElementToBeLike(draggedEl, draggableEl, currentMousePosition.x, currentMousePosition.y, () => config.transformDraggedElement(draggedEl, draggedElData, idx));
@@ -393,0 +404,0 @@ styleShadowEl(draggableEl);

src/helpers/dispatcher.js

@@ -5,11 +5,25 @@ // external events
 
-export function dispatchFinalizeEvent(el, items) {
+/**
+ * @typedef {Object} Info
+ * @property {string} trigger
+ * @property {string} id
+ * @param {Node} el
+ * @param {Array} items
+ * @param {Info} info
+ */
+export function dispatchFinalizeEvent(el, items, info) {
     el.dispatchEvent(new CustomEvent(FINALIZE_EVENT_NAME, {
-        detail: {items}
+        detail: {items, info}
     }));
 }
 
-export function dispatchConsiderEvent(el, items) {
+/**
+ * Dispatches a consider event
+ * @param {Node} el
+ * @param {Array} items
+ * @param {Info} info
+ */
+export function dispatchConsiderEvent(el, items, info) {
     el.dispatchEvent(new CustomEvent(CONSIDER_EVENT_NAME, {
-        detail: {items}
+        detail: {items, info}
     }));
@@ -19,6 +33,6 @@ }
 // internal events
-export const DRAGGED_ENTERED_EVENT_NAME = 'draggedentered';
-export const DRAGGED_LEFT_EVENT_NAME = 'draggedleft';
-export const DRAGGED_OVER_INDEX_EVENT_NAME = 'draggedoverindex';
-export const DRAGGED_LEFT_DOCUMENT_EVENT_NAME = 'draggedleftdocument';
+export const DRAGGED_ENTERED_EVENT_NAME = 'draggedEntered';
+export const DRAGGED_LEFT_EVENT_NAME = 'draggedLeft';
+export const DRAGGED_OVER_INDEX_EVENT_NAME = 'draggedOverIndex';
+export const DRAGGED_LEFT_DOCUMENT_EVENT_NAME = 'draggedLeftDocument';
 export function dispatchDraggedElementEnteredContainer(containerEl, indexObj, draggedEl) {
@@ -25,0 +39,0 @@ containerEl.dispatchEvent(new CustomEvent(DRAGGED_ENTERED_EVENT_NAME, {

src/index.js

@@ -1,1 +0,1 @@
-export { dndzone } from './action.js';
+export { dndzone, TRIGGERS, SHADOW_ITEM_MARKER_PROPERTY_NAME } from './action.js';

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

138688

increased by3.53%

Lines of code

2881

increased by2.64%

Number of lines in readme file

128

increased by7.56%

No dependency changes