12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607 |
- /*!
- Material Components for the web
- Copyright (c) 2017 Google Inc.
- License: Apache-2.0
- */
- (function webpackUniversalModuleDefinition(root, factory) {
- if(typeof exports === 'object' && typeof module === 'object')
- module.exports = factory();
- else if(typeof define === 'function' && define.amd)
- define([], factory);
- else if(typeof exports === 'object')
- exports["ripple"] = factory();
- else
- root["mdc"] = root["mdc"] || {}, root["mdc"]["ripple"] = factory();
- })(this, function() {
- return /******/ (function(modules) { // webpackBootstrap
- /******/ // The module cache
- /******/ var installedModules = {};
- /******/
- /******/ // The require function
- /******/ function __webpack_require__(moduleId) {
- /******/
- /******/ // Check if module is in cache
- /******/ if(installedModules[moduleId]) {
- /******/ return installedModules[moduleId].exports;
- /******/ }
- /******/ // Create a new module (and put it into the cache)
- /******/ var module = installedModules[moduleId] = {
- /******/ i: moduleId,
- /******/ l: false,
- /******/ exports: {}
- /******/ };
- /******/
- /******/ // Execute the module function
- /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
- /******/
- /******/ // Flag the module as loaded
- /******/ module.l = true;
- /******/
- /******/ // Return the exports of the module
- /******/ return module.exports;
- /******/ }
- /******/
- /******/
- /******/ // expose the modules object (__webpack_modules__)
- /******/ __webpack_require__.m = modules;
- /******/
- /******/ // expose the module cache
- /******/ __webpack_require__.c = installedModules;
- /******/
- /******/ // identity function for calling harmony imports with the correct context
- /******/ __webpack_require__.i = function(value) { return value; };
- /******/
- /******/ // define getter function for harmony exports
- /******/ __webpack_require__.d = function(exports, name, getter) {
- /******/ if(!__webpack_require__.o(exports, name)) {
- /******/ Object.defineProperty(exports, name, {
- /******/ configurable: false,
- /******/ enumerable: true,
- /******/ get: getter
- /******/ });
- /******/ }
- /******/ };
- /******/
- /******/ // getDefaultExport function for compatibility with non-harmony modules
- /******/ __webpack_require__.n = function(module) {
- /******/ var getter = module && module.__esModule ?
- /******/ function getDefault() { return module['default']; } :
- /******/ function getModuleExports() { return module; };
- /******/ __webpack_require__.d(getter, 'a', getter);
- /******/ return getter;
- /******/ };
- /******/
- /******/ // Object.prototype.hasOwnProperty.call
- /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
- /******/
- /******/ // __webpack_public_path__
- /******/ __webpack_require__.p = "/assets/";
- /******/
- /******/ // Load entry module and return exports
- /******/ return __webpack_require__(__webpack_require__.s = 93);
- /******/ })
- /************************************************************************/
- /******/ ({
- /***/ 0:
- /***/ (function(module, __webpack_exports__, __webpack_require__) {
- "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.
- *
- * 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.
- */
- /**
- * @template A
- */
- var MDCFoundation = function () {
- _createClass(MDCFoundation, null, [{
- key: "cssClasses",
- /** @return enum{cssClasses} */
- get: function get() {
- // Classes extending MDCFoundation should implement this method to return an object which exports every
- // CSS class the foundation class needs as a property. e.g. {ACTIVE: 'mdc-component--active'}
- return {};
- }
- /** @return enum{strings} */
- }, {
- key: "strings",
- get: function get() {
- // Classes extending MDCFoundation should implement this method to return an object which exports all
- // semantic strings as constants. e.g. {ARIA_ROLE: 'tablist'}
- return {};
- }
- /** @return enum{numbers} */
- }, {
- key: "numbers",
- get: function get() {
- // Classes extending MDCFoundation should implement this method to return an object which exports all
- // of its semantic numbers as constants. e.g. {ANIMATION_DELAY_MS: 350}
- return {};
- }
- /** @return {!Object} */
- }, {
- key: "defaultAdapter",
- get: function get() {
- // Classes extending MDCFoundation may choose to implement this getter in order to provide a convenient
- // way of viewing the necessary methods of an adapter. In the future, this could also be used for adapter
- // validation.
- return {};
- }
- /**
- * @param {A=} adapter
- */
- }]);
- function MDCFoundation() {
- var adapter = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
- _classCallCheck(this, MDCFoundation);
- /** @protected {!A} */
- this.adapter_ = adapter;
- }
- _createClass(MDCFoundation, [{
- key: "init",
- value: function init() {
- // Subclasses should override this method to perform initialization routines (registering events, etc.)
- }
- }, {
- key: "destroy",
- value: function destroy() {
- // Subclasses should override this method to perform de-initialization routines (de-registering events, etc.)
- }
- }]);
- return MDCFoundation;
- }();
- /* harmony default export */ __webpack_exports__["a"] = (MDCFoundation);
- /***/ }),
- /***/ 1:
- /***/ (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; }; }();
- function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
- /**
- * 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.
- */
- /**
- * @template F
- */
- var MDCComponent = function () {
- _createClass(MDCComponent, null, [{
- key: 'attachTo',
- /**
- * @param {!Element} root
- * @return {!MDCComponent}
- */
- value: function attachTo(root) {
- // Subclasses which extend MDCBase should provide an attachTo() method that takes a root element and
- // returns an instantiated component with its root set to that element. Also note that in the cases of
- // subclasses, an explicit foundation class will not have to be passed in; it will simply be initialized
- // from getDefaultFoundation().
- return new MDCComponent(root, new __WEBPACK_IMPORTED_MODULE_0__foundation__["a" /* default */]());
- }
- /**
- * @param {!Element} root
- * @param {F=} foundation
- * @param {...?} args
- */
- }]);
- function MDCComponent(root) {
- var foundation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
- _classCallCheck(this, MDCComponent);
- /** @protected {!Element} */
- this.root_ = root;
- for (var _len = arguments.length, args = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
- args[_key - 2] = arguments[_key];
- }
- this.initialize.apply(this, args);
- // Note that we initialize foundation here and not within the constructor's default param so that
- // this.root_ is defined and can be used within the foundation class.
- /** @protected {!F} */
- this.foundation_ = foundation === undefined ? this.getDefaultFoundation() : foundation;
- this.foundation_.init();
- this.initialSyncWithDOM();
- }
- _createClass(MDCComponent, [{
- key: 'initialize',
- value: function initialize() /* ...args */{}
- // Subclasses can override this to do any additional setup work that would be considered part of a
- // "constructor". Essentially, it is a hook into the parent constructor before the foundation is
- // initialized. Any additional arguments besides root and foundation will be passed in here.
- /**
- * @return {!F} foundation
- */
- }, {
- key: 'getDefaultFoundation',
- value: function getDefaultFoundation() {
- // Subclasses must override this method to return a properly configured foundation class for the
- // component.
- throw new Error('Subclasses must override getDefaultFoundation to return a properly configured ' + 'foundation class');
- }
- }, {
- key: 'initialSyncWithDOM',
- value: function initialSyncWithDOM() {
- // Subclasses should override this method if they need to perform work to synchronize with a host DOM
- // object. An example of this would be a form control wrapper that needs to synchronize its internal state
- // to some property or attribute of the host DOM. Please note: this is *not* the place to perform DOM
- // reads/writes that would cause layout / paint, as this is called synchronously from within the constructor.
- }
- }, {
- key: 'destroy',
- value: function destroy() {
- // Subclasses may implement this method to release any resources / deregister any listeners they have
- // attached. An example of this might be deregistering a resize event from the window object.
- this.foundation_.destroy();
- }
- /**
- * Wrapper method to add an event listener to the component's root element. This is most useful when
- * listening for custom events.
- * @param {string} evtType
- * @param {!Function} handler
- */
- }, {
- key: 'listen',
- value: function listen(evtType, handler) {
- this.root_.addEventListener(evtType, handler);
- }
- /**
- * Wrapper method to remove an event listener to the component's root element. This is most useful when
- * unlistening for custom events.
- * @param {string} evtType
- * @param {!Function} handler
- */
- }, {
- key: 'unlisten',
- value: function unlisten(evtType, handler) {
- this.root_.removeEventListener(evtType, handler);
- }
- /**
- * Fires a cross-browser-compatible custom event from the component root of the given type,
- * with the given data.
- * @param {string} evtType
- * @param {!Object} evtData
- * @param {boolean=} shouldBubble
- */
- }, {
- key: 'emit',
- value: function emit(evtType, evtData) {
- var shouldBubble = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
- var evt = void 0;
- if (typeof CustomEvent === 'function') {
- evt = new CustomEvent(evtType, {
- detail: evtData,
- bubbles: shouldBubble
- });
- } else {
- evt = document.createEvent('CustomEvent');
- evt.initCustomEvent(evtType, shouldBubble, false, evtData);
- }
- this.root_.dispatchEvent(evt);
- }
- }]);
- return MDCComponent;
- }();
- /* harmony default export */ __webpack_exports__["a"] = (MDCComponent);
- /***/ }),
- /***/ 4:
- /***/ (function(module, __webpack_exports__, __webpack_require__) {
- "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 (immutable) */ __webpack_exports__["supportsCssVariables"] = supportsCssVariables;
- /* harmony export (immutable) */ __webpack_exports__["applyPassive"] = applyPassive;
- /* harmony export (immutable) */ __webpack_exports__["getMatchesProperty"] = getMatchesProperty;
- /* harmony export (immutable) */ __webpack_exports__["getNormalizedEventCoords"] = getNormalizedEventCoords;
- /**
- * 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.
- */
- /**
- * Stores result from supportsCssVariables to avoid redundant processing to detect CSS custom variable support.
- * @private {boolean|undefined}
- */
- var supportsCssVariables_ = void 0;
- /**
- * Stores result from applyPassive to avoid redundant processing to detect passive event listener support.
- * @private {boolean|undefined}
- */
- var supportsPassive_ = void 0;
- /**
- * @param {!Window} windowObj
- * @return {boolean}
- */
- function detectEdgePseudoVarBug(windowObj) {
- // Detect versions of Edge with buggy var() support
- // See: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11495448/
- var document = windowObj.document;
- var className = 'test-edge-css-var';
- var styleNode = document.createElement('style');
- document.head.appendChild(styleNode);
- var sheet = styleNode.sheet;
- // Internet Explorer 11 requires indices to always be specified to insertRule
- sheet.insertRule(':root { --' + className + ': 1px solid #000; }', 0);
- sheet.insertRule('.' + className + ' { visibility: hidden; }', 1);
- sheet.insertRule('.' + className + '::before { border: var(--' + className + '); }', 2);
- var node = document.createElement('div');
- node.className = className;
- document.body.appendChild(node);
- // Bug exists if ::before style ends up propagating to the parent element
- var hasPseudoVarBug = windowObj.getComputedStyle(node).borderTopStyle === 'solid';
- node.remove();
- styleNode.remove();
- return hasPseudoVarBug;
- }
- /**
- * @param {!Window} windowObj
- * @param {boolean=} forceRefresh
- * @return {boolean|undefined}
- */
- function supportsCssVariables(windowObj) {
- var forceRefresh = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
- if (typeof supportsCssVariables_ === 'boolean' && !forceRefresh) {
- return supportsCssVariables_;
- }
- var supportsFunctionPresent = windowObj.CSS && typeof windowObj.CSS.supports === 'function';
- if (!supportsFunctionPresent) {
- return;
- }
- var explicitlySupportsCssVars = windowObj.CSS.supports('--css-vars', 'yes');
- // See: https://bugs.webkit.org/show_bug.cgi?id=154669
- // See: README section on Safari
- var weAreFeatureDetectingSafari10plus = windowObj.CSS.supports('(--css-vars: yes)') && windowObj.CSS.supports('color', '#00000000');
- if (explicitlySupportsCssVars || weAreFeatureDetectingSafari10plus) {
- supportsCssVariables_ = !detectEdgePseudoVarBug(windowObj);
- } else {
- supportsCssVariables_ = false;
- }
- return supportsCssVariables_;
- }
- //
- /**
- * 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() {
- var globalObj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window;
- var forceRefresh = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
- if (supportsPassive_ === undefined || forceRefresh) {
- var isSupported = false;
- try {
- globalObj.document.addEventListener('test', null, { get passive() {
- isSupported = true;
- } });
- } catch (e) {}
- supportsPassive_ = isSupported;
- }
- return supportsPassive_ ? { passive: true } : false;
- }
- /**
- * @param {!Object} HTMLElementPrototype
- * @return {!Array<string>}
- */
- function getMatchesProperty(HTMLElementPrototype) {
- return ['webkitMatchesSelector', 'msMatchesSelector', 'matches'].filter(function (p) {
- return p in HTMLElementPrototype;
- }).pop();
- }
- /**
- * @param {!Event} ev
- * @param {!{x: number, y: number}} pageOffset
- * @param {!ClientRect} clientRect
- * @return {!{x: number, y: number}}
- */
- function getNormalizedEventCoords(ev, pageOffset, clientRect) {
- var x = pageOffset.x,
- y = pageOffset.y;
- var documentX = x + clientRect.left;
- var documentY = y + clientRect.top;
- var normalizedX = void 0;
- var normalizedY = void 0;
- // Determine touch point relative to the ripple container.
- if (ev.type === 'touchstart') {
- normalizedX = ev.changedTouches[0].pageX - documentX;
- normalizedY = ev.changedTouches[0].pageY - documentY;
- } else {
- normalizedX = ev.pageX - documentX;
- normalizedY = ev.pageY - documentY;
- }
- return { x: normalizedX, y: normalizedY };
- }
- /***/ }),
- /***/ 6:
- /***/ (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_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__(8);
- /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__util__ = __webpack_require__(5);
- /* 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; }; }();
- function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
- function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
- function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
- /**
- * 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.
- */
- /**
- * @extends MDCComponent<!MDCRippleFoundation>
- */
- var MDCRipple = function (_MDCComponent) {
- _inherits(MDCRipple, _MDCComponent);
- /** @param {...?} args */
- function MDCRipple() {
- var _ref;
- _classCallCheck(this, MDCRipple);
- 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, [{
- key: 'activate',
- value: function activate() {
- this.foundation_.activate();
- }
- }, {
- key: 'deactivate',
- value: function deactivate() {
- this.foundation_.deactivate();
- }
- }, {
- key: 'layout',
- value: function layout() {
- this.foundation_.layout();
- }
- /** @return {!MDCRippleFoundation} */
- }, {
- key: 'getDefaultFoundation',
- value: function getDefaultFoundation() {
- return new __WEBPACK_IMPORTED_MODULE_2__foundation__["a" /* default */](MDCRipple.createAdapter(this));
- }
- }, {
- key: 'initialSyncWithDOM',
- value: function initialSyncWithDOM() {
- this.unbounded = 'mdcRippleIsUnbounded' in this.root_.dataset;
- }
- }, {
- key: 'unbounded',
- /** @return {boolean} */
- get: function get() {
- return this.unbounded_;
- }
- /** @param {boolean} unbounded */
- ,
- set: function set(unbounded) {
- var UNBOUNDED = __WEBPACK_IMPORTED_MODULE_2__foundation__["a" /* default */].cssClasses.UNBOUNDED;
- this.unbounded_ = Boolean(unbounded);
- if (this.unbounded_) {
- this.root_.classList.add(UNBOUNDED);
- } else {
- this.root_.classList.remove(UNBOUNDED);
- }
- }
- }], [{
- key: 'attachTo',
- value: function attachTo(root) {
- var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
- _ref2$isUnbounded = _ref2.isUnbounded,
- isUnbounded = _ref2$isUnbounded === undefined ? undefined : _ref2$isUnbounded;
- var ripple = new MDCRipple(root);
- // Only override unbounded behavior if option is explicitly specified
- if (isUnbounded !== undefined) {
- ripple.unbounded = /** @type {boolean} */isUnbounded;
- }
- return ripple;
- }
- /**
- * @param {!RippleCapableSurface} instance
- * @return {!MDCRippleAdapter}
- */
- }, {
- key: 'createAdapter',
- value: function createAdapter(instance) {
- var MATCHES = __WEBPACK_IMPORTED_MODULE_3__util__["getMatchesProperty"](HTMLElement.prototype);
- return {
- browserSupportsCssVars: function browserSupportsCssVars() {
- return __WEBPACK_IMPORTED_MODULE_3__util__["supportsCssVariables"](window);
- },
- isUnbounded: function isUnbounded() {
- return instance.unbounded;
- },
- isSurfaceActive: function isSurfaceActive() {
- return instance.root_[MATCHES](':active');
- },
- isSurfaceDisabled: function isSurfaceDisabled() {
- return instance.disabled;
- },
- addClass: function addClass(className) {
- return instance.root_.classList.add(className);
- },
- removeClass: function removeClass(className) {
- return instance.root_.classList.remove(className);
- },
- registerInteractionHandler: function registerInteractionHandler(evtType, handler) {
- 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_3__util__["applyPassive"]());
- },
- registerResizeHandler: function registerResizeHandler(handler) {
- return window.addEventListener('resize', handler);
- },
- deregisterResizeHandler: function deregisterResizeHandler(handler) {
- return window.removeEventListener('resize', handler);
- },
- updateCssVariable: function updateCssVariable(varName, value) {
- return instance.root_.style.setProperty(varName, value);
- },
- computeBoundingRect: function computeBoundingRect() {
- return instance.root_.getBoundingClientRect();
- },
- getWindowPageOffset: function getWindowPageOffset() {
- return { x: window.pageXOffset, y: window.pageYOffset };
- }
- };
- }
- }]);
- return MDCRipple;
- }(__WEBPACK_IMPORTED_MODULE_0__material_base_component__["a" /* default */]);
- /**
- * See Material Design spec for more details on when to use ripples.
- * https://material.io/guidelines/motion/choreography.html#choreography-creation
- * @record
- */
- var RippleCapableSurface = function RippleCapableSurface() {
- _classCallCheck(this, 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;
- /***/ }),
- /***/ 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__, "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.
- */
- 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
- };
- /***/ }),
- /***/ 8:
- /***/ (function(module, __webpack_exports__, __webpack_require__) {
- "use strict";
- /* 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__(5);
- 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; };
- 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"); } }
- function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
- function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
- /**
- * 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.
- */
- /**
- * @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 = {
- mouseup: 'mousedown',
- pointerup: 'pointerdown',
- touchend: 'touchstart',
- keyup: 'keydown',
- blur: 'focus'
- };
- /**
- * @extends {MDCFoundation<!MDCRippleAdapter>}
- */
- var MDCRippleFoundation = function (_MDCFoundation) {
- _inherits(MDCRippleFoundation, _MDCFoundation);
- _createClass(MDCRippleFoundation, [{
- key: 'isSupported_',
- /**
- * 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() {
- return this.adapter_.browserSupportsCssVars();
- }
- }], [{
- key: 'cssClasses',
- get: function get() {
- return __WEBPACK_IMPORTED_MODULE_2__constants__["a" /* cssClasses */];
- }
- }, {
- key: 'strings',
- get: function get() {
- return __WEBPACK_IMPORTED_MODULE_2__constants__["b" /* strings */];
- }
- }, {
- key: 'numbers',
- get: function get() {
- return __WEBPACK_IMPORTED_MODULE_2__constants__["c" /* numbers */];
- }
- }, {
- key: 'defaultAdapter',
- get: function get() {
- return {
- browserSupportsCssVars: function browserSupportsCssVars() /* boolean - cached */{},
- isUnbounded: function isUnbounded() /* boolean */{},
- isSurfaceActive: function isSurfaceActive() /* boolean */{},
- isSurfaceDisabled: function isSurfaceDisabled() /* boolean */{},
- addClass: function addClass() /* className: string */{},
- removeClass: function removeClass() /* className: string */{},
- registerInteractionHandler: function registerInteractionHandler() /* evtType: string, handler: EventListener */{},
- deregisterInteractionHandler: function deregisterInteractionHandler() /* evtType: string, handler: EventListener */{},
- registerResizeHandler: function registerResizeHandler() /* handler: EventListener */{},
- deregisterResizeHandler: function deregisterResizeHandler() /* handler: EventListener */{},
- updateCssVariable: function updateCssVariable() /* varName: string, value: string */{},
- computeBoundingRect: function computeBoundingRect() /* ClientRect */{},
- getWindowPageOffset: function getWindowPageOffset() /* {x: number, y: number} */{}
- };
- }
- }]);
- function MDCRippleFoundation(adapter) {
- _classCallCheck(this, MDCRippleFoundation);
- /** @private {number} */
- var _this = _possibleConstructorReturn(this, (MDCRippleFoundation.__proto__ || Object.getPrototypeOf(MDCRippleFoundation)).call(this, _extends(MDCRippleFoundation.defaultAdapter, adapter)));
- _this.layoutFrame_ = 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_ = {
- activate: function activate(e) {
- return _this.activate_(e);
- },
- deactivate: function deactivate(e) {
- return _this.deactivate_(e);
- },
- focus: function focus() {
- return requestAnimationFrame(function () {
- return _this.adapter_.addClass(MDCRippleFoundation.cssClasses.BG_FOCUSED);
- });
- },
- blur: function blur() {
- return requestAnimationFrame(function () {
- return _this.adapter_.removeClass(MDCRippleFoundation.cssClasses.BG_FOCUSED);
- });
- }
- };
- /** @private {!Function} */
- _this.resizeHandler_ = function () {
- return _this.layout();
- };
- /** @private {!{left: number, top:number}} */
- _this.unboundedCoords_ = {
- left: 0,
- top: 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 () {
- _this.activationAnimationHasEnded_ = true;
- _this.runDeactivationUXLogicIfReady_();
- };
- return _this;
- }
- /**
- * @return {!ActivationStateType}
- */
- _createClass(MDCRippleFoundation, [{
- key: 'defaultActivationState_',
- value: function defaultActivationState_() {
- return {
- isActivated: false,
- hasDeactivationUXRun: false,
- wasActivatedByPointer: false,
- wasElementMadeActive: false,
- activationStartTime: 0,
- activationEvent: null,
- isProgrammatic: false
- };
- }
- }, {
- key: 'init',
- value: function init() {
- var _this2 = this;
- if (!this.isSupported_) {
- return;
- }
- this.addEventListeners_();
- var _MDCRippleFoundation$ = MDCRippleFoundation.cssClasses,
- ROOT = _MDCRippleFoundation$.ROOT,
- UNBOUNDED = _MDCRippleFoundation$.UNBOUNDED;
- requestAnimationFrame(function () {
- _this2.adapter_.addClass(ROOT);
- if (_this2.adapter_.isUnbounded()) {
- _this2.adapter_.addClass(UNBOUNDED);
- }
- _this2.layoutInternal_();
- });
- }
- /** @private */
- }, {
- key: 'addEventListeners_',
- value: function addEventListeners_() {
- var _this3 = this;
- this.listenerInfos_.forEach(function (info) {
- Object.keys(info).forEach(function (k) {
- _this3.adapter_.registerInteractionHandler(info[k], _this3.listeners_[k]);
- });
- });
- this.adapter_.registerResizeHandler(this.resizeHandler_);
- }
- /**
- * @param {Event} e
- * @private
- */
- }, {
- key: 'activate_',
- value: function activate_(e) {
- var _this4 = this;
- if (this.adapter_.isSurfaceDisabled()) {
- return;
- }
- var activationState = this.activationState_;
- if (activationState.isActivated) {
- return;
- }
- activationState.isActivated = true;
- activationState.isProgrammatic = e === null;
- activationState.activationEvent = e;
- activationState.wasActivatedByPointer = activationState.isProgrammatic ? false : e.type === 'mousedown' || e.type === 'touchstart' || e.type === 'pointerdown';
- activationState.activationStartTime = Date.now();
- requestAnimationFrame(function () {
- // This needs to be wrapped in an rAF call b/c web browsers
- // report active states inconsistently when they're called within
- // event handling code:
- // - https://bugs.chromium.org/p/chromium/issues/detail?id=635971
- // - https://bugzilla.mozilla.org/show_bug.cgi?id=1293741
- activationState.wasElementMadeActive = e && e.type === 'keydown' ? _this4.adapter_.isSurfaceActive() : true;
- if (activationState.wasElementMadeActive) {
- _this4.animateActivation_();
- } else {
- // Reset activation state immediately if element was not made active.
- _this4.activationState_ = _this4.defaultActivationState_();
- }
- });
- }
- }, {
- key: 'activate',
- value: function activate() {
- this.activate_(null);
- }
- /** @private */
- }, {
- key: 'animateActivation_',
- value: function animateActivation_() {
- var _this5 = this;
- var _MDCRippleFoundation$2 = MDCRippleFoundation.strings,
- VAR_FG_TRANSLATE_START = _MDCRippleFoundation$2.VAR_FG_TRANSLATE_START,
- VAR_FG_TRANSLATE_END = _MDCRippleFoundation$2.VAR_FG_TRANSLATE_END;
- var _MDCRippleFoundation$3 = MDCRippleFoundation.cssClasses,
- BG_ACTIVE_FILL = _MDCRippleFoundation$3.BG_ACTIVE_FILL,
- FG_DEACTIVATION = _MDCRippleFoundation$3.FG_DEACTIVATION,
- FG_ACTIVATION = _MDCRippleFoundation$3.FG_ACTIVATION;
- var DEACTIVATION_TIMEOUT_MS = MDCRippleFoundation.numbers.DEACTIVATION_TIMEOUT_MS;
- var translateStart = '';
- var translateEnd = '';
- if (!this.adapter_.isUnbounded()) {
- var _getFgTranslationCoor = this.getFgTranslationCoordinates_(),
- startPoint = _getFgTranslationCoor.startPoint,
- endPoint = _getFgTranslationCoor.endPoint;
- translateStart = startPoint.x + 'px, ' + startPoint.y + 'px';
- translateEnd = endPoint.x + 'px, ' + endPoint.y + 'px';
- }
- this.adapter_.updateCssVariable(VAR_FG_TRANSLATE_START, translateStart);
- this.adapter_.updateCssVariable(VAR_FG_TRANSLATE_END, translateEnd);
- // Cancel any ongoing activation/deactivation animations
- clearTimeout(this.activationTimer_);
- clearTimeout(this.fgDeactivationRemovalTimer_);
- this.rmBoundedActivationClasses_();
- this.adapter_.removeClass(FG_DEACTIVATION);
- // Force layout in order to re-trigger the animation.
- this.adapter_.computeBoundingRect();
- this.adapter_.addClass(BG_ACTIVE_FILL);
- this.adapter_.addClass(FG_ACTIVATION);
- this.activationTimer_ = setTimeout(function () {
- return _this5.activationTimerCallback_();
- }, DEACTIVATION_TIMEOUT_MS);
- }
- /**
- * @private
- * @return {{startPoint: PointType, endPoint: PointType}}
- */
- }, {
- key: 'getFgTranslationCoordinates_',
- value: function getFgTranslationCoordinates_() {
- var activationState = this.activationState_;
- var activationEvent = activationState.activationEvent,
- wasActivatedByPointer = activationState.wasActivatedByPointer;
- var startPoint = void 0;
- if (wasActivatedByPointer) {
- startPoint = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__util__["getNormalizedEventCoords"])(
- /** @type {!Event} */activationEvent, this.adapter_.getWindowPageOffset(), this.adapter_.computeBoundingRect());
- } else {
- startPoint = {
- x: this.frame_.width / 2,
- y: this.frame_.height / 2
- };
- }
- // Center the element around the start point.
- startPoint = {
- x: startPoint.x - this.initialSize_ / 2,
- y: startPoint.y - this.initialSize_ / 2
- };
- var endPoint = {
- x: this.frame_.width / 2 - this.initialSize_ / 2,
- y: this.frame_.height / 2 - this.initialSize_ / 2
- };
- return { startPoint: startPoint, endPoint: endPoint };
- }
- /** @private */
- }, {
- key: 'runDeactivationUXLogicIfReady_',
- value: function runDeactivationUXLogicIfReady_() {
- var _this6 = this;
- var FG_DEACTIVATION = MDCRippleFoundation.cssClasses.FG_DEACTIVATION;
- var _activationState_ = this.activationState_,
- hasDeactivationUXRun = _activationState_.hasDeactivationUXRun,
- isActivated = _activationState_.isActivated;
- var activationHasEnded = hasDeactivationUXRun || !isActivated;
- if (activationHasEnded && this.activationAnimationHasEnded_) {
- this.rmBoundedActivationClasses_();
- this.adapter_.addClass(FG_DEACTIVATION);
- this.fgDeactivationRemovalTimer_ = setTimeout(function () {
- _this6.adapter_.removeClass(FG_DEACTIVATION);
- }, __WEBPACK_IMPORTED_MODULE_2__constants__["c" /* numbers */].FG_DEACTIVATION_MS);
- }
- }
- /** @private */
- }, {
- key: 'rmBoundedActivationClasses_',
- value: function rmBoundedActivationClasses_() {
- var _MDCRippleFoundation$4 = MDCRippleFoundation.cssClasses,
- BG_ACTIVE_FILL = _MDCRippleFoundation$4.BG_ACTIVE_FILL,
- FG_ACTIVATION = _MDCRippleFoundation$4.FG_ACTIVATION;
- this.adapter_.removeClass(BG_ACTIVE_FILL);
- this.adapter_.removeClass(FG_ACTIVATION);
- this.activationAnimationHasEnded_ = false;
- this.adapter_.computeBoundingRect();
- }
- /**
- * @param {Event} e
- * @private
- */
- }, {
- key: 'deactivate_',
- value: function deactivate_(e) {
- var _this7 = this;
- var activationState = this.activationState_;
- // This can happen in scenarios such as when you have a keyup event that blurs the element.
- if (!activationState.isActivated) {
- return;
- }
- // Programmatic deactivation.
- if (activationState.isProgrammatic) {
- var evtObject = null;
- var _state = /** @type {!ActivationStateType} */_extends({}, activationState);
- requestAnimationFrame(function () {
- return _this7.animateDeactivation_(evtObject, _state);
- });
- this.activationState_ = this.defaultActivationState_();
- return;
- }
- var actualActivationType = DEACTIVATION_ACTIVATION_PAIRS[e.type];
- var expectedActivationType = activationState.activationEvent.type;
- // NOTE: Pointer events are tricky - https://patrickhlauke.github.io/touch/tests/results/
- // Essentially, what we need to do here is decouple the deactivation UX from the actual
- // deactivation state itself. This way, touch/pointer events in sequence do not trample one
- // another.
- var needsDeactivationUX = actualActivationType === expectedActivationType;
- var needsActualDeactivation = needsDeactivationUX;
- if (activationState.wasActivatedByPointer) {
- needsActualDeactivation = e.type === 'mouseup';
- }
- var state = /** @type {!ActivationStateType} */_extends({}, activationState);
- requestAnimationFrame(function () {
- if (needsDeactivationUX) {
- _this7.activationState_.hasDeactivationUXRun = true;
- _this7.animateDeactivation_(e, state);
- }
- if (needsActualDeactivation) {
- _this7.activationState_ = _this7.defaultActivationState_();
- }
- });
- }
- }, {
- key: 'deactivate',
- value: function deactivate() {
- this.deactivate_(null);
- }
- /**
- * @param {Event} e
- * @param {!ActivationStateType} options
- * @private
- */
- }, {
- key: 'animateDeactivation_',
- value: function animateDeactivation_(e, _ref) {
- var wasActivatedByPointer = _ref.wasActivatedByPointer,
- wasElementMadeActive = _ref.wasElementMadeActive;
- var BG_FOCUSED = MDCRippleFoundation.cssClasses.BG_FOCUSED;
- if (wasActivatedByPointer || wasElementMadeActive) {
- // Remove class left over by element being focused
- this.adapter_.removeClass(BG_FOCUSED);
- this.runDeactivationUXLogicIfReady_();
- }
- }
- }, {
- key: 'destroy',
- value: function destroy() {
- var _this8 = this;
- if (!this.isSupported_) {
- return;
- }
- this.removeEventListeners_();
- var _MDCRippleFoundation$5 = MDCRippleFoundation.cssClasses,
- ROOT = _MDCRippleFoundation$5.ROOT,
- UNBOUNDED = _MDCRippleFoundation$5.UNBOUNDED;
- requestAnimationFrame(function () {
- _this8.adapter_.removeClass(ROOT);
- _this8.adapter_.removeClass(UNBOUNDED);
- _this8.removeCssVars_();
- });
- }
- /** @private */
- }, {
- key: 'removeEventListeners_',
- value: function removeEventListeners_() {
- var _this9 = this;
- this.listenerInfos_.forEach(function (info) {
- Object.keys(info).forEach(function (k) {
- _this9.adapter_.deregisterInteractionHandler(info[k], _this9.listeners_[k]);
- });
- });
- this.adapter_.deregisterResizeHandler(this.resizeHandler_);
- }
- /** @private */
- }, {
- key: 'removeCssVars_',
- value: function removeCssVars_() {
- var _this10 = this;
- var strings = MDCRippleFoundation.strings;
- Object.keys(strings).forEach(function (k) {
- if (k.indexOf('VAR_') === 0) {
- _this10.adapter_.updateCssVariable(strings[k], null);
- }
- });
- }
- }, {
- key: 'layout',
- value: function layout() {
- var _this11 = this;
- if (this.layoutFrame_) {
- cancelAnimationFrame(this.layoutFrame_);
- }
- this.layoutFrame_ = requestAnimationFrame(function () {
- _this11.layoutInternal_();
- _this11.layoutFrame_ = 0;
- });
- }
- /** @private */
- }, {
- key: 'layoutInternal_',
- value: function layoutInternal_() {
- this.frame_ = this.adapter_.computeBoundingRect();
- var maxDim = Math.max(this.frame_.height, this.frame_.width);
- var surfaceDiameter = Math.sqrt(Math.pow(this.frame_.width, 2) + Math.pow(this.frame_.height, 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);
- this.updateLayoutCssVars_();
- }
- /** @private */
- }, {
- key: 'updateLayoutCssVars_',
- value: function updateLayoutCssVars_() {
- var _MDCRippleFoundation$6 = MDCRippleFoundation.strings,
- VAR_SURFACE_WIDTH = _MDCRippleFoundation$6.VAR_SURFACE_WIDTH,
- VAR_SURFACE_HEIGHT = _MDCRippleFoundation$6.VAR_SURFACE_HEIGHT,
- VAR_FG_SIZE = _MDCRippleFoundation$6.VAR_FG_SIZE,
- VAR_LEFT = _MDCRippleFoundation$6.VAR_LEFT,
- VAR_TOP = _MDCRippleFoundation$6.VAR_TOP,
- VAR_FG_SCALE = _MDCRippleFoundation$6.VAR_FG_SCALE;
- this.adapter_.updateCssVariable(VAR_SURFACE_WIDTH, this.frame_.width + 'px');
- this.adapter_.updateCssVariable(VAR_SURFACE_HEIGHT, this.frame_.height + 'px');
- this.adapter_.updateCssVariable(VAR_FG_SIZE, this.initialSize_ + 'px');
- this.adapter_.updateCssVariable(VAR_FG_SCALE, this.fgScale_);
- if (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(VAR_LEFT, this.unboundedCoords_.left + 'px');
- this.adapter_.updateCssVariable(VAR_TOP, this.unboundedCoords_.top + 'px');
- }
- }
- }]);
- return MDCRippleFoundation;
- }(__WEBPACK_IMPORTED_MODULE_0__material_base_foundation__["a" /* default */]);
- /* harmony default export */ __webpack_exports__["a"] = (MDCRippleFoundation);
- /***/ }),
- /***/ 93:
- /***/ (function(module, exports, __webpack_require__) {
- module.exports = __webpack_require__(6);
- /***/ })
- /******/ });
- });
|