Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /******/ (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;
- /******/
- /******/ // 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 = "";
- /******/
- /******/ // Load entry module and return exports
- /******/ return __webpack_require__(__webpack_require__.s = 3);
- /******/ })
- /************************************************************************/
- /******/ ([
- /* 0 */
- /***/ (function(module, exports, __webpack_require__) {
- "use strict";
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
- 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"); } }
- /**
- * @license
- * Copyright 2016 Google Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
- /**
- * @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;
- }();
- exports.default = MDCFoundation;
- /***/ }),
- /* 1 */
- /***/ (function(module, exports, __webpack_require__) {
- "use strict";
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
- 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"); } }
- /**
- * @license
- * Copyright 2016 Google Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
- /* 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/code/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 {!EventTarget} target */
- }, {
- key: "containsEventTarget",
- value: function containsEventTarget(target) {}
- /**
- * @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 {string} evtType
- * @param {!Function} handler
- */
- }, {
- key: "registerDocumentInteractionHandler",
- value: function registerDocumentInteractionHandler(evtType, handler) {}
- /**
- * @param {string} evtType
- * @param {!Function} handler
- */
- }, {
- key: "deregisterDocumentInteractionHandler",
- value: function deregisterDocumentInteractionHandler(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;
- }();
- exports.default = MDCRippleAdapter;
- /***/ }),
- /* 2 */
- /***/ (function(module, exports, __webpack_require__) {
- "use strict";
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
- /**
- * @license
- * Copyright 2016 Google Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
- /**
- * 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 node = document.createElement('div');
- node.className = 'mdc-ripple-surface--test-edge-var-bug';
- document.body.appendChild(node);
- // The bug exists if ::before style ends up propagating to the parent element.
- // Additionally, getComputedStyle returns null in iframes with display: "none" in Firefox,
- // but Firefox is known to support CSS custom properties correctly.
- // See: https://bugzilla.mozilla.org/show_bug.cgi?id=548397
- var computedStyle = windowObj.getComputedStyle(node);
- var hasPseudoVarBug = computedStyle !== null && computedStyle.borderTopStyle === 'solid';
- node.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;
- var supportsCssVariables = supportsCssVariables_;
- 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;
- }
- if (!forceRefresh) {
- supportsCssVariables_ = supportsCssVariables;
- }
- return supportsCssVariables;
- }
- //
- /**
- * Determine whether the current browser supports passive event listeners, and if so, use them.
- * @param {!Window=} globalObj
- * @param {boolean=} forceRefresh
- * @return {boolean|!EventListenerOptions}
- */
- 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;
- return isSupported;
- } });
- } catch (e) {}
- supportsPassive_ = isSupported;
- }
- return supportsPassive_ ? /** @type {!EventListenerOptions} */{ passive: true } : false;
- }
- /**
- * @param {!Object} HTMLElementPrototype
- * @return {string}
- */
- function getMatchesProperty(HTMLElementPrototype) {
- /**
- * Order is important because we return the first existing method we find.
- * Do not change the order of the items in the below array.
- */
- var matchesMethods = ['matches', 'webkitMatchesSelector', 'msMatchesSelector'];
- var method = 'matches';
- for (var i = 0; i < matchesMethods.length; i++) {
- var matchesMethod = matchesMethods[i];
- if (matchesMethod in HTMLElementPrototype) {
- method = matchesMethod;
- break;
- }
- }
- return method;
- }
- /**
- * @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') {
- ev = /** @type {!TouchEvent} */ev;
- normalizedX = ev.changedTouches[0].pageX - documentX;
- normalizedY = ev.changedTouches[0].pageY - documentY;
- } else {
- ev = /** @type {!MouseEvent} */ev;
- normalizedX = ev.pageX - documentX;
- normalizedY = ev.pageY - documentY;
- }
- return { x: normalizedX, y: normalizedY };
- }
- exports.supportsCssVariables = supportsCssVariables;
- exports.applyPassive = applyPassive;
- exports.getMatchesProperty = getMatchesProperty;
- exports.getNormalizedEventCoords = getNormalizedEventCoords;
- /***/ }),
- /* 3 */
- /***/ (function(module, exports, __webpack_require__) {
- __webpack_require__(4);
- module.exports = __webpack_require__(5);
- /***/ }),
- /* 4 */
- /***/ (function(module, exports, __webpack_require__) {
- module.exports = __webpack_require__.p + "bundle.css";
- /***/ }),
- /* 5 */
- /***/ (function(module, exports, __webpack_require__) {
- "use strict";
- var _ripple = __webpack_require__(6);
- var ripple = new _ripple.MDCRipple(document.querySelector('.foo-button'));
- /***/ }),
- /* 6 */
- /***/ (function(module, exports, __webpack_require__) {
- "use strict";
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
- exports.util = exports.RippleCapableSurface = exports.MDCRippleFoundation = exports.MDCRipple = undefined;
- 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; }; }();
- var _component = __webpack_require__(7);
- var _component2 = _interopRequireDefault(_component);
- var _adapter = __webpack_require__(1);
- var _adapter2 = _interopRequireDefault(_adapter);
- var _foundation = __webpack_require__(8);
- var _foundation2 = _interopRequireDefault(_foundation);
- var _util = __webpack_require__(2);
- var util = _interopRequireWildcard(_util);
- function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
- 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; } /**
- * @license
- * Copyright 2016 Google Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
- /**
- * @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: 'setUnbounded_',
- /**
- * Closure Compiler throws an access control error when directly accessing a
- * protected or private property inside a getter/setter, like unbounded above.
- * By accessing the protected property inside a method, we solve that problem.
- * That's why this function exists.
- * @private
- */
- value: function setUnbounded_() {
- this.foundation_.setUnbounded(this.unbounded_);
- }
- }, {
- 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}
- * @override
- */
- }, {
- key: 'getDefaultFoundation',
- value: function getDefaultFoundation() {
- return new _foundation2.default(MDCRipple.createAdapter(this));
- }
- /** @override */
- }, {
- 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) {
- this.unbounded_ = Boolean(unbounded);
- this.setUnbounded_();
- }
- }], [{
- 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 = util.getMatchesProperty(HTMLElement.prototype);
- return {
- browserSupportsCssVars: function browserSupportsCssVars() {
- return 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);
- },
- containsEventTarget: function containsEventTarget(target) {
- return instance.root_.contains(target);
- },
- registerInteractionHandler: function registerInteractionHandler(evtType, handler) {
- return instance.root_.addEventListener(evtType, handler, util.applyPassive());
- },
- deregisterInteractionHandler: function deregisterInteractionHandler(evtType, handler) {
- return instance.root_.removeEventListener(evtType, handler, util.applyPassive());
- },
- registerDocumentInteractionHandler: function registerDocumentInteractionHandler(evtType, handler) {
- return document.documentElement.addEventListener(evtType, handler, util.applyPassive());
- },
- deregisterDocumentInteractionHandler: function deregisterDocumentInteractionHandler(evtType, handler) {
- return document.documentElement.removeEventListener(evtType, handler, 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;
- }(_component2.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;
- exports.MDCRipple = MDCRipple;
- exports.MDCRippleFoundation = _foundation2.default;
- exports.RippleCapableSurface = RippleCapableSurface;
- exports.util = util;
- /***/ }),
- /* 7 */
- /***/ (function(module, exports, __webpack_require__) {
- "use strict";
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
- 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; }; }(); /**
- * @license
- * Copyright 2016 Google Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
- var _foundation = __webpack_require__(0);
- var _foundation2 = _interopRequireDefault(_foundation);
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
- function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
- /**
- * @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 _foundation2.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;
- }();
- exports.default = MDCComponent;
- /***/ }),
- /* 8 */
- /***/ (function(module, exports, __webpack_require__) {
- "use strict";
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
- 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; }; }();
- var _foundation = __webpack_require__(0);
- var _foundation2 = _interopRequireDefault(_foundation);
- var _adapter = __webpack_require__(1);
- var _adapter2 = _interopRequireDefault(_adapter);
- var _constants = __webpack_require__(9);
- var _util = __webpack_require__(2);
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
- 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; } /**
- * @license
- * Copyright 2016 Google Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
- /**
- * @typedef {{
- * isActivated: (boolean|undefined),
- * hasDeactivationUXRun: (boolean|undefined),
- * wasActivatedByPointer: (boolean|undefined),
- * wasElementMadeActive: (boolean|undefined),
- * activationEvent: (!Event|undefined),
- * 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;
- // Activation events registered on the root element of each instance for activation
- var ACTIVATION_EVENT_TYPES = ['touchstart', 'pointerdown', 'mousedown', 'keydown'];
- // Deactivation events registered on documentElement when a pointer-related down event occurs
- var POINTER_DEACTIVATION_EVENT_TYPES = ['touchend', 'pointerup', 'mouseup'];
- // Tracks activations that have occurred on the current frame, to avoid simultaneous nested activations
- /** @type {!Array<!EventTarget>} */
- var activatedTargets = [];
- /**
- * @extends {MDCFoundation<!MDCRippleAdapter>}
- */
- var MDCRippleFoundation = function (_MDCFoundation) {
- _inherits(MDCRippleFoundation, _MDCFoundation);
- _createClass(MDCRippleFoundation, null, [{
- key: 'cssClasses',
- get: function get() {
- return _constants.cssClasses;
- }
- }, {
- key: 'strings',
- get: function get() {
- return _constants.strings;
- }
- }, {
- key: 'numbers',
- get: function get() {
- return _constants.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 */{},
- containsEventTarget: function containsEventTarget() /* target: !EventTarget */{},
- registerInteractionHandler: function registerInteractionHandler() /* evtType: string, handler: EventListener */{},
- deregisterInteractionHandler: function deregisterInteractionHandler() /* evtType: string, handler: EventListener */{},
- registerDocumentInteractionHandler: function registerDocumentInteractionHandler() /* evtType: string, handler: EventListener */{},
- deregisterDocumentInteractionHandler: function deregisterDocumentInteractionHandler() /* 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, Object.assign(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.initialSize_ = 0;
- /** @private {number} */
- _this.maxRadius_ = 0;
- /** @private {function(!Event)} */
- _this.activateHandler_ = function (e) {
- return _this.activate_(e);
- };
- /** @private {function(!Event=)} */
- _this.deactivateHandler_ = function () {
- return _this.deactivate_();
- };
- /** @private {function(!Event=)} */
- _this.focusHandler_ = function () {
- return _this.handleFocus();
- };
- /** @private {function(!Event=)} */
- _this.blurHandler_ = function () {
- return _this.handleBlur();
- };
- /** @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_();
- };
- /** @private {!Event|undefined} */
- _this.previousActivationEvent_;
- return _this;
- }
- /**
- * 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}
- * @private
- */
- _createClass(MDCRippleFoundation, [{
- key: 'supportsPressRipple_',
- value: function supportsPressRipple_() {
- return this.adapter_.browserSupportsCssVars();
- }
- /**
- * @return {!ActivationStateType}
- */
- }, {
- key: 'defaultActivationState_',
- value: function defaultActivationState_() {
- return {
- isActivated: false,
- hasDeactivationUXRun: false,
- wasActivatedByPointer: false,
- wasElementMadeActive: false,
- activationEvent: undefined,
- isProgrammatic: false
- };
- }
- /** @override */
- }, {
- key: 'init',
- value: function init() {
- var _this2 = this;
- var supportsPressRipple = this.supportsPressRipple_();
- this.registerRootHandlers_(supportsPressRipple);
- if (supportsPressRipple) {
- var _MDCRippleFoundation$ = MDCRippleFoundation.cssClasses,
- ROOT = _MDCRippleFoundation$.ROOT,
- UNBOUNDED = _MDCRippleFoundation$.UNBOUNDED;
- requestAnimationFrame(function () {
- _this2.adapter_.addClass(ROOT);
- if (_this2.adapter_.isUnbounded()) {
- _this2.adapter_.addClass(UNBOUNDED);
- // Unbounded ripples need layout logic applied immediately to set coordinates for both shade and ripple
- _this2.layoutInternal_();
- }
- });
- }
- }
- /** @override */
- }, {
- key: 'destroy',
- value: function destroy() {
- var _this3 = this;
- if (this.supportsPressRipple_()) {
- if (this.activationTimer_) {
- clearTimeout(this.activationTimer_);
- this.activationTimer_ = 0;
- this.adapter_.removeClass(MDCRippleFoundation.cssClasses.FG_ACTIVATION);
- }
- if (this.fgDeactivationRemovalTimer_) {
- clearTimeout(this.fgDeactivationRemovalTimer_);
- this.fgDeactivationRemovalTimer_ = 0;
- this.adapter_.removeClass(MDCRippleFoundation.cssClasses.FG_DEACTIVATION);
- }
- var _MDCRippleFoundation$2 = MDCRippleFoundation.cssClasses,
- ROOT = _MDCRippleFoundation$2.ROOT,
- UNBOUNDED = _MDCRippleFoundation$2.UNBOUNDED;
- requestAnimationFrame(function () {
- _this3.adapter_.removeClass(ROOT);
- _this3.adapter_.removeClass(UNBOUNDED);
- _this3.removeCssVars_();
- });
- }
- this.deregisterRootHandlers_();
- this.deregisterDeactivationHandlers_();
- }
- /**
- * @param {boolean} supportsPressRipple Passed from init to save a redundant function call
- * @private
- */
- }, {
- key: 'registerRootHandlers_',
- value: function registerRootHandlers_(supportsPressRipple) {
- var _this4 = this;
- if (supportsPressRipple) {
- ACTIVATION_EVENT_TYPES.forEach(function (type) {
- _this4.adapter_.registerInteractionHandler(type, _this4.activateHandler_);
- });
- if (this.adapter_.isUnbounded()) {
- this.adapter_.registerResizeHandler(this.resizeHandler_);
- }
- }
- this.adapter_.registerInteractionHandler('focus', this.focusHandler_);
- this.adapter_.registerInteractionHandler('blur', this.blurHandler_);
- }
- /**
- * @param {!Event} e
- * @private
- */
- }, {
- key: 'registerDeactivationHandlers_',
- value: function registerDeactivationHandlers_(e) {
- var _this5 = this;
- if (e.type === 'keydown') {
- this.adapter_.registerInteractionHandler('keyup', this.deactivateHandler_);
- } else {
- POINTER_DEACTIVATION_EVENT_TYPES.forEach(function (type) {
- _this5.adapter_.registerDocumentInteractionHandler(type, _this5.deactivateHandler_);
- });
- }
- }
- /** @private */
- }, {
- key: 'deregisterRootHandlers_',
- value: function deregisterRootHandlers_() {
- var _this6 = this;
- ACTIVATION_EVENT_TYPES.forEach(function (type) {
- _this6.adapter_.deregisterInteractionHandler(type, _this6.activateHandler_);
- });
- this.adapter_.deregisterInteractionHandler('focus', this.focusHandler_);
- this.adapter_.deregisterInteractionHandler('blur', this.blurHandler_);
- if (this.adapter_.isUnbounded()) {
- this.adapter_.deregisterResizeHandler(this.resizeHandler_);
- }
- }
- /** @private */
- }, {
- key: 'deregisterDeactivationHandlers_',
- value: function deregisterDeactivationHandlers_() {
- var _this7 = this;
- this.adapter_.deregisterInteractionHandler('keyup', this.deactivateHandler_);
- POINTER_DEACTIVATION_EVENT_TYPES.forEach(function (type) {
- _this7.adapter_.deregisterDocumentInteractionHandler(type, _this7.deactivateHandler_);
- });
- }
- /** @private */
- }, {
- key: 'removeCssVars_',
- value: function removeCssVars_() {
- var _this8 = this;
- var strings = MDCRippleFoundation.strings;
- Object.keys(strings).forEach(function (k) {
- if (k.indexOf('VAR_') === 0) {
- _this8.adapter_.updateCssVariable(strings[k], null);
- }
- });
- }
- /**
- * @param {!Event=} e
- * @private
- */
- }, {
- key: 'activate_',
- value: function activate_(e) {
- var _this9 = this;
- if (this.adapter_.isSurfaceDisabled()) {
- return;
- }
- var activationState = this.activationState_;
- if (activationState.isActivated) {
- return;
- }
- // Avoid reacting to follow-on events fired by touch device after an already-processed user interaction
- var previousActivationEvent = this.previousActivationEvent_;
- var isSameInteraction = previousActivationEvent && e !== undefined && previousActivationEvent.type !== e.type;
- if (isSameInteraction) {
- return;
- }
- activationState.isActivated = true;
- activationState.isProgrammatic = e === undefined;
- activationState.activationEvent = e;
- activationState.wasActivatedByPointer = activationState.isProgrammatic ? false : e !== undefined && (e.type === 'mousedown' || e.type === 'touchstart' || e.type === 'pointerdown');
- var hasActivatedChild = e !== undefined && activatedTargets.length > 0 && activatedTargets.some(function (target) {
- return _this9.adapter_.containsEventTarget(target);
- });
- if (hasActivatedChild) {
- // Immediately reset activation state, while preserving logic that prevents touch follow-on events
- this.resetActivationState_();
- return;
- }
- if (e !== undefined) {
- activatedTargets.push( /** @type {!EventTarget} */e.target);
- this.registerDeactivationHandlers_(e);
- }
- activationState.wasElementMadeActive = this.checkElementMadeActive_(e);
- if (activationState.wasElementMadeActive) {
- this.animateActivation_();
- }
- requestAnimationFrame(function () {
- // Reset array on next frame after the current event has had a chance to bubble to prevent ancestor ripples
- activatedTargets = [];
- if (!activationState.wasElementMadeActive && e !== undefined && (e.key === ' ' || e.keyCode === 32)) {
- // If space was pressed, try again within an rAF call to detect :active, because different UAs 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
- // We try first outside rAF to support Edge, which does not exhibit this problem, but will crash if a CSS
- // variable is set within a rAF callback for a submit button interaction (#2241).
- activationState.wasElementMadeActive = _this9.checkElementMadeActive_(e);
- if (activationState.wasElementMadeActive) {
- _this9.animateActivation_();
- }
- }
- if (!activationState.wasElementMadeActive) {
- // Reset activation state immediately if element was not made active.
- _this9.activationState_ = _this9.defaultActivationState_();
- }
- });
- }
- /**
- * @param {!Event=} e
- * @private
- */
- }, {
- key: 'checkElementMadeActive_',
- value: function checkElementMadeActive_(e) {
- return e !== undefined && e.type === 'keydown' ? this.adapter_.isSurfaceActive() : true;
- }
- /**
- * @param {!Event=} event Optional event containing position information.
- */
- }, {
- key: 'activate',
- value: function activate(event) {
- this.activate_(event);
- }
- /** @private */
- }, {
- key: 'animateActivation_',
- value: function animateActivation_() {
- var _this10 = this;
- var _MDCRippleFoundation$3 = MDCRippleFoundation.strings,
- VAR_FG_TRANSLATE_START = _MDCRippleFoundation$3.VAR_FG_TRANSLATE_START,
- VAR_FG_TRANSLATE_END = _MDCRippleFoundation$3.VAR_FG_TRANSLATE_END;
- var _MDCRippleFoundation$4 = MDCRippleFoundation.cssClasses,
- FG_DEACTIVATION = _MDCRippleFoundation$4.FG_DEACTIVATION,
- FG_ACTIVATION = _MDCRippleFoundation$4.FG_ACTIVATION;
- var DEACTIVATION_TIMEOUT_MS = MDCRippleFoundation.numbers.DEACTIVATION_TIMEOUT_MS;
- this.layoutInternal_();
- 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(FG_ACTIVATION);
- this.activationTimer_ = setTimeout(function () {
- return _this10.activationTimerCallback_();
- }, DEACTIVATION_TIMEOUT_MS);
- }
- /**
- * @private
- * @return {{startPoint: PointType, endPoint: PointType}}
- */
- }, {
- key: 'getFgTranslationCoordinates_',
- value: function getFgTranslationCoordinates_() {
- var _activationState_ = this.activationState_,
- activationEvent = _activationState_.activationEvent,
- wasActivatedByPointer = _activationState_.wasActivatedByPointer;
- var startPoint = void 0;
- if (wasActivatedByPointer) {
- startPoint = (0, _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 _this11 = this;
- // This method is called both when a pointing device is released, and when the activation animation ends.
- // The deactivation animation should only run after both of those occur.
- var FG_DEACTIVATION = MDCRippleFoundation.cssClasses.FG_DEACTIVATION;
- var _activationState_2 = this.activationState_,
- hasDeactivationUXRun = _activationState_2.hasDeactivationUXRun,
- isActivated = _activationState_2.isActivated;
- var activationHasEnded = hasDeactivationUXRun || !isActivated;
- if (activationHasEnded && this.activationAnimationHasEnded_) {
- this.rmBoundedActivationClasses_();
- this.adapter_.addClass(FG_DEACTIVATION);
- this.fgDeactivationRemovalTimer_ = setTimeout(function () {
- _this11.adapter_.removeClass(FG_DEACTIVATION);
- }, _constants.numbers.FG_DEACTIVATION_MS);
- }
- }
- /** @private */
- }, {
- key: 'rmBoundedActivationClasses_',
- value: function rmBoundedActivationClasses_() {
- var FG_ACTIVATION = MDCRippleFoundation.cssClasses.FG_ACTIVATION;
- this.adapter_.removeClass(FG_ACTIVATION);
- this.activationAnimationHasEnded_ = false;
- this.adapter_.computeBoundingRect();
- }
- }, {
- key: 'resetActivationState_',
- value: function resetActivationState_() {
- var _this12 = this;
- this.previousActivationEvent_ = this.activationState_.activationEvent;
- this.activationState_ = this.defaultActivationState_();
- // Touch devices may fire additional events for the same interaction within a short time.
- // Store the previous event until it's safe to assume that subsequent events are for new interactions.
- setTimeout(function () {
- return _this12.previousActivationEvent_ = undefined;
- }, MDCRippleFoundation.numbers.TAP_DELAY_MS);
- }
- /**
- * @private
- */
- }, {
- key: 'deactivate_',
- value: function deactivate_() {
- var _this13 = 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;
- }
- var state = /** @type {!ActivationStateType} */Object.assign({}, activationState);
- if (activationState.isProgrammatic) {
- requestAnimationFrame(function () {
- return _this13.animateDeactivation_(state);
- });
- this.resetActivationState_();
- } else {
- this.deregisterDeactivationHandlers_();
- requestAnimationFrame(function () {
- _this13.activationState_.hasDeactivationUXRun = true;
- _this13.animateDeactivation_(state);
- _this13.resetActivationState_();
- });
- }
- }
- }, {
- key: 'deactivate',
- value: function deactivate() {
- this.deactivate_();
- }
- /**
- * @param {!ActivationStateType} options
- * @private
- */
- }, {
- key: 'animateDeactivation_',
- value: function animateDeactivation_(_ref) {
- var wasActivatedByPointer = _ref.wasActivatedByPointer,
- wasElementMadeActive = _ref.wasElementMadeActive;
- if (wasActivatedByPointer || wasElementMadeActive) {
- this.runDeactivationUXLogicIfReady_();
- }
- }
- }, {
- key: 'layout',
- value: function layout() {
- var _this14 = this;
- if (this.layoutFrame_) {
- cancelAnimationFrame(this.layoutFrame_);
- }
- this.layoutFrame_ = requestAnimationFrame(function () {
- _this14.layoutInternal_();
- _this14.layoutFrame_ = 0;
- });
- }
- /** @private */
- }, {
- key: 'layoutInternal_',
- value: function layoutInternal_() {
- var _this15 = this;
- this.frame_ = this.adapter_.computeBoundingRect();
- var maxDim = Math.max(this.frame_.height, this.frame_.width);
- // Surface diameter is treated differently for unbounded vs. bounded ripples.
- // Unbounded ripple diameter is calculated smaller since the surface is expected to already be padded appropriately
- // to extend the hitbox, and the ripple is expected to meet the edges of the padded hitbox (which is typically
- // square). Bounded ripples, on the other hand, are fully expected to expand beyond the surface's longest diameter
- // (calculated based on the diagonal plus a constant padding), and are clipped at the surface's border via
- // `overflow: hidden`.
- var getBoundedRadius = function getBoundedRadius() {
- var hypotenuse = Math.sqrt(Math.pow(_this15.frame_.width, 2) + Math.pow(_this15.frame_.height, 2));
- return hypotenuse + MDCRippleFoundation.numbers.PADDING;
- };
- this.maxRadius_ = this.adapter_.isUnbounded() ? maxDim : getBoundedRadius();
- // Ripple is sized as a fraction of the largest dimension of the surface, then scales up using a CSS scale transform
- this.initialSize_ = Math.floor(maxDim * MDCRippleFoundation.numbers.INITIAL_ORIGIN_SCALE);
- this.fgScale_ = this.maxRadius_ / this.initialSize_;
- this.updateLayoutCssVars_();
- }
- /** @private */
- }, {
- key: 'updateLayoutCssVars_',
- value: function updateLayoutCssVars_() {
- var _MDCRippleFoundation$5 = MDCRippleFoundation.strings,
- VAR_FG_SIZE = _MDCRippleFoundation$5.VAR_FG_SIZE,
- VAR_LEFT = _MDCRippleFoundation$5.VAR_LEFT,
- VAR_TOP = _MDCRippleFoundation$5.VAR_TOP,
- VAR_FG_SCALE = _MDCRippleFoundation$5.VAR_FG_SCALE;
- 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');
- }
- }
- /** @param {boolean} unbounded */
- }, {
- key: 'setUnbounded',
- value: function setUnbounded(unbounded) {
- var UNBOUNDED = MDCRippleFoundation.cssClasses.UNBOUNDED;
- if (unbounded) {
- this.adapter_.addClass(UNBOUNDED);
- } else {
- this.adapter_.removeClass(UNBOUNDED);
- }
- }
- }, {
- key: 'handleFocus',
- value: function handleFocus() {
- var _this16 = this;
- requestAnimationFrame(function () {
- return _this16.adapter_.addClass(MDCRippleFoundation.cssClasses.BG_FOCUSED);
- });
- }
- }, {
- key: 'handleBlur',
- value: function handleBlur() {
- var _this17 = this;
- requestAnimationFrame(function () {
- return _this17.adapter_.removeClass(MDCRippleFoundation.cssClasses.BG_FOCUSED);
- });
- }
- }]);
- return MDCRippleFoundation;
- }(_foundation2.default);
- exports.default = MDCRippleFoundation;
- /***/ }),
- /* 9 */
- /***/ (function(module, exports, __webpack_require__) {
- "use strict";
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
- /**
- * @license
- * Copyright 2016 Google Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
- 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',
- FG_ACTIVATION: 'mdc-ripple-upgraded--foreground-activation',
- FG_DEACTIVATION: 'mdc-ripple-upgraded--foreground-deactivation'
- };
- var strings = {
- VAR_LEFT: '--mdc-ripple-left',
- VAR_TOP: '--mdc-ripple-top',
- VAR_FG_SIZE: '--mdc-ripple-fg-size',
- 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: 225, // Corresponds to $mdc-ripple-translate-duration (i.e. activation animation duration)
- FG_DEACTIVATION_MS: 150, // Corresponds to $mdc-ripple-fade-out-duration (i.e. deactivation animation duration)
- TAP_DELAY_MS: 300 // Delay between touch and simulated mouse events on touch devices
- };
- exports.cssClasses = cssClasses;
- exports.strings = strings;
- exports.numbers = numbers;
- /***/ })
- /******/ ]);
Advertisement
Add Comment
Please, Sign In to add comment