@cicara/material-ripple - npm Package Compare versions

Comparing version 0.0.2 to 0.1.0

dist/index.esm.js

@@ -1,1 +0,1 @@
-class e{constructor(e){this.options=Object.assign({color:"rgba(0, 0, 0, 0.1)",centered:!1,unbounded:!1,exitDuration:1024,enterDuration:512},e),this.onElementPointerDown=this.onElementPointerDown.bind(this),this.init()}get element(){return this.options.element}destroy(){this.element.classList.remove("material-ripple","material-ripple--unbounded"),this.element.removeEventListener("pointerdown",this.onElementPointerDown)}init(){this.injectStyles(),this.element.classList.add("material-ripple"),this.options.unbounded&&this.element.classList.add("material-ripple--unbounded"),this.element.addEventListener("pointerdown",this.onElementPointerDown)}onElementPointerDown(e){const t=this.createRipple(e);this.element.addEventListener("pointerup",(()=>{this.removeRipple(t)}),{once:!0}),this.element.addEventListener("pointerleave",(()=>{this.removeRipple(t)}),{once:!0})}createRipple(e){let t;const{clientX:n,clientY:i}=e,o=document.createElement("div"),s=o.style;s.width="100px",s.height="100px",s.margin="-50px 0px 0px -50px",s.zIndex=this.options.zIndex?`${this.options.zIndex}`:"inhert",s.opacity="1",s.position="absolute",s.transform="scale(0.2)",s.background=`${this.options.color}`,s.borderRadius="50%",s.pointerEvents="none",s.transition=`transform ${this.options.enterDuration}ms ease-out 0s, opacity ${this.options.exitDuration}ms ease-out ${this.options.enterDuration/2}ms`,this.element.appendChild(o);const{width:r,height:l,top:a,left:p,right:d,bottom:h}=this.element.getBoundingClientRect();return this.options.centered?(s.top=l/2+"px",s.left=r/2+"px",t=2*Math.sqrt((r/2)**2+(l/2)**2)/100):(s.top=i-a+"px",s.left=n-p+"px",t=2*Math.sqrt(Math.max(n-p,d-n)**2+Math.max(i-a,h-i)**2)/100),s.transform=`scale(${t}) translate(0px, 0px)`,o}removeRipple(e){e.isConnected&&(e.addEventListener("transitionend",(t=>{"opacity"===t.propertyName&&e.remove()})),e.style.opacity="0")}injectStyles(){null===e.style&&(e.style=document.createElement("style"),e.style.classList.add("material-ripple"),e.style.innerHTML=".material-ripple { position: relative; overflow: hidden; } .material-ripple--unbounded { overflow: visible; }",document.head.appendChild(e.style))}}e.style=null;export{e as Ripple};
+class e{constructor(e){this.options=Object.assign({color:"rgba(0, 0, 0, 0.1)",centered:!1,unbounded:!1,exitDuration:1024,enterDuration:512,rippleWrapper:e.element},e),this.onElementPointerDown=this.onElementPointerDown.bind(this),this.init()}get element(){return this.options.element}get rippleWrapper(){return this.options.rippleWrapper}destroy(){this.element.classList.remove("material-ripple","material-ripple--unbounded"),this.element.removeEventListener("pointerdown",this.onElementPointerDown)}init(){this.injectStyles(),this.element.classList.add("material-ripple"),this.options.unbounded&&this.element.classList.add("material-ripple--unbounded"),this.element.addEventListener("pointerdown",this.onElementPointerDown)}onElementPointerDown(e){const t=this.createRipple(e);this.element.addEventListener("pointerup",(()=>{this.removeRipple(t)}),{once:!0}),this.element.addEventListener("pointerleave",(()=>{this.removeRipple(t)}),{once:!0})}createRipple(e){let t;const{clientX:n,clientY:i}=e,o=document.createElement("div"),s=o.style;s.width="100px",s.height="100px",s.margin="-50px 0px 0px -50px",s.zIndex=this.options.zIndex?`${this.options.zIndex}`:"inhert",s.opacity="1",s.position="absolute",s.transform="scale(0.2)",s.background=`${this.options.color}`,s.borderRadius="50%",s.pointerEvents="none",s.transition=`transform ${this.options.enterDuration}ms ease-out 0s, opacity ${this.options.exitDuration}ms ease-out ${this.options.enterDuration/2}ms`,this.rippleWrapper.appendChild(o);const{width:r,height:p,top:l,left:a,right:d,bottom:h}=this.element.getBoundingClientRect();return this.options.centered?(s.top=p/2+"px",s.left=r/2+"px",t=2*Math.sqrt((r/2)**2+(p/2)**2)/100):(s.top=i-l+"px",s.left=n-a+"px",t=2*Math.sqrt(Math.max(n-a,d-n)**2+Math.max(i-l,h-i)**2)/100),s.transform=`scale(${t}) translate(0px, 0px)`,o}removeRipple(e){e.isConnected&&(e.addEventListener("transitionend",(t=>{"opacity"===t.propertyName&&e.remove()})),e.style.opacity="0")}injectStyles(){null===e.style&&(e.style=document.createElement("style"),e.style.classList.add("material-ripple"),e.style.innerHTML=".material-ripple { position: relative; overflow: hidden; } .material-ripple--unbounded { overflow: visible; }",document.head.appendChild(e.style))}}e.style=null;export{e as Ripple};

dist/index.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).MaterialRipple={})}(this,(function(e){"use strict";class t{constructor(e){this.options=Object.assign({color:"rgba(0, 0, 0, 0.1)",centered:!1,unbounded:!1,exitDuration:1024,enterDuration:512},e),this.onElementPointerDown=this.onElementPointerDown.bind(this),this.init()}get element(){return this.options.element}destroy(){this.element.classList.remove("material-ripple","material-ripple--unbounded"),this.element.removeEventListener("pointerdown",this.onElementPointerDown)}init(){this.injectStyles(),this.element.classList.add("material-ripple"),this.options.unbounded&&this.element.classList.add("material-ripple--unbounded"),this.element.addEventListener("pointerdown",this.onElementPointerDown)}onElementPointerDown(e){const t=this.createRipple(e);this.element.addEventListener("pointerup",(()=>{this.removeRipple(t)}),{once:!0}),this.element.addEventListener("pointerleave",(()=>{this.removeRipple(t)}),{once:!0})}createRipple(e){let t;const{clientX:n,clientY:i}=e,o=document.createElement("div"),s=o.style;s.width="100px",s.height="100px",s.margin="-50px 0px 0px -50px",s.zIndex=this.options.zIndex?`${this.options.zIndex}`:"inhert",s.opacity="1",s.position="absolute",s.transform="scale(0.2)",s.background=`${this.options.color}`,s.borderRadius="50%",s.pointerEvents="none",s.transition=`transform ${this.options.enterDuration}ms ease-out 0s, opacity ${this.options.exitDuration}ms ease-out ${this.options.enterDuration/2}ms`,this.element.appendChild(o);const{width:r,height:l,top:p,left:a,right:d,bottom:h}=this.element.getBoundingClientRect();return this.options.centered?(s.top=l/2+"px",s.left=r/2+"px",t=2*Math.sqrt((r/2)**2+(l/2)**2)/100):(s.top=i-p+"px",s.left=n-a+"px",t=2*Math.sqrt(Math.max(n-a,d-n)**2+Math.max(i-p,h-i)**2)/100),s.transform=`scale(${t}) translate(0px, 0px)`,o}removeRipple(e){e.isConnected&&(e.addEventListener("transitionend",(t=>{"opacity"===t.propertyName&&e.remove()})),e.style.opacity="0")}injectStyles(){null===t.style&&(t.style=document.createElement("style"),t.style.classList.add("material-ripple"),t.style.innerHTML=".material-ripple { position: relative; overflow: hidden; } .material-ripple--unbounded { overflow: visible; }",document.head.appendChild(t.style))}}t.style=null,e.Ripple=t,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).MaterialRipple={})}(this,(function(e){"use strict";class t{constructor(e){this.options=Object.assign({color:"rgba(0, 0, 0, 0.1)",centered:!1,unbounded:!1,exitDuration:1024,enterDuration:512,rippleWrapper:e.element},e),this.onElementPointerDown=this.onElementPointerDown.bind(this),this.init()}get element(){return this.options.element}get rippleWrapper(){return this.options.rippleWrapper}destroy(){this.element.classList.remove("material-ripple","material-ripple--unbounded"),this.element.removeEventListener("pointerdown",this.onElementPointerDown)}init(){this.injectStyles(),this.element.classList.add("material-ripple"),this.options.unbounded&&this.element.classList.add("material-ripple--unbounded"),this.element.addEventListener("pointerdown",this.onElementPointerDown)}onElementPointerDown(e){const t=this.createRipple(e);this.element.addEventListener("pointerup",(()=>{this.removeRipple(t)}),{once:!0}),this.element.addEventListener("pointerleave",(()=>{this.removeRipple(t)}),{once:!0})}createRipple(e){let t;const{clientX:i,clientY:n}=e,o=document.createElement("div"),s=o.style;s.width="100px",s.height="100px",s.margin="-50px 0px 0px -50px",s.zIndex=this.options.zIndex?`${this.options.zIndex}`:"inhert",s.opacity="1",s.position="absolute",s.transform="scale(0.2)",s.background=`${this.options.color}`,s.borderRadius="50%",s.pointerEvents="none",s.transition=`transform ${this.options.enterDuration}ms ease-out 0s, opacity ${this.options.exitDuration}ms ease-out ${this.options.enterDuration/2}ms`,this.rippleWrapper.appendChild(o);const{width:r,height:p,top:l,left:a,right:d,bottom:h}=this.element.getBoundingClientRect();return this.options.centered?(s.top=p/2+"px",s.left=r/2+"px",t=2*Math.sqrt((r/2)**2+(p/2)**2)/100):(s.top=n-l+"px",s.left=i-a+"px",t=2*Math.sqrt(Math.max(i-a,d-i)**2+Math.max(n-l,h-n)**2)/100),s.transform=`scale(${t}) translate(0px, 0px)`,o}removeRipple(e){e.isConnected&&(e.addEventListener("transitionend",(t=>{"opacity"===t.propertyName&&e.remove()})),e.style.opacity="0")}injectStyles(){null===t.style&&(t.style=document.createElement("style"),t.style.classList.add("material-ripple"),t.style.innerHTML=".material-ripple { position: relative; overflow: hidden; } .material-ripple--unbounded { overflow: visible; }",document.head.appendChild(t.style))}}t.style=null,e.Ripple=t,Object.defineProperty(e,"__esModule",{value:!0})}));

dist/ripple.d.ts

@@ -9,2 +9,3 @@ export interface RippleOptions {
     enterDuration?: number;
+    rippleWrapper?: HTMLElement;
 }
@@ -15,2 +16,3 @@ export declare class Ripple {
     private get element();
+    private get rippleWrapper();
     constructor(options: RippleOptions);
@@ -17,0 +19,0 @@ destroy(): void;

package.json

 {
   "name": "@cicara/material-ripple",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "material ripple effect implemented using native js",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

20588

increased by1.15%

Lines of code

273

increased by0.74%

No dependency changes