kitzo 1.0.5 → 1.1.0

package/README.md

@@ -10,6 +10,7 @@ Current features
 - Tooltip on mouseover
 - Ripple effect on mousedown
 - Debounce function
+- Hover clip-path effect
 
 #### Install
 
@@ -17,10 +18,10 @@ Current features
 npm i kitzo
 ```
 
-> or
+or
 
 ```javascript
-<script src="https://cdn.jsdelivr.net/npm/kitzo@1.0.5/dist/kitzo.umd.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/kitzo@1.1.0/dist/kitzo.umd.min.js"></script>
 ```
 
 > Attach this script tag in the html head tag and you are good to go.
@@ -29,24 +30,27 @@ npm i kitzo
 
 #### Quick usage overview
 
-| [NPM](#npm-usage)                | [CDN](#cdn-usage)                     |
-| -------------------------------- | ------------------------------------- |
-| [`kitzoCopy()`](#copy-api)       | [`kitzo.copy()`](#copy-api-1)         |
-| [`kitzoTooltip()`](#tooltip-api) | [`kitzo.tooltip()`](#tooltip-api-1)   |
-| [`kitzoRipple()`](#ripple-api)   | [`kitzo.ripple()`](#ripple-api-1)     |
-| [`kitzoDebounce()`](#debounce)   | [`kitzo.debounce()`](#debounce-api-1) |
-
-#### NPM usage
-
 ```javascript
-import { kitzoCopy, kitzoTooltip, kitzoRipple, kitzoDebounce } from 'kitzo';
+// NPM usage
+import kitzo from 'kitzo';
 ```
 
+| [API](#apis)                        |
+| ----------------------------------- |
+| [`kitzo.copy()`](#copy-api)         |
+| [`kitzo.tooltip()`](#tooltip-api)   |
+| [`kitzo.ripple()`](#ripple-api)     |
+| [`kitzo.debounce()`](#debounce-api) |
+| [`kitzo.clippath()`](#clippath-api)     |
+
+#### APIs
+
 ```javascript
-kitzoCopy();
-kitzoTooltip();
-kitzoRipple();
-kitzoDebounce();
+kitzo.copy();
+kitzo.tooltip();
+kitzo.ripple();
+kitzo.debounce();
+kitzo.clippath();
 ```
 
 > Use a modern build tool. **vite** - recommended
@@ -71,7 +75,7 @@ kitzoTooltip(selectors | element | NodeList, {
   arrow: 'on' | 'off',
   offset: number,
   customClass: string,
-  style: {},
+  style: object,
 });
 ```
 
@@ -84,7 +88,7 @@ kitzoRipple(selectors | element | NodeList, {
   opacity: number,
   duration: number,
   color: string,
-  size: number | null,
+  size: number,
 });
 ```
 
@@ -110,68 +114,13 @@ document.querySelector('#search').addEventListener('input', (e) => {
 
 > Debounce on every call of function.
 
----
-
-#### CDN usage
-
-```html
-<script src="https://cdn.jsdelivr.net/npm/kitzo@1.0.0/dist/kitzo.umd.min.js"></script>
-```
-
-```javascript
-kitzo.copy();
-kitzo.tooltip();
-kitzo.ripple();
-kitzo.debounce();
-```
-
-##### Copy API:
+##### Clippath API:
 
 ```javascript
-kitzo.copy(selectors | element, {
-  doc: string,
-  event: 'click' | 'dblclick' | 'contextmenu' | 'mouseup' | 'touchend',
-});
-```
-
-##### Tooltip API:
-
-```javascript
-kitzo.tooltip(selectors | element | NodeList, {
-  tooltip: string,
-  direction: 'top' | 'right' | 'bottom' | 'left',
-  arrow: 'on' | 'off',
-  offset: number,
-  customClass: string,
-  style: {},
-});
-```
-
-##### Ripple API:
-
-```javascript
-kitzo.ripple(selectors | element | NodeList, {
-  opacity: number,
-  duration: number,
-  color: string,
-  size: number | null,
-});
-```
-
-##### Debounce API:
-
-```javascript
-kitzo.debounce(callback, delayInMilliseconds);
-```
-
-```javascript
-// Log only after typing stops for 500ms
-const logSearch = kitzo.debounce((text) => {
-  console.log('Searching for:', text);
-}, 500);
-
-// Attach to input
-document.querySelector('#search').addEventListener('input', (e) => {
-  logSearch(e.target.value);
+kitzo.clippath(selectors | element | NodeList, {
+  text: string,
+  clippathSize: string | number,
+  smooth: boolean,
+  style: object,
 });
 ```

package/dist/kitzo.d.ts

@@ -1,5 +1,5 @@
-export function kitzoTooltip(
-  element: string | Element | NodeListOf<Element> | HTMLCollection,
+export function tooltip(
+  element: string | Element | NodeListOf<Element>,
   config?: {
     /**
      * The tooltip text to display (default: "Tool tip")
@@ -33,8 +33,8 @@ export function kitzoTooltip(
   }
 ): void;
 
-export function kitzoRipple(
-  element: string | Element | NodeListOf<Element> | HTMLCollection,
+export function ripple(
+  element: string | Element | NodeListOf<Element>,
   config?: {
     /**
      * Ripple opacity (0 to 1). Default: 0.5
@@ -55,7 +55,7 @@ export function kitzoRipple(
   }
 ): void;
 
-export function kitzoCopy(
+export function copy(
   element: string | Element | NodeListOf<Element>,
   config: {
     /**
@@ -77,4 +77,14 @@ export function kitzoCopy(
   }
 ): void;
 
-export function kitzoDebounce<Args extends any[]>(fn: (...args: Args) => any, delay?: number): (...args: Args) => void;
+export function debounce<Args extends any[]>(fn: (...args: Args) => any, delay?: number): (...args: Args) => void;
+
+export function clippath(
+  element: string | Element | NodeListOf<Element>,
+  config?: {
+    text?: String;
+    clippathSize?: String | Number;
+    smooth?: Boolean;
+    style?: Partial<CSSStyleDeclaration>;
+  }
+): void;

package/dist/kitzo.esm.js

@@ -1,4 +1,5 @@
 //! Helper functions
+// Get elements from dom
 function getButtons(element) {
   if (typeof element === 'string') {
     return document.querySelectorAll(element);
@@ -14,6 +15,7 @@ function getButtons(element) {
 // Add style tags
 let tooltipStyleAdded = false;
 let rippleStyleAdded = false;
+let clippathStyleAdded = false;
 
 function addStyleTag(styles) {
   const style = document.createElement('style');
@@ -30,6 +32,10 @@ function addStyleTagToHtmlHead(type, styles) {
     addStyleTag(styles);
     rippleStyleAdded = true;
   }
+  if (type === 'clippath' && !clippathStyleAdded) {
+    addStyleTag(styles);
+    clippathStyleAdded = true;
+  }
 }
 
 //! Copy function
@@ -64,7 +70,7 @@ const copyConfigMap = new WeakMap();
 const allowedEvents = ['click', 'dblclick', 'contextmenu', 'mouseup', 'touchend'];
 const attachedEvents = new Set();
 
-function kitzoCopy(element, config = {}) {
+function copy(element, config = {}) {
   config = Object.assign(
     {
       doc: '',
@@ -107,7 +113,7 @@ function kitzoCopy(element, config = {}) {
   }
 
   if (!allowedEvents.includes(event)) {
-    console.warn(`[kitzoCopy] "${event}" is not allowed. Defaulting to "click".`);
+    console.warn(`[kitzo.copy] "${event}" is not allowed. Defaulting to "click".`);
   }
 
   const safeEvent = allowedEvents.includes(event) ? event : 'click';
@@ -135,7 +141,7 @@ function kitzoCopy(element, config = {}) {
   }
 }
 
-function kitzoDebounce(fn, delay = 300) {
+function debounce(fn, delay = 300) {
   let timer;
 
   return (...args) => {
@@ -186,9 +192,9 @@ function rippleStyles() {
 //! Ripple effect
 let rippleListenerAdded = false;
 
-function kitzoRipple(element, config = {}) {
+function ripple(element, config = {}) {
   if (!element) {
-    console.error('A button element/selector is expected');
+    console.error('[kitzo.ripple] A button element/selector is expected');
     return;
   }
 
@@ -208,7 +214,7 @@ function kitzoRipple(element, config = {}) {
 
   const allButtons = getButtons(element);
   if (!allButtons) {
-    console.error('No elements found for kitzoRipple');
+    console.error('[kitzo.ripple] No elements found for kitzoRipple');
     return;
   }
   allButtons.forEach((btn) => {
@@ -330,7 +336,7 @@ let tooltipDiv;
 let tooltipListenerAdded = false;
 const tooltipConfigMap = new WeakMap();
 
-function kitzoTooltip(element, config = {}) {
+function tooltip(element, config = {}) {
   if (window.matchMedia('(pointer: coarse)').matches) return;
 
   if (!element) {
@@ -354,14 +360,14 @@ function kitzoTooltip(element, config = {}) {
 
   const allButtons = getButtons(element);
   if (!allButtons) {
-    console.error('No elements found for kitzoTooltip');
+    console.error('[kitzo.tooltip] No elements found for kitzoTooltip');
     return;
   }
 
   const disAllowedStyles = ['top', 'left', 'right', 'bottom', 'position', 'zIndex', 'opacity', 'transform', 'translate', 'scale', 'rotate', 'perspective'];
   for (const key of disAllowedStyles) {
     if (key in config.style) {
-      console.warn(`[kitzoTooltip] "${key}" style is managed internally and will be ignored.`);
+      console.warn(`[kitzo.tooltip] "${key}" style is managed internally and will be ignored.`);
       delete config.style[key];
     }
   }
@@ -451,4 +457,167 @@ function kitzoTooltip(element, config = {}) {
   }
 }
 
-export { kitzoCopy, kitzoDebounce, kitzoRipple, kitzoTooltip };
+function clippathStyles() {
+  return `.kitzo-clippath-div {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+  opacity: 0;
+  clip-path: circle(0 at var(--kitzo-clippath-pos-x) var(--kitzo-clippath-pos-y));
+  transition: var(--kitzo-clippath-transition);
+}
+
+.kitzo-clippath-div.show {
+  opacity: 1;
+  clip-path: circle(var(--kitzo-clippath-size) at var(--kitzo-clippath-pos-x) var(--kitzo-clippath-pos-y));
+}`;
+}
+
+function getClippathSize(size) {
+  if (size?.trim?.() === '') {
+    return '20%';
+  }
+  if (typeof size === 'number') {
+    if (size < 0) {
+      console.warn("[kitzo.clippath] please provide a string value or positive number(px). Default is '20%'");
+      return `20%`;
+    }
+    return `${size}px`;
+  }
+  if (typeof size === 'string') {
+    return `${size}`;
+  }
+  console.warn("[kitzo.clippath] please provide a string value or positive number(px). Default is '20%'");
+  return '20%';
+}
+
+const clippathConfigMap = new WeakMap();
+let isClippathListenersAdded = false;
+let clippathDiv;
+
+function clippath(element, config = {}) {
+  if (window.matchMedia('(pointer:coarse)').matches) return;
+
+  if (!element) {
+    console.error('[kitzo.clippath] A button element/selector is expected');
+    return;
+  }
+
+  addStyleTagToHtmlHead('clippath', clippathStyles());
+
+  config = Object.assign(
+    {
+      text: '',
+      clippathSize: '20%',
+      smooth: true,
+      style: {},
+    },
+    config
+  );
+
+  const allButtons = getButtons(element);
+  if (!allButtons) {
+    console.error('[kitzo.clippath] No elements found for kitzoTooltip');
+    return;
+  }
+
+  const disAllowedStyles = ['top', 'left', 'right', 'bottom', 'position', 'opacity', 'transform', 'translate', 'scale', 'rotate', 'perspective'];
+  for (const key of disAllowedStyles) {
+    if (key in config.style) {
+      console.warn(`[kitzo.clippath] "${key}" style is managed internally and will be ignored.`);
+      delete config.style[key];
+    }
+  }
+
+  allButtons.forEach((btn) => {
+    btn.setAttribute('data-kitzo-clippath', true);
+    clippathConfigMap.set(btn, config);
+  });
+
+  if (!clippathDiv) {
+    clippathDiv = document.createElement('div');
+    clippathDiv.className = 'kitzo-clippath-div';
+    document.body.appendChild(clippathDiv);
+  }
+
+  if (!isClippathListenersAdded) {
+    let isHovering = false;
+
+    document.addEventListener('mouseover', (e) => {
+      const btn = e.target.closest('[data-kitzo-clippath]');
+
+      if (btn) {
+        isHovering = true;
+        const { text, style, clippathSize, smooth } = clippathConfigMap.get(btn);
+        const { width, height, top, left } = btn.getBoundingClientRect();
+
+        clippathDiv.removeAttribute('style');
+
+        clippathDiv.style.width = width + 'px';
+        clippathDiv.style.height = height + 'px';
+        clippathDiv.style.top = top + 'px';
+        clippathDiv.style.left = left + 'px';
+
+        if (!text) {
+          clippathDiv.innerHTML = btn.innerHTML;
+        } else {
+          clippathDiv.innerHTML = text;
+        }
+
+        clippathDiv.style.setProperty('--kitzo-clippath-transition', smooth ? 'clip-path 150ms ease-out, opacity 150ms' : 'none');
+        clippathDiv.style.setProperty('--kitzo-clippath-size', getClippathSize(clippathSize));
+
+        const { borderRadius, font, letterSpacing, lineHeight, border, boxSizing, padding } = window.getComputedStyle(btn);
+
+        Object.assign(clippathDiv.style, {
+          backgroundColor: '#01c2b8',
+          color: 'white',
+          borderRadius,
+          font,
+          letterSpacing,
+          lineHeight,
+          border,
+          boxSizing,
+          padding,
+          ...style,
+        });
+
+        requestAnimationFrame(() => {
+          clippathDiv.classList.add('show');
+        });
+      }
+    });
+
+    document.addEventListener('mouseout', (e) => {
+      const btn = e.target.closest('[data-kitzo-clippath]');
+
+      if (btn) {
+        clippathDiv.classList.remove('show');
+        isHovering = false;
+      }
+    });
+
+    document.addEventListener('mousemove', (e) => {
+      if (!isHovering) return;
+      const btn = e.target.closest('[data-kitzo-clippath]');
+
+      if (btn) {
+        const { top, left } = btn.getBoundingClientRect();
+        const localX = e.clientX - left;
+        const localY = e.clientY - top;
+
+        clippathDiv.style.setProperty('--kitzo-clippath-pos-x', `${localX}px`);
+        clippathDiv.style.setProperty('--kitzo-clippath-pos-y', `${localY}px`);
+      }
+    });
+
+    isClippathListenersAdded = true;
+  }
+}
+
+const kitzo = { copy, debounce, ripple, tooltip, clippath };
+
+export { kitzo as default };

package/dist/kitzo.umd.js

@@ -5,6 +5,7 @@
 })(this, (function (exports) { 'use strict';
 
   //! Helper functions
+  // Get elements from dom
   function getButtons(element) {
     if (typeof element === 'string') {
       return document.querySelectorAll(element);
@@ -20,6 +21,7 @@
   // Add style tags
   let tooltipStyleAdded = false;
   let rippleStyleAdded = false;
+  let clippathStyleAdded = false;
 
   function addStyleTag(styles) {
     const style = document.createElement('style');
@@ -36,6 +38,10 @@
       addStyleTag(styles);
       rippleStyleAdded = true;
     }
+    if (type === 'clippath' && !clippathStyleAdded) {
+      addStyleTag(styles);
+      clippathStyleAdded = true;
+    }
   }
 
   //! Copy function
@@ -113,7 +119,7 @@
     }
 
     if (!allowedEvents.includes(event)) {
-      console.warn(`[kitzoCopy] "${event}" is not allowed. Defaulting to "click".`);
+      console.warn(`[kitzo.copy] "${event}" is not allowed. Defaulting to "click".`);
     }
 
     const safeEvent = allowedEvents.includes(event) ? event : 'click';
@@ -194,7 +200,7 @@
 
   function ripple(element, config = {}) {
     if (!element) {
-      console.error('A button element/selector is expected');
+      console.error('[kitzo.ripple] A button element/selector is expected');
       return;
     }
 
@@ -214,7 +220,7 @@
 
     const allButtons = getButtons(element);
     if (!allButtons) {
-      console.error('No elements found for kitzoRipple');
+      console.error('[kitzo.ripple] No elements found for kitzoRipple');
       return;
     }
     allButtons.forEach((btn) => {
@@ -360,14 +366,14 @@
 
     const allButtons = getButtons(element);
     if (!allButtons) {
-      console.error('No elements found for kitzoTooltip');
+      console.error('[kitzo.tooltip] No elements found for kitzoTooltip');
       return;
     }
 
     const disAllowedStyles = ['top', 'left', 'right', 'bottom', 'position', 'zIndex', 'opacity', 'transform', 'translate', 'scale', 'rotate', 'perspective'];
     for (const key of disAllowedStyles) {
       if (key in config.style) {
-        console.warn(`[kitzoTooltip] "${key}" style is managed internally and will be ignored.`);
+        console.warn(`[kitzo.tooltip] "${key}" style is managed internally and will be ignored.`);
         delete config.style[key];
       }
     }
@@ -457,6 +463,168 @@
     }
   }
 
+  function clippathStyles() {
+    return `.kitzo-clippath-div {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+  opacity: 0;
+  clip-path: circle(0 at var(--kitzo-clippath-pos-x) var(--kitzo-clippath-pos-y));
+  transition: var(--kitzo-clippath-transition);
+}
+
+.kitzo-clippath-div.show {
+  opacity: 1;
+  clip-path: circle(var(--kitzo-clippath-size) at var(--kitzo-clippath-pos-x) var(--kitzo-clippath-pos-y));
+}`;
+  }
+
+  function getClippathSize(size) {
+    if (size?.trim?.() === '') {
+      return '20%';
+    }
+    if (typeof size === 'number') {
+      if (size < 0) {
+        console.warn("[kitzo.clippath] please provide a string value or positive number(px). Default is '20%'");
+        return `20%`;
+      }
+      return `${size}px`;
+    }
+    if (typeof size === 'string') {
+      return `${size}`;
+    }
+    console.warn("[kitzo.clippath] please provide a string value or positive number(px). Default is '20%'");
+    return '20%';
+  }
+
+  const clippathConfigMap = new WeakMap();
+  let isClippathListenersAdded = false;
+  let clippathDiv;
+
+  function clippath(element, config = {}) {
+    if (window.matchMedia('(pointer:coarse)').matches) return;
+
+    if (!element) {
+      console.error('[kitzo.clippath] A button element/selector is expected');
+      return;
+    }
+
+    addStyleTagToHtmlHead('clippath', clippathStyles());
+
+    config = Object.assign(
+      {
+        text: '',
+        clippathSize: '20%',
+        smooth: true,
+        style: {},
+      },
+      config
+    );
+
+    const allButtons = getButtons(element);
+    if (!allButtons) {
+      console.error('[kitzo.clippath] No elements found for kitzoTooltip');
+      return;
+    }
+
+    const disAllowedStyles = ['top', 'left', 'right', 'bottom', 'position', 'opacity', 'transform', 'translate', 'scale', 'rotate', 'perspective'];
+    for (const key of disAllowedStyles) {
+      if (key in config.style) {
+        console.warn(`[kitzo.clippath] "${key}" style is managed internally and will be ignored.`);
+        delete config.style[key];
+      }
+    }
+
+    allButtons.forEach((btn) => {
+      btn.setAttribute('data-kitzo-clippath', true);
+      clippathConfigMap.set(btn, config);
+    });
+
+    if (!clippathDiv) {
+      clippathDiv = document.createElement('div');
+      clippathDiv.className = 'kitzo-clippath-div';
+      document.body.appendChild(clippathDiv);
+    }
+
+    if (!isClippathListenersAdded) {
+      let isHovering = false;
+
+      document.addEventListener('mouseover', (e) => {
+        const btn = e.target.closest('[data-kitzo-clippath]');
+
+        if (btn) {
+          isHovering = true;
+          const { text, style, clippathSize, smooth } = clippathConfigMap.get(btn);
+          const { width, height, top, left } = btn.getBoundingClientRect();
+
+          clippathDiv.removeAttribute('style');
+
+          clippathDiv.style.width = width + 'px';
+          clippathDiv.style.height = height + 'px';
+          clippathDiv.style.top = top + 'px';
+          clippathDiv.style.left = left + 'px';
+
+          if (!text) {
+            clippathDiv.innerHTML = btn.innerHTML;
+          } else {
+            clippathDiv.innerHTML = text;
+          }
+
+          clippathDiv.style.setProperty('--kitzo-clippath-transition', smooth ? 'clip-path 150ms ease-out, opacity 150ms' : 'none');
+          clippathDiv.style.setProperty('--kitzo-clippath-size', getClippathSize(clippathSize));
+
+          const { borderRadius, font, letterSpacing, lineHeight, border, boxSizing, padding } = window.getComputedStyle(btn);
+
+          Object.assign(clippathDiv.style, {
+            backgroundColor: '#01c2b8',
+            color: 'white',
+            borderRadius,
+            font,
+            letterSpacing,
+            lineHeight,
+            border,
+            boxSizing,
+            padding,
+            ...style,
+          });
+
+          requestAnimationFrame(() => {
+            clippathDiv.classList.add('show');
+          });
+        }
+      });
+
+      document.addEventListener('mouseout', (e) => {
+        const btn = e.target.closest('[data-kitzo-clippath]');
+
+        if (btn) {
+          clippathDiv.classList.remove('show');
+          isHovering = false;
+        }
+      });
+
+      document.addEventListener('mousemove', (e) => {
+        if (!isHovering) return;
+        const btn = e.target.closest('[data-kitzo-clippath]');
+
+        if (btn) {
+          const { top, left } = btn.getBoundingClientRect();
+          const localX = e.clientX - left;
+          const localY = e.clientY - top;
+
+          clippathDiv.style.setProperty('--kitzo-clippath-pos-x', `${localX}px`);
+          clippathDiv.style.setProperty('--kitzo-clippath-pos-y', `${localY}px`);
+        }
+      });
+
+      isClippathListenersAdded = true;
+    }
+  }
+
+  exports.clippath = clippath;
   exports.copy = copy;
   exports.debounce = debounce;
   exports.ripple = ripple;

package/package.json

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