Added lockIcon/unlockIcon parameters 🔓

actuallyakash · May 24, 2021 · 7938f37 · 7938f37
1 parent 1e8ddfd
commit 7938f37
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 20 deletions.
diff --git a/index.html b/index.html
@@ -92,6 +92,8 @@
             showSpacingValue: true,
             showLabel: 'Spacer Label',
             enableLock: true,
+            lockIcon: '🔒',
+            unlockIcon: '🔓',
             onDragEnd: function( data) {
                 console.log(data);
             }

diff --git a/readme.md b/readme.md
@@ -1,7 +1,5 @@
 ## TODO: options needed
 
-* lockIcon
-* unlockIcon
 
 ## Done
 
@@ -19,5 +17,8 @@
 * 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
-* enableLock: (to link opposite spacers)
-    default - <span class="lock"></span>, <span class="unlock"></span>
+* enableLock: (to link opposite spacers) | type: boolean
+* lockIcon
+    default - <span class="lock"></span>
+* unlockIcon
+    default - <span class="unlock"></span>
diff --git a/spacers/spacers.css b/spacers/spacers.css
@@ -131,20 +131,21 @@
     cursor: pointer;
     font-size: 17px;
     vertical-align: middle;
+    background-repeat: no-repeat;
 }
 
 /* Lock/unlock icon */
 .spacer-lock .icon {
     width: 17px;
     height: 17px;
     display: inline-block;
-    margin-left: 5px;
+    margin-left: 3px;
 }
 
-.spacer-lock .lock {
+.spacer-lock.locked .icon {
     background-image: url('../assets/images/padlock-lock.svg');
 }
 
-.spacer-lock .unlock {
+.spacer-lock.unlocked .icon {
     background-image: url('../assets/images/padlock-unlock.svg');
 }
diff --git a/spacers/spacers.js b/spacers/spacers.js
@@ -49,9 +49,9 @@ function spacers( options ) {
         element.style.position = "relative";
 
         let spacerSize, spacerDivs = '';
-        let lockIcon = '<span class="lock icon"></span>';
-        let unlockIcon = '<span class="unlock icon"></span>';
-        let spacerLock = options.enableLock ? '<span class="spacer-lock">' + unlockIcon + '</span>' : '';
+        let lockIcon = options.lockIcon ? options.lockIcon : '<span class="icon"></span>';
+        let unlockIcon = options.unlockIcon ? options.unlockIcon : '<span class="icon"></span>';
+        let spacerLock = options.enableLock ? '<span class="spacer-lock unlocked">' + unlockIcon + '</span>' : '';
 
         spacingProperties.forEach( property => {
             switch( property ) {
@@ -242,6 +242,13 @@ function spacers( options ) {
             element.style[oppositeProperty] = spacerValue;
         }
 
+        function stringToHtml( html ) {
+            let temp = document.createElement( 'template' );
+            html = html.trim(); // Never return a space text node as a result
+            temp.innerHTML = html;
+            return temp.content.firstChild;
+        }
+
         // Click event on spacer lock
         let spacerLocks = document.querySelectorAll( '.spacer-lock' );
 
@@ -250,27 +257,31 @@ function spacers( options ) {
             if( lock.classList.contains( 'lock-active' ) ) {
                 return;
             }
-
+        
             lock.classList.add( 'lock-active' );
 
             lock.addEventListener( 'mousedown', function() {
-
-                let currentState = lock.querySelector( '.icon' ).classList;
-
-                if ( currentState.contains( 'unlock' ) ) {
+        
+                let currentState = lock.classList;
+                
+                if ( currentState.contains( 'unlocked' ) ) {
                     // adding lock class
                     lock.closest( '.spacer' ).classList.add( 'spacer-locked' );
+                    // swapping lock icon
+                    lock.replaceChild( stringToHtml( lockIcon ), lock.childNodes[0] );
                     // Updating icon property
-                    currentState.remove( 'unlock' );
-                    currentState.add( 'lock' );
+                    currentState.remove( 'unlocked' );
+                    currentState.add( 'locked' );
                 } else {
                     // adding lock class
                     lock.closest( '.spacer' ).classList.remove( 'spacer-locked' );
+                    // swapping lock icon
+                    lock.replaceChild( stringToHtml( unlockIcon ), lock.childNodes[0] );
                     // Updating icon property
-                    currentState.remove( 'lock' );
-                    currentState.add( 'unlock' );
+                    currentState.remove( 'locked' );
+                    currentState.add( 'unlocked' );
                 }
-
+        
             });
         });