Added 4 more parameters 🔢

actuallyakash · Mar 29, 2021 · 181ec06 · 181ec06
1 parent a54989c
commit 181ec06
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 9 deletions.
diff --git a/index.html b/index.html
@@ -85,6 +85,7 @@
         spacers({
             element: '.inner-element',
             appendHtml: 'begin',
+            defaultSpacing: '10px',
             onDragEnd: function( data) {
                 console.log(data);
             }

diff --git a/readme.md b/readme.md
@@ -1,9 +1,5 @@
 ## TODO: options needed
 
-* defaultSpacing (default margin/padding values) | type: string
-* defaultPadding (an object with top, bottom, left, right values) | type: object
-* defaultMargin (an object with top, bottom, left, right values) | type: object
-* spacingUnit (to change default spacing unit of spacers like em, rem, in, cm ..etc) | type: string
 * showOnHover (to show spacers only on hover) | type: boolean
 * showSpacingValue (to show the margin/padding number in the center of spacer) | type: boolean
 * showLabel: (to show the label beside spacing value) | type: string
@@ -18,3 +14,7 @@
 * onDragEnd (a function for using the values when drag is ended) | type: function | ref: interactjs
 * containedArea (use if you're not able to find the element (ex- iframe)) | type: object
 * spacerClass (for adding classes in the spacers) | type: string
+* defaultSpacing (default margin/padding values) | type: string
+* defaultPadding (an object with top, bottom, left, right values) | type: object
+* defaultMargin (an object with top, bottom, left, right values) | type: object
+* spacingUnit (to change default spacing unit of spacers like em, rem, in, cm ..etc) | type: string
diff --git a/spacers/spacers.js b/spacers/spacers.js
@@ -14,14 +14,14 @@ function spacers( options ) {
         left: options.defaultMargin ? options.defaultMargin.left : '',
         bottom: options.defaultMargin ? options.defaultMargin.bottom : '',
         right: options.defaultMargin ? options.defaultMargin.right : ''
-    }
+    };
 
     padding = {
         top: options.defaultPadding ? options.defaultPadding.top : '',
         left: options.defaultPadding ? options.defaultPadding.left : '',
         bottom: options.defaultPadding ? options.defaultPadding.bottom : '',
         right: options.defaultPadding ? options.defaultPadding.right : ''
-    }
+    };
 
     // Location to append spacers
     switch( options.appendHtml ) {
@@ -59,16 +59,19 @@ function spacers( options ) {
         let startX, startY, startWidth, startHeight, position, dragSide;
 
         spacers.forEach(spacer => {
-
-            document.documentElement.style.setProperty( '--spacer-size', defaultSpacing );
+
+            // Adding default spacing
+            if( !options.defaultPadding || !options.defaultMargin ) {
+                document.documentElement.style.setProperty( '--spacer-val', defaultSpacing );
+            }
 
             // Addding custom-defined classes
             if ( options.spacerClass ) {
                 spacer.classList.add( options.spacerClass );
             }
 
             // Adding default spacing
-            spacerValue = spacer.getAttribute('data-size') ? spacer.getAttribute('data-size') + "px" : defaultSpacing + spacingUnit;
+            spacerValue = spacer.getAttribute('data-size') ? spacer.getAttribute('data-size') : defaultSpacing;
             spacerPosition = spacer.getAttribute('data-position');
 
             if( spacerPosition == "top" || spacerPosition == "bottom" ) {