svelte-dnd-action - npm Package Compare versions

Comparing version 0.2.4 to 0.2.5

dist/index.js

@@ -527,6 +527,10 @@ (function (global, factory) {
      * @param {Array<HTMLElement>} dropZones
+     * @param {Function} getStyles - maps a dropzone to a styles object (so the styles can be removed)
      */
-    function styleActiveDropZones(dropZones) {
+    function styleActiveDropZones(dropZones, getStyles = () => {}) {
         dropZones.forEach(dz => {
-            dz.style.outline = 'rgba(255, 255, 102, 0.7) solid 2px';
+            const styles = getStyles(dz);
+            Object.keys(styles).forEach(style => {
+                dz.style[style] = styles[style];
+            });
         });
@@ -538,6 +542,10 @@ }
      * @param {Array<HTMLElement>} dropZones
+     * @param {Function} getStyles - maps a dropzone to a styles object
      */
-    function styleInActiveDropZones(dropZones) {
+    function styleInActiveDropZones(dropZones, getStyles = () => {}) {
         dropZones.forEach(dz => {
-            dz.style.outline = '';
+            const styles = getStyles(dz);
+            Object.keys(styles).forEach(style => {
+                dz.style[style] = '';
+            });
         });
@@ -549,2 +557,5 @@ }
     const MIN_MOVEMENT_BEFORE_DRAG_START_PX = 3;
+    const DEFAULT_DROP_TARGET_STYLE = {
+        outline: 'rgba(255, 255, 102, 0.7) solid 2px',
+    };
 
@@ -677,3 +688,3 @@ let originalDragTarget;
             let {items, type} = dzToConfig.get(shadowElDropZone);
-            styleInActiveDropZones(typeToDropZones.get(type));
+            styleInActiveDropZones(typeToDropZones.get(type), dz => dzToConfig.get(dz).dropTargetStyle);
             items = items.map(item => item.hasOwnProperty('isDndShadowItem')? draggedElData : item);
@@ -694,3 +705,3 @@ function finalizeWithinZone() {
             let {items, type} = dzToConfig.get(originDropZone);
-            styleInActiveDropZones(typeToDropZones.get(type));
+            styleInActiveDropZones(typeToDropZones.get(type), dz => dzToConfig.get(dz).dropTargetStyle);
             items.splice(originIndex, 0, shadowElData);
@@ -756,3 +767,10 @@ shadowElDropZone = originDropZone;
     function dndzone(node, options) {
-        const config =  {items: [], type: undefined, flipDurationMs: 0, dragDisabled: false, dropFromOthersDisabled: false};
+        const config =  {
+            items: [],
+            type: undefined,
+            flipDurationMs: 0,
+            dragDisabled: false,
+            dropFromOthersDisabled: false,
+            dropTargetStyle: DEFAULT_DROP_TARGET_STYLE,
+        };
         console.debug("dndzone good to go", {node, options, config});
@@ -827,3 +845,4 @@ let elToIdx = new Map();
                 Array.from(typeToDropZones.get(config.type))
-                .filter(dz => dz === originDropZone || !dzToConfig.get(dz).dropFromOthersDisabled)
+                .filter(dz => dz === originDropZone || !dzToConfig.get(dz).dropFromOthersDisabled),
+                dz => dzToConfig.get(dz).dropTargetStyle,
             );
@@ -842,3 +861,11 @@
 
-        function configure({items = [], flipDurationMs:dropAnimationDurationMs = 0, type:newType = DEFAULT_DROP_ZONE_TYPE, dragDisabled = false, dropFromOthersDisabled = false, ...rest }) {
+        function configure({
+            items = [],
+            flipDurationMs:dropAnimationDurationMs = 0,
+            type:newType = DEFAULT_DROP_ZONE_TYPE,
+            dragDisabled = false,
+            dropFromOthersDisabled = false,
+            dropTargetStyle = DEFAULT_DROP_TARGET_STYLE,
+             ...rest
+         }) {
             if (Object.keys(rest).length > 0) {
@@ -858,7 +885,9 @@ console.warn(`dndzone will ignore unknown options`, rest);
 
+            config.dropTargetStyle = dropTargetStyle;
+
             if (isWorkingOnPreviousDrag && config.dropFromOthersDisabled !== dropFromOthersDisabled) {
                 if (dropFromOthersDisabled) {
-                    styleInActiveDropZones([node]);
+                    styleInActiveDropZones([node], dz => dzToConfig.get(dz).dropTargetStyle);
                 } else {
-                    styleActiveDropZones([node]);
+                    styleActiveDropZones([node], dz => dzToConfig.get(dz).dropTargetStyle);
                 }
@@ -865,0 +894,0 @@ }

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.2.4",
+  "version": "0.2.5",
   "dependencies": {
@@ -36,0 +36,0 @@ "acorn": "^7.1.1",

README.md

@@ -93,2 +93,3 @@ # SVELTE DND ACTION
 - `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.   
+- `dropTargetStyle`: Optional. Object. An object of styles to apply to the dnd-zone when items can be dragged in to it. Note: the styles override any inline styles applied to the dnd-zone. When the styles are removed, any original inline styles will be lost.
 
@@ -95,0 +96,0 @@ #### Output:

src/action.js

@@ -17,2 +17,5 @@ import { observe, unobserve } from './helpers/observer';
 const MIN_MOVEMENT_BEFORE_DRAG_START_PX = 3;
+const DEFAULT_DROP_TARGET_STYLE = {
+    outline: 'rgba(255, 255, 102, 0.7) solid 2px',
+};
 
@@ -145,3 +148,3 @@ let originalDragTarget;
         let {items, type} = dzToConfig.get(shadowElDropZone);
-        styleInActiveDropZones(typeToDropZones.get(type));
+        styleInActiveDropZones(typeToDropZones.get(type), dz => dzToConfig.get(dz).dropTargetStyle);
         items = items.map(item => item.hasOwnProperty('isDndShadowItem')? draggedElData : item);
@@ -162,3 +165,3 @@ function finalizeWithinZone() {
         let {items, type} = dzToConfig.get(originDropZone);
-        styleInActiveDropZones(typeToDropZones.get(type));
+        styleInActiveDropZones(typeToDropZones.get(type), dz => dzToConfig.get(dz).dropTargetStyle);
         items.splice(originIndex, 0, shadowElData);
@@ -224,3 +227,10 @@ shadowElDropZone = originDropZone;
 export function dndzone(node, options) {
-    const config =  {items: [], type: undefined, flipDurationMs: 0, dragDisabled: false, dropFromOthersDisabled: false};
+    const config =  {
+        items: [],
+        type: undefined,
+        flipDurationMs: 0,
+        dragDisabled: false,
+        dropFromOthersDisabled: false,
+        dropTargetStyle: DEFAULT_DROP_TARGET_STYLE,
+    };
     console.debug("dndzone good to go", {node, options, config});
@@ -295,3 +305,4 @@ let elToIdx = new Map();
             Array.from(typeToDropZones.get(config.type))
-            .filter(dz => dz === originDropZone || !dzToConfig.get(dz).dropFromOthersDisabled)
+            .filter(dz => dz === originDropZone || !dzToConfig.get(dz).dropFromOthersDisabled),
+            dz => dzToConfig.get(dz).dropTargetStyle,
         );
@@ -310,3 +321,11 @@
 
-    function configure({items = [], flipDurationMs:dropAnimationDurationMs = 0, type:newType = DEFAULT_DROP_ZONE_TYPE, dragDisabled = false, dropFromOthersDisabled = false, ...rest }) {
+    function configure({
+        items = [],
+        flipDurationMs:dropAnimationDurationMs = 0,
+        type:newType = DEFAULT_DROP_ZONE_TYPE,
+        dragDisabled = false,
+        dropFromOthersDisabled = false,
+        dropTargetStyle = DEFAULT_DROP_TARGET_STYLE,
+         ...rest
+     }) {
         if (Object.keys(rest).length > 0) {
@@ -326,7 +345,9 @@ console.warn(`dndzone will ignore unknown options`, rest);
 
+        config.dropTargetStyle = dropTargetStyle;
+
         if (isWorkingOnPreviousDrag && config.dropFromOthersDisabled !== dropFromOthersDisabled) {
             if (dropFromOthersDisabled) {
-                styleInActiveDropZones([node]);
+                styleInActiveDropZones([node], dz => dzToConfig.get(dz).dropTargetStyle);
             } else {
-                styleActiveDropZones([node]);
+                styleActiveDropZones([node], dz => dzToConfig.get(dz).dropTargetStyle);
             }
@@ -333,0 +354,0 @@ }

src/helpers/styler.js

@@ -117,6 +117,10 @@ const TRANSITION_DURATION_SECONDS = 0.2;
  * @param {Array<HTMLElement>} dropZones
+ * @param {Function} getStyles - maps a dropzone to a styles object (so the styles can be removed)
  */
-export function styleActiveDropZones(dropZones) {
+export function styleActiveDropZones(dropZones, getStyles = () => {}) {
     dropZones.forEach(dz => {
-        dz.style.outline = 'rgba(255, 255, 102, 0.7) solid 2px';
+        const styles = getStyles(dz)
+        Object.keys(styles).forEach(style => {
+            dz.style[style] = styles[style];
+        });
     });
@@ -128,7 +132,11 @@ }
  * @param {Array<HTMLElement>} dropZones
+ * @param {Function} getStyles - maps a dropzone to a styles object
  */
-export function styleInActiveDropZones(dropZones) {
+export function styleInActiveDropZones(dropZones, getStyles = () => {}) {
     dropZones.forEach(dz => {
-        dz.style.outline = '';
+        const styles = getStyles(dz)
+        Object.keys(styles).forEach(style => {
+            dz.style[style] = '';
+        });
     });
 }

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

120711

increased by2.76%

Lines of code

2579

increased by3.37%

Number of lines in readme file

114

increased by0.88%

No dependency changes