Added hover parameter 🛸

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

Hide file tree

Showing 3 changed files with 16 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -86,6 +86,7 @@
             element: '.inner-element',
             appendHtml: 'begin',
             defaultSpacing: '10px',
+            showOnHover: true,
             onDragEnd: function( data) {
                 console.log(data);
             }

diff --git a/spacers/spacers.css b/spacers/spacers.css
@@ -80,3 +80,16 @@
 .spacer[data-type=margin].spacer[data-position=right] {
     left: 100%;
 }
+
+/* On-hover */
+.spacer-wrapper.on-hover .spacer {
+    background: transparent;
+}
+
+.spacer-wrapper.on-hover .spacer[data-type=padding]:hover {
+    background: var(--padding-bg);
+}
+
+.spacer-wrapper.on-hover .spacer[data-type=margin]:hover {
+    background: var(--margin-bg);
+}
diff --git a/spacers/spacers.js b/spacers/spacers.js
@@ -5,6 +5,7 @@ function spacers( options ) {
     let defaultSpacing = options.defaultSpacing ? options.defaultSpacing : '8px';
     let spacingUnit = options.spacingUnit ? options.spacingUnit : "px";
     let enablePadding = options.padding == undefined || options.padding == true ? true : false;
+    let showOnHover = options.showOnHover ? ' on-hover' : '';
     let enableMargin = options.margin ? true : false;
     let html, appendHtml;
     let margin, padding;
@@ -41,7 +42,7 @@ function spacers( options ) {
         // settings element's position relative
         element.style.position = "relative";
 
-        html = '<div class="spacers-wrapper">';
+        html = '<div class="spacer-wrapper' + showOnHover + '">';
 
         // Padding
         html += '<div data-type="padding" data-position="top" data-dragging="bottom" data-size="'+ padding.top +'" class="spacer spacer-' + spacerId + ' spacer-top"></div><div data-type="padding" data-position="bottom" data-dragging="top" data-size="'+ padding.bottom +'" class="spacer spacer-' + spacerId + ' spacer-bottom"></div><div data-type="padding" data-position="left" data-dragging="right" data-size="'+ padding.left +'" class="spacer spacer-' + spacerId + ' spacer-left"></div><div data-type="padding" data-position="right" data-dragging="left" data-size="'+ padding.right +'" class="spacer spacer-' + spacerId + ' spacer-right"></div>';