wowfy - npm Package Compare versions

Comparing version 0.1.3 to 0.2.3

dist/wowfy.cjs.js

@@ -5,3 +5,3 @@ /**
  *
- * @version 0.1.0
+ * @version 0.2.3
  * @author Wujue
@@ -13,2 +13,2 @@ * @email [e-mail]
  */
-"use strict";function t(t){const i=void 0;return/^(\d+(\.\d+)?|\.\d+)(ms|s)$/.test(t)}function i(t){const i=void 0,s=void 0;return parseFloat(t.split("m")[0].split("s")[0])*(t.includes("m")?1:1e3)}function s(t,i){for(const[s,o]of Object.entries(i))t.style[s]=o}function o(t="div",i={}){const o=document.createElement(t);return s(o,i),o}function e(t){const i=void 0;return`w-${t.split(/(?=[A-Z])/).map((t=>t.toLowerCase())).join("-")}`}const h={event:"mousedown",background:"#ff98cfaa",duration:"500ms",timingFunction:"ease-in",mode:"unkeep",position:"cs",delay:"0ms",sizeRatio:1,repeatCount:1,repeatInterval:"0ms",maxCount:10,outline:"",boxShadow:""};class n{constructor(t,s){var o;this.i=t,this.o=s,this.h=[],this.u=!1,this.p=null,this.addMouseRippleEffect=t=>{if(this.p)return;let s=Math.min(Math.max(1,this.o.repeatCount),n.rippleRepeatCountThreshold);this.addRippleEffect(t),--s;const o=setInterval((()=>{0!=s--?this.addRippleEffect(t):clearInterval(o)}),i(this.o.repeatInterval));this.p=setTimeout((()=>{this.p=null}),n.rippleTimeThreshold)};try{for(const t in h)(o=this.o)[t]||(o[t]=h[t]);this.validateOption()}catch(t){console.error(`[Wowfy Error] ${t.message}`)}}get option(){return this.o}setEffect(){this.m||(this.m=this.createRippleWrapper(),this.i.appendChild(this.m)),s(this.i,{position:this.i.style.position||"relative"}),this.u&&this.i.removeEventListener(this.o.event,this.addMouseRippleEffect),this.i.addEventListener(this.o.event,this.addMouseRippleEffect),this.u=!0}update(t){try{this.o={...this.o,...t},this.validateOption()}catch(t){console.error(`[Wowfy Error] ${t.message}`)}}destroy(){this.m.remove(),this.i.removeEventListener(this.o.event,this.addMouseRippleEffect),this.u=null,this.i=null,this.o=null}validateOption(){const i=["duration","delay","repeatInterval"];for(const s of i)if(!t(this.o[s]))throw new Error(`"${this.o[s]}" is an invalid time format.`)}createRippleWrapper(){return o("div",{position:"absolute",inset:"0",borderRadius:"inherit",pointerEvents:"none",contain:"strict"})}createRipple(t,i,s){return o("div",{width:t+"px",aspectRatio:"1",position:"absolute",left:i-(t>>1)+"px",top:s-(t>>1)+"px",borderRadius:"50%",background:this.o.background,outline:this.o.outline,boxShadow:this.o.boxShadow})}getRippleMousePosition(t){let i=t.target,s=0,o=0;for(;i!==this.i;)for(s+=i.offsetTop,o+=i.offsetLeft;i!==this.i&&(i=i.parentElement,"static"===window.getComputedStyle(i).getPropertyValue("position")););return{x:t.offsetX+o,y:t.offsetY+s}}getRipplePosition(t){const i={"left-top":"top-left","left-bottom":"bottom-left","right-top":"top-right","right-bottom":"bottom-right",cs:"cursor",ct:"center",rd:"random",t:"top",b:"bottom",l:"left",r:"right",tl:"top-left",tr:"top-right",bl:"bottom-left",br:"bottom-right",lt:"top-left",lb:"bottom-left",rt:"top-right",rb:"bottom-right"},s={cursor:this.getRippleMousePosition(t),center:{x:this.i.offsetWidth>>1,y:this.i.offsetHeight>>1},random:{x:Math.random()*this.i.offsetWidth,y:Math.random()*this.i.offsetHeight},top:{x:this.i.offsetWidth>>1,y:0},bottom:{x:this.i.offsetWidth>>1,y:this.i.offsetHeight},right:{x:this.i.offsetWidth,y:this.i.offsetHeight>>1},left:{x:0,y:this.i.offsetHeight>>1},"top-left":{x:0,y:0},"top-right":{x:this.i.offsetWidth,y:0},"bottom-left":{x:0,y:this.i.offsetHeight},"bottom-right":{x:this.i.offsetWidth,y:this.i.offsetHeight}};return s[this.o.position]||s[i[this.o.position]]||s.cursor}caculateRippleSize(t,i){const s=t,o=i,e=this.i.offsetWidth-s,h=this.i.offsetHeight-o,r=Math.max(s,e),a=Math.max(o,h),c=void 0,l=void 0,u=2*Math.ceil(Math.sqrt(r**2+a**2))*1.1*Math.min(1,Math.max(0,this.o.sizeRatio));return Math.min(u,n.rippleSizeThreshold)}startRippleAnimation(t){s(t,{scale:"0",opacity:"1",transitionProperty:"scale, opacity",transitionDuration:this.o.duration,transitionTimingFunction:this.o.timingFunction,willChange:"scale, opacity"})}endRippleAnimation(t){s(t,{scale:"1",opacity:"0"})}addRippleEffect(t){const s=Math.min(Math.max(1,this.o.maxCount),n.rippleCountThreshold);for(;this.h.length>=s;)this.h.shift().remove();const{x:o,y:e}=this.getRipplePosition(t),h=this.caculateRippleSize(o,e),r=this.createRipple(h,o,e),a=this.h.length;this.h.push(r),this.m.appendChild(r),this.startRippleAnimation(r),requestAnimationFrame((()=>{setTimeout((()=>{if(this.endRippleAnimation(r),"keep"!==this.o.mode||"mousedown"!==this.o.event&&"mouseenter"!==this.o.event)setTimeout((()=>{r.remove(),this.h.splice(a,1)}),1.1*i(this.o.duration));else{const t={mousedown:"mouseup",mouseenter:"mouseleave"}[this.o.event]||"mouseleave";this.i.addEventListener(t,(()=>{r.remove(),this.h.splice(a,1)}),{once:!0})}}),i(this.o.delay))}))}}function r(){const t=document.querySelectorAll("[w-ripple]");for(const i of t){const t={};for(const s in h){const o=e(s),h=i.getAttribute(o);t[s]=h}const s=void 0;new n(i,t).setEffect()}}n.rippleSizeThreshold=2e3,n.rippleTimeThreshold=50,n.rippleCountThreshold=20,n.rippleRepeatCountThreshold=5;const a={ripple:n};class c{constructor(t,i,s){this.i=t,this.v=i,this.M=null,this.M=new a[this.v](this.i,s),this.M.setEffect()}get effect(){return this.v}get option(){return this.M.option}update(t,i){t!==this.v&&(this.M.destroy(),this.M=new a[t](this.i,i)),this.M.update(i),this.M.setEffect()}destroy(){this.M.destroy(),this.i=null,this.v=null}}function l(){r()}exports.Wowfy=c,exports.rippleInit=r,exports.wowfyInit=l;
+"use strict";function t(t){const i=void 0;return/^(\d+(\.\d+)?|\.\d+)(ms|s)$/.test(t)}function i(t){const i=void 0,s=void 0;return parseFloat(t.split("m")[0].split("s")[0])*(t.includes("m")?1:1e3)}function s(t,i){for(const[s,o]of Object.entries(i))t.style[s]=o}function o(t="div",i={}){const o=document.createElement(t);return s(o,i),o}function e(t){const i=void 0;return`w-${t.split(/(?=[A-Z])/).map((t=>t.toLowerCase())).join("-")}`}const h={event:"mousedown",background:"#ff98cfaa",duration:"500ms",timingFunction:"ease-in",mode:"unkeep",position:"cs",delay:"0ms",size:!1,sizeRatio:1,repeatCount:1,repeatInterval:"0ms",maxCount:10,outline:"",boxShadow:""};class n{constructor(t,s){var o;this.i=t,this.o=s,this.h=[],this.u=!1,this.p=null,this.addMouseRippleEffect=t=>{if(this.p)return;let s=Math.min(Math.max(1,this.o.repeatCount),n.rippleRepeatCountThreshold);this.addRippleEffect(t),--s;const o=setInterval((()=>{0!=s--?this.addRippleEffect(t):clearInterval(o)}),i(this.o.repeatInterval));this.p=setTimeout((()=>{this.p=null}),n.rippleTimeThreshold)};try{for(const t in h)(o=this.o)[t]||(o[t]=h[t]);this.validateOption()}catch(t){console.error(`[Wowfy Error] ${t.message}`)}}get options(){return this.o}setEffect(){this.m||(this.m=this.createRippleWrapper(),this.i.appendChild(this.m)),s(this.i,{position:this.i.style.position||"relative"}),this.u&&this.i.removeEventListener(this.o.event,this.addMouseRippleEffect),this.i.addEventListener(this.o.event,this.addMouseRippleEffect),this.u=!0}update(t){try{this.o={...this.o,...t},this.validateOption()}catch(t){console.error(`[Wowfy Error] ${t.message}`)}}destroy(){this.m.remove(),this.i.removeEventListener(this.o.event,this.addMouseRippleEffect),this.u=null,this.i=null,this.o=null}validateOption(){const i=["duration","delay","repeatInterval"];for(const s of i)if(!t(this.o[s]))throw new Error(`"${this.o[s]}" is an invalid time format.`)}createRippleWrapper(){return o("div",{position:"absolute",inset:"0",borderRadius:"inherit",pointerEvents:"none",contain:"strict"})}createRipple(t,i,s){return o("div",{width:t+"px",aspectRatio:"1",position:"absolute",left:i-(t>>1)+"px",top:s-(t>>1)+"px",borderRadius:"50%",background:this.o.background,outline:this.o.outline,boxShadow:this.o.boxShadow})}getRippleMousePosition(t){let i=t.target,s=0,o=0;for(;i!==this.i;)for(s+=i.offsetTop,o+=i.offsetLeft;i!==this.i&&(i=i.parentElement,"static"===window.getComputedStyle(i).getPropertyValue("position")););return{x:t.offsetX+o,y:t.offsetY+s}}getRipplePosition(t){const i={"left-top":"top-left","left-bottom":"bottom-left","right-top":"top-right","right-bottom":"bottom-right",cs:"cursor",ct:"center",rd:"random",t:"top",b:"bottom",l:"left",r:"right",tl:"top-left",tr:"top-right",bl:"bottom-left",br:"bottom-right",lt:"top-left",lb:"bottom-left",rt:"top-right",rb:"bottom-right"},s={cursor:this.getRippleMousePosition(t),center:{x:this.i.offsetWidth>>1,y:this.i.offsetHeight>>1},random:{x:Math.random()*this.i.offsetWidth,y:Math.random()*this.i.offsetHeight},top:{x:this.i.offsetWidth>>1,y:0},bottom:{x:this.i.offsetWidth>>1,y:this.i.offsetHeight},right:{x:this.i.offsetWidth,y:this.i.offsetHeight>>1},left:{x:0,y:this.i.offsetHeight>>1},"top-left":{x:0,y:0},"top-right":{x:this.i.offsetWidth,y:0},"bottom-left":{x:0,y:this.i.offsetHeight},"bottom-right":{x:this.i.offsetWidth,y:this.i.offsetHeight}};return s[this.o.position]||s[i[this.o.position]]||s.cursor}caculateRippleSize(t,i){const s=t,o=i,e=this.i.offsetWidth-s,h=this.i.offsetHeight-o,r=Math.max(s,e),a=Math.max(o,h),c=void 0,l=void 0,u=2*Math.ceil(Math.sqrt(r**2+a**2))*1.1*Math.min(1,Math.max(0,this.o.sizeRatio));return Math.min(u,n.rippleSizeThreshold)}startRippleAnimation(t){s(t,{scale:"0",opacity:"1",transitionProperty:"scale, opacity",transitionDuration:this.o.duration,transitionTimingFunction:this.o.timingFunction,willChange:"scale, opacity"})}endRippleAnimation(t){s(t,{scale:"1",opacity:"0"})}addRippleEffect(t){const s=Math.min(Math.max(1,this.o.maxCount),n.rippleCountThreshold);for(;this.h.length>=s;)this.h.shift().remove();const{x:o,y:e}=this.getRipplePosition(t),h=this.o.size||this.caculateRippleSize(o,e),r=this.createRipple(h,o,e),a=this.h.length;this.h.push(r),this.m.appendChild(r),this.startRippleAnimation(r),requestAnimationFrame((()=>{setTimeout((()=>{if(this.endRippleAnimation(r),"keep"!==this.o.mode||"mousedown"!==this.o.event&&"mouseenter"!==this.o.event)setTimeout((()=>{r.remove(),this.h.splice(a,1)}),1.1*i(this.o.duration));else{const t={mousedown:"mouseup",mouseenter:"mouseleave"}[this.o.event]||"mouseleave";this.i.addEventListener(t,(()=>{r.remove(),this.h.splice(a,1)}),{once:!0})}}),i(this.o.delay))}))}}function r(){const t=document.querySelectorAll("[w-ripple]");for(const i of t){const t={};for(const s in h){const o=e(s),h=i.getAttribute(o);t[s]=h}const s=void 0;new n(i,t).setEffect()}}n.rippleSizeThreshold=2e3,n.rippleTimeThreshold=50,n.rippleCountThreshold=20,n.rippleRepeatCountThreshold=5;const a={ripple:n};class c{constructor(t,i,s={}){this.i=t,this.v=i,this.M=null,this.M=new a[this.v](this.i,s),this.M.setEffect()}get effect(){return this.v}get options(){return this.M.options}update(t,i){t!==this.v&&(this.M.destroy(),this.M=new a[t](this.i,i)),this.M.update(i),this.M.setEffect()}destroy(){this.M.destroy(),this.i=null,this.v=null}}function l(){r()}exports.Wowfy=c,exports.rippleInit=r,exports.wowfyInit=l;

dist/wowfy.d.ts

 type TRippleMode = "keep" | "unkeep";
 type TRipplePosition = "cursor" | "center" | "random" | "top" | "bottom" | "right" | "left" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-top" | "left-bottom" | "right-top" | "right-bottom" | "cs" | "ct" | "rd" | "t" | "r" | "b" | "l" | "tl" | "tr" | "bl" | "br" | "lt" | "lb" | "rt" | "rb";
-type TRippleOption = {
+type TRippleOptions = {
     event?: string;
@@ -11,2 +11,3 @@ background?: string;
     delay?: string;
+    size?: number | false;
     sizeRatio?: number;
@@ -20,4 +21,4 @@ repeatCount?: number;
 
-type TEffect = "ripple" | "marquee";
-type TEffectOptions = TRippleOption;
+type TEffect = "ripple";
+type TEffectOptions = TRippleOptions;
 
@@ -28,6 +29,6 @@ declare class Wowfy {
     private _effectInstance;
-    constructor(_element: HTMLElement, _effect: TEffect, option: TEffectOptions);
-    get effect(): TEffect;
-    get option(): TRippleOption;
-    update(effect: TEffect, option: TEffectOptions): void;
+    constructor(_element: HTMLElement, _effect: TEffect, options?: TEffectOptions);
+    get effect(): "ripple";
+    get options(): TRippleOptions;
+    update(effect: TEffect, options: TEffectOptions): void;
     destroy(): void;
@@ -40,2 +41,2 @@ }
 
-export { Wowfy, rippleInit, wowfyInit };
+export { type TEffect, type TEffectOptions, type TRippleMode, type TRippleOptions, type TRipplePosition, Wowfy, rippleInit, wowfyInit };

dist/wowfy.esm.js

@@ -5,3 +5,3 @@ /**
  *
- * @version 0.1.0
+ * @version 0.2.3
  * @author Wujue
@@ -13,2 +13,2 @@ * @email [e-mail]
  */
-function t(t){const i=void 0;return/^(\d+(\.\d+)?|\.\d+)(ms|s)$/.test(t)}function i(t){const i=void 0,s=void 0;return parseFloat(t.split("m")[0].split("s")[0])*(t.includes("m")?1:1e3)}function s(t,i){for(const[s,o]of Object.entries(i))t.style[s]=o}function o(t="div",i={}){const o=document.createElement(t);return s(o,i),o}function e(t){const i=void 0;return`w-${t.split(/(?=[A-Z])/).map((t=>t.toLowerCase())).join("-")}`}const h={event:"mousedown",background:"#ff98cfaa",duration:"500ms",timingFunction:"ease-in",mode:"unkeep",position:"cs",delay:"0ms",sizeRatio:1,repeatCount:1,repeatInterval:"0ms",maxCount:10,outline:"",boxShadow:""};class n{constructor(t,s){var o;this.i=t,this.o=s,this.h=[],this.u=!1,this.p=null,this.addMouseRippleEffect=t=>{if(this.p)return;let s=Math.min(Math.max(1,this.o.repeatCount),n.rippleRepeatCountThreshold);this.addRippleEffect(t),--s;const o=setInterval((()=>{0!=s--?this.addRippleEffect(t):clearInterval(o)}),i(this.o.repeatInterval));this.p=setTimeout((()=>{this.p=null}),n.rippleTimeThreshold)};try{for(const t in h)(o=this.o)[t]||(o[t]=h[t]);this.validateOption()}catch(t){console.error(`[Wowfy Error] ${t.message}`)}}get option(){return this.o}setEffect(){this.m||(this.m=this.createRippleWrapper(),this.i.appendChild(this.m)),s(this.i,{position:this.i.style.position||"relative"}),this.u&&this.i.removeEventListener(this.o.event,this.addMouseRippleEffect),this.i.addEventListener(this.o.event,this.addMouseRippleEffect),this.u=!0}update(t){try{this.o={...this.o,...t},this.validateOption()}catch(t){console.error(`[Wowfy Error] ${t.message}`)}}destroy(){this.m.remove(),this.i.removeEventListener(this.o.event,this.addMouseRippleEffect),this.u=null,this.i=null,this.o=null}validateOption(){const i=["duration","delay","repeatInterval"];for(const s of i)if(!t(this.o[s]))throw new Error(`"${this.o[s]}" is an invalid time format.`)}createRippleWrapper(){return o("div",{position:"absolute",inset:"0",borderRadius:"inherit",pointerEvents:"none",contain:"strict"})}createRipple(t,i,s){return o("div",{width:t+"px",aspectRatio:"1",position:"absolute",left:i-(t>>1)+"px",top:s-(t>>1)+"px",borderRadius:"50%",background:this.o.background,outline:this.o.outline,boxShadow:this.o.boxShadow})}getRippleMousePosition(t){let i=t.target,s=0,o=0;for(;i!==this.i;)for(s+=i.offsetTop,o+=i.offsetLeft;i!==this.i&&(i=i.parentElement,"static"===window.getComputedStyle(i).getPropertyValue("position")););return{x:t.offsetX+o,y:t.offsetY+s}}getRipplePosition(t){const i={"left-top":"top-left","left-bottom":"bottom-left","right-top":"top-right","right-bottom":"bottom-right",cs:"cursor",ct:"center",rd:"random",t:"top",b:"bottom",l:"left",r:"right",tl:"top-left",tr:"top-right",bl:"bottom-left",br:"bottom-right",lt:"top-left",lb:"bottom-left",rt:"top-right",rb:"bottom-right"},s={cursor:this.getRippleMousePosition(t),center:{x:this.i.offsetWidth>>1,y:this.i.offsetHeight>>1},random:{x:Math.random()*this.i.offsetWidth,y:Math.random()*this.i.offsetHeight},top:{x:this.i.offsetWidth>>1,y:0},bottom:{x:this.i.offsetWidth>>1,y:this.i.offsetHeight},right:{x:this.i.offsetWidth,y:this.i.offsetHeight>>1},left:{x:0,y:this.i.offsetHeight>>1},"top-left":{x:0,y:0},"top-right":{x:this.i.offsetWidth,y:0},"bottom-left":{x:0,y:this.i.offsetHeight},"bottom-right":{x:this.i.offsetWidth,y:this.i.offsetHeight}};return s[this.o.position]||s[i[this.o.position]]||s.cursor}caculateRippleSize(t,i){const s=t,o=i,e=this.i.offsetWidth-s,h=this.i.offsetHeight-o,r=Math.max(s,e),a=Math.max(o,h),c=void 0,l=void 0,u=2*Math.ceil(Math.sqrt(r**2+a**2))*1.1*Math.min(1,Math.max(0,this.o.sizeRatio));return Math.min(u,n.rippleSizeThreshold)}startRippleAnimation(t){s(t,{scale:"0",opacity:"1",transitionProperty:"scale, opacity",transitionDuration:this.o.duration,transitionTimingFunction:this.o.timingFunction,willChange:"scale, opacity"})}endRippleAnimation(t){s(t,{scale:"1",opacity:"0"})}addRippleEffect(t){const s=Math.min(Math.max(1,this.o.maxCount),n.rippleCountThreshold);for(;this.h.length>=s;)this.h.shift().remove();const{x:o,y:e}=this.getRipplePosition(t),h=this.caculateRippleSize(o,e),r=this.createRipple(h,o,e),a=this.h.length;this.h.push(r),this.m.appendChild(r),this.startRippleAnimation(r),requestAnimationFrame((()=>{setTimeout((()=>{if(this.endRippleAnimation(r),"keep"!==this.o.mode||"mousedown"!==this.o.event&&"mouseenter"!==this.o.event)setTimeout((()=>{r.remove(),this.h.splice(a,1)}),1.1*i(this.o.duration));else{const t={mousedown:"mouseup",mouseenter:"mouseleave"}[this.o.event]||"mouseleave";this.i.addEventListener(t,(()=>{r.remove(),this.h.splice(a,1)}),{once:!0})}}),i(this.o.delay))}))}}function r(){const t=document.querySelectorAll("[w-ripple]");for(const i of t){const t={};for(const s in h){const o=e(s),h=i.getAttribute(o);t[s]=h}const s=void 0;new n(i,t).setEffect()}}n.rippleSizeThreshold=2e3,n.rippleTimeThreshold=50,n.rippleCountThreshold=20,n.rippleRepeatCountThreshold=5;const a={ripple:n};class c{constructor(t,i,s){this.i=t,this.v=i,this.M=null,this.M=new a[this.v](this.i,s),this.M.setEffect()}get effect(){return this.v}get option(){return this.M.option}update(t,i){t!==this.v&&(this.M.destroy(),this.M=new a[t](this.i,i)),this.M.update(i),this.M.setEffect()}destroy(){this.M.destroy(),this.i=null,this.v=null}}function l(){r()}export{c as Wowfy,r as rippleInit,l as wowfyInit};
+function t(t){const i=void 0;return/^(\d+(\.\d+)?|\.\d+)(ms|s)$/.test(t)}function i(t){const i=void 0,s=void 0;return parseFloat(t.split("m")[0].split("s")[0])*(t.includes("m")?1:1e3)}function s(t,i){for(const[s,o]of Object.entries(i))t.style[s]=o}function o(t="div",i={}){const o=document.createElement(t);return s(o,i),o}function e(t){const i=void 0;return`w-${t.split(/(?=[A-Z])/).map((t=>t.toLowerCase())).join("-")}`}const h={event:"mousedown",background:"#ff98cfaa",duration:"500ms",timingFunction:"ease-in",mode:"unkeep",position:"cs",delay:"0ms",size:!1,sizeRatio:1,repeatCount:1,repeatInterval:"0ms",maxCount:10,outline:"",boxShadow:""};class n{constructor(t,s){var o;this.i=t,this.o=s,this.h=[],this.u=!1,this.p=null,this.addMouseRippleEffect=t=>{if(this.p)return;let s=Math.min(Math.max(1,this.o.repeatCount),n.rippleRepeatCountThreshold);this.addRippleEffect(t),--s;const o=setInterval((()=>{0!=s--?this.addRippleEffect(t):clearInterval(o)}),i(this.o.repeatInterval));this.p=setTimeout((()=>{this.p=null}),n.rippleTimeThreshold)};try{for(const t in h)(o=this.o)[t]||(o[t]=h[t]);this.validateOption()}catch(t){console.error(`[Wowfy Error] ${t.message}`)}}get options(){return this.o}setEffect(){this.m||(this.m=this.createRippleWrapper(),this.i.appendChild(this.m)),s(this.i,{position:this.i.style.position||"relative"}),this.u&&this.i.removeEventListener(this.o.event,this.addMouseRippleEffect),this.i.addEventListener(this.o.event,this.addMouseRippleEffect),this.u=!0}update(t){try{this.o={...this.o,...t},this.validateOption()}catch(t){console.error(`[Wowfy Error] ${t.message}`)}}destroy(){this.m.remove(),this.i.removeEventListener(this.o.event,this.addMouseRippleEffect),this.u=null,this.i=null,this.o=null}validateOption(){const i=["duration","delay","repeatInterval"];for(const s of i)if(!t(this.o[s]))throw new Error(`"${this.o[s]}" is an invalid time format.`)}createRippleWrapper(){return o("div",{position:"absolute",inset:"0",borderRadius:"inherit",pointerEvents:"none",contain:"strict"})}createRipple(t,i,s){return o("div",{width:t+"px",aspectRatio:"1",position:"absolute",left:i-(t>>1)+"px",top:s-(t>>1)+"px",borderRadius:"50%",background:this.o.background,outline:this.o.outline,boxShadow:this.o.boxShadow})}getRippleMousePosition(t){let i=t.target,s=0,o=0;for(;i!==this.i;)for(s+=i.offsetTop,o+=i.offsetLeft;i!==this.i&&(i=i.parentElement,"static"===window.getComputedStyle(i).getPropertyValue("position")););return{x:t.offsetX+o,y:t.offsetY+s}}getRipplePosition(t){const i={"left-top":"top-left","left-bottom":"bottom-left","right-top":"top-right","right-bottom":"bottom-right",cs:"cursor",ct:"center",rd:"random",t:"top",b:"bottom",l:"left",r:"right",tl:"top-left",tr:"top-right",bl:"bottom-left",br:"bottom-right",lt:"top-left",lb:"bottom-left",rt:"top-right",rb:"bottom-right"},s={cursor:this.getRippleMousePosition(t),center:{x:this.i.offsetWidth>>1,y:this.i.offsetHeight>>1},random:{x:Math.random()*this.i.offsetWidth,y:Math.random()*this.i.offsetHeight},top:{x:this.i.offsetWidth>>1,y:0},bottom:{x:this.i.offsetWidth>>1,y:this.i.offsetHeight},right:{x:this.i.offsetWidth,y:this.i.offsetHeight>>1},left:{x:0,y:this.i.offsetHeight>>1},"top-left":{x:0,y:0},"top-right":{x:this.i.offsetWidth,y:0},"bottom-left":{x:0,y:this.i.offsetHeight},"bottom-right":{x:this.i.offsetWidth,y:this.i.offsetHeight}};return s[this.o.position]||s[i[this.o.position]]||s.cursor}caculateRippleSize(t,i){const s=t,o=i,e=this.i.offsetWidth-s,h=this.i.offsetHeight-o,r=Math.max(s,e),a=Math.max(o,h),c=void 0,l=void 0,u=2*Math.ceil(Math.sqrt(r**2+a**2))*1.1*Math.min(1,Math.max(0,this.o.sizeRatio));return Math.min(u,n.rippleSizeThreshold)}startRippleAnimation(t){s(t,{scale:"0",opacity:"1",transitionProperty:"scale, opacity",transitionDuration:this.o.duration,transitionTimingFunction:this.o.timingFunction,willChange:"scale, opacity"})}endRippleAnimation(t){s(t,{scale:"1",opacity:"0"})}addRippleEffect(t){const s=Math.min(Math.max(1,this.o.maxCount),n.rippleCountThreshold);for(;this.h.length>=s;)this.h.shift().remove();const{x:o,y:e}=this.getRipplePosition(t),h=this.o.size||this.caculateRippleSize(o,e),r=this.createRipple(h,o,e),a=this.h.length;this.h.push(r),this.m.appendChild(r),this.startRippleAnimation(r),requestAnimationFrame((()=>{setTimeout((()=>{if(this.endRippleAnimation(r),"keep"!==this.o.mode||"mousedown"!==this.o.event&&"mouseenter"!==this.o.event)setTimeout((()=>{r.remove(),this.h.splice(a,1)}),1.1*i(this.o.duration));else{const t={mousedown:"mouseup",mouseenter:"mouseleave"}[this.o.event]||"mouseleave";this.i.addEventListener(t,(()=>{r.remove(),this.h.splice(a,1)}),{once:!0})}}),i(this.o.delay))}))}}function r(){const t=document.querySelectorAll("[w-ripple]");for(const i of t){const t={};for(const s in h){const o=e(s),h=i.getAttribute(o);t[s]=h}const s=void 0;new n(i,t).setEffect()}}n.rippleSizeThreshold=2e3,n.rippleTimeThreshold=50,n.rippleCountThreshold=20,n.rippleRepeatCountThreshold=5;const a={ripple:n};class c{constructor(t,i,s={}){this.i=t,this.v=i,this.M=null,this.M=new a[this.v](this.i,s),this.M.setEffect()}get effect(){return this.v}get options(){return this.M.options}update(t,i){t!==this.v&&(this.M.destroy(),this.M=new a[t](this.i,i)),this.M.update(i),this.M.setEffect()}destroy(){this.M.destroy(),this.i=null,this.v=null}}function l(){r()}export{c as Wowfy,r as rippleInit,l as wowfyInit};

dist/wowfy.global.js

@@ -5,3 +5,3 @@ /**
  *
- * @version 0.1.0
+ * @version 0.2.3
  * @author Wujue
@@ -13,2 +13,2 @@ * @email [e-mail]
  */
-!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):(t="undefined"!=typeof globalThis?globalThis:t||self).Wowfy=i()}(this,(function(){"use strict";function t(t){const i=void 0;return/^(\d+(\.\d+)?|\.\d+)(ms|s)$/.test(t)}function i(t){const i=void 0,s=void 0;return parseFloat(t.split("m")[0].split("s")[0])*(t.includes("m")?1:1e3)}function s(t,i){for(const[s,o]of Object.entries(i))t.style[s]=o}function o(t="div",i={}){const o=document.createElement(t);return s(o,i),o}function e(t){const i=void 0;return`w-${t.split(/(?=[A-Z])/).map((t=>t.toLowerCase())).join("-")}`}const n={event:"mousedown",background:"#ff98cfaa",duration:"500ms",timingFunction:"ease-in",mode:"unkeep",position:"cs",delay:"0ms",sizeRatio:1,repeatCount:1,repeatInterval:"0ms",maxCount:10,outline:"",boxShadow:""};class h{constructor(t,s){var o;this.i=t,this.o=s,this.h=[],this.u=!1,this.p=null,this.addMouseRippleEffect=t=>{if(this.p)return;let s=Math.min(Math.max(1,this.o.repeatCount),h.rippleRepeatCountThreshold);this.addRippleEffect(t),--s;const o=setInterval((()=>{0!=s--?this.addRippleEffect(t):clearInterval(o)}),i(this.o.repeatInterval));this.p=setTimeout((()=>{this.p=null}),h.rippleTimeThreshold)};try{for(const t in n)(o=this.o)[t]||(o[t]=n[t]);this.validateOption()}catch(t){console.error(`[Wowfy Error] ${t.message}`)}}get option(){return this.o}setEffect(){this.m||(this.m=this.createRippleWrapper(),this.i.appendChild(this.m)),s(this.i,{position:this.i.style.position||"relative"}),this.u&&this.i.removeEventListener(this.o.event,this.addMouseRippleEffect),this.i.addEventListener(this.o.event,this.addMouseRippleEffect),this.u=!0}update(t){try{this.o={...this.o,...t},this.validateOption()}catch(t){console.error(`[Wowfy Error] ${t.message}`)}}destroy(){this.m.remove(),this.i.removeEventListener(this.o.event,this.addMouseRippleEffect),this.u=null,this.i=null,this.o=null}validateOption(){const i=["duration","delay","repeatInterval"];for(const s of i)if(!t(this.o[s]))throw new Error(`"${this.o[s]}" is an invalid time format.`)}createRippleWrapper(){return o("div",{position:"absolute",inset:"0",borderRadius:"inherit",pointerEvents:"none",contain:"strict"})}createRipple(t,i,s){return o("div",{width:t+"px",aspectRatio:"1",position:"absolute",left:i-(t>>1)+"px",top:s-(t>>1)+"px",borderRadius:"50%",background:this.o.background,outline:this.o.outline,boxShadow:this.o.boxShadow})}getRippleMousePosition(t){let i=t.target,s=0,o=0;for(;i!==this.i;)for(s+=i.offsetTop,o+=i.offsetLeft;i!==this.i&&(i=i.parentElement,"static"===window.getComputedStyle(i).getPropertyValue("position")););return{x:t.offsetX+o,y:t.offsetY+s}}getRipplePosition(t){const i={"left-top":"top-left","left-bottom":"bottom-left","right-top":"top-right","right-bottom":"bottom-right",cs:"cursor",ct:"center",rd:"random",t:"top",b:"bottom",l:"left",r:"right",tl:"top-left",tr:"top-right",bl:"bottom-left",br:"bottom-right",lt:"top-left",lb:"bottom-left",rt:"top-right",rb:"bottom-right"},s={cursor:this.getRippleMousePosition(t),center:{x:this.i.offsetWidth>>1,y:this.i.offsetHeight>>1},random:{x:Math.random()*this.i.offsetWidth,y:Math.random()*this.i.offsetHeight},top:{x:this.i.offsetWidth>>1,y:0},bottom:{x:this.i.offsetWidth>>1,y:this.i.offsetHeight},right:{x:this.i.offsetWidth,y:this.i.offsetHeight>>1},left:{x:0,y:this.i.offsetHeight>>1},"top-left":{x:0,y:0},"top-right":{x:this.i.offsetWidth,y:0},"bottom-left":{x:0,y:this.i.offsetHeight},"bottom-right":{x:this.i.offsetWidth,y:this.i.offsetHeight}};return s[this.o.position]||s[i[this.o.position]]||s.cursor}caculateRippleSize(t,i){const s=t,o=i,e=this.i.offsetWidth-s,n=this.i.offsetHeight-o,r=Math.max(s,e),a=Math.max(o,n),c=void 0,l=void 0,u=2*Math.ceil(Math.sqrt(r**2+a**2))*1.1*Math.min(1,Math.max(0,this.o.sizeRatio));return Math.min(u,h.rippleSizeThreshold)}startRippleAnimation(t){s(t,{scale:"0",opacity:"1",transitionProperty:"scale, opacity",transitionDuration:this.o.duration,transitionTimingFunction:this.o.timingFunction,willChange:"scale, opacity"})}endRippleAnimation(t){s(t,{scale:"1",opacity:"0"})}addRippleEffect(t){const s=Math.min(Math.max(1,this.o.maxCount),h.rippleCountThreshold);for(;this.h.length>=s;)this.h.shift().remove();const{x:o,y:e}=this.getRipplePosition(t),n=this.caculateRippleSize(o,e),r=this.createRipple(n,o,e),a=this.h.length;this.h.push(r),this.m.appendChild(r),this.startRippleAnimation(r),requestAnimationFrame((()=>{setTimeout((()=>{if(this.endRippleAnimation(r),"keep"!==this.o.mode||"mousedown"!==this.o.event&&"mouseenter"!==this.o.event)setTimeout((()=>{r.remove(),this.h.splice(a,1)}),1.1*i(this.o.duration));else{const t={mousedown:"mouseup",mouseenter:"mouseleave"}[this.o.event]||"mouseleave";this.i.addEventListener(t,(()=>{r.remove(),this.h.splice(a,1)}),{once:!0})}}),i(this.o.delay))}))}}function r(){const t=document.querySelectorAll("[w-ripple]");for(const i of t){const t={};for(const s in n){const o=e(s),n=i.getAttribute(o);t[s]=n}const s=void 0;new h(i,t).setEffect()}}h.rippleSizeThreshold=2e3,h.rippleTimeThreshold=50,h.rippleCountThreshold=20,h.rippleRepeatCountThreshold=5;const a={ripple:h};class c{constructor(t,i,s){this.i=t,this.v=i,this.M=null,this.M=new a[this.v](this.i,s),this.M.setEffect()}get effect(){return this.v}get option(){return this.M.option}update(t,i){t!==this.v&&(this.M.destroy(),this.M=new a[t](this.i,i)),this.M.update(i),this.M.setEffect()}destroy(){this.M.destroy(),this.i=null,this.v=null}}function l(){r()}return document.addEventListener("DOMContentLoaded",(()=>{l()})),c}));
+!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):(t="undefined"!=typeof globalThis?globalThis:t||self).Wowfy=i()}(this,(function(){"use strict";function t(t){const i=void 0;return/^(\d+(\.\d+)?|\.\d+)(ms|s)$/.test(t)}function i(t){const i=void 0,s=void 0;return parseFloat(t.split("m")[0].split("s")[0])*(t.includes("m")?1:1e3)}function s(t,i){for(const[s,o]of Object.entries(i))t.style[s]=o}function o(t="div",i={}){const o=document.createElement(t);return s(o,i),o}function e(t){const i=void 0;return`w-${t.split(/(?=[A-Z])/).map((t=>t.toLowerCase())).join("-")}`}const n={event:"mousedown",background:"#ff98cfaa",duration:"500ms",timingFunction:"ease-in",mode:"unkeep",position:"cs",delay:"0ms",size:!1,sizeRatio:1,repeatCount:1,repeatInterval:"0ms",maxCount:10,outline:"",boxShadow:""};class h{constructor(t,s){var o;this.i=t,this.o=s,this.h=[],this.u=!1,this.p=null,this.addMouseRippleEffect=t=>{if(this.p)return;let s=Math.min(Math.max(1,this.o.repeatCount),h.rippleRepeatCountThreshold);this.addRippleEffect(t),--s;const o=setInterval((()=>{0!=s--?this.addRippleEffect(t):clearInterval(o)}),i(this.o.repeatInterval));this.p=setTimeout((()=>{this.p=null}),h.rippleTimeThreshold)};try{for(const t in n)(o=this.o)[t]||(o[t]=n[t]);this.validateOption()}catch(t){console.error(`[Wowfy Error] ${t.message}`)}}get options(){return this.o}setEffect(){this.m||(this.m=this.createRippleWrapper(),this.i.appendChild(this.m)),s(this.i,{position:this.i.style.position||"relative"}),this.u&&this.i.removeEventListener(this.o.event,this.addMouseRippleEffect),this.i.addEventListener(this.o.event,this.addMouseRippleEffect),this.u=!0}update(t){try{this.o={...this.o,...t},this.validateOption()}catch(t){console.error(`[Wowfy Error] ${t.message}`)}}destroy(){this.m.remove(),this.i.removeEventListener(this.o.event,this.addMouseRippleEffect),this.u=null,this.i=null,this.o=null}validateOption(){const i=["duration","delay","repeatInterval"];for(const s of i)if(!t(this.o[s]))throw new Error(`"${this.o[s]}" is an invalid time format.`)}createRippleWrapper(){return o("div",{position:"absolute",inset:"0",borderRadius:"inherit",pointerEvents:"none",contain:"strict"})}createRipple(t,i,s){return o("div",{width:t+"px",aspectRatio:"1",position:"absolute",left:i-(t>>1)+"px",top:s-(t>>1)+"px",borderRadius:"50%",background:this.o.background,outline:this.o.outline,boxShadow:this.o.boxShadow})}getRippleMousePosition(t){let i=t.target,s=0,o=0;for(;i!==this.i;)for(s+=i.offsetTop,o+=i.offsetLeft;i!==this.i&&(i=i.parentElement,"static"===window.getComputedStyle(i).getPropertyValue("position")););return{x:t.offsetX+o,y:t.offsetY+s}}getRipplePosition(t){const i={"left-top":"top-left","left-bottom":"bottom-left","right-top":"top-right","right-bottom":"bottom-right",cs:"cursor",ct:"center",rd:"random",t:"top",b:"bottom",l:"left",r:"right",tl:"top-left",tr:"top-right",bl:"bottom-left",br:"bottom-right",lt:"top-left",lb:"bottom-left",rt:"top-right",rb:"bottom-right"},s={cursor:this.getRippleMousePosition(t),center:{x:this.i.offsetWidth>>1,y:this.i.offsetHeight>>1},random:{x:Math.random()*this.i.offsetWidth,y:Math.random()*this.i.offsetHeight},top:{x:this.i.offsetWidth>>1,y:0},bottom:{x:this.i.offsetWidth>>1,y:this.i.offsetHeight},right:{x:this.i.offsetWidth,y:this.i.offsetHeight>>1},left:{x:0,y:this.i.offsetHeight>>1},"top-left":{x:0,y:0},"top-right":{x:this.i.offsetWidth,y:0},"bottom-left":{x:0,y:this.i.offsetHeight},"bottom-right":{x:this.i.offsetWidth,y:this.i.offsetHeight}};return s[this.o.position]||s[i[this.o.position]]||s.cursor}caculateRippleSize(t,i){const s=t,o=i,e=this.i.offsetWidth-s,n=this.i.offsetHeight-o,r=Math.max(s,e),a=Math.max(o,n),c=void 0,l=void 0,u=2*Math.ceil(Math.sqrt(r**2+a**2))*1.1*Math.min(1,Math.max(0,this.o.sizeRatio));return Math.min(u,h.rippleSizeThreshold)}startRippleAnimation(t){s(t,{scale:"0",opacity:"1",transitionProperty:"scale, opacity",transitionDuration:this.o.duration,transitionTimingFunction:this.o.timingFunction,willChange:"scale, opacity"})}endRippleAnimation(t){s(t,{scale:"1",opacity:"0"})}addRippleEffect(t){const s=Math.min(Math.max(1,this.o.maxCount),h.rippleCountThreshold);for(;this.h.length>=s;)this.h.shift().remove();const{x:o,y:e}=this.getRipplePosition(t),n=this.o.size||this.caculateRippleSize(o,e),r=this.createRipple(n,o,e),a=this.h.length;this.h.push(r),this.m.appendChild(r),this.startRippleAnimation(r),requestAnimationFrame((()=>{setTimeout((()=>{if(this.endRippleAnimation(r),"keep"!==this.o.mode||"mousedown"!==this.o.event&&"mouseenter"!==this.o.event)setTimeout((()=>{r.remove(),this.h.splice(a,1)}),1.1*i(this.o.duration));else{const t={mousedown:"mouseup",mouseenter:"mouseleave"}[this.o.event]||"mouseleave";this.i.addEventListener(t,(()=>{r.remove(),this.h.splice(a,1)}),{once:!0})}}),i(this.o.delay))}))}}function r(){const t=document.querySelectorAll("[w-ripple]");for(const i of t){const t={};for(const s in n){const o=e(s),n=i.getAttribute(o);t[s]=n}const s=void 0;new h(i,t).setEffect()}}h.rippleSizeThreshold=2e3,h.rippleTimeThreshold=50,h.rippleCountThreshold=20,h.rippleRepeatCountThreshold=5;const a={ripple:h};class c{constructor(t,i,s={}){this.i=t,this.v=i,this.M=null,this.M=new a[this.v](this.i,s),this.M.setEffect()}get effect(){return this.v}get options(){return this.M.options}update(t,i){t!==this.v&&(this.M.destroy(),this.M=new a[t](this.i,i)),this.M.update(i),this.M.setEffect()}destroy(){this.M.destroy(),this.i=null,this.v=null}}function l(){r()}return document.addEventListener("DOMContentLoaded",(()=>{l()})),c}));

package.json

 {
   "name": "wowfy",
-  "version": "0.1.3",
+  "version": "0.2.3",
   "description": "An awesome and easy-to-use JavaScript animation library.",
@@ -41,2 +41,3 @@ "homepage": "https://wowfyjs.com",
     "build-dts": "tsc -b tsconfig.build.json && rollup -c rollup.dts.config.js",
+    "build-all": "pnpm build && pnpm build-dts",
     "lint": "eslint --ext \".ts,.js\" --ignore-path .eslintignore .",
@@ -43,0 +44,0 @@ "lint-fix": "eslint --fix --ext \".ts,.js\" --ignore-path .eslintignore .",

README.md

 # wowfy.js
 
-Wowfy is a JavaScript animation library for applying a wide range of fascinating, amazing, and eye-catching effects, enhancing the visual appeal of your web projects. It is implemented using JavaScript to create various magical CSS effects and offers user-friendly options for adjusting the effects.
+> Wowfy is a JavaScript animation library for applying a wide range of fascinating, amazing, and eye-catching effects, enhancing the visual appeal of your web projects. It is implemented using JavaScript to create various magical CSS effects and offers user-friendly options for adjusting the effects.
 
+## Demo
+
+[Ripple Demo](https://codepen.io/virrkfus-the-looper/pen/abXZwKv)
+
 ## Documentation
@@ -6,0 +10,0 @@

New alerts

AI-detected possible typosquat

Supply chain risk

AI has identified this package as a potential typosquat of a more popular package. This suggests that the package may be intentionally mimicking another package's name, description, or other metadata.

Improved metrics

Total package byte prevSize

23520

1.41%

Lines of code

130

0.78%

Number of lines in readme file

128

3.23%

Worsened metrics

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes