mat-ripple
Version:
Material design Ripple effect.
2 lines (1 loc) • 9.18 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).MatRipple=e()}(this,function(){"use strict";var t=function(e,n){return(t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(e,n)};function e(e,n){function i(){this.constructor=e}t(e,n),e.prototype=null===n?Object.create(n):(i.prototype=n.prototype,new i)}var n,i=function(){return(i=Object.assign||function(t){for(var e,n=1,i=arguments.length;n<i;n++)for(var r in e=arguments[n])Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t}).apply(this,arguments)};!function(){var t=window;if(void 0!==t.Reflect&&void 0!==t.customElements){var e=HTMLElement,n=function(){return Reflect.construct(e,[],this.constructor)};t.HTMLElement=n,HTMLElement.prototype=e.prototype,HTMLElement.prototype.constructor=HTMLElement,Object.setPrototypeOf(HTMLElement,e)}}();!function(t){t[t.FADING_IN=0]="FADING_IN",t[t.VISIBLE=1]="VISIBLE",t[t.FADING_OUT=2]="FADING_OUT",t[t.HIDDEN=3]="HIDDEN"}(n||(n={}));var r,o=function(){function t(t,e,i){this._renderer=t,this.element=e,this.config=i,this.state=n.HIDDEN}return t.prototype.fadeOut=function(){this._renderer.fadeOutRipple(this)},t}();function s(t,e){return window.getComputedStyle(t).getPropertyValue(e||"opacity")}var a,u={enterDuration:450,exitDuration:400},p=(a={passive:!0},function(){if(null==r&&"undefined"!=typeof window)try{window.addEventListener("test",null,Object.defineProperty({},"passive",{get:function(){return r=!0}}))}finally{r=r||!1}return r}()?a:!!a.capture),l=function(){function t(t,e,n){this._target=t,this._isPointerDown=!1,this._triggerEvents=new Map,this._activeRipples=new Set,this._containerElement=e,this._pathElement=n,this._triggerEvents.set("mousedown",this._onMousedown.bind(this)).set("mouseup",this._onPointerUp.bind(this)).set("mouseleave",this._onPointerUp.bind(this)).set("touchstart",this._onTouchStart.bind(this)).set("touchend",this._onPointerUp.bind(this)).set("touchcancel",this._onPointerUp.bind(this))}return t.prototype.fadeInRipple=function(t,e,r){var a=this;void 0===r&&(r={});var p=this._containerRect=this._containerRect||this._containerElement.getBoundingClientRect(),l=i({},u,r.animation);r.centered&&(t=p.left+p.width/2,e=p.top+p.height/2);var c=r.radius||function(t,e,n){var i=Math.max(Math.abs(t-n.left),Math.abs(t-n.right)),r=Math.max(Math.abs(e-n.top),Math.abs(e-n.bottom));return Math.sqrt(i*i+r*r)}(t,e,p),d=t-p.left,h=e-p.top,f=l.enterDuration,b=document.createElement("div");b.classList.add("mat-ripple-element"),b.style.left=d-c+"px",b.style.top=h-c+"px",b.style.height=2*c+"px",b.style.width=2*c+"px",b.style.background=r.color||null,b.style.transitionDuration=f+"ms",this._pathElement.appendChild(b),s(b),b.style.transform=" translate3d(0,0,0) scale(1)";var _=new o(this,b,r);return _.state=n.FADING_IN,this._activeRipples.add(_),r.persistent||(this._mostRecentTransientRipple=_),setTimeout(function(){var t=_===a._mostRecentTransientRipple;_.state=n.VISIBLE,r.persistent||t&&a._isPointerDown||_.fadeOut()},f),_},t.prototype.fadeOutRipple=function(t){var e=this._activeRipples.delete(t);if(t===this._mostRecentTransientRipple&&(this._mostRecentTransientRipple=null),this._activeRipples.size||(this._containerRect=null),e){var r=t.element,o=i({},u,t.config.animation);r.style.transitionDuration=o.exitDuration+"ms",r.style.opacity="0",t.state=n.FADING_OUT,setTimeout(function(){t.state=n.HIDDEN,r.parentNode.removeChild(r)},o.exitDuration)}},t.prototype.fadeOutAll=function(){this._activeRipples.forEach(function(t){return t.fadeOut()})},t.prototype.setupTriggerEvents=function(t){t&&t!==this._triggerElement&&(this.removeTriggerEvents(),this._triggerEvents.forEach(function(e,n){t.addEventListener(n,e,p)}),this._triggerElement=t)},t.prototype.removeTriggerEvents=function(){var t=this;this._triggerElement&&this._triggerEvents.forEach(function(e,n){t._triggerElement.removeEventListener(n,e,p)})},t.prototype._onMousedown=function(t){var e=function(t){return 0===t.buttons}(t),n=this._lastTouchStartEvent&&Date.now()<this._lastTouchStartEvent+800;this._target.rippleDisabled||e||n||(this._isPointerDown=!0,this.fadeInRipple(t.clientX,t.clientY,this._target.rippleConfig))},t.prototype._onTouchStart=function(t){if(!this._target.rippleDisabled){this._lastTouchStartEvent=Date.now(),this._isPointerDown=!0;for(var e=0,n=t.changedTouches;e<n.length;e++){var i=n[e];this.fadeInRipple(i.clientX,i.clientY,this._target.rippleConfig)}}},t.prototype._onPointerUp=function(){this._isPointerDown&&(this._isPointerDown=!1,this._activeRipples.forEach(function(t){var e=t.state===n.VISIBLE||t.config.terminateOnPointerUp&&t.state===n.FADING_IN;!t.config.persistent&&e&&t.fadeOut()}))},t}(),c=function(t){function n(e){return t.call(this,e)||this}return e(n,t),n}(function(t){function n(e){var n=t.call(this)||this;return n._color="rgba(0,0,0,.2)",n._unbounded=!1,n._centered=!1,n._radius=0,n._disabled=!1,n._isInitialized=!1,n._globalOptions=e||{},n}return e(n,t),Object.defineProperty(n,"observedAttributes",{get:function(){return["color","unbounded","centered","radius","disabled"]},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"color",{get:function(){return this._color},set:function(t){this._color=t||"rgba(0,0,0,.2)"},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"unbounded",{get:function(){return this._unbounded},set:function(t){if(this._unbounded=t,t){if(this.hasAttribute("unbounded"))return;this.setAttribute("unbounded","")}else this.removeAttribute("unbounded")},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"centered",{get:function(){return this._centered},set:function(t){this._centered=t},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"radius",{get:function(){return this._radius},set:function(t){this._radius=t},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"animation",{get:function(){return this._animation},set:function(t){this._animation=t},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"disabled",{get:function(){return this._disabled},set:function(t){this._disabled=t,this._setupTriggerEventsIfEnabled()},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"trigger",{get:function(){return this._trigger||this._elementRef},set:function(t){this._trigger=t,this._setupTriggerEventsIfEnabled()},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"rippleConfig",{get:function(){return{centered:this.centered,radius:this.radius,color:this.color,animation:i({},this._globalOptions.animation,this.animation),terminateOnPointerUp:this._globalOptions.terminateOnPointerUp}},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"rippleDisabled",{get:function(){return this.disabled||!!this._globalOptions.disabled},enumerable:!0,configurable:!0}),n.prototype.attributeChangedCallback=function(t,e,n){switch(t){case"color":e!==n&&(this.color=n);break;case"unbounded":this.hasAttribute("unbounded")?this.unbounded=!0:this.unbounded=!1;break;case"centered":this.hasAttribute("centered")?this.centered=!0:this.centered=!1;break;case"radius":e!==n&&(this.radius=JSON.parse(n));break;case"disabled":this.hasAttribute("disabled")?this.disabled=!0:this.disabled=!1}},n.prototype.connectedCallback=function(){this._isInitialized=!0,this._setup(),this._setupTriggerEventsIfEnabled()},n.prototype.disconnectedCallback=function(){this._rippleRenderer.removeTriggerEvents()},n.prototype.fadeOutAll=function(){this._rippleRenderer.fadeOutAll()},n.prototype.launch=function(t,e,n){return void 0===e&&(e=0),"number"==typeof t?this._rippleRenderer.fadeInRipple(t,e,i({},this.rippleConfig,n)):this._rippleRenderer.fadeInRipple(0,0,i({},this.rippleConfig,t))},n.prototype._setupTriggerEventsIfEnabled=function(){!this.disabled&&this._isInitialized&&this._rippleRenderer.setupTriggerEvents(this.trigger)},n.prototype._setup=function(){var t=document.createElement("template");t.innerHTML="\n\t\t\t<style>\n :host{\n\t\t\t\t\tposition: absolute !important;\n\t\t\t\t\tborder-radius: inherit;\n top: 0;\n left: 0;\n bottom: 0;\n\t\t\t\t\tright: 0;\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpointer-events: none\n }\n\n\t\t\t\t.mat-ripple-element {\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tborder-radius: 50%;\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\ttransition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);\n\t\t\t\t\ttransform: translate3d(0,0,0) scale(0);\n\t\t\t\t\twill-change: transform, opacity;\n\t\t\t\t}\n\t\t\t\t\n\t\t\t\t:host([unbounded]) {\n\t\t\t\t\toverflow: visible;\n\t\t\t\t}\n\t\t\t\t\n </style>\n <slot></slot>\n ",this.attachShadow({mode:"open"}).appendChild(t.content.cloneNode(!0)),this._elementRef=this.parentElement,this._rippleRenderer=new l(this,this._elementRef,this.shadowRoot),"static"===s(this.parentElement,"position")&&(this.parentElement.style.position="relative")},n}(HTMLElement));return customElements.define("mat-ripple",c),c});