kitzo 1.1.4 → 1.1.6

package/README.md

@@ -21,7 +21,7 @@ npm i kitzo
 or
 
 ```javascript
-<script src="https://cdn.jsdelivr.net/npm/kitzo@1.1.4/dist/kitzo.umd.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/kitzo@1.1.6/dist/kitzo.umd.min.js"></script>
 ```
 
 > Attach this script tag in the html head tag and you are good to go.

package/dist/kitzo.esm.js

@@ -151,12 +151,7 @@ function debounce(fn, delay = 300) {
 }
 
 function rippleStyles() {
-  return `.kitzo-ripple {
-  position: relative;
-  overflow: hidden;
-}
-
-.kitzo-ripples {
+  return `.kitzo-ripples {
   display: block;
   position: absolute;
   top: 0;
@@ -191,6 +186,7 @@ function rippleStyles() {
 
 //! Ripple effect
 let rippleListenerAdded = false;
+const rippleConfigMap = new WeakMap();
 
 function ripple(element, config = {}) {
   if (!element) {
@@ -210,22 +206,29 @@ function ripple(element, config = {}) {
     config
   );
 
-  const { opacity, color, duration, size } = config;
-
   const allButtons = getButtons(element);
   if (!allButtons) {
     console.error('[kitzo.ripple] No elements found for kitzoRipple');
     return;
   }
   allButtons.forEach((btn) => {
-    btn.classList.add('kitzo-ripple');
-    btn.setAttribute('data-kitzo-ripple', 'true');
+    btn.setAttribute('data-kitzo-ripple', true);
+    rippleConfigMap.set(btn, config);
+    const { position, overflow } = window.getComputedStyle(btn);
+    console.log(position, overflow);
+    if (position === 'static') {
+      btn.style.position = 'relative';
+    }
+    if (overflow === 'visible') {
+      btn.style.overflow = 'hidden';
+    }
   });
 
   if (!rippleListenerAdded) {
     document.addEventListener('mousedown', (e) => {
       const btn = e.target.closest('[data-kitzo-ripple]');
       if (btn) {
+        const { opacity, duration, color, size } = rippleConfigMap.get(btn);
         const span = document.createElement('span');
         span.className = 'kitzo-ripples';
         btn.appendChild(span);

package/dist/kitzo.umd.js

@@ -157,12 +157,7 @@
   }
 
   function rippleStyles() {
-    return `.kitzo-ripple {
-  position: relative;
-  overflow: hidden;
-}
-
-.kitzo-ripples {
+    return `.kitzo-ripples {
   display: block;
   position: absolute;
   top: 0;
@@ -197,6 +192,7 @@
 
   //! Ripple effect
   let rippleListenerAdded = false;
+  const rippleConfigMap = new WeakMap();
 
   function ripple(element, config = {}) {
     if (!element) {
@@ -216,22 +212,29 @@
       config
     );
 
-    const { opacity, color, duration, size } = config;
-
     const allButtons = getButtons(element);
     if (!allButtons) {
       console.error('[kitzo.ripple] No elements found for kitzoRipple');
       return;
     }
     allButtons.forEach((btn) => {
-      btn.classList.add('kitzo-ripple');
-      btn.setAttribute('data-kitzo-ripple', 'true');
+      btn.setAttribute('data-kitzo-ripple', true);
+      rippleConfigMap.set(btn, config);
+      const { position, overflow } = window.getComputedStyle(btn);
+      console.log(position, overflow);
+      if (position === 'static') {
+        btn.style.position = 'relative';
+      }
+      if (overflow === 'visible') {
+        btn.style.overflow = 'hidden';
+      }
     });
 
     if (!rippleListenerAdded) {
       document.addEventListener('mousedown', (e) => {
         const btn = e.target.closest('[data-kitzo-ripple]');
         if (btn) {
+          const { opacity, duration, color, size } = rippleConfigMap.get(btn);
           const span = document.createElement('span');
           span.className = 'kitzo-ripples';
           btn.appendChild(span);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kitzo",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "description": "A lightweight JavaScript UI micro-library.",
   "type": "module",
   "main": "./dist/kitzo.umd.js",