@material/ripple
Advanced tools
Comparing version 0.7.0 to 0.8.0
@@ -51,5 +51,2 @@ /*! | ||
/******/ | ||
/******/ // identity function for calling harmony imports with the correct context | ||
/******/ __webpack_require__.i = function(value) { return value; }; | ||
/******/ | ||
/******/ // define getter function for harmony exports | ||
@@ -82,3 +79,3 @@ /******/ __webpack_require__.d = function(exports, name, getter) { | ||
/******/ // Load entry module and return exports | ||
/******/ return __webpack_require__(__webpack_require__.s = 88); | ||
/******/ return __webpack_require__(__webpack_require__.s = 69); | ||
/******/ }) | ||
@@ -119,3 +116,2 @@ /************************************************************************/ | ||
/** @return enum{cssClasses} */ | ||
@@ -160,3 +156,3 @@ get: function get() { | ||
/** | ||
* @param {!A} adapter | ||
* @param {A=} adapter | ||
*/ | ||
@@ -171,3 +167,3 @@ | ||
/** @private {!A} */ | ||
/** @protected {!A} */ | ||
this.adapter_ = adapter; | ||
@@ -199,33 +195,3 @@ } | ||
"use strict"; | ||
Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); | ||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__foundation__ = __webpack_require__(0); | ||
/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "MDCFoundation", function() { return __WEBPACK_IMPORTED_MODULE_0__foundation__["a"]; }); | ||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__component__ = __webpack_require__(2); | ||
/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "MDCComponent", function() { return __WEBPACK_IMPORTED_MODULE_1__component__["a"]; }); | ||
/** | ||
* Copyright 2016 Google Inc. | ||
* | ||
* Licensed under the Apache License, Version 2.0 (the "License"); | ||
* you may not use this file except in compliance with the License. | ||
* You may obtain a copy of the License at | ||
* | ||
* http://www.apache.org/licenses/LICENSE-2.0 | ||
* | ||
* Unless required by applicable law or agreed to in writing, software | ||
* distributed under the License is distributed on an "AS IS" BASIS, | ||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
* See the License for the specific language governing permissions and | ||
* limitations under the License. | ||
*/ | ||
/***/ }), | ||
/***/ 2: | ||
/***/ (function(module, __webpack_exports__, __webpack_require__) { | ||
"use strict"; | ||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__foundation__ = __webpack_require__(0); | ||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | ||
@@ -261,3 +227,2 @@ | ||
/** | ||
@@ -277,3 +242,3 @@ * @param {!Element} root | ||
* @param {!Element} root | ||
* @param {!F} foundation | ||
* @param {F=} foundation | ||
* @param {...?} args | ||
@@ -299,3 +264,3 @@ */ | ||
// this.root_ is defined and can be used within the foundation class. | ||
/** @private {!F} */ | ||
/** @protected {!F} */ | ||
this.foundation_ = foundation === undefined ? this.getDefaultFoundation() : foundation; | ||
@@ -427,4 +392,9 @@ this.foundation_.init(); | ||
/** @private {boolean|undefined} */ | ||
var supportsPassive_ = void 0; | ||
/** | ||
* @param {!Window} windowObj | ||
* @return {boolean|undefined} | ||
*/ | ||
function supportsCssVariables(windowObj) { | ||
@@ -443,3 +413,9 @@ var supportsFunctionPresent = windowObj.CSS && typeof windowObj.CSS.supports === 'function'; | ||
// Determine whether the current browser supports passive event listeners, and if so, use them. | ||
// | ||
/** | ||
* Determine whether the current browser supports passive event listeners, and if so, use them. | ||
* @param {!Window=} globalObj | ||
* @param {boolean=} forceRefresh | ||
* @return {boolean|{passive: boolean}} | ||
*/ | ||
function applyPassive() { | ||
@@ -463,2 +439,6 @@ var globalObj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window; | ||
/** | ||
* @param {!Object} HTMLElementPrototype | ||
* @return {!Array<string>} | ||
*/ | ||
function getMatchesProperty(HTMLElementPrototype) { | ||
@@ -470,2 +450,8 @@ return ['webkitMatchesSelector', 'msMatchesSelector', 'matches'].filter(function (p) { | ||
/** | ||
* @param {!Event} ev | ||
* @param {!{x: number, y: number}} pageOffset | ||
* @param {!ClientRect} clientRect | ||
* @return {!{x: number, y: number}} | ||
*/ | ||
function getNormalizedEventCoords(ev, pageOffset, clientRect) { | ||
@@ -498,9 +484,161 @@ var x = pageOffset.x, | ||
"use strict"; | ||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | ||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
/** | ||
* Copyright 2016 Google Inc. All Rights Reserved. | ||
* | ||
* Licensed under the Apache License, Version 2.0 (the "License"); | ||
* you may not use this file except in compliance with the License. | ||
* You may obtain a copy of the License at | ||
* | ||
* http://www.apache.org/licenses/LICENSE-2.0 | ||
* | ||
* Unless required by applicable law or agreed to in writing, software | ||
* distributed under the License is distributed on an "AS IS" BASIS, | ||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
* See the License for the specific language governing permissions and | ||
* limitations under the License. | ||
*/ | ||
/* eslint no-unused-vars: [2, {"args": "none"}] */ | ||
/** | ||
* Adapter for MDC Ripple. Provides an interface for managing | ||
* - classes | ||
* - dom | ||
* - CSS variables | ||
* - position | ||
* - dimensions | ||
* - scroll position | ||
* - event handlers | ||
* - unbounded, active and disabled states | ||
* | ||
* Additionally, provides type information for the adapter to the Closure | ||
* compiler. | ||
* | ||
* Implement this adapter for your framework of choice to delegate updates to | ||
* the component in your framework of choice. See architecture documentation | ||
* for more details. | ||
* https://github.com/material-components/material-components-web/blob/master/docs/architecture.md | ||
* | ||
* @record | ||
*/ | ||
var MDCRippleAdapter = function () { | ||
function MDCRippleAdapter() { | ||
_classCallCheck(this, MDCRippleAdapter); | ||
} | ||
_createClass(MDCRippleAdapter, [{ | ||
key: "browserSupportsCssVars", | ||
/** @return {boolean} */ | ||
value: function browserSupportsCssVars() {} | ||
/** @return {boolean} */ | ||
}, { | ||
key: "isUnbounded", | ||
value: function isUnbounded() {} | ||
/** @return {boolean} */ | ||
}, { | ||
key: "isSurfaceActive", | ||
value: function isSurfaceActive() {} | ||
/** @return {boolean} */ | ||
}, { | ||
key: "isSurfaceDisabled", | ||
value: function isSurfaceDisabled() {} | ||
/** @param {string} className */ | ||
}, { | ||
key: "addClass", | ||
value: function addClass(className) {} | ||
/** @param {string} className */ | ||
}, { | ||
key: "removeClass", | ||
value: function removeClass(className) {} | ||
/** | ||
* @param {string} evtType | ||
* @param {!Function} handler | ||
*/ | ||
}, { | ||
key: "registerInteractionHandler", | ||
value: function registerInteractionHandler(evtType, handler) {} | ||
/** | ||
* @param {string} evtType | ||
* @param {!Function} handler | ||
*/ | ||
}, { | ||
key: "deregisterInteractionHandler", | ||
value: function deregisterInteractionHandler(evtType, handler) {} | ||
/** | ||
* @param {!Function} handler | ||
*/ | ||
}, { | ||
key: "registerResizeHandler", | ||
value: function registerResizeHandler(handler) {} | ||
/** | ||
* @param {!Function} handler | ||
*/ | ||
}, { | ||
key: "deregisterResizeHandler", | ||
value: function deregisterResizeHandler(handler) {} | ||
/** | ||
* @param {string} varName | ||
* @param {?number|string} value | ||
*/ | ||
}, { | ||
key: "updateCssVariable", | ||
value: function updateCssVariable(varName, value) {} | ||
/** @return {!ClientRect} */ | ||
}, { | ||
key: "computeBoundingRect", | ||
value: function computeBoundingRect() {} | ||
/** @return {{x: number, y: number}} */ | ||
}, { | ||
key: "getWindowPageOffset", | ||
value: function getWindowPageOffset() {} | ||
}]); | ||
return MDCRippleAdapter; | ||
}(); | ||
/* unused harmony default export */ var _unused_webpack_default_export = (MDCRippleAdapter); | ||
/***/ }), | ||
/***/ 5: | ||
/***/ (function(module, __webpack_exports__, __webpack_require__) { | ||
"use strict"; | ||
Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); | ||
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "MDCRipple", function() { return MDCRipple; }); | ||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__material_base__ = __webpack_require__(1); | ||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__foundation__ = __webpack_require__(6); | ||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util__ = __webpack_require__(3); | ||
/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "MDCRippleFoundation", function() { return __WEBPACK_IMPORTED_MODULE_1__foundation__["a"]; }); | ||
/* harmony reexport (module object) */ __webpack_require__.d(__webpack_exports__, "util", function() { return __WEBPACK_IMPORTED_MODULE_2__util__; }); | ||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__material_base_component__ = __webpack_require__(1); | ||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__adapter__ = __webpack_require__(4); | ||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__foundation__ = __webpack_require__(6); | ||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__util__ = __webpack_require__(3); | ||
/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "MDCRippleFoundation", function() { return __WEBPACK_IMPORTED_MODULE_2__foundation__["a"]; }); | ||
/* harmony reexport (module object) */ __webpack_require__.d(__webpack_exports__, "util", function() { return __WEBPACK_IMPORTED_MODULE_3__util__; }); | ||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | ||
@@ -537,11 +675,36 @@ | ||
/** | ||
* @extends MDCComponent<!MDCRippleFoundation> | ||
*/ | ||
var MDCRipple = function (_MDCComponent) { | ||
_inherits(MDCRipple, _MDCComponent); | ||
/** @param {...?} args */ | ||
function MDCRipple() { | ||
var _ref; | ||
_classCallCheck(this, MDCRipple); | ||
return _possibleConstructorReturn(this, (MDCRipple.__proto__ || Object.getPrototypeOf(MDCRipple)).apply(this, arguments)); | ||
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | ||
args[_key] = arguments[_key]; | ||
} | ||
/** @type {boolean} */ | ||
var _this = _possibleConstructorReturn(this, (_ref = MDCRipple.__proto__ || Object.getPrototypeOf(MDCRipple)).call.apply(_ref, [this].concat(args))); | ||
_this.disabled = false; | ||
/** @private {boolean} */ | ||
_this.unbounded_; | ||
return _this; | ||
} | ||
/** | ||
* @param {!Element} root | ||
* @param {{isUnbounded: (boolean|undefined)}=} options | ||
* @return {!MDCRipple} | ||
*/ | ||
_createClass(MDCRipple, [{ | ||
@@ -562,6 +725,9 @@ key: 'activate', | ||
} | ||
/** @return {!MDCRippleFoundation} */ | ||
}, { | ||
key: 'getDefaultFoundation', | ||
value: function getDefaultFoundation() { | ||
return new __WEBPACK_IMPORTED_MODULE_1__foundation__["a" /* default */](MDCRipple.createAdapter(this)); | ||
return new __WEBPACK_IMPORTED_MODULE_2__foundation__["a" /* default */](MDCRipple.createAdapter(this)); | ||
} | ||
@@ -575,7 +741,13 @@ }, { | ||
key: 'unbounded', | ||
/** @return {boolean} */ | ||
get: function get() { | ||
return this.unbounded_; | ||
}, | ||
} | ||
/** @param {boolean} unbounded */ | ||
, | ||
set: function set(unbounded) { | ||
var UNBOUNDED = __WEBPACK_IMPORTED_MODULE_1__foundation__["a" /* default */].cssClasses.UNBOUNDED; | ||
var UNBOUNDED = __WEBPACK_IMPORTED_MODULE_2__foundation__["a" /* default */].cssClasses.UNBOUNDED; | ||
@@ -592,5 +764,5 @@ this.unbounded_ = Boolean(unbounded); | ||
value: function attachTo(root) { | ||
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}, | ||
_ref$isUnbounded = _ref.isUnbounded, | ||
isUnbounded = _ref$isUnbounded === undefined ? undefined : _ref$isUnbounded; | ||
var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}, | ||
_ref2$isUnbounded = _ref2.isUnbounded, | ||
isUnbounded = _ref2$isUnbounded === undefined ? undefined : _ref2$isUnbounded; | ||
@@ -600,14 +772,20 @@ var ripple = new MDCRipple(root); | ||
if (isUnbounded !== undefined) { | ||
ripple.unbounded = isUnbounded; | ||
ripple.unbounded = /** @type {boolean} */isUnbounded; | ||
} | ||
return ripple; | ||
} | ||
/** | ||
* @param {!RippleCapableSurface} instance | ||
* @return {!MDCRippleAdapter} | ||
*/ | ||
}, { | ||
key: 'createAdapter', | ||
value: function createAdapter(instance) { | ||
var MATCHES = __WEBPACK_IMPORTED_MODULE_2__util__["getMatchesProperty"](HTMLElement.prototype); | ||
var MATCHES = __WEBPACK_IMPORTED_MODULE_3__util__["getMatchesProperty"](HTMLElement.prototype); | ||
return { | ||
browserSupportsCssVars: function browserSupportsCssVars() { | ||
return __WEBPACK_IMPORTED_MODULE_2__util__["supportsCssVariables"](window); | ||
return __WEBPACK_IMPORTED_MODULE_3__util__["supportsCssVariables"](window); | ||
}, | ||
@@ -630,6 +808,6 @@ isUnbounded: function isUnbounded() { | ||
registerInteractionHandler: function registerInteractionHandler(evtType, handler) { | ||
return instance.root_.addEventListener(evtType, handler, __WEBPACK_IMPORTED_MODULE_2__util__["applyPassive"]()); | ||
return instance.root_.addEventListener(evtType, handler, __WEBPACK_IMPORTED_MODULE_3__util__["applyPassive"]()); | ||
}, | ||
deregisterInteractionHandler: function deregisterInteractionHandler(evtType, handler) { | ||
return instance.root_.removeEventListener(evtType, handler, __WEBPACK_IMPORTED_MODULE_2__util__["applyPassive"]()); | ||
return instance.root_.removeEventListener(evtType, handler, __WEBPACK_IMPORTED_MODULE_3__util__["applyPassive"]()); | ||
}, | ||
@@ -656,59 +834,31 @@ registerResizeHandler: function registerResizeHandler(handler) { | ||
return MDCRipple; | ||
}(__WEBPACK_IMPORTED_MODULE_0__material_base__["MDCComponent"]); | ||
}(__WEBPACK_IMPORTED_MODULE_0__material_base_component__["a" /* default */]); | ||
/***/ }), | ||
/***/ 5: | ||
/***/ (function(module, __webpack_exports__, __webpack_require__) { | ||
"use strict"; | ||
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return cssClasses; }); | ||
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return strings; }); | ||
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return numbers; }); | ||
/** | ||
* Copyright 2016 Google Inc. All Rights Reserved. | ||
* | ||
* Licensed under the Apache License, Version 2.0 (the "License"); | ||
* you may not use this file except in compliance with the License. | ||
* You may obtain a copy of the License at | ||
* | ||
* http://www.apache.org/licenses/LICENSE-2.0 | ||
* | ||
* Unless required by applicable law or agreed to in writing, software | ||
* distributed under the License is distributed on an "AS IS" BASIS, | ||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
* See the License for the specific language governing permissions and | ||
* limitations under the License. | ||
* See Material Design spec for more details on when to use ripples. | ||
* https://material.io/guidelines/motion/choreography.html#choreography-creation | ||
* @record | ||
*/ | ||
var cssClasses = { | ||
// Ripple is a special case where the "root" component is really a "mixin" of sorts, | ||
// given that it's an 'upgrade' to an existing component. That being said it is the root | ||
// CSS class that all other CSS classes derive from. | ||
ROOT: 'mdc-ripple-upgraded', | ||
UNBOUNDED: 'mdc-ripple-upgraded--unbounded', | ||
BG_FOCUSED: 'mdc-ripple-upgraded--background-focused', | ||
BG_ACTIVE_FILL: 'mdc-ripple-upgraded--background-active-fill', | ||
FG_ACTIVATION: 'mdc-ripple-upgraded--foreground-activation', | ||
FG_DEACTIVATION: 'mdc-ripple-upgraded--foreground-deactivation' | ||
var RippleCapableSurface = function RippleCapableSurface() { | ||
_classCallCheck(this, RippleCapableSurface); | ||
}; | ||
var strings = { | ||
VAR_SURFACE_WIDTH: '--mdc-ripple-surface-width', | ||
VAR_SURFACE_HEIGHT: '--mdc-ripple-surface-height', | ||
VAR_FG_SIZE: '--mdc-ripple-fg-size', | ||
VAR_LEFT: '--mdc-ripple-left', | ||
VAR_TOP: '--mdc-ripple-top', | ||
VAR_FG_SCALE: '--mdc-ripple-fg-scale', | ||
VAR_FG_TRANSLATE_START: '--mdc-ripple-fg-translate-start', | ||
VAR_FG_TRANSLATE_END: '--mdc-ripple-fg-translate-end' | ||
}; | ||
/** @protected {!Element} */ | ||
var numbers = { | ||
PADDING: 10, | ||
INITIAL_ORIGIN_SCALE: 0.6, | ||
DEACTIVATION_TIMEOUT_MS: 300, | ||
FG_DEACTIVATION_MS: 83 | ||
}; | ||
RippleCapableSurface.prototype.root_; | ||
/** | ||
* Whether or not the ripple bleeds out of the bounds of the element. | ||
* @type {boolean|undefined} | ||
*/ | ||
RippleCapableSurface.prototype.unbounded; | ||
/** | ||
* Whether or not the ripple is attached to a disabled component. | ||
* @type {boolean|undefined} | ||
*/ | ||
RippleCapableSurface.prototype.disabled; | ||
/***/ }), | ||
@@ -720,5 +870,6 @@ | ||
"use strict"; | ||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__material_base__ = __webpack_require__(1); | ||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__constants__ = __webpack_require__(5); | ||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util__ = __webpack_require__(3); | ||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__material_base_foundation__ = __webpack_require__(0); | ||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__adapter__ = __webpack_require__(4); | ||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__constants__ = __webpack_require__(7); | ||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__util__ = __webpack_require__(3); | ||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; | ||
@@ -755,2 +906,46 @@ | ||
/** | ||
* @typedef {!{ | ||
* isActivated: (boolean|undefined), | ||
* hasDeactivationUXRun: (boolean|undefined), | ||
* wasActivatedByPointer: (boolean|undefined), | ||
* wasElementMadeActive: (boolean|undefined), | ||
* activationStartTime: (number|undefined), | ||
* activationEvent: Event, | ||
* isProgrammatic: (boolean|undefined) | ||
* }} | ||
*/ | ||
var ActivationStateType = void 0; | ||
/** | ||
* @typedef {!{ | ||
* activate: (string|undefined), | ||
* deactivate: (string|undefined), | ||
* focus: (string|undefined), | ||
* blur: (string|undefined) | ||
* }} | ||
*/ | ||
var ListenerInfoType = void 0; | ||
/** | ||
* @typedef {!{ | ||
* activate: function(!Event), | ||
* deactivate: function(!Event), | ||
* focus: function(), | ||
* blur: function() | ||
* }} | ||
*/ | ||
var ListenersType = void 0; | ||
/** | ||
* @typedef {!{ | ||
* x: number, | ||
* y: number | ||
* }} | ||
*/ | ||
var PointType = void 0; | ||
/** | ||
* @enum {string} | ||
*/ | ||
var DEACTIVATION_ACTIVATION_PAIRS = { | ||
@@ -764,2 +959,6 @@ mouseup: 'mousedown', | ||
/** | ||
* @extends {MDCFoundation<!MDCRippleAdapter>} | ||
*/ | ||
var MDCRippleFoundation = function (_MDCFoundation) { | ||
@@ -772,6 +971,9 @@ _inherits(MDCRippleFoundation, _MDCFoundation); | ||
// We compute this property so that we are not querying information about the client | ||
// until the point in time where the foundation requests it. This prevents scenarios where | ||
// client-side feature-detection may happen too early, such as when components are rendered on the server | ||
// and then initialized at mount time on the client. | ||
/** | ||
* We compute this property so that we are not querying information about the client | ||
* until the point in time where the foundation requests it. This prevents scenarios where | ||
* client-side feature-detection may happen too early, such as when components are rendered on the server | ||
* and then initialized at mount time on the client. | ||
* @return {boolean} | ||
*/ | ||
get: function get() { | ||
@@ -783,3 +985,3 @@ return this.adapter_.browserSupportsCssVars(); | ||
get: function get() { | ||
return __WEBPACK_IMPORTED_MODULE_1__constants__["a" /* cssClasses */]; | ||
return __WEBPACK_IMPORTED_MODULE_2__constants__["a" /* cssClasses */]; | ||
} | ||
@@ -789,3 +991,3 @@ }, { | ||
get: function get() { | ||
return __WEBPACK_IMPORTED_MODULE_1__constants__["b" /* strings */]; | ||
return __WEBPACK_IMPORTED_MODULE_2__constants__["c" /* strings */]; | ||
} | ||
@@ -795,3 +997,3 @@ }, { | ||
get: function get() { | ||
return __WEBPACK_IMPORTED_MODULE_1__constants__["c" /* numbers */]; | ||
return __WEBPACK_IMPORTED_MODULE_2__constants__["b" /* numbers */]; | ||
} | ||
@@ -822,11 +1024,26 @@ }, { | ||
/** @private {number} */ | ||
var _this = _possibleConstructorReturn(this, (MDCRippleFoundation.__proto__ || Object.getPrototypeOf(MDCRippleFoundation)).call(this, _extends(MDCRippleFoundation.defaultAdapter, adapter))); | ||
_this.layoutFrame_ = 0; | ||
_this.frame_ = { width: 0, height: 0 }; | ||
/** @private {!ClientRect} */ | ||
_this.frame_ = /** @type {!ClientRect} */{ width: 0, height: 0 }; | ||
/** @private {!ActivationStateType} */ | ||
_this.activationState_ = _this.defaultActivationState_(); | ||
/** @private {number} */ | ||
_this.xfDuration_ = 0; | ||
/** @private {number} */ | ||
_this.initialSize_ = 0; | ||
/** @private {number} */ | ||
_this.maxRadius_ = 0; | ||
/** @private {!Array<{ListenerInfoType}>} */ | ||
_this.listenerInfos_ = [{ activate: 'touchstart', deactivate: 'touchend' }, { activate: 'pointerdown', deactivate: 'pointerup' }, { activate: 'mousedown', deactivate: 'mouseup' }, { activate: 'keydown', deactivate: 'keyup' }, { focus: 'focus', blur: 'blur' }]; | ||
/** @private {!ListenersType} */ | ||
_this.listeners_ = { | ||
@@ -850,5 +1067,9 @@ activate: function activate(e) { | ||
}; | ||
/** @private {!Function} */ | ||
_this.resizeHandler_ = function () { | ||
return _this.layout(); | ||
}; | ||
/** @private {!{left: number, top:number}} */ | ||
_this.unboundedCoords_ = { | ||
@@ -858,6 +1079,16 @@ left: 0, | ||
}; | ||
/** @private {number} */ | ||
_this.fgScale_ = 0; | ||
/** @private {number} */ | ||
_this.activationTimer_ = 0; | ||
/** @private {number} */ | ||
_this.fgDeactivationRemovalTimer_ = 0; | ||
/** @private {boolean} */ | ||
_this.activationAnimationHasEnded_ = false; | ||
/** @private {!Function} */ | ||
_this.activationTimerCallback_ = function () { | ||
@@ -870,2 +1101,7 @@ _this.activationAnimationHasEnded_ = true; | ||
/** | ||
* @return {!ActivationStateType} | ||
*/ | ||
_createClass(MDCRippleFoundation, [{ | ||
@@ -906,2 +1142,5 @@ key: 'defaultActivationState_', | ||
} | ||
/** @private */ | ||
}, { | ||
@@ -919,2 +1158,8 @@ key: 'addEventListeners_', | ||
} | ||
/** | ||
* @param {Event} e | ||
* @private | ||
*/ | ||
}, { | ||
@@ -961,2 +1206,5 @@ key: 'activate_', | ||
} | ||
/** @private */ | ||
}, { | ||
@@ -1005,2 +1253,8 @@ key: 'animateActivation_', | ||
} | ||
/** | ||
* @private | ||
* @return {{startPoint: PointType, endPoint: PointType}} | ||
*/ | ||
}, { | ||
@@ -1016,3 +1270,4 @@ key: 'getFgTranslationCoordinates_', | ||
if (wasActivatedByPointer) { | ||
startPoint = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__util__["getNormalizedEventCoords"])(activationEvent, this.adapter_.getWindowPageOffset(), this.adapter_.computeBoundingRect()); | ||
startPoint = __WEBPACK_IMPORTED_MODULE_3__util__["getNormalizedEventCoords"]( | ||
/** @type {!Event} */activationEvent, this.adapter_.getWindowPageOffset(), this.adapter_.computeBoundingRect()); | ||
} else { | ||
@@ -1037,2 +1292,5 @@ startPoint = { | ||
} | ||
/** @private */ | ||
}, { | ||
@@ -1054,5 +1312,8 @@ key: 'runDeactivationUXLogicIfReady_', | ||
_this6.adapter_.removeClass(FG_DEACTIVATION); | ||
}, __WEBPACK_IMPORTED_MODULE_1__constants__["c" /* numbers */].FG_DEACTIVATION_MS); | ||
}, __WEBPACK_IMPORTED_MODULE_2__constants__["b" /* numbers */].FG_DEACTIVATION_MS); | ||
} | ||
} | ||
/** @private */ | ||
}, { | ||
@@ -1070,2 +1331,8 @@ key: 'rmBoundedActivationClasses_', | ||
} | ||
/** | ||
* @param {Event} e | ||
* @private | ||
*/ | ||
}, { | ||
@@ -1085,4 +1352,5 @@ key: 'deactivate_', | ||
var evtObject = null; | ||
var _state = /** @type {!ActivationStateType} */_extends({}, activationState); | ||
requestAnimationFrame(function () { | ||
return _this7.animateDeactivation_(evtObject, _extends({}, activationState)); | ||
return _this7.animateDeactivation_(evtObject, _state); | ||
}); | ||
@@ -1105,3 +1373,3 @@ this.activationState_ = this.defaultActivationState_(); | ||
var state = _extends({}, activationState); | ||
var state = /** @type {!ActivationStateType} */_extends({}, activationState); | ||
requestAnimationFrame(function () { | ||
@@ -1123,2 +1391,9 @@ if (needsDeactivationUX) { | ||
} | ||
/** | ||
* @param {Event} e | ||
* @param {!ActivationStateType} options | ||
* @private | ||
*/ | ||
}, { | ||
@@ -1157,2 +1432,5 @@ key: 'animateDeactivation_', | ||
} | ||
/** @private */ | ||
}, { | ||
@@ -1170,2 +1448,5 @@ key: 'removeEventListeners_', | ||
} | ||
/** @private */ | ||
}, { | ||
@@ -1197,2 +1478,5 @@ key: 'removeCssVars_', | ||
} | ||
/** @private */ | ||
}, { | ||
@@ -1215,2 +1499,5 @@ key: 'layoutInternal_', | ||
} | ||
/** @private */ | ||
}, { | ||
@@ -1246,3 +1533,3 @@ key: 'updateLayoutCssVars_', | ||
return MDCRippleFoundation; | ||
}(__WEBPACK_IMPORTED_MODULE_0__material_base__["MDCFoundation"]); | ||
}(__WEBPACK_IMPORTED_MODULE_0__material_base_foundation__["a" /* default */]); | ||
@@ -1253,8 +1540,63 @@ /* harmony default export */ __webpack_exports__["a"] = (MDCRippleFoundation); | ||
/***/ 88: | ||
/***/ 69: | ||
/***/ (function(module, exports, __webpack_require__) { | ||
module.exports = __webpack_require__(4); | ||
module.exports = __webpack_require__(5); | ||
/***/ }), | ||
/***/ 7: | ||
/***/ (function(module, __webpack_exports__, __webpack_require__) { | ||
"use strict"; | ||
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return cssClasses; }); | ||
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return strings; }); | ||
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return numbers; }); | ||
/** | ||
* Copyright 2016 Google Inc. All Rights Reserved. | ||
* | ||
* Licensed under the Apache License, Version 2.0 (the "License"); | ||
* you may not use this file except in compliance with the License. | ||
* You may obtain a copy of the License at | ||
* | ||
* http://www.apache.org/licenses/LICENSE-2.0 | ||
* | ||
* Unless required by applicable law or agreed to in writing, software | ||
* distributed under the License is distributed on an "AS IS" BASIS, | ||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
* See the License for the specific language governing permissions and | ||
* limitations under the License. | ||
*/ | ||
var cssClasses = { | ||
// Ripple is a special case where the "root" component is really a "mixin" of sorts, | ||
// given that it's an 'upgrade' to an existing component. That being said it is the root | ||
// CSS class that all other CSS classes derive from. | ||
ROOT: 'mdc-ripple-upgraded', | ||
UNBOUNDED: 'mdc-ripple-upgraded--unbounded', | ||
BG_FOCUSED: 'mdc-ripple-upgraded--background-focused', | ||
BG_ACTIVE_FILL: 'mdc-ripple-upgraded--background-active-fill', | ||
FG_ACTIVATION: 'mdc-ripple-upgraded--foreground-activation', | ||
FG_DEACTIVATION: 'mdc-ripple-upgraded--foreground-deactivation' | ||
}; | ||
var strings = { | ||
VAR_SURFACE_WIDTH: '--mdc-ripple-surface-width', | ||
VAR_SURFACE_HEIGHT: '--mdc-ripple-surface-height', | ||
VAR_FG_SIZE: '--mdc-ripple-fg-size', | ||
VAR_LEFT: '--mdc-ripple-left', | ||
VAR_TOP: '--mdc-ripple-top', | ||
VAR_FG_SCALE: '--mdc-ripple-fg-scale', | ||
VAR_FG_TRANSLATE_START: '--mdc-ripple-fg-translate-start', | ||
VAR_FG_TRANSLATE_END: '--mdc-ripple-fg-translate-end' | ||
}; | ||
var numbers = { | ||
PADDING: 10, | ||
INITIAL_ORIGIN_SCALE: 0.6, | ||
DEACTIVATION_TIMEOUT_MS: 300, | ||
FG_DEACTIVATION_MS: 83 | ||
}; | ||
/***/ }) | ||
@@ -1261,0 +1603,0 @@ |
@@ -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]={i:i,l:!1,exports:{}};return t[i].call(a.exports,a,a.exports,e),a.l=!0,a.exports}var n={};return e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,i){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:i})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="/assets/",e(e.s=88)}({0:function(t,e,n){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var a=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}}(),r=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};i(this,t),this.adapter_=e}return a(t,null,[{key:"cssClasses",get:function(){return{}}},{key:"strings",get:function(){return{}}},{key:"numbers",get:function(){return{}}},{key:"defaultAdapter",get:function(){return{}}}]),a(t,[{key:"init",value:function(){}},{key:"destroy",value:function(){}}]),t}();e.a=r},1:function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i=n(0);n.d(e,"MDCFoundation",function(){return i.a});var a=n(2);n.d(e,"MDCComponent",function(){return a.a})},2:function(t,e,n){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var a=n(0),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=function(){function t(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0;i(this,t),this.root_=e;for(var a=arguments.length,r=Array(a>2?a-2:0),o=2;o<a;o++)r[o-2]=arguments[o];this.initialize.apply(this,r),this.foundation_=void 0===n?this.getDefaultFoundation():n,this.foundation_.init(),this.initialSyncWithDOM()}return r(t,null,[{key:"attachTo",value:function(e){return new t(e,new a.a)}}]),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=arguments.length>2&&void 0!==arguments[2]&&arguments[2],i=void 0;"function"==typeof CustomEvent?i=new CustomEvent(t,{detail:e,bubbles:n}):(i=document.createEvent("CustomEvent"),i.initCustomEvent(t,n,!1,e)),this.root_.dispatchEvent(i)}}]),t}();e.a=o},3:function(t,e,n){"use strict";function i(t){if(t.CSS&&"function"==typeof t.CSS.supports){var e=t.CSS.supports("--css-vars","yes"),n=t.CSS.supports("(--css-vars: yes)")&&t.CSS.supports("color","#00000000");return e||n}}function a(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:window,e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(void 0===s||e){var n=!1;try{t.document.addEventListener("test",null,{get passive(){n=!0}})}catch(t){}s=n}return!!s&&{passive:!0}}function r(t){return["webkitMatchesSelector","msMatchesSelector","matches"].filter(function(e){return e in t}).pop()}function o(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"touchstart"===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=i,e.applyPassive=a,e.getMatchesProperty=r,e.getNormalizedEventCoords=o;var s=void 0},4: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}),n.d(e,"MDCRipple",function(){return d});var o=n(1),s=n(6),u=n(3);n.d(e,"MDCRippleFoundation",function(){return s.a}),n.d(e,"util",function(){return u});var c=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}}(),d=function(t){function e(){return i(this,e),a(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return r(e,t),c(e,[{key:"activate",value:function(){this.foundation_.activate()}},{key:"deactivate",value:function(){this.foundation_.deactivate()}},{key:"layout",value:function(){this.foundation_.layout()}},{key:"getDefaultFoundation",value:function(){return new s.a(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=s.a.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){var e=u.getMatchesProperty(HTMLElement.prototype);return{browserSupportsCssVars:function(){return u.supportsCssVariables(window)},isUnbounded:function(){return t.unbounded},isSurfaceActive:function(){return t.root_[e](":active")},isSurfaceDisabled:function(){return t.disabled},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,u.applyPassive())},deregisterInteractionHandler:function(e,n){return t.root_.removeEventListener(e,n,u.applyPassive())},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}(o.MDCComponent)},5:function(t,e,n){"use strict";n.d(e,"a",function(){return i}),n.d(e,"b",function(){return a}),n.d(e,"c",function(){return r});var i={ROOT:"mdc-ripple-upgraded",UNBOUNDED:"mdc-ripple-upgraded--unbounded",BG_FOCUSED:"mdc-ripple-upgraded--background-focused",BG_ACTIVE_FILL:"mdc-ripple-upgraded--background-active-fill",FG_ACTIVATION:"mdc-ripple-upgraded--foreground-activation",FG_DEACTIVATION:"mdc-ripple-upgraded--foreground-deactivation"},a={VAR_SURFACE_WIDTH:"--mdc-ripple-surface-width",VAR_SURFACE_HEIGHT:"--mdc-ripple-surface-height",VAR_FG_SIZE:"--mdc-ripple-fg-size",VAR_LEFT:"--mdc-ripple-left",VAR_TOP:"--mdc-ripple-top",VAR_FG_SCALE:"--mdc-ripple-fg-scale",VAR_FG_TRANSLATE_START:"--mdc-ripple-fg-translate-start",VAR_FG_TRANSLATE_END:"--mdc-ripple-fg-translate-end"},r={PADDING:10,INITIAL_ORIGIN_SCALE:.6,DEACTIVATION_TIMEOUT_MS:300,FG_DEACTIVATION_MS:83}},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)}var o=n(1),s=n(5),u=n(3),c=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},d=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}}(),l={mouseup:"mousedown",pointerup:"pointerdown",touchend:"touchstart",keyup:"keydown",blur:"focus"},f=function(t){function e(t){i(this,e);var n=a(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,c(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_FOCUSED)})},blur:function(){return requestAnimationFrame(function(){return n.adapter_.removeClass(e.cssClasses.BG_FOCUSED)})}},n.resizeHandler_=function(){return n.layout()},n.unboundedCoords_={left:0,top:0},n.fgScale_=0,n.activationTimer_=0,n.fgDeactivationRemovalTimer_=0,n.activationAnimationHasEnded_=!1,n.activationTimerCallback_=function(){n.activationAnimationHasEnded_=!0,n.runDeactivationUXLogicIfReady_()},n}return r(e,t),d(e,[{key:"isSupported_",get:function(){return this.adapter_.browserSupportsCssVars()}}],[{key:"cssClasses",get:function(){return s.a}},{key:"strings",get:function(){return s.b}},{key:"numbers",get:function(){return s.c}},{key:"defaultAdapter",get:function(){return{browserSupportsCssVars:function(){},isUnbounded:function(){},isSurfaceActive:function(){},isSurfaceDisabled:function(){},addClass:function(){},removeClass:function(){},registerInteractionHandler:function(){},deregisterInteractionHandler:function(){},registerResizeHandler:function(){},deregisterResizeHandler:function(){},updateCssVariable:function(){},computeBoundingRect:function(){},getWindowPageOffset:function(){}}}}]),d(e,[{key:"defaultActivationState_",value:function(){return{isActivated:!1,hasDeactivationUXRun:!1,wasActivatedByPointer:!1,wasElementMadeActive:!1,activationStartTime:0,activationEvent:null,isProgrammatic:!1}}},{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;if(!this.adapter_.isSurfaceDisabled()){var n=this.activationState_;n.isActivated||(n.isActivated=!0,n.isProgrammatic=null===t,n.activationEvent=t,n.wasActivatedByPointer=!n.isProgrammatic&&("mousedown"===t.type||"touchstart"===t.type||"pointerdown"===t.type),n.activationStartTime=Date.now(),requestAnimationFrame(function(){n.wasElementMadeActive=!t||"keydown"!==t.type||e.adapter_.isSurfaceActive(),n.wasElementMadeActive?e.animateActivation_():e.activationState_=e.defaultActivationState_()}))}}},{key:"activate",value:function(){this.activate_(null)}},{key:"animateActivation_",value:function(){var t=this,n=e.strings,i=n.VAR_FG_TRANSLATE_START,a=n.VAR_FG_TRANSLATE_END,r=e.cssClasses,o=r.BG_ACTIVE_FILL,s=r.FG_DEACTIVATION,u=r.FG_ACTIVATION,c=e.numbers.DEACTIVATION_TIMEOUT_MS,d="",l="";if(!this.adapter_.isUnbounded()){var f=this.getFgTranslationCoordinates_(),p=f.startPoint,v=f.endPoint;d=p.x+"px, "+p.y+"px",l=v.x+"px, "+v.y+"px"}this.adapter_.updateCssVariable(i,d),this.adapter_.updateCssVariable(a,l),clearTimeout(this.activationTimer_),clearTimeout(this.fgDeactivationRemovalTimer_),this.rmBoundedActivationClasses_(),this.adapter_.removeClass(s),this.adapter_.computeBoundingRect(),this.adapter_.addClass(o),this.adapter_.addClass(u),this.activationTimer_=setTimeout(function(){return t.activationTimerCallback_()},c)}},{key:"getFgTranslationCoordinates_",value:function(){var t=this.activationState_,e=t.activationEvent,i=t.wasActivatedByPointer,a=void 0;return a=i?n.i(u.getNormalizedEventCoords)(e,this.adapter_.getWindowPageOffset(),this.adapter_.computeBoundingRect()):{x:this.frame_.width/2,y:this.frame_.height/2},a={x:a.x-this.initialSize_/2,y:a.y-this.initialSize_/2},{startPoint:a,endPoint:{x:this.frame_.width/2-this.initialSize_/2,y:this.frame_.height/2-this.initialSize_/2}}}},{key:"runDeactivationUXLogicIfReady_",value:function(){var t=this,n=e.cssClasses.FG_DEACTIVATION,i=this.activationState_,a=i.hasDeactivationUXRun,r=i.isActivated;(a||!r)&&this.activationAnimationHasEnded_&&(this.rmBoundedActivationClasses_(),this.adapter_.addClass(n),this.fgDeactivationRemovalTimer_=setTimeout(function(){t.adapter_.removeClass(n)},s.c.FG_DEACTIVATION_MS))}},{key:"rmBoundedActivationClasses_",value:function(){var t=e.cssClasses,n=t.BG_ACTIVE_FILL,i=t.FG_ACTIVATION;this.adapter_.removeClass(n),this.adapter_.removeClass(i),this.activationAnimationHasEnded_=!1,this.adapter_.computeBoundingRect()}},{key:"deactivate_",value:function(t){var e=this,n=this.activationState_;if(n.isActivated){if(n.isProgrammatic){return requestAnimationFrame(function(){return e.animateDeactivation_(null,c({},n))}),void(this.activationState_=this.defaultActivationState_())}var i=l[t.type],a=n.activationEvent.type,r=i===a,o=r;n.wasActivatedByPointer&&(o="mouseup"===t.type);var s=c({},n);requestAnimationFrame(function(){r&&(e.activationState_.hasDeactivationUXRun=!0,e.animateDeactivation_(t,s)),o&&(e.activationState_=e.defaultActivationState_())})}}},{key:"deactivate",value:function(){this.deactivate_(null)}},{key:"animateDeactivation_",value:function(t,n){var i=n.wasActivatedByPointer,a=n.wasElementMadeActive,r=e.cssClasses.BG_FOCUSED;(i||a)&&(this.adapter_.removeClass(r),this.runDeactivationUXLogicIfReady_())}},{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_LEFT,o=t.VAR_TOP,s=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(s,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(r,this.unboundedCoords_.left+"px"),this.adapter_.updateCssVariable(o,this.unboundedCoords_.top+"px"))}}]),e}(o.MDCFoundation);e.a=f},88:function(t,e,n){t.exports=n(4)}})}); | ||
!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]={i:i,l:!1,exports:{}};return t[i].call(a.exports,a,a.exports,e),a.l=!0,a.exports}var n={};return e.m=t,e.c=n,e.d=function(t,n,i){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:i})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="/assets/",e(e.s=69)}({0:function(t,e,n){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var a=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}}(),r=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};i(this,t),this.adapter_=e}return a(t,null,[{key:"cssClasses",get:function(){return{}}},{key:"strings",get:function(){return{}}},{key:"numbers",get:function(){return{}}},{key:"defaultAdapter",get:function(){return{}}}]),a(t,[{key:"init",value:function(){}},{key:"destroy",value:function(){}}]),t}();e.a=r},1:function(t,e,n){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var a=n(0),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=function(){function t(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0;i(this,t),this.root_=e;for(var a=arguments.length,r=Array(a>2?a-2:0),o=2;o<a;o++)r[o-2]=arguments[o];this.initialize.apply(this,r),this.foundation_=void 0===n?this.getDefaultFoundation():n,this.foundation_.init(),this.initialSyncWithDOM()}return r(t,null,[{key:"attachTo",value:function(e){return new t(e,new a.a)}}]),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=arguments.length>2&&void 0!==arguments[2]&&arguments[2],i=void 0;"function"==typeof CustomEvent?i=new CustomEvent(t,{detail:e,bubbles:n}):(i=document.createEvent("CustomEvent"),i.initCustomEvent(t,n,!1,e)),this.root_.dispatchEvent(i)}}]),t}();e.a=o},3:function(t,e,n){"use strict";function i(t){if(t.CSS&&"function"==typeof t.CSS.supports){var e=t.CSS.supports("--css-vars","yes"),n=t.CSS.supports("(--css-vars: yes)")&&t.CSS.supports("color","#00000000");return e||n}}function a(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:window,e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(void 0===s||e){var n=!1;try{t.document.addEventListener("test",null,{get passive(){n=!0}})}catch(t){}s=n}return!!s&&{passive:!0}}function r(t){return["webkitMatchesSelector","msMatchesSelector","matches"].filter(function(e){return e in t}).pop()}function o(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"touchstart"===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=i,e.applyPassive=a,e.getMatchesProperty=r,e.getNormalizedEventCoords=o;var s=void 0},4:function(t,e,n){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var a=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}}();!function(){function t(){i(this,t)}a(t,[{key:"browserSupportsCssVars",value:function(){}},{key:"isUnbounded",value:function(){}},{key:"isSurfaceActive",value:function(){}},{key:"isSurfaceDisabled",value:function(){}},{key:"addClass",value:function(t){}},{key:"removeClass",value:function(t){}},{key:"registerInteractionHandler",value:function(t,e){}},{key:"deregisterInteractionHandler",value:function(t,e){}},{key:"registerResizeHandler",value:function(t){}},{key:"deregisterResizeHandler",value:function(t){}},{key:"updateCssVariable",value:function(t,e){}},{key:"computeBoundingRect",value:function(){}},{key:"getWindowPageOffset",value:function(){}}])}()},5: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}),n.d(e,"MDCRipple",function(){return d});var o=n(1),s=(n(4),n(6)),u=n(3);n.d(e,"MDCRippleFoundation",function(){return s.a}),n.d(e,"util",function(){return u});var c=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}}(),d=function(t){function e(){var t;i(this,e);for(var n=arguments.length,r=Array(n),o=0;o<n;o++)r[o]=arguments[o];var s=a(this,(t=e.__proto__||Object.getPrototypeOf(e)).call.apply(t,[this].concat(r)));return s.disabled=!1,s.unbounded_,s}return r(e,t),c(e,[{key:"activate",value:function(){this.foundation_.activate()}},{key:"deactivate",value:function(){this.foundation_.deactivate()}},{key:"layout",value:function(){this.foundation_.layout()}},{key:"getDefaultFoundation",value:function(){return new s.a(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=s.a.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){var e=u.getMatchesProperty(HTMLElement.prototype);return{browserSupportsCssVars:function(){return u.supportsCssVariables(window)},isUnbounded:function(){return t.unbounded},isSurfaceActive:function(){return t.root_[e](":active")},isSurfaceDisabled:function(){return t.disabled},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,u.applyPassive())},deregisterInteractionHandler:function(e,n){return t.root_.removeEventListener(e,n,u.applyPassive())},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}(o.a),l=function t(){i(this,t)};l.prototype.root_,l.prototype.unbounded,l.prototype.disabled},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)}var o=n(0),s=(n(4),n(7)),u=n(3),c=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},d=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}}(),l={mouseup:"mousedown",pointerup:"pointerdown",touchend:"touchstart",keyup:"keydown",blur:"focus"},f=function(t){function e(t){i(this,e);var n=a(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,c(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_FOCUSED)})},blur:function(){return requestAnimationFrame(function(){return n.adapter_.removeClass(e.cssClasses.BG_FOCUSED)})}},n.resizeHandler_=function(){return n.layout()},n.unboundedCoords_={left:0,top:0},n.fgScale_=0,n.activationTimer_=0,n.fgDeactivationRemovalTimer_=0,n.activationAnimationHasEnded_=!1,n.activationTimerCallback_=function(){n.activationAnimationHasEnded_=!0,n.runDeactivationUXLogicIfReady_()},n}return r(e,t),d(e,[{key:"isSupported_",get:function(){return this.adapter_.browserSupportsCssVars()}}],[{key:"cssClasses",get:function(){return s.a}},{key:"strings",get:function(){return s.c}},{key:"numbers",get:function(){return s.b}},{key:"defaultAdapter",get:function(){return{browserSupportsCssVars:function(){},isUnbounded:function(){},isSurfaceActive:function(){},isSurfaceDisabled:function(){},addClass:function(){},removeClass:function(){},registerInteractionHandler:function(){},deregisterInteractionHandler:function(){},registerResizeHandler:function(){},deregisterResizeHandler:function(){},updateCssVariable:function(){},computeBoundingRect:function(){},getWindowPageOffset:function(){}}}}]),d(e,[{key:"defaultActivationState_",value:function(){return{isActivated:!1,hasDeactivationUXRun:!1,wasActivatedByPointer:!1,wasElementMadeActive:!1,activationStartTime:0,activationEvent:null,isProgrammatic:!1}}},{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;if(!this.adapter_.isSurfaceDisabled()){var n=this.activationState_;n.isActivated||(n.isActivated=!0,n.isProgrammatic=null===t,n.activationEvent=t,n.wasActivatedByPointer=!n.isProgrammatic&&("mousedown"===t.type||"touchstart"===t.type||"pointerdown"===t.type),n.activationStartTime=Date.now(),requestAnimationFrame(function(){n.wasElementMadeActive=!t||"keydown"!==t.type||e.adapter_.isSurfaceActive(),n.wasElementMadeActive?e.animateActivation_():e.activationState_=e.defaultActivationState_()}))}}},{key:"activate",value:function(){this.activate_(null)}},{key:"animateActivation_",value:function(){var t=this,n=e.strings,i=n.VAR_FG_TRANSLATE_START,a=n.VAR_FG_TRANSLATE_END,r=e.cssClasses,o=r.BG_ACTIVE_FILL,s=r.FG_DEACTIVATION,u=r.FG_ACTIVATION,c=e.numbers.DEACTIVATION_TIMEOUT_MS,d="",l="";if(!this.adapter_.isUnbounded()){var f=this.getFgTranslationCoordinates_(),p=f.startPoint,v=f.endPoint;d=p.x+"px, "+p.y+"px",l=v.x+"px, "+v.y+"px"}this.adapter_.updateCssVariable(i,d),this.adapter_.updateCssVariable(a,l),clearTimeout(this.activationTimer_),clearTimeout(this.fgDeactivationRemovalTimer_),this.rmBoundedActivationClasses_(),this.adapter_.removeClass(s),this.adapter_.computeBoundingRect(),this.adapter_.addClass(o),this.adapter_.addClass(u),this.activationTimer_=setTimeout(function(){return t.activationTimerCallback_()},c)}},{key:"getFgTranslationCoordinates_",value:function(){var t=this.activationState_,e=t.activationEvent,n=t.wasActivatedByPointer,i=void 0;return i=n?u.getNormalizedEventCoords(e,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},{startPoint:i,endPoint:{x:this.frame_.width/2-this.initialSize_/2,y:this.frame_.height/2-this.initialSize_/2}}}},{key:"runDeactivationUXLogicIfReady_",value:function(){var t=this,n=e.cssClasses.FG_DEACTIVATION,i=this.activationState_,a=i.hasDeactivationUXRun,r=i.isActivated;(a||!r)&&this.activationAnimationHasEnded_&&(this.rmBoundedActivationClasses_(),this.adapter_.addClass(n),this.fgDeactivationRemovalTimer_=setTimeout(function(){t.adapter_.removeClass(n)},s.b.FG_DEACTIVATION_MS))}},{key:"rmBoundedActivationClasses_",value:function(){var t=e.cssClasses,n=t.BG_ACTIVE_FILL,i=t.FG_ACTIVATION;this.adapter_.removeClass(n),this.adapter_.removeClass(i),this.activationAnimationHasEnded_=!1,this.adapter_.computeBoundingRect()}},{key:"deactivate_",value:function(t){var e=this,n=this.activationState_;if(n.isActivated){if(n.isProgrammatic){var i=c({},n);return requestAnimationFrame(function(){return e.animateDeactivation_(null,i)}),void(this.activationState_=this.defaultActivationState_())}var a=l[t.type],r=n.activationEvent.type,o=a===r,s=o;n.wasActivatedByPointer&&(s="mouseup"===t.type);var u=c({},n);requestAnimationFrame(function(){o&&(e.activationState_.hasDeactivationUXRun=!0,e.animateDeactivation_(t,u)),s&&(e.activationState_=e.defaultActivationState_())})}}},{key:"deactivate",value:function(){this.deactivate_(null)}},{key:"animateDeactivation_",value:function(t,n){var i=n.wasActivatedByPointer,a=n.wasElementMadeActive,r=e.cssClasses.BG_FOCUSED;(i||a)&&(this.adapter_.removeClass(r),this.runDeactivationUXLogicIfReady_())}},{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_LEFT,o=t.VAR_TOP,s=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(s,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(r,this.unboundedCoords_.left+"px"),this.adapter_.updateCssVariable(o,this.unboundedCoords_.top+"px"))}}]),e}(o.a);e.a=f},69:function(t,e,n){t.exports=n(5)},7:function(t,e,n){"use strict";n.d(e,"a",function(){return i}),n.d(e,"c",function(){return a}),n.d(e,"b",function(){return r});var i={ROOT:"mdc-ripple-upgraded",UNBOUNDED:"mdc-ripple-upgraded--unbounded",BG_FOCUSED:"mdc-ripple-upgraded--background-focused",BG_ACTIVE_FILL:"mdc-ripple-upgraded--background-active-fill",FG_ACTIVATION:"mdc-ripple-upgraded--foreground-activation",FG_DEACTIVATION:"mdc-ripple-upgraded--foreground-deactivation"},a={VAR_SURFACE_WIDTH:"--mdc-ripple-surface-width",VAR_SURFACE_HEIGHT:"--mdc-ripple-surface-height",VAR_FG_SIZE:"--mdc-ripple-fg-size",VAR_LEFT:"--mdc-ripple-left",VAR_TOP:"--mdc-ripple-top",VAR_FG_SCALE:"--mdc-ripple-fg-scale",VAR_FG_TRANSLATE_START:"--mdc-ripple-fg-translate-start",VAR_FG_TRANSLATE_END:"--mdc-ripple-fg-translate-end"},r={PADDING:10,INITIAL_ORIGIN_SCALE:.6,DEACTIVATION_TIMEOUT_MS:300,FG_DEACTIVATION_MS:83}}})}); |
@@ -17,7 +17,51 @@ /** | ||
import {MDCFoundation} from '@material/base'; | ||
import MDCFoundation from '@material/base/foundation'; | ||
import MDCRippleAdapter from './adapter'; | ||
import {cssClasses, strings, numbers} from './constants'; | ||
import {getNormalizedEventCoords} from './util'; | ||
/** | ||
* @typedef {!{ | ||
* isActivated: (boolean|undefined), | ||
* hasDeactivationUXRun: (boolean|undefined), | ||
* wasActivatedByPointer: (boolean|undefined), | ||
* wasElementMadeActive: (boolean|undefined), | ||
* activationStartTime: (number|undefined), | ||
* activationEvent: Event, | ||
* isProgrammatic: (boolean|undefined) | ||
* }} | ||
*/ | ||
let ActivationStateType; | ||
/** | ||
* @typedef {!{ | ||
* activate: (string|undefined), | ||
* deactivate: (string|undefined), | ||
* focus: (string|undefined), | ||
* blur: (string|undefined) | ||
* }} | ||
*/ | ||
let ListenerInfoType; | ||
/** | ||
* @typedef {!{ | ||
* activate: function(!Event), | ||
* deactivate: function(!Event), | ||
* focus: function(), | ||
* blur: function() | ||
* }} | ||
*/ | ||
let ListenersType; | ||
/** | ||
* @typedef {!{ | ||
* x: number, | ||
* y: number | ||
* }} | ||
*/ | ||
let PointType; | ||
/** | ||
* @enum {string} | ||
*/ | ||
const DEACTIVATION_ACTIVATION_PAIRS = { | ||
@@ -31,2 +75,5 @@ mouseup: 'mousedown', | ||
/** | ||
* @extends {MDCFoundation<!MDCRippleAdapter>} | ||
*/ | ||
export default class MDCRippleFoundation extends MDCFoundation { | ||
@@ -63,6 +110,9 @@ static get cssClasses() { | ||
// We compute this property so that we are not querying information about the client | ||
// until the point in time where the foundation requests it. This prevents scenarios where | ||
// client-side feature-detection may happen too early, such as when components are rendered on the server | ||
// and then initialized at mount time on the client. | ||
/** | ||
* We compute this property so that we are not querying information about the client | ||
* until the point in time where the foundation requests it. This prevents scenarios where | ||
* client-side feature-detection may happen too early, such as when components are rendered on the server | ||
* and then initialized at mount time on the client. | ||
* @return {boolean} | ||
*/ | ||
get isSupported_() { | ||
@@ -75,8 +125,21 @@ return this.adapter_.browserSupportsCssVars(); | ||
/** @private {number} */ | ||
this.layoutFrame_ = 0; | ||
this.frame_ = {width: 0, height: 0}; | ||
/** @private {!ClientRect} */ | ||
this.frame_ = /** @type {!ClientRect} */ ({width: 0, height: 0}); | ||
/** @private {!ActivationStateType} */ | ||
this.activationState_ = this.defaultActivationState_(); | ||
/** @private {number} */ | ||
this.xfDuration_ = 0; | ||
/** @private {number} */ | ||
this.initialSize_ = 0; | ||
/** @private {number} */ | ||
this.maxRadius_ = 0; | ||
/** @private {!Array<{ListenerInfoType}>} */ | ||
this.listenerInfos_ = [ | ||
@@ -89,2 +152,4 @@ {activate: 'touchstart', deactivate: 'touchend'}, | ||
]; | ||
/** @private {!ListenersType} */ | ||
this.listeners_ = { | ||
@@ -100,3 +165,7 @@ activate: (e) => this.activate_(e), | ||
}; | ||
/** @private {!Function} */ | ||
this.resizeHandler_ = () => this.layout(); | ||
/** @private {!{left: number, top:number}} */ | ||
this.unboundedCoords_ = { | ||
@@ -106,6 +175,16 @@ left: 0, | ||
}; | ||
/** @private {number} */ | ||
this.fgScale_ = 0; | ||
/** @private {number} */ | ||
this.activationTimer_ = 0; | ||
/** @private {number} */ | ||
this.fgDeactivationRemovalTimer_ = 0; | ||
/** @private {boolean} */ | ||
this.activationAnimationHasEnded_ = false; | ||
/** @private {!Function} */ | ||
this.activationTimerCallback_ = () => { | ||
@@ -117,2 +196,5 @@ this.activationAnimationHasEnded_ = true; | ||
/** | ||
* @return {!ActivationStateType} | ||
*/ | ||
defaultActivationState_() { | ||
@@ -146,2 +228,3 @@ return { | ||
/** @private */ | ||
addEventListeners_() { | ||
@@ -156,2 +239,6 @@ this.listenerInfos_.forEach((info) => { | ||
/** | ||
* @param {Event} e | ||
* @private | ||
*/ | ||
activate_(e) { | ||
@@ -195,2 +282,3 @@ if (this.adapter_.isSurfaceDisabled()) { | ||
/** @private */ | ||
animateActivation_() { | ||
@@ -229,2 +317,6 @@ const {VAR_FG_TRANSLATE_START, VAR_FG_TRANSLATE_END} = MDCRippleFoundation.strings; | ||
/** | ||
* @private | ||
* @return {{startPoint: PointType, endPoint: PointType}} | ||
*/ | ||
getFgTranslationCoordinates_() { | ||
@@ -237,3 +329,4 @@ const {activationState_: activationState} = this; | ||
startPoint = getNormalizedEventCoords( | ||
activationEvent, this.adapter_.getWindowPageOffset(), this.adapter_.computeBoundingRect() | ||
/** @type {!Event} */ (activationEvent), | ||
this.adapter_.getWindowPageOffset(), this.adapter_.computeBoundingRect() | ||
); | ||
@@ -260,2 +353,3 @@ } else { | ||
/** @private */ | ||
runDeactivationUXLogicIfReady_() { | ||
@@ -274,2 +368,3 @@ const {FG_DEACTIVATION} = MDCRippleFoundation.cssClasses; | ||
/** @private */ | ||
rmBoundedActivationClasses_() { | ||
@@ -283,2 +378,6 @@ const {BG_ACTIVE_FILL, FG_ACTIVATION} = MDCRippleFoundation.cssClasses; | ||
/** | ||
* @param {Event} e | ||
* @private | ||
*/ | ||
deactivate_(e) { | ||
@@ -293,3 +392,4 @@ const {activationState_: activationState} = this; | ||
const evtObject = null; | ||
requestAnimationFrame(() => this.animateDeactivation_(evtObject, Object.assign({}, activationState))); | ||
const state = /** @type {!ActivationStateType} */ (Object.assign({}, activationState)); | ||
requestAnimationFrame(() => this.animateDeactivation_(evtObject, state)); | ||
this.activationState_ = this.defaultActivationState_(); | ||
@@ -311,3 +411,3 @@ return; | ||
const state = Object.assign({}, activationState); | ||
const state = /** @type {!ActivationStateType} */ (Object.assign({}, activationState)); | ||
requestAnimationFrame(() => { | ||
@@ -329,2 +429,7 @@ if (needsDeactivationUX) { | ||
/** | ||
* @param {Event} e | ||
* @param {!ActivationStateType} options | ||
* @private | ||
*/ | ||
animateDeactivation_(e, {wasActivatedByPointer, wasElementMadeActive}) { | ||
@@ -353,2 +458,3 @@ const {BG_FOCUSED} = MDCRippleFoundation.cssClasses; | ||
/** @private */ | ||
removeEventListeners_() { | ||
@@ -363,2 +469,3 @@ this.listenerInfos_.forEach((info) => { | ||
/** @private */ | ||
removeCssVars_() { | ||
@@ -383,2 +490,3 @@ const {strings} = MDCRippleFoundation; | ||
/** @private */ | ||
layoutInternal_() { | ||
@@ -400,2 +508,3 @@ this.frame_ = this.adapter_.computeBoundingRect(); | ||
/** @private */ | ||
updateLayoutCssVars_() { | ||
@@ -402,0 +511,0 @@ const { |
57
index.js
@@ -17,3 +17,4 @@ /** | ||
import {MDCComponent} from '@material/base'; | ||
import MDCComponent from '@material/base/component'; | ||
import MDCRippleAdapter from './adapter'; | ||
import MDCRippleFoundation from './foundation'; | ||
@@ -25,3 +26,22 @@ import * as util from './util'; | ||
/** | ||
* @extends MDCComponent<!MDCRippleFoundation> | ||
*/ | ||
export class MDCRipple extends MDCComponent { | ||
/** @param {...?} args */ | ||
constructor(...args) { | ||
super(...args); | ||
/** @type {boolean} */ | ||
this.disabled = false; | ||
/** @private {boolean} */ | ||
this.unbounded_; | ||
} | ||
/** | ||
* @param {!Element} root | ||
* @param {{isUnbounded: (boolean|undefined)}=} options | ||
* @return {!MDCRipple} | ||
*/ | ||
static attachTo(root, {isUnbounded = undefined} = {}) { | ||
@@ -31,3 +51,3 @@ const ripple = new MDCRipple(root); | ||
if (isUnbounded !== undefined) { | ||
ripple.unbounded = isUnbounded; | ||
ripple.unbounded = /** @type {boolean} */ (isUnbounded); | ||
} | ||
@@ -37,2 +57,6 @@ return ripple; | ||
/** | ||
* @param {!RippleCapableSurface} instance | ||
* @return {!MDCRippleAdapter} | ||
*/ | ||
static createAdapter(instance) { | ||
@@ -49,5 +73,5 @@ const MATCHES = util.getMatchesProperty(HTMLElement.prototype); | ||
registerInteractionHandler: (evtType, handler) => | ||
instance.root_.addEventListener(evtType, handler, util.applyPassive()), | ||
instance.root_.addEventListener(evtType, handler, util.applyPassive()), | ||
deregisterInteractionHandler: (evtType, handler) => | ||
instance.root_.removeEventListener(evtType, handler, util.applyPassive()), | ||
instance.root_.removeEventListener(evtType, handler, util.applyPassive()), | ||
registerResizeHandler: (handler) => window.addEventListener('resize', handler), | ||
@@ -61,2 +85,3 @@ deregisterResizeHandler: (handler) => window.removeEventListener('resize', handler), | ||
/** @return {boolean} */ | ||
get unbounded() { | ||
@@ -66,2 +91,3 @@ return this.unbounded_; | ||
/** @param {boolean} unbounded */ | ||
set unbounded(unbounded) { | ||
@@ -89,2 +115,3 @@ const {UNBOUNDED} = MDCRippleFoundation.cssClasses; | ||
/** @return {!MDCRippleFoundation} */ | ||
getDefaultFoundation() { | ||
@@ -98,1 +125,23 @@ return new MDCRippleFoundation(MDCRipple.createAdapter(this)); | ||
} | ||
/** | ||
* See Material Design spec for more details on when to use ripples. | ||
* https://material.io/guidelines/motion/choreography.html#choreography-creation | ||
* @record | ||
*/ | ||
class RippleCapableSurface {} | ||
/** @protected {!Element} */ | ||
RippleCapableSurface.prototype.root_; | ||
/** | ||
* Whether or not the ripple bleeds out of the bounds of the element. | ||
* @type {boolean|undefined} | ||
*/ | ||
RippleCapableSurface.prototype.unbounded; | ||
/** | ||
* Whether or not the ripple is attached to a disabled component. | ||
* @type {boolean|undefined} | ||
*/ | ||
RippleCapableSurface.prototype.disabled; |
{ | ||
"name": "@material/ripple", | ||
"description": "The Material Components for the web Ink Ripple effect for web element interactions", | ||
"version": "0.7.0", | ||
"version": "0.8.0", | ||
"license": "Apache-2.0", | ||
@@ -17,5 +17,5 @@ "keywords": [ | ||
"dependencies": { | ||
"@material/base": "^0.2.1", | ||
"@material/base": "^0.2.2", | ||
"@material/theme": "^0.1.5" | ||
} | ||
} |
23
util.js
@@ -17,4 +17,9 @@ /** | ||
/** @private {boolean|undefined} */ | ||
let supportsPassive_; | ||
/** | ||
* @param {!Window} windowObj | ||
* @return {boolean|undefined} | ||
*/ | ||
export function supportsCssVariables(windowObj) { | ||
@@ -36,3 +41,9 @@ const supportsFunctionPresent = windowObj.CSS && typeof windowObj.CSS.supports === 'function'; | ||
// Determine whether the current browser supports passive event listeners, and if so, use them. | ||
// | ||
/** | ||
* Determine whether the current browser supports passive event listeners, and if so, use them. | ||
* @param {!Window=} globalObj | ||
* @param {boolean=} forceRefresh | ||
* @return {boolean|{passive: boolean}} | ||
*/ | ||
export function applyPassive(globalObj = window, forceRefresh = false) { | ||
@@ -53,2 +64,6 @@ if (supportsPassive_ === undefined || forceRefresh) { | ||
/** | ||
* @param {!Object} HTMLElementPrototype | ||
* @return {!Array<string>} | ||
*/ | ||
export function getMatchesProperty(HTMLElementPrototype) { | ||
@@ -60,2 +75,8 @@ return [ | ||
/** | ||
* @param {!Event} ev | ||
* @param {!{x: number, y: number}} pageOffset | ||
* @param {!ClientRect} clientRect | ||
* @return {!{x: number, y: number}} | ||
*/ | ||
export function getNormalizedEventCoords(ev, pageOffset, clientRect) { | ||
@@ -62,0 +83,0 @@ const {x, y} = pageOffset; |
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
157485
14
2533
1
Updated@material/base@^0.2.2