@material/ripple - npm Package Compare versions

Comparing version 0.1.2 to 0.2.0

constants.js

@@ -41,5 +41,7 @@ /**
   VAR_TOP: `--${ROOT}-top`,
-  VAR_XF_ORIGIN_X: `--${ROOT}-xfo-x`,
-  VAR_XF_ORIGIN_Y: `--${ROOT}-xfo-y`,
+  VAR_TRANSLATE_END: `--${ROOT}-translate-end`,
   VAR_FG_APPROX_XF: `--${ROOT}-fg-approx-xf`,
+  VAR_FG_SCALE: `--${ROOT}-fg-scale`,
+  VAR_FG_TRANSLATE_START: `--${ROOT}-fg-translate-start`,
+  VAR_FG_TRANSLATE_END: `--${ROOT}-fg-translate-end`,
 };
@@ -53,2 +55,4 @@
   UNBOUNDED_TRANSFORM_DURATION_MS: 200,
+  PADDING: 10,
+  INITIAL_ORIGIN_SCALE: 0.6,
 };

dist/mdc.ripple.min.js

@@ -6,2 +6,2 @@ /*!
 */
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.ripple=e():(t.mdc=t.mdc||{},t.mdc.ripple=e())}(this,function(){return function(t){function e(i){if(n[i])return n[i].exports;var a=n[i]={exports:{},id:i,loaded:!1};return t[i].call(a.exports,a,a.exports,e),a.loaded=!0,a.exports}var n={};return e.m=t,e.c=n,e.p="/assets/",e(0)}([function(t,e,n){t.exports=n(9)},function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0});var a=n(2);Object.defineProperty(e,"MDCFoundation",{enumerable:!0,get:function(){return i(a).default}});var r=n(3);Object.defineProperty(e,"MDCComponent",{enumerable:!0,get:function(){return i(r).default}})},function(t,e){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var i=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),a=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};n(this,t),this.adapter_=e}return i(t,null,[{key:"cssClasses",get:function(){return{}}},{key:"strings",get:function(){return{}}},{key:"numbers",get:function(){return{}}},{key:"defaultAdapter",get:function(){return{}}}]),i(t,[{key:"init",value:function(){}},{key:"destroy",value:function(){}}]),t}();e.default=a},function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{default:t}}function a(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var r=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),o=n(2),s=i(o),u=function(){function t(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:this.getDefaultFoundation();a(this,t),this.root_=e;for(var i=arguments.length,r=Array(i>2?i-2:0),o=2;o<i;o++)r[o-2]=arguments[o];this.initialize.apply(this,r),this.foundation_=n,this.foundation_.init(),this.initialSyncWithDOM()}return r(t,null,[{key:"attachTo",value:function(e){return new t(e,new s.default)}}]),r(t,[{key:"initialize",value:function(){}},{key:"getDefaultFoundation",value:function(){throw new Error("Subclasses must override getDefaultFoundation to return a properly configured foundation class")}},{key:"initialSyncWithDOM",value:function(){}},{key:"destroy",value:function(){this.foundation_.destroy()}},{key:"listen",value:function(t,e){this.root_.addEventListener(t,e)}},{key:"unlisten",value:function(t,e){this.root_.removeEventListener(t,e)}},{key:"emit",value:function(t,e){var n=void 0;"function"==typeof CustomEvent?n=new CustomEvent(t,{detail:e}):(n=document.createEvent("CustomEvent"),n.initCustomEvent(t,!1,!1,e)),this.root_.dispatchEvent(n)}}]),t}();e.default=u},function(t,e){"use strict";function n(t){return void 0!==t.document&&"function"==typeof t.document.createElement}function i(t){return t in u||t in c}function a(t,e,n){switch(t){case"animationstart":case"animationend":case"animationiteration":return"animation"in n.style?e[t].noPrefix:e[t].webkitPrefix;case"transitionend":return"transition"in n.style?e[t].noPrefix:e[t].webkitPrefix;default:return e[t].noPrefix}}function r(t,e){if(!n(t)||!i(e))return e;var r=e in u?u:c,o=t.document.createElement("div"),s="";return s=r===u?a(e,r,o):r[e].noPrefix in o.style?r[e].noPrefix:r[e].webkitPrefix}function o(t,e){return r(t,e)}function s(t,e){return r(t,e)}Object.defineProperty(e,"__esModule",{value:!0}),e.getCorrectEventName=o,e.getCorrectPropertyName=s;var u={animationstart:{noPrefix:"animationstart",webkitPrefix:"webkitAnimationStart"},animationend:{noPrefix:"animationend",webkitPrefix:"webkitAnimationEnd"},animationiteration:{noPrefix:"animationiteration",webkitPrefix:"webkitAnimationIteration"},transitionend:{noPrefix:"transitionend",webkitPrefix:"webkitTransitionEnd"}},c={animation:{noPrefix:"animation",webkitPrefix:"-webkit-animation"},transform:{noPrefix:"transform",webkitPrefix:"-webkit-transform"},transition:{noPrefix:"transition",webkitPrefix:"-webkit-transition"}}},function(t,e){"use strict";function n(t){var e=t.CSS&&"function"==typeof t.CSS.supports;if(e){var n=t.CSS.supports("--css-vars","yes"),i=t.CSS.supports("(--css-vars: yes)")&&t.CSS.supports("color","#00000000");return n||i}}function i(t){return["webkitMatchesSelector","msMatchesSelector","matches"].filter(function(e){return e in t}).pop()}function a(t,e,n){var i=!1,a=function a(){i||(i=!0,t.removeClass(e),t.deregisterInteractionHandler(n,a))};return t.registerInteractionHandler(n,a),t.addClass(e),a}function r(t,e,n){var i=e.x,a=e.y,r=i+n.left,o=a+n.top,s=void 0,u=void 0;return"touchend"===t.type?(s=t.changedTouches[0].pageX-r,u=t.changedTouches[0].pageY-o):(s=t.pageX-r,u=t.pageY-o),{left:s,top:u}}Object.defineProperty(e,"__esModule",{value:!0}),e.supportsCssVariables=n,e.getMatchesProperty=i,e.animateWithClass=a,e.getNormalizedEventCoords=r},,function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=e.ROOT="mdc-ripple",i=e.UPGRADED=n+"-upgraded";e.cssClasses={ROOT:i,UNBOUNDED:i+"--unbounded",BG_ACTIVE:i+"--background-active",BG_BOUNDED_ACTIVE_FILL:i+"--background-bounded-active-fill",FG_BOUNDED_ACTIVE_FILL:i+"--foreground-bounded-active-fill",FG_UNBOUNDED_ACTIVATION:i+"--foreground-unbounded-activation",FG_UNBOUNDED_DEACTIVATION:i+"--foreground-unbounded-deactivation"},e.strings={VAR_SURFACE_WIDTH:"--"+n+"-surface-width",VAR_SURFACE_HEIGHT:"--"+n+"-surface-height",VAR_FG_SIZE:"--"+n+"-fg-size",VAR_FG_UNBOUNDED_OPACITY_DURATION:"--"+n+"-fg-unbounded-opacity-duration",VAR_FG_UNBOUNDED_TRANSFORM_DURATION:"--"+n+"-fg-unbounded-transform-duration",VAR_LEFT:"--"+n+"-left",VAR_TOP:"--"+n+"-top",VAR_XF_ORIGIN_X:"--"+n+"-xfo-x",VAR_XF_ORIGIN_Y:"--"+n+"-xfo-y",VAR_FG_APPROX_XF:"--"+n+"-fg-approx-xf"},e.numbers={FG_TRANSFORM_DELAY_MS:80,OPACITY_DURATION_DIVISOR:3,ACTIVE_OPACITY_DURATION_MS:110,MIN_OPACITY_DURATION_MS:200,UNBOUNDED_TRANSFORM_DURATION_MS:200}},function(t,e,n){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function a(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function r(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(e,"__esModule",{value:!0});var o=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},s=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),u=n(1),c=n(4),d=n(7),f=n(5),l={mouseup:"mousedown",pointerup:"pointerdown",touchend:"touchstart",keyup:"keydown",blur:"focus"},_=function(t){function e(t){i(this,e);var n=a(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,o(e.defaultAdapter,t)));return n.layoutFrame_=0,n.frame_={width:0,height:0},n.activationState_=n.defaultActivationState_(),n.xfDuration_=0,n.maxRadius=0,n.listenerInfos_=[{activate:"touchstart",deactivate:"touchend"},{activate:"pointerdown",deactivate:"pointerup"},{activate:"mousedown",deactivate:"mouseup"},{activate:"keydown",deactivate:"keyup"},{focus:"focus",blur:"blur"}],n.listeners_={activate:function(t){return n.activate_(t)},deactivate:function(t){return n.deactivate_(t)},focus:function(){return requestAnimationFrame(function(){return n.adapter_.addClass(e.cssClasses.BG_ACTIVE)})},blur:function(){return requestAnimationFrame(function(){return n.adapter_.removeClass(e.cssClasses.BG_ACTIVE)})}},n.unboundedOpacityFadeTimer_=0,n.resizeHandler_=function(){return n.layout()},n.cancelBgBounded_=function(){},n.cancelFgBounded_=function(){},n.cancelFgUnbounded_=function(){},n.unboundedCoords_={left:0,top:0},n}return r(e,t),s(e,[{key:"isSupported_",get:function(){return this.adapter_.browserSupportsCssVars()}}],[{key:"cssClasses",get:function(){return d.cssClasses}},{key:"strings",get:function(){return d.strings}},{key:"numbers",get:function(){return d.numbers}},{key:"defaultAdapter",get:function(){return{browserSupportsCssVars:function(){},isUnbounded:function(){},isSurfaceActive:function(){},addClass:function(){},removeClass:function(){},registerInteractionHandler:function(){},deregisterInteractionHandler:function(){},registerResizeHandler:function(){},deregisterResizeHandler:function(){},updateCssVariable:function(){},computeBoundingRect:function(){},getWindowPageOffset:function(){}}}}]),s(e,[{key:"defaultActivationState_",value:function(){return{isActivated:!1,wasActivatedByPointer:!1,wasElementMadeActive:!1,activationStartTime:0,activationEvent:null}}},{key:"init",value:function(){var t=this;if(this.isSupported_){this.addEventListeners_();var n=e.cssClasses,i=n.ROOT,a=n.UNBOUNDED;requestAnimationFrame(function(){t.adapter_.addClass(i),t.adapter_.isUnbounded()&&t.adapter_.addClass(a),t.layoutInternal_()})}}},{key:"addEventListeners_",value:function(){var t=this;this.listenerInfos_.forEach(function(e){Object.keys(e).forEach(function(n){t.adapter_.registerInteractionHandler(e[n],t.listeners_[n])})}),this.adapter_.registerResizeHandler(this.resizeHandler_)}},{key:"activate_",value:function(t){var e=this,n=this.activationState_;n.isActivated||(n.isActivated=!0,n.activationEvent=t,n.wasActivatedByPointer="mousedown"===t.type||"touchstart"===t.type||"pointerdown"===t.type,n.activationStartTime=Date.now(),requestAnimationFrame(function(){n.wasElementMadeActive="keydown"!==t.type||e.adapter_.isSurfaceActive(),n.wasElementMadeActive?e.animateActivation_():e.activationState_=e.defaultActivationState_()}))}},{key:"animateActivation_",value:function(){var t=this,n=e.cssClasses,i=n.BG_ACTIVE,a=n.BG_BOUNDED_ACTIVE_FILL,r=n.FG_UNBOUNDED_DEACTIVATION,o=n.FG_BOUNDED_ACTIVE_FILL;[a,r,o].forEach(function(e){return t.adapter_.removeClass(e)}),this.cancelBgBounded_(),this.cancelFgBounded_(),this.cancelFgUnbounded_(),this.unboundedOpacityFadeTimer_&&(clearTimeout(this.unboundedOpacityFadeTimer_),this.unboundedOpacityFadeTimer_=0),this.adapter_.addClass(i),this.adapter_.isUnbounded()&&this.animateUnboundedActivation_()}},{key:"animateUnboundedActivation_",value:function(){var t=e.cssClasses.FG_UNBOUNDED_ACTIVATION,n=void 0;n=this.activationState_.wasActivatedByPointer?(0,f.getNormalizedEventCoords)(this.activationState_.activationEvent,this.adapter_.getWindowPageOffset(),this.adapter_.computeBoundingRect()):{left:this.frame_.width/2,top:this.frame_.height/2};var i=n,a=i.left,r=i.top,o=e.strings,s=o.VAR_XF_ORIGIN_X,u=o.VAR_XF_ORIGIN_Y;this.adapter_.updateCssVariable(s,a-this.unboundedCoords_.left+"px"),this.adapter_.updateCssVariable(u,r-this.unboundedCoords_.top+"px"),this.adapter_.addClass(t)}},{key:"deactivate_",value:function(t){var e=this,n=this.activationState_;if(n.isActivated){var i=l[t.type],a=n.activationEvent.type,r=i===a,s=r;n.wasActivatedByPointer&&(s="mouseup"===t.type);var u=o({},this.activationState_);r&&requestAnimationFrame(function(){return e.animateDeactivation_(t,u)}),s&&(this.activationState_=this.defaultActivationState_())}}},{key:"animateDeactivation_",value:function(t,n){var i=n.wasActivatedByPointer,a=n.wasElementMadeActive,r=n.activationStartTime,o=e.cssClasses.BG_ACTIVE;if(i||a){this.adapter_.removeClass(o);var s="touchend"===t.type||"pointerup"===t.type||"mouseup"===t.type;this.adapter_.isUnbounded()?this.animateUnboundedDeactivation_(this.getUnboundedDeactivationInfo_(r)):this.animateBoundedDeactivation_(t,s)}}},{key:"animateUnboundedDeactivation_",value:function(t){var n=this,i=t.opacityDuration,a=t.transformDuration,r=t.approxCurScale,o=e.cssClasses,s=o.FG_UNBOUNDED_ACTIVATION,u=o.FG_UNBOUNDED_DEACTIVATION,c=e.strings,d=c.VAR_FG_UNBOUNDED_OPACITY_DURATION,f=c.VAR_FG_UNBOUNDED_TRANSFORM_DURATION,l=c.VAR_FG_APPROX_XF;this.adapter_.updateCssVariable(l,"scale("+r+")"),this.adapter_.updateCssVariable(d,i+"ms"),this.adapter_.updateCssVariable(f,a+"ms"),this.adapter_.addClass(u),this.adapter_.removeClass(s),this.unboundedOpacityFadeTimer_=setTimeout(function(){n.adapter_.removeClass(u)},i)}},{key:"getUnboundedDeactivationInfo_",value:function(t){var n=Date.now()-t,i=e.numbers,a=i.FG_TRANSFORM_DELAY_MS,r=i.OPACITY_DURATION_DIVISOR,o=i.ACTIVE_OPACITY_DURATION_MS,s=i.UNBOUNDED_TRANSFORM_DURATION_MS,u=i.MIN_OPACITY_DURATION_MS,c=0;n>a&&(c=Math.min((n-a)/this.xfDuration_,1));var d=s,f=Math.min(n/o,1),l=Math.max(u,1e3*f/r);return{transformDuration:d,opacityDuration:l,approxCurScale:c}}},{key:"animateBoundedDeactivation_",value:function(t,n){var i=void 0;i=n?(0,f.getNormalizedEventCoords)(t,this.adapter_.getWindowPageOffset(),this.adapter_.computeBoundingRect()):{left:this.frame_.width/2,top:this.frame_.height/2};var a=i,r=a.left,o=a.top,s=e.strings,u=s.VAR_LEFT,d=s.VAR_TOP,l=e.cssClasses,_=l.BG_BOUNDED_ACTIVE_FILL,p=l.FG_BOUNDED_ACTIVE_FILL;this.adapter_.updateCssVariable(u,r+"px"),this.adapter_.updateCssVariable(d,o+"px"),this.cancelBgBounded_=(0,f.animateWithClass)(this.adapter_,_,(0,c.getCorrectEventName)(window,"transitionend")),this.cancelFgBounded_=(0,f.animateWithClass)(this.adapter_,p,(0,c.getCorrectEventName)(window,"animationend"))}},{key:"destroy",value:function(){var t=this;if(this.isSupported_){this.removeEventListeners_();var n=e.cssClasses,i=n.ROOT,a=n.UNBOUNDED;requestAnimationFrame(function(){t.adapter_.removeClass(i),t.adapter_.removeClass(a),t.removeCssVars_()})}}},{key:"removeEventListeners_",value:function(){var t=this;this.listenerInfos_.forEach(function(e){Object.keys(e).forEach(function(n){t.adapter_.deregisterInteractionHandler(e[n],t.listeners_[n])})}),this.adapter_.deregisterResizeHandler(this.resizeHandler_)}},{key:"removeCssVars_",value:function(){var t=this,n=e.strings;Object.keys(n).forEach(function(e){0===e.indexOf("VAR_")&&t.adapter_.updateCssVariable(n[e],null)})}},{key:"layout",value:function(){var t=this;this.layoutFrame_&&cancelAnimationFrame(this.layoutFrame_),this.layoutFrame_=requestAnimationFrame(function(){t.layoutInternal_(),t.layoutFrame_=0})}},{key:"layoutInternal_",value:function(){this.frame_=this.adapter_.computeBoundingRect();var t=Math.max(this.frame_.height,this.frame_.width);this.maxRadius_=Math.sqrt(2)*t/2,this.xfDuration_=1e3*Math.sqrt(this.maxRadius_/1024),this.updateLayoutCssVars_()}},{key:"updateLayoutCssVars_",value:function(){var t=2*this.maxRadius_,n=e.strings,i=n.VAR_SURFACE_WIDTH,a=n.VAR_SURFACE_HEIGHT,r=n.VAR_FG_SIZE,o=n.VAR_FG_UNBOUNDED_TRANSFORM_DURATION,s=n.VAR_LEFT,u=n.VAR_TOP;this.adapter_.updateCssVariable(i,this.frame_.width+"px"),this.adapter_.updateCssVariable(a,this.frame_.height+"px"),this.adapter_.updateCssVariable(r,t+"px"),this.adapter_.updateCssVariable(o,this.xfDuration_+"ms"),this.adapter_.isUnbounded()&&(this.unboundedCoords_={left:Math.round(-(t/2)+this.frame_.width/2),top:Math.round(-(t/2)+this.frame_.height/2)},this.adapter_.updateCssVariable(s,this.unboundedCoords_.left+"px"),this.adapter_.updateCssVariable(u,this.unboundedCoords_.top+"px"))}}]),e}(u.MDCFoundation);e.default=_},function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{default:t}}function a(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function r(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(e,"__esModule",{value:!0}),e.MDCRipple=e.MDCRippleFoundation=void 0;var s=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),u=n(1),c=n(8),d=i(c),f=n(5),l=(0,f.getMatchesProperty)(HTMLElement.prototype);e.MDCRippleFoundation=d.default;e.MDCRipple=function(t){function e(){return a(this,e),r(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return o(e,t),s(e,[{key:"getDefaultFoundation",value:function(){return new d.default(e.createAdapter(this))}},{key:"initialSyncWithDOM",value:function(){this.unbounded="mdcRippleIsUnbounded"in this.root_.dataset}},{key:"unbounded",get:function(){return this.unbounded_},set:function(t){var e=d.default.cssClasses.UNBOUNDED;this.unbounded_=Boolean(t),this.unbounded_?this.root_.classList.add(e):this.root_.classList.remove(e)}}],[{key:"attachTo",value:function(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=n.isUnbounded,a=void 0===i?void 0:i,r=new e(t);return void 0!==a&&(r.unbounded=a),r}},{key:"createAdapter",value:function(t){return{browserSupportsCssVars:function(){return(0,f.supportsCssVariables)(window)},isUnbounded:function(){return t.unbounded},isSurfaceActive:function(){return t.root_[l](":active")},addClass:function(e){return t.root_.classList.add(e)},removeClass:function(e){return t.root_.classList.remove(e)},registerInteractionHandler:function(e,n){return t.root_.addEventListener(e,n)},deregisterInteractionHandler:function(e,n){return t.root_.removeEventListener(e,n)},registerResizeHandler:function(t){return window.addEventListener("resize",t)},deregisterResizeHandler:function(t){return window.removeEventListener("resize",t)},updateCssVariable:function(e,n){return t.root_.style.setProperty(e,n)},computeBoundingRect:function(){return t.root_.getBoundingClientRect()},getWindowPageOffset:function(){return{x:window.pageXOffset,y:window.pageYOffset}}}}}]),e}(u.MDCComponent)}])});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.ripple=e():(t.mdc=t.mdc||{},t.mdc.ripple=e())}(this,function(){return function(t){function e(i){if(n[i])return n[i].exports;var a=n[i]={exports:{},id:i,loaded:!1};return t[i].call(a.exports,a,a.exports,e),a.loaded=!0,a.exports}var n={};return e.m=t,e.c=n,e.p="/assets/",e(0)}([function(t,e,n){t.exports=n(8)},function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0});var a=n(2);Object.defineProperty(e,"MDCFoundation",{enumerable:!0,get:function(){return i(a).default}});var r=n(3);Object.defineProperty(e,"MDCComponent",{enumerable:!0,get:function(){return i(r).default}})},function(t,e){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var i=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),a=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};n(this,t),this.adapter_=e}return i(t,null,[{key:"cssClasses",get:function(){return{}}},{key:"strings",get:function(){return{}}},{key:"numbers",get:function(){return{}}},{key:"defaultAdapter",get:function(){return{}}}]),i(t,[{key:"init",value:function(){}},{key:"destroy",value:function(){}}]),t}();e.default=a},function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{default:t}}function a(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var r=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),o=n(2),s=i(o),u=function(){function t(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:this.getDefaultFoundation();a(this,t),this.root_=e;for(var i=arguments.length,r=Array(i>2?i-2:0),o=2;o<i;o++)r[o-2]=arguments[o];this.initialize.apply(this,r),this.foundation_=n,this.foundation_.init(),this.initialSyncWithDOM()}return r(t,null,[{key:"attachTo",value:function(e){return new t(e,new s.default)}}]),r(t,[{key:"initialize",value:function(){}},{key:"getDefaultFoundation",value:function(){throw new Error("Subclasses must override getDefaultFoundation to return a properly configured foundation class")}},{key:"initialSyncWithDOM",value:function(){}},{key:"destroy",value:function(){this.foundation_.destroy()}},{key:"listen",value:function(t,e){this.root_.addEventListener(t,e)}},{key:"unlisten",value:function(t,e){this.root_.removeEventListener(t,e)}},{key:"emit",value:function(t,e){var n=void 0;"function"==typeof CustomEvent?n=new CustomEvent(t,{detail:e}):(n=document.createEvent("CustomEvent"),n.initCustomEvent(t,!1,!1,e)),this.root_.dispatchEvent(n)}}]),t}();e.default=u},function(t,e){"use strict";function n(t){return void 0!==t.document&&"function"==typeof t.document.createElement}function i(t){return t in u||t in c}function a(t,e,n){switch(t){case"animationstart":case"animationend":case"animationiteration":return"animation"in n.style?e[t].noPrefix:e[t].webkitPrefix;case"transitionend":return"transition"in n.style?e[t].noPrefix:e[t].webkitPrefix;default:return e[t].noPrefix}}function r(t,e){if(!n(t)||!i(e))return e;var r=e in u?u:c,o=t.document.createElement("div"),s="";return s=r===u?a(e,r,o):r[e].noPrefix in o.style?r[e].noPrefix:r[e].webkitPrefix}function o(t,e){return r(t,e)}function s(t,e){return r(t,e)}Object.defineProperty(e,"__esModule",{value:!0}),e.getCorrectEventName=o,e.getCorrectPropertyName=s;var u={animationstart:{noPrefix:"animationstart",webkitPrefix:"webkitAnimationStart"},animationend:{noPrefix:"animationend",webkitPrefix:"webkitAnimationEnd"},animationiteration:{noPrefix:"animationiteration",webkitPrefix:"webkitAnimationIteration"},transitionend:{noPrefix:"transitionend",webkitPrefix:"webkitTransitionEnd"}},c={animation:{noPrefix:"animation",webkitPrefix:"-webkit-animation"},transform:{noPrefix:"transform",webkitPrefix:"-webkit-transform"},transition:{noPrefix:"transition",webkitPrefix:"-webkit-transition"}}},function(t,e){"use strict";function n(t){var e=t.CSS&&"function"==typeof t.CSS.supports;if(e){var n=t.CSS.supports("--css-vars","yes"),i=t.CSS.supports("(--css-vars: yes)")&&t.CSS.supports("color","#00000000");return n||i}}function i(t){return["webkitMatchesSelector","msMatchesSelector","matches"].filter(function(e){return e in t}).pop()}function a(t,e,n){var i=!1,a=function a(){i||(i=!0,t.removeClass(e),t.deregisterInteractionHandler(n,a))};return t.registerInteractionHandler(n,a),t.addClass(e),a}function r(t,e,n){var i=e.x,a=e.y,r=i+n.left,o=a+n.top,s=void 0,u=void 0;return"touchend"===t.type?(s=t.changedTouches[0].pageX-r,u=t.changedTouches[0].pageY-o):(s=t.pageX-r,u=t.pageY-o),{x:s,y:u}}Object.defineProperty(e,"__esModule",{value:!0}),e.supportsCssVariables=n,e.getMatchesProperty=i,e.animateWithClass=a,e.getNormalizedEventCoords=r},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=e.ROOT="mdc-ripple",i=e.UPGRADED=n+"-upgraded";e.cssClasses={ROOT:i,UNBOUNDED:i+"--unbounded",BG_ACTIVE:i+"--background-active",BG_BOUNDED_ACTIVE_FILL:i+"--background-bounded-active-fill",FG_BOUNDED_ACTIVE_FILL:i+"--foreground-bounded-active-fill",FG_UNBOUNDED_ACTIVATION:i+"--foreground-unbounded-activation",FG_UNBOUNDED_DEACTIVATION:i+"--foreground-unbounded-deactivation"},e.strings={VAR_SURFACE_WIDTH:"--"+n+"-surface-width",VAR_SURFACE_HEIGHT:"--"+n+"-surface-height",VAR_FG_SIZE:"--"+n+"-fg-size",VAR_FG_UNBOUNDED_OPACITY_DURATION:"--"+n+"-fg-unbounded-opacity-duration",VAR_FG_UNBOUNDED_TRANSFORM_DURATION:"--"+n+"-fg-unbounded-transform-duration",VAR_LEFT:"--"+n+"-left",VAR_TOP:"--"+n+"-top",VAR_TRANSLATE_END:"--"+n+"-translate-end",VAR_FG_APPROX_XF:"--"+n+"-fg-approx-xf",VAR_FG_SCALE:"--"+n+"-fg-scale",VAR_FG_TRANSLATE_START:"--"+n+"-fg-translate-start",VAR_FG_TRANSLATE_END:"--"+n+"-fg-translate-end"},e.numbers={FG_TRANSFORM_DELAY_MS:80,OPACITY_DURATION_DIVISOR:3,ACTIVE_OPACITY_DURATION_MS:110,MIN_OPACITY_DURATION_MS:200,UNBOUNDED_TRANSFORM_DURATION_MS:200,PADDING:10,INITIAL_ORIGIN_SCALE:.6}},function(t,e,n){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function a(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function r(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(e,"__esModule",{value:!0});var o=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},s=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),u=n(1),c=n(4),d=n(6),f=n(5),_={mouseup:"mousedown",pointerup:"pointerdown",touchend:"touchstart",keyup:"keydown",blur:"focus"},l=function(t){function e(t){i(this,e);var n=a(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,o(e.defaultAdapter,t)));return n.layoutFrame_=0,n.frame_={width:0,height:0},n.activationState_=n.defaultActivationState_(),n.xfDuration_=0,n.initialSize_=0,n.maxRadius_=0,n.listenerInfos_=[{activate:"touchstart",deactivate:"touchend"},{activate:"pointerdown",deactivate:"pointerup"},{activate:"mousedown",deactivate:"mouseup"},{activate:"keydown",deactivate:"keyup"},{focus:"focus",blur:"blur"}],n.listeners_={activate:function(t){return n.activate_(t)},deactivate:function(t){return n.deactivate_(t)},focus:function(){return requestAnimationFrame(function(){return n.adapter_.addClass(e.cssClasses.BG_ACTIVE)})},blur:function(){return requestAnimationFrame(function(){return n.adapter_.removeClass(e.cssClasses.BG_ACTIVE)})}},n.unboundedOpacityFadeTimer_=0,n.resizeHandler_=function(){return n.layout()},n.cancelBgBounded_=function(){},n.cancelFgBounded_=function(){},n.cancelFgUnbounded_=function(){},n.unboundedCoords_={left:0,top:0},n.fgScale_=0,n}return r(e,t),s(e,[{key:"isSupported_",get:function(){return this.adapter_.browserSupportsCssVars()}}],[{key:"cssClasses",get:function(){return d.cssClasses}},{key:"strings",get:function(){return d.strings}},{key:"numbers",get:function(){return d.numbers}},{key:"defaultAdapter",get:function(){return{browserSupportsCssVars:function(){},isUnbounded:function(){},isSurfaceActive:function(){},addClass:function(){},removeClass:function(){},registerInteractionHandler:function(){},deregisterInteractionHandler:function(){},registerResizeHandler:function(){},deregisterResizeHandler:function(){},updateCssVariable:function(){},computeBoundingRect:function(){},getWindowPageOffset:function(){}}}}]),s(e,[{key:"defaultActivationState_",value:function(){return{isActivated:!1,wasActivatedByPointer:!1,wasElementMadeActive:!1,activationStartTime:0,activationEvent:null}}},{key:"init",value:function(){var t=this;if(this.isSupported_){this.addEventListeners_();var n=e.cssClasses,i=n.ROOT,a=n.UNBOUNDED;requestAnimationFrame(function(){t.adapter_.addClass(i),t.adapter_.isUnbounded()&&t.adapter_.addClass(a),t.layoutInternal_()})}}},{key:"addEventListeners_",value:function(){var t=this;this.listenerInfos_.forEach(function(e){Object.keys(e).forEach(function(n){t.adapter_.registerInteractionHandler(e[n],t.listeners_[n])})}),this.adapter_.registerResizeHandler(this.resizeHandler_)}},{key:"activate_",value:function(t){var e=this,n=this.activationState_;n.isActivated||(n.isActivated=!0,n.activationEvent=t,n.wasActivatedByPointer="mousedown"===t.type||"touchstart"===t.type||"pointerdown"===t.type,n.activationStartTime=Date.now(),requestAnimationFrame(function(){n.wasElementMadeActive="keydown"!==t.type||e.adapter_.isSurfaceActive(),n.wasElementMadeActive?e.animateActivation_():e.activationState_=e.defaultActivationState_()}))}},{key:"animateActivation_",value:function(){var t=this,n=e.cssClasses,i=n.BG_ACTIVE,a=n.BG_BOUNDED_ACTIVE_FILL,r=n.FG_UNBOUNDED_DEACTIVATION,o=n.FG_BOUNDED_ACTIVE_FILL;[a,r,o].forEach(function(e){return t.adapter_.removeClass(e)}),this.cancelBgBounded_(),this.cancelFgBounded_(),this.cancelFgUnbounded_(),this.unboundedOpacityFadeTimer_&&(clearTimeout(this.unboundedOpacityFadeTimer_),this.unboundedOpacityFadeTimer_=0),this.adapter_.addClass(i),this.adapter_.isUnbounded()&&this.animateUnboundedActivation_()}},{key:"animateUnboundedActivation_",value:function(){var t=e.cssClasses.FG_UNBOUNDED_ACTIVATION;this.adapter_.addClass(t)}},{key:"deactivate_",value:function(t){var e=this,n=this.activationState_;if(n.isActivated){var i=_[t.type],a=n.activationEvent.type,r=i===a,s=r;n.wasActivatedByPointer&&(s="mouseup"===t.type);var u=o({},this.activationState_);r&&requestAnimationFrame(function(){return e.animateDeactivation_(t,u)}),s&&(this.activationState_=this.defaultActivationState_())}}},{key:"animateDeactivation_",value:function(t,n){var i=n.wasActivatedByPointer,a=n.wasElementMadeActive,r=n.activationStartTime,o=e.cssClasses.BG_ACTIVE;if(i||a){this.adapter_.removeClass(o);var s="touchend"===t.type||"pointerup"===t.type||"mouseup"===t.type;this.adapter_.isUnbounded()?this.animateUnboundedDeactivation_(this.getUnboundedDeactivationInfo_(r)):this.animateBoundedDeactivation_(t,s)}}},{key:"animateUnboundedDeactivation_",value:function(t){var n=this,i=t.opacityDuration,a=t.transformDuration,r=t.approxCurScale,o=e.cssClasses,s=o.FG_UNBOUNDED_ACTIVATION,u=o.FG_UNBOUNDED_DEACTIVATION,c=e.strings,d=c.VAR_FG_UNBOUNDED_OPACITY_DURATION,f=c.VAR_FG_UNBOUNDED_TRANSFORM_DURATION,_=c.VAR_FG_APPROX_XF;this.adapter_.updateCssVariable(_,"scale("+r+")"),this.adapter_.updateCssVariable(d,i+"ms"),this.adapter_.updateCssVariable(f,a+"ms"),this.adapter_.addClass(u),this.adapter_.removeClass(s),this.unboundedOpacityFadeTimer_=setTimeout(function(){n.adapter_.removeClass(u)},i)}},{key:"getUnboundedDeactivationInfo_",value:function(t){var n=Date.now()-t,i=e.numbers,a=i.FG_TRANSFORM_DELAY_MS,r=i.OPACITY_DURATION_DIVISOR,o=i.ACTIVE_OPACITY_DURATION_MS,s=i.UNBOUNDED_TRANSFORM_DURATION_MS,u=i.MIN_OPACITY_DURATION_MS,c=0;if(n>a){var d=Math.min((n-a)/this.xfDuration_,1);c=d*this.fgScale_}var f=s,_=Math.min(n/o,1),l=Math.max(u,1e3*_/r);return{transformDuration:f,opacityDuration:l,approxCurScale:c}}},{key:"animateBoundedDeactivation_",value:function(t,n){var i=void 0;i=n?(0,f.getNormalizedEventCoords)(t,this.adapter_.getWindowPageOffset(),this.adapter_.computeBoundingRect()):{x:this.frame_.width/2,y:this.frame_.height/2},i={x:i.x-this.initialSize_/2,y:i.y-this.initialSize_/2};var a={x:this.frame_.width/2-this.initialSize_/2,y:this.frame_.height/2-this.initialSize_/2},r=e.strings,o=r.VAR_FG_TRANSLATE_START,s=r.VAR_FG_TRANSLATE_END,u=e.cssClasses,d=u.BG_BOUNDED_ACTIVE_FILL,_=u.FG_BOUNDED_ACTIVE_FILL;this.adapter_.updateCssVariable(o,i.x+"px, "+i.y+"px"),this.adapter_.updateCssVariable(s,a.x+"px, "+a.y+"px"),this.cancelBgBounded_=(0,f.animateWithClass)(this.adapter_,d,(0,c.getCorrectEventName)(window,"transitionend")),this.cancelFgBounded_=(0,f.animateWithClass)(this.adapter_,_,(0,c.getCorrectEventName)(window,"animationend"))}},{key:"destroy",value:function(){var t=this;if(this.isSupported_){this.removeEventListeners_();var n=e.cssClasses,i=n.ROOT,a=n.UNBOUNDED;requestAnimationFrame(function(){t.adapter_.removeClass(i),t.adapter_.removeClass(a),t.removeCssVars_()})}}},{key:"removeEventListeners_",value:function(){var t=this;this.listenerInfos_.forEach(function(e){Object.keys(e).forEach(function(n){t.adapter_.deregisterInteractionHandler(e[n],t.listeners_[n])})}),this.adapter_.deregisterResizeHandler(this.resizeHandler_)}},{key:"removeCssVars_",value:function(){var t=this,n=e.strings;Object.keys(n).forEach(function(e){0===e.indexOf("VAR_")&&t.adapter_.updateCssVariable(n[e],null)})}},{key:"layout",value:function(){var t=this;this.layoutFrame_&&cancelAnimationFrame(this.layoutFrame_),this.layoutFrame_=requestAnimationFrame(function(){t.layoutInternal_(),t.layoutFrame_=0})}},{key:"layoutInternal_",value:function(){this.frame_=this.adapter_.computeBoundingRect();var t=Math.max(this.frame_.height,this.frame_.width),n=Math.sqrt(Math.pow(this.frame_.width,2)+Math.pow(this.frame_.height,2));this.initialSize_=t*e.numbers.INITIAL_ORIGIN_SCALE,this.maxRadius_=n+e.numbers.PADDING,this.fgScale_=this.maxRadius_/this.initialSize_,this.xfDuration_=1e3*Math.sqrt(this.maxRadius_/1024),this.updateLayoutCssVars_()}},{key:"updateLayoutCssVars_",value:function(){var t=e.strings,n=t.VAR_SURFACE_WIDTH,i=t.VAR_SURFACE_HEIGHT,a=t.VAR_FG_SIZE,r=t.VAR_FG_UNBOUNDED_TRANSFORM_DURATION,o=t.VAR_LEFT,s=t.VAR_TOP,u=t.VAR_FG_SCALE;this.adapter_.updateCssVariable(n,this.frame_.width+"px"),this.adapter_.updateCssVariable(i,this.frame_.height+"px"),this.adapter_.updateCssVariable(a,this.initialSize_+"px"),this.adapter_.updateCssVariable(r,this.xfDuration_+"ms"),this.adapter_.updateCssVariable(u,this.fgScale_),this.adapter_.isUnbounded()&&(this.unboundedCoords_={left:Math.round(this.frame_.width/2-this.initialSize_/2),top:Math.round(this.frame_.height/2-this.initialSize_/2)},this.adapter_.updateCssVariable(o,this.unboundedCoords_.left+"px"),this.adapter_.updateCssVariable(s,this.unboundedCoords_.top+"px"))}}]),e}(u.MDCFoundation);e.default=l},function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{default:t}}function a(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function r(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(e,"__esModule",{value:!0}),e.MDCRipple=e.MDCRippleFoundation=void 0;var s=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),u=n(1),c=n(7),d=i(c),f=n(5),_=(0,f.getMatchesProperty)(HTMLElement.prototype);e.MDCRippleFoundation=d.default;e.MDCRipple=function(t){function e(){return a(this,e),r(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return o(e,t),s(e,[{key:"getDefaultFoundation",value:function(){return new d.default(e.createAdapter(this))}},{key:"initialSyncWithDOM",value:function(){this.unbounded="mdcRippleIsUnbounded"in this.root_.dataset}},{key:"unbounded",get:function(){return this.unbounded_},set:function(t){var e=d.default.cssClasses.UNBOUNDED;this.unbounded_=Boolean(t),this.unbounded_?this.root_.classList.add(e):this.root_.classList.remove(e)}}],[{key:"attachTo",value:function(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=n.isUnbounded,a=void 0===i?void 0:i,r=new e(t);return void 0!==a&&(r.unbounded=a),r}},{key:"createAdapter",value:function(t){return{browserSupportsCssVars:function(){return(0,f.supportsCssVariables)(window)},isUnbounded:function(){return t.unbounded},isSurfaceActive:function(){return t.root_[_](":active")},addClass:function(e){return t.root_.classList.add(e)},removeClass:function(e){return t.root_.classList.remove(e)},registerInteractionHandler:function(e,n){return t.root_.addEventListener(e,n)},deregisterInteractionHandler:function(e,n){return t.root_.removeEventListener(e,n)},registerResizeHandler:function(t){return window.addEventListener("resize",t)},deregisterResizeHandler:function(t){return window.removeEventListener("resize",t)},updateCssVariable:function(e,n){return t.root_.style.setProperty(e,n)},computeBoundingRect:function(){return t.root_.getBoundingClientRect()},getWindowPageOffset:function(){return{x:window.pageXOffset,y:window.pageYOffset}}}}}]),e}(u.MDCComponent)}])});

foundation.js

@@ -75,3 +75,4 @@ /**
     this.xfDuration_ = 0;
-    this.maxRadius = 0;
+    this.initialSize_ = 0;
+    this.maxRadius_ = 0;
     this.listenerInfos_ = [
@@ -103,2 +104,3 @@ {activate: 'touchstart', deactivate: 'touchend'},
     };
+    this.fgScale_ = 0;
   }
@@ -198,18 +200,2 @@
     const {FG_UNBOUNDED_ACTIVATION} = MDCRippleFoundation.cssClasses;
-    let startPoint;
-    if (this.activationState_.wasActivatedByPointer) {
-      startPoint = getNormalizedEventCoords(
-        this.activationState_.activationEvent, this.adapter_.getWindowPageOffset(),
-        this.adapter_.computeBoundingRect()
-      );
-    } else {
-      startPoint = {
-        left: this.frame_.width / 2,
-        top: this.frame_.height / 2,
-      };
-    }
-    const {left, top} = startPoint;
-    const {VAR_XF_ORIGIN_X, VAR_XF_ORIGIN_Y} = MDCRippleFoundation.strings;
-    this.adapter_.updateCssVariable(VAR_XF_ORIGIN_X, `${left - this.unboundedCoords_.left}px`);
-    this.adapter_.updateCssVariable(VAR_XF_ORIGIN_Y, `${top - this.unboundedCoords_.top}px`);
     this.adapter_.addClass(FG_UNBOUNDED_ACTIVATION);
@@ -291,3 +277,4 @@ }
     if (msElapsed > FG_TRANSFORM_DELAY_MS) {
-      approxCurScale = Math.min((msElapsed - FG_TRANSFORM_DELAY_MS) / this.xfDuration_, 1);
+      const percentComplete = Math.min((msElapsed - FG_TRANSFORM_DELAY_MS) / this.xfDuration_, 1);
+      approxCurScale = percentComplete * this.fgScale_;
     }
@@ -312,11 +299,21 @@
       startPoint = {
-        left: this.frame_.width / 2,
-        top: this.frame_.height / 2,
+        x: this.frame_.width / 2,
+        y: this.frame_.height / 2,
       };
     }
-    const {left, top} = startPoint;
-    const {VAR_LEFT, VAR_TOP} = MDCRippleFoundation.strings;
+
+    startPoint = {
+      x: startPoint.x - (this.initialSize_ / 2),
+      y: startPoint.y - (this.initialSize_ / 2),
+    };
+
+    const endPoint = {
+      x: (this.frame_.width / 2) - (this.initialSize_ / 2),
+      y: (this.frame_.height / 2) - (this.initialSize_ / 2),
+    };
+
+    const {VAR_FG_TRANSLATE_START, VAR_FG_TRANSLATE_END} = MDCRippleFoundation.strings;
     const {BG_BOUNDED_ACTIVE_FILL, FG_BOUNDED_ACTIVE_FILL} = MDCRippleFoundation.cssClasses;
-    this.adapter_.updateCssVariable(VAR_LEFT, `${left}px`);
-    this.adapter_.updateCssVariable(VAR_TOP, `${top}px`);
+    this.adapter_.updateCssVariable(VAR_FG_TRANSLATE_START, `${startPoint.x}px, ${startPoint.y}px`);
+    this.adapter_.updateCssVariable(VAR_FG_TRANSLATE_END, `${endPoint.x}px, ${endPoint.y}px`);
     this.cancelBgBounded_ = animateWithClass(this.adapter_,
@@ -376,5 +373,10 @@ BG_BOUNDED_ACTIVE_FILL,
     const maxDim = Math.max(this.frame_.height, this.frame_.width);
+    const surfaceDiameter = Math.sqrt(Math.pow(this.frame_.width, 2) + Math.pow(this.frame_.height, 2));
 
-    // Sqrt(2) * square length == diameter
-    this.maxRadius_ = Math.sqrt(2) * maxDim / 2;
+    // 60% of the largest dimension of the surface
+    this.initialSize_ = maxDim * MDCRippleFoundation.numbers.INITIAL_ORIGIN_SCALE;
+
+    // Diameter of the surface + 10px
+    this.maxRadius_ = surfaceDiameter + MDCRippleFoundation.numbers.PADDING;
+    this.fgScale_ = this.maxRadius_ / this.initialSize_;
     this.xfDuration_ = 1000 * Math.sqrt(this.maxRadius_ / 1024);
@@ -385,6 +387,5 @@ this.updateLayoutCssVars_();
   updateLayoutCssVars_() {
-    const fgSize = this.maxRadius_ * 2;
     const {
       VAR_SURFACE_WIDTH, VAR_SURFACE_HEIGHT, VAR_FG_SIZE,
-      VAR_FG_UNBOUNDED_TRANSFORM_DURATION, VAR_LEFT, VAR_TOP,
+      VAR_FG_UNBOUNDED_TRANSFORM_DURATION, VAR_LEFT, VAR_TOP, VAR_FG_SCALE,
     } = MDCRippleFoundation.strings;
@@ -394,10 +395,12 @@
     this.adapter_.updateCssVariable(VAR_SURFACE_HEIGHT, `${this.frame_.height}px`);
-    this.adapter_.updateCssVariable(VAR_FG_SIZE, `${fgSize}px`);
+    this.adapter_.updateCssVariable(VAR_FG_SIZE, `${this.initialSize_}px`);
     this.adapter_.updateCssVariable(VAR_FG_UNBOUNDED_TRANSFORM_DURATION, `${this.xfDuration_}ms`);
+    this.adapter_.updateCssVariable(VAR_FG_SCALE, this.fgScale_);
 
     if (this.adapter_.isUnbounded()) {
       this.unboundedCoords_ = {
-        left: Math.round(-(fgSize / 2) + (this.frame_.width / 2)),
-        top: Math.round(-(fgSize / 2) + (this.frame_.height / 2)),
+        left: Math.round((this.frame_.width / 2) - (this.initialSize_ / 2)),
+        top: Math.round((this.frame_.height / 2) - (this.initialSize_ / 2)),
       };
+
       this.adapter_.updateCssVariable(VAR_LEFT, `${this.unboundedCoords_.left}px`);
@@ -404,0 +407,0 @@ this.adapter_.updateCssVariable(VAR_TOP, `${this.unboundedCoords_.top}px`);

package.json

 {
   "name": "@material/ripple",
   "description": "The Material Components for the web Ink Ripple effect for web element interactions",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "license": "Apache-2.0",
@@ -6,0 +6,0 @@ "main": "index.js",

util.js

@@ -56,17 +56,17 @@ /**
   const {x, y} = pageOffset;
-  const documentLeft = x + clientRect.left;
-  const documentTop = y + clientRect.top;
+  const documentX = x + clientRect.left;
+  const documentY = y + clientRect.top;
 
-  let normalizedLeft;
-  let normalizedTop;
+  let normalizedX;
+  let normalizedY;
   // Determine touch point relative to the ripple container.
   if (ev.type === 'touchend') {
-    normalizedLeft = ev.changedTouches[0].pageX - documentLeft;
-    normalizedTop = ev.changedTouches[0].pageY - documentTop;
+    normalizedX = ev.changedTouches[0].pageX - documentX;
+    normalizedY = ev.changedTouches[0].pageY - documentY;
   } else {
-    normalizedLeft = ev.pageX - documentLeft;
-    normalizedTop = ev.pageY - documentTop;
+    normalizedX = ev.pageX - documentX;
+    normalizedY = ev.pageY - documentY;
   }
 
-  return {left: normalizedLeft, top: normalizedTop};
+  return {x: normalizedX, y: normalizedY};
 }

No alert changes

Worsened metrics

Total package byte prevSize

180183

decreased by-1.95%

Number of package files

13

decreased by-7.14%

Lines of code

2227

decreased by-2.79%

No dependency changes