@ionic/core
Version:
Base components for Ionic
1 lines • 3.76 kB
JavaScript
import*as tslib_1 from"../polyfills/tslib.js";var RippleEffect=function(){function e(){this.type="bounded"}return e.prototype.addRipple=function(e,t){return tslib_1.__awaiter(this,void 0,void 0,function(){var n=this;return tslib_1.__generator(this,function(o){return[2,new Promise(function(o){n.queue.read(function(){var r=n.el.getBoundingClientRect(),i=r.width,u=r.height,p=Math.sqrt(i*i+u*u),l=Math.max(u,i),a=n.unbounded?l:p+PADDING,f=Math.floor(l*INITIAL_ORIGIN_SCALE),c=a/f,d=e-r.left,s=t-r.top;n.unbounded&&(d=.5*i,s=.5*u);var b=d-.5*f,h=s-.5*f,y=.5*i-d,m=.5*u-s;n.queue.write(function(){var e=n.win.document.createElement("div");e.classList.add("ripple-effect");var t=e.style;t.top=h+"px",t.left=b+"px",t.width=t.height=f+"px",t.setProperty("--final-scale",""+c),t.setProperty("--translate-end",y+"px, "+m+"px"),(n.el.shadowRoot||n.el).appendChild(e),setTimeout(function(){o(function(){removeRipple(e)})},325)})})})]})})},Object.defineProperty(e.prototype,"unbounded",{get:function(){return"unbounded"===this.type},enumerable:!0,configurable:!0}),e.prototype.hostData=function(){return{role:"presentation",class:{unbounded:this.unbounded}}},Object.defineProperty(e,"is",{get:function(){return"ion-ripple-effect"},enumerable:!0,configurable:!0}),Object.defineProperty(e,"encapsulation",{get:function(){return"shadow"},enumerable:!0,configurable:!0}),Object.defineProperty(e,"properties",{get:function(){return{addRipple:{method:!0},el:{elementRef:!0},queue:{context:"queue"},type:{type:String,attr:"type"},win:{context:"window"}}},enumerable:!0,configurable:!0}),Object.defineProperty(e,"style",{get:function(){return":host{left:0;right:0;top:0;bottom:0;position:absolute;contain:strict;pointer-events:none}:host(.unbounded){contain:layout size style}.ripple-effect{border-radius:50%;position:absolute;background-color:currentColor;color:inherit;contain:strict;opacity:0;-webkit-animation:rippleAnimation 225ms forwards,fadeInAnimation 75ms forwards;animation:rippleAnimation 225ms forwards,fadeInAnimation 75ms forwards;will-change:transform,opacity;pointer-events:none}.fade-out{-webkit-transform:translate(var(--translate-end)) scale(var(--final-scale,1));transform:translate(var(--translate-end)) scale(var(--final-scale,1));-webkit-animation:fadeOutAnimation .15s forwards;animation:fadeOutAnimation .15s forwards}\@-webkit-keyframes rippleAnimation{0%{-webkit-animation-timing-function:cubic-bezier(.4,0,.2,1);animation-timing-function:cubic-bezier(.4,0,.2,1);-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:translate(var(--translate-end)) scale(var(--final-scale,1));transform:translate(var(--translate-end)) scale(var(--final-scale,1))}}\@keyframes rippleAnimation{0%{-webkit-animation-timing-function:cubic-bezier(.4,0,.2,1);animation-timing-function:cubic-bezier(.4,0,.2,1);-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:translate(var(--translate-end)) scale(var(--final-scale,1));transform:translate(var(--translate-end)) scale(var(--final-scale,1))}}\@-webkit-keyframes fadeInAnimation{0%{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:.16}}\@keyframes fadeInAnimation{0%{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:.16}}\@-webkit-keyframes fadeOutAnimation{0%{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:.16}to{opacity:0}}\@keyframes fadeOutAnimation{0%{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:.16}to{opacity:0}}"},enumerable:!0,configurable:!0}),e}();function removeRipple(e){e.classList.add("fade-out"),setTimeout(function(){e.remove()},200)}var PADDING=10,INITIAL_ORIGIN_SCALE=.5;export{RippleEffect as IonRippleEffect};