mdc.ripple.js 55 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607
  1. /*!
  2. Material Components for the web
  3. Copyright (c) 2017 Google Inc.
  4. License: Apache-2.0
  5. */
  6. (function webpackUniversalModuleDefinition(root, factory) {
  7. if(typeof exports === 'object' && typeof module === 'object')
  8. module.exports = factory();
  9. else if(typeof define === 'function' && define.amd)
  10. define([], factory);
  11. else if(typeof exports === 'object')
  12. exports["ripple"] = factory();
  13. else
  14. root["mdc"] = root["mdc"] || {}, root["mdc"]["ripple"] = factory();
  15. })(this, function() {
  16. return /******/ (function(modules) { // webpackBootstrap
  17. /******/ // The module cache
  18. /******/ var installedModules = {};
  19. /******/
  20. /******/ // The require function
  21. /******/ function __webpack_require__(moduleId) {
  22. /******/
  23. /******/ // Check if module is in cache
  24. /******/ if(installedModules[moduleId]) {
  25. /******/ return installedModules[moduleId].exports;
  26. /******/ }
  27. /******/ // Create a new module (and put it into the cache)
  28. /******/ var module = installedModules[moduleId] = {
  29. /******/ i: moduleId,
  30. /******/ l: false,
  31. /******/ exports: {}
  32. /******/ };
  33. /******/
  34. /******/ // Execute the module function
  35. /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  36. /******/
  37. /******/ // Flag the module as loaded
  38. /******/ module.l = true;
  39. /******/
  40. /******/ // Return the exports of the module
  41. /******/ return module.exports;
  42. /******/ }
  43. /******/
  44. /******/
  45. /******/ // expose the modules object (__webpack_modules__)
  46. /******/ __webpack_require__.m = modules;
  47. /******/
  48. /******/ // expose the module cache
  49. /******/ __webpack_require__.c = installedModules;
  50. /******/
  51. /******/ // identity function for calling harmony imports with the correct context
  52. /******/ __webpack_require__.i = function(value) { return value; };
  53. /******/
  54. /******/ // define getter function for harmony exports
  55. /******/ __webpack_require__.d = function(exports, name, getter) {
  56. /******/ if(!__webpack_require__.o(exports, name)) {
  57. /******/ Object.defineProperty(exports, name, {
  58. /******/ configurable: false,
  59. /******/ enumerable: true,
  60. /******/ get: getter
  61. /******/ });
  62. /******/ }
  63. /******/ };
  64. /******/
  65. /******/ // getDefaultExport function for compatibility with non-harmony modules
  66. /******/ __webpack_require__.n = function(module) {
  67. /******/ var getter = module && module.__esModule ?
  68. /******/ function getDefault() { return module['default']; } :
  69. /******/ function getModuleExports() { return module; };
  70. /******/ __webpack_require__.d(getter, 'a', getter);
  71. /******/ return getter;
  72. /******/ };
  73. /******/
  74. /******/ // Object.prototype.hasOwnProperty.call
  75. /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
  76. /******/
  77. /******/ // __webpack_public_path__
  78. /******/ __webpack_require__.p = "/assets/";
  79. /******/
  80. /******/ // Load entry module and return exports
  81. /******/ return __webpack_require__(__webpack_require__.s = 93);
  82. /******/ })
  83. /************************************************************************/
  84. /******/ ({
  85. /***/ 0:
  86. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  87. "use strict";
  88. 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; }; }();
  89. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  90. /**
  91. * Copyright 2016 Google Inc.
  92. *
  93. * Licensed under the Apache License, Version 2.0 (the "License");
  94. * you may not use this file except in compliance with the License.
  95. * You may obtain a copy of the License at
  96. *
  97. * http://www.apache.org/licenses/LICENSE-2.0
  98. *
  99. * Unless required by applicable law or agreed to in writing, software
  100. * distributed under the License is distributed on an "AS IS" BASIS,
  101. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  102. * See the License for the specific language governing permissions and
  103. * limitations under the License.
  104. */
  105. /**
  106. * @template A
  107. */
  108. var MDCFoundation = function () {
  109. _createClass(MDCFoundation, null, [{
  110. key: "cssClasses",
  111. /** @return enum{cssClasses} */
  112. get: function get() {
  113. // Classes extending MDCFoundation should implement this method to return an object which exports every
  114. // CSS class the foundation class needs as a property. e.g. {ACTIVE: 'mdc-component--active'}
  115. return {};
  116. }
  117. /** @return enum{strings} */
  118. }, {
  119. key: "strings",
  120. get: function get() {
  121. // Classes extending MDCFoundation should implement this method to return an object which exports all
  122. // semantic strings as constants. e.g. {ARIA_ROLE: 'tablist'}
  123. return {};
  124. }
  125. /** @return enum{numbers} */
  126. }, {
  127. key: "numbers",
  128. get: function get() {
  129. // Classes extending MDCFoundation should implement this method to return an object which exports all
  130. // of its semantic numbers as constants. e.g. {ANIMATION_DELAY_MS: 350}
  131. return {};
  132. }
  133. /** @return {!Object} */
  134. }, {
  135. key: "defaultAdapter",
  136. get: function get() {
  137. // Classes extending MDCFoundation may choose to implement this getter in order to provide a convenient
  138. // way of viewing the necessary methods of an adapter. In the future, this could also be used for adapter
  139. // validation.
  140. return {};
  141. }
  142. /**
  143. * @param {A=} adapter
  144. */
  145. }]);
  146. function MDCFoundation() {
  147. var adapter = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  148. _classCallCheck(this, MDCFoundation);
  149. /** @protected {!A} */
  150. this.adapter_ = adapter;
  151. }
  152. _createClass(MDCFoundation, [{
  153. key: "init",
  154. value: function init() {
  155. // Subclasses should override this method to perform initialization routines (registering events, etc.)
  156. }
  157. }, {
  158. key: "destroy",
  159. value: function destroy() {
  160. // Subclasses should override this method to perform de-initialization routines (de-registering events, etc.)
  161. }
  162. }]);
  163. return MDCFoundation;
  164. }();
  165. /* harmony default export */ __webpack_exports__["a"] = (MDCFoundation);
  166. /***/ }),
  167. /***/ 1:
  168. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  169. "use strict";
  170. /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__foundation__ = __webpack_require__(0);
  171. 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; }; }();
  172. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  173. /**
  174. * Copyright 2016 Google Inc.
  175. *
  176. * Licensed under the Apache License, Version 2.0 (the "License");
  177. * you may not use this file except in compliance with the License.
  178. * You may obtain a copy of the License at
  179. *
  180. * http://www.apache.org/licenses/LICENSE-2.0
  181. *
  182. * Unless required by applicable law or agreed to in writing, software
  183. * distributed under the License is distributed on an "AS IS" BASIS,
  184. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  185. * See the License for the specific language governing permissions and
  186. * limitations under the License.
  187. */
  188. /**
  189. * @template F
  190. */
  191. var MDCComponent = function () {
  192. _createClass(MDCComponent, null, [{
  193. key: 'attachTo',
  194. /**
  195. * @param {!Element} root
  196. * @return {!MDCComponent}
  197. */
  198. value: function attachTo(root) {
  199. // Subclasses which extend MDCBase should provide an attachTo() method that takes a root element and
  200. // returns an instantiated component with its root set to that element. Also note that in the cases of
  201. // subclasses, an explicit foundation class will not have to be passed in; it will simply be initialized
  202. // from getDefaultFoundation().
  203. return new MDCComponent(root, new __WEBPACK_IMPORTED_MODULE_0__foundation__["a" /* default */]());
  204. }
  205. /**
  206. * @param {!Element} root
  207. * @param {F=} foundation
  208. * @param {...?} args
  209. */
  210. }]);
  211. function MDCComponent(root) {
  212. var foundation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
  213. _classCallCheck(this, MDCComponent);
  214. /** @protected {!Element} */
  215. this.root_ = root;
  216. for (var _len = arguments.length, args = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
  217. args[_key - 2] = arguments[_key];
  218. }
  219. this.initialize.apply(this, args);
  220. // Note that we initialize foundation here and not within the constructor's default param so that
  221. // this.root_ is defined and can be used within the foundation class.
  222. /** @protected {!F} */
  223. this.foundation_ = foundation === undefined ? this.getDefaultFoundation() : foundation;
  224. this.foundation_.init();
  225. this.initialSyncWithDOM();
  226. }
  227. _createClass(MDCComponent, [{
  228. key: 'initialize',
  229. value: function initialize() /* ...args */{}
  230. // Subclasses can override this to do any additional setup work that would be considered part of a
  231. // "constructor". Essentially, it is a hook into the parent constructor before the foundation is
  232. // initialized. Any additional arguments besides root and foundation will be passed in here.
  233. /**
  234. * @return {!F} foundation
  235. */
  236. }, {
  237. key: 'getDefaultFoundation',
  238. value: function getDefaultFoundation() {
  239. // Subclasses must override this method to return a properly configured foundation class for the
  240. // component.
  241. throw new Error('Subclasses must override getDefaultFoundation to return a properly configured ' + 'foundation class');
  242. }
  243. }, {
  244. key: 'initialSyncWithDOM',
  245. value: function initialSyncWithDOM() {
  246. // Subclasses should override this method if they need to perform work to synchronize with a host DOM
  247. // object. An example of this would be a form control wrapper that needs to synchronize its internal state
  248. // to some property or attribute of the host DOM. Please note: this is *not* the place to perform DOM
  249. // reads/writes that would cause layout / paint, as this is called synchronously from within the constructor.
  250. }
  251. }, {
  252. key: 'destroy',
  253. value: function destroy() {
  254. // Subclasses may implement this method to release any resources / deregister any listeners they have
  255. // attached. An example of this might be deregistering a resize event from the window object.
  256. this.foundation_.destroy();
  257. }
  258. /**
  259. * Wrapper method to add an event listener to the component's root element. This is most useful when
  260. * listening for custom events.
  261. * @param {string} evtType
  262. * @param {!Function} handler
  263. */
  264. }, {
  265. key: 'listen',
  266. value: function listen(evtType, handler) {
  267. this.root_.addEventListener(evtType, handler);
  268. }
  269. /**
  270. * Wrapper method to remove an event listener to the component's root element. This is most useful when
  271. * unlistening for custom events.
  272. * @param {string} evtType
  273. * @param {!Function} handler
  274. */
  275. }, {
  276. key: 'unlisten',
  277. value: function unlisten(evtType, handler) {
  278. this.root_.removeEventListener(evtType, handler);
  279. }
  280. /**
  281. * Fires a cross-browser-compatible custom event from the component root of the given type,
  282. * with the given data.
  283. * @param {string} evtType
  284. * @param {!Object} evtData
  285. * @param {boolean=} shouldBubble
  286. */
  287. }, {
  288. key: 'emit',
  289. value: function emit(evtType, evtData) {
  290. var shouldBubble = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
  291. var evt = void 0;
  292. if (typeof CustomEvent === 'function') {
  293. evt = new CustomEvent(evtType, {
  294. detail: evtData,
  295. bubbles: shouldBubble
  296. });
  297. } else {
  298. evt = document.createEvent('CustomEvent');
  299. evt.initCustomEvent(evtType, shouldBubble, false, evtData);
  300. }
  301. this.root_.dispatchEvent(evt);
  302. }
  303. }]);
  304. return MDCComponent;
  305. }();
  306. /* harmony default export */ __webpack_exports__["a"] = (MDCComponent);
  307. /***/ }),
  308. /***/ 4:
  309. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  310. "use strict";
  311. 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; }; }();
  312. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  313. /**
  314. * Copyright 2016 Google Inc. All Rights Reserved.
  315. *
  316. * Licensed under the Apache License, Version 2.0 (the "License");
  317. * you may not use this file except in compliance with the License.
  318. * You may obtain a copy of the License at
  319. *
  320. * http://www.apache.org/licenses/LICENSE-2.0
  321. *
  322. * Unless required by applicable law or agreed to in writing, software
  323. * distributed under the License is distributed on an "AS IS" BASIS,
  324. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  325. * See the License for the specific language governing permissions and
  326. * limitations under the License.
  327. */
  328. /* eslint no-unused-vars: [2, {"args": "none"}] */
  329. /**
  330. * Adapter for MDC Ripple. Provides an interface for managing
  331. * - classes
  332. * - dom
  333. * - CSS variables
  334. * - position
  335. * - dimensions
  336. * - scroll position
  337. * - event handlers
  338. * - unbounded, active and disabled states
  339. *
  340. * Additionally, provides type information for the adapter to the Closure
  341. * compiler.
  342. *
  343. * Implement this adapter for your framework of choice to delegate updates to
  344. * the component in your framework of choice. See architecture documentation
  345. * for more details.
  346. * https://github.com/material-components/material-components-web/blob/master/docs/architecture.md
  347. *
  348. * @record
  349. */
  350. var MDCRippleAdapter = function () {
  351. function MDCRippleAdapter() {
  352. _classCallCheck(this, MDCRippleAdapter);
  353. }
  354. _createClass(MDCRippleAdapter, [{
  355. key: "browserSupportsCssVars",
  356. /** @return {boolean} */
  357. value: function browserSupportsCssVars() {}
  358. /** @return {boolean} */
  359. }, {
  360. key: "isUnbounded",
  361. value: function isUnbounded() {}
  362. /** @return {boolean} */
  363. }, {
  364. key: "isSurfaceActive",
  365. value: function isSurfaceActive() {}
  366. /** @return {boolean} */
  367. }, {
  368. key: "isSurfaceDisabled",
  369. value: function isSurfaceDisabled() {}
  370. /** @param {string} className */
  371. }, {
  372. key: "addClass",
  373. value: function addClass(className) {}
  374. /** @param {string} className */
  375. }, {
  376. key: "removeClass",
  377. value: function removeClass(className) {}
  378. /**
  379. * @param {string} evtType
  380. * @param {!Function} handler
  381. */
  382. }, {
  383. key: "registerInteractionHandler",
  384. value: function registerInteractionHandler(evtType, handler) {}
  385. /**
  386. * @param {string} evtType
  387. * @param {!Function} handler
  388. */
  389. }, {
  390. key: "deregisterInteractionHandler",
  391. value: function deregisterInteractionHandler(evtType, handler) {}
  392. /**
  393. * @param {!Function} handler
  394. */
  395. }, {
  396. key: "registerResizeHandler",
  397. value: function registerResizeHandler(handler) {}
  398. /**
  399. * @param {!Function} handler
  400. */
  401. }, {
  402. key: "deregisterResizeHandler",
  403. value: function deregisterResizeHandler(handler) {}
  404. /**
  405. * @param {string} varName
  406. * @param {?number|string} value
  407. */
  408. }, {
  409. key: "updateCssVariable",
  410. value: function updateCssVariable(varName, value) {}
  411. /** @return {!ClientRect} */
  412. }, {
  413. key: "computeBoundingRect",
  414. value: function computeBoundingRect() {}
  415. /** @return {{x: number, y: number}} */
  416. }, {
  417. key: "getWindowPageOffset",
  418. value: function getWindowPageOffset() {}
  419. }]);
  420. return MDCRippleAdapter;
  421. }();
  422. /* unused harmony default export */ var _unused_webpack_default_export = (MDCRippleAdapter);
  423. /***/ }),
  424. /***/ 5:
  425. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  426. "use strict";
  427. Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
  428. /* harmony export (immutable) */ __webpack_exports__["supportsCssVariables"] = supportsCssVariables;
  429. /* harmony export (immutable) */ __webpack_exports__["applyPassive"] = applyPassive;
  430. /* harmony export (immutable) */ __webpack_exports__["getMatchesProperty"] = getMatchesProperty;
  431. /* harmony export (immutable) */ __webpack_exports__["getNormalizedEventCoords"] = getNormalizedEventCoords;
  432. /**
  433. * Copyright 2016 Google Inc. All Rights Reserved.
  434. *
  435. * Licensed under the Apache License, Version 2.0 (the "License");
  436. * you may not use this file except in compliance with the License.
  437. * You may obtain a copy of the License at
  438. *
  439. * http://www.apache.org/licenses/LICENSE-2.0
  440. *
  441. * Unless required by applicable law or agreed to in writing, software
  442. * distributed under the License is distributed on an "AS IS" BASIS,
  443. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  444. * See the License for the specific language governing permissions and
  445. * limitations under the License.
  446. */
  447. /**
  448. * Stores result from supportsCssVariables to avoid redundant processing to detect CSS custom variable support.
  449. * @private {boolean|undefined}
  450. */
  451. var supportsCssVariables_ = void 0;
  452. /**
  453. * Stores result from applyPassive to avoid redundant processing to detect passive event listener support.
  454. * @private {boolean|undefined}
  455. */
  456. var supportsPassive_ = void 0;
  457. /**
  458. * @param {!Window} windowObj
  459. * @return {boolean}
  460. */
  461. function detectEdgePseudoVarBug(windowObj) {
  462. // Detect versions of Edge with buggy var() support
  463. // See: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11495448/
  464. var document = windowObj.document;
  465. var className = 'test-edge-css-var';
  466. var styleNode = document.createElement('style');
  467. document.head.appendChild(styleNode);
  468. var sheet = styleNode.sheet;
  469. // Internet Explorer 11 requires indices to always be specified to insertRule
  470. sheet.insertRule(':root { --' + className + ': 1px solid #000; }', 0);
  471. sheet.insertRule('.' + className + ' { visibility: hidden; }', 1);
  472. sheet.insertRule('.' + className + '::before { border: var(--' + className + '); }', 2);
  473. var node = document.createElement('div');
  474. node.className = className;
  475. document.body.appendChild(node);
  476. // Bug exists if ::before style ends up propagating to the parent element
  477. var hasPseudoVarBug = windowObj.getComputedStyle(node).borderTopStyle === 'solid';
  478. node.remove();
  479. styleNode.remove();
  480. return hasPseudoVarBug;
  481. }
  482. /**
  483. * @param {!Window} windowObj
  484. * @param {boolean=} forceRefresh
  485. * @return {boolean|undefined}
  486. */
  487. function supportsCssVariables(windowObj) {
  488. var forceRefresh = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  489. if (typeof supportsCssVariables_ === 'boolean' && !forceRefresh) {
  490. return supportsCssVariables_;
  491. }
  492. var supportsFunctionPresent = windowObj.CSS && typeof windowObj.CSS.supports === 'function';
  493. if (!supportsFunctionPresent) {
  494. return;
  495. }
  496. var explicitlySupportsCssVars = windowObj.CSS.supports('--css-vars', 'yes');
  497. // See: https://bugs.webkit.org/show_bug.cgi?id=154669
  498. // See: README section on Safari
  499. var weAreFeatureDetectingSafari10plus = windowObj.CSS.supports('(--css-vars: yes)') && windowObj.CSS.supports('color', '#00000000');
  500. if (explicitlySupportsCssVars || weAreFeatureDetectingSafari10plus) {
  501. supportsCssVariables_ = !detectEdgePseudoVarBug(windowObj);
  502. } else {
  503. supportsCssVariables_ = false;
  504. }
  505. return supportsCssVariables_;
  506. }
  507. //
  508. /**
  509. * Determine whether the current browser supports passive event listeners, and if so, use them.
  510. * @param {!Window=} globalObj
  511. * @param {boolean=} forceRefresh
  512. * @return {boolean|{passive: boolean}}
  513. */
  514. function applyPassive() {
  515. var globalObj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window;
  516. var forceRefresh = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  517. if (supportsPassive_ === undefined || forceRefresh) {
  518. var isSupported = false;
  519. try {
  520. globalObj.document.addEventListener('test', null, { get passive() {
  521. isSupported = true;
  522. } });
  523. } catch (e) {}
  524. supportsPassive_ = isSupported;
  525. }
  526. return supportsPassive_ ? { passive: true } : false;
  527. }
  528. /**
  529. * @param {!Object} HTMLElementPrototype
  530. * @return {!Array<string>}
  531. */
  532. function getMatchesProperty(HTMLElementPrototype) {
  533. return ['webkitMatchesSelector', 'msMatchesSelector', 'matches'].filter(function (p) {
  534. return p in HTMLElementPrototype;
  535. }).pop();
  536. }
  537. /**
  538. * @param {!Event} ev
  539. * @param {!{x: number, y: number}} pageOffset
  540. * @param {!ClientRect} clientRect
  541. * @return {!{x: number, y: number}}
  542. */
  543. function getNormalizedEventCoords(ev, pageOffset, clientRect) {
  544. var x = pageOffset.x,
  545. y = pageOffset.y;
  546. var documentX = x + clientRect.left;
  547. var documentY = y + clientRect.top;
  548. var normalizedX = void 0;
  549. var normalizedY = void 0;
  550. // Determine touch point relative to the ripple container.
  551. if (ev.type === 'touchstart') {
  552. normalizedX = ev.changedTouches[0].pageX - documentX;
  553. normalizedY = ev.changedTouches[0].pageY - documentY;
  554. } else {
  555. normalizedX = ev.pageX - documentX;
  556. normalizedY = ev.pageY - documentY;
  557. }
  558. return { x: normalizedX, y: normalizedY };
  559. }
  560. /***/ }),
  561. /***/ 6:
  562. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  563. "use strict";
  564. Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
  565. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "MDCRipple", function() { return MDCRipple; });
  566. /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__material_base_component__ = __webpack_require__(1);
  567. /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__adapter__ = __webpack_require__(4);
  568. /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__foundation__ = __webpack_require__(8);
  569. /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__util__ = __webpack_require__(5);
  570. /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "MDCRippleFoundation", function() { return __WEBPACK_IMPORTED_MODULE_2__foundation__["a"]; });
  571. /* harmony reexport (module object) */ __webpack_require__.d(__webpack_exports__, "util", function() { return __WEBPACK_IMPORTED_MODULE_3__util__; });
  572. 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; }; }();
  573. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  574. 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; }
  575. 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; }
  576. /**
  577. * Copyright 2016 Google Inc. All Rights Reserved.
  578. *
  579. * Licensed under the Apache License, Version 2.0 (the "License");
  580. * you may not use this file except in compliance with the License.
  581. * You may obtain a copy of the License at
  582. *
  583. * http://www.apache.org/licenses/LICENSE-2.0
  584. *
  585. * Unless required by applicable law or agreed to in writing, software
  586. * distributed under the License is distributed on an "AS IS" BASIS,
  587. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  588. * See the License for the specific language governing permissions and
  589. * limitations under the License.
  590. */
  591. /**
  592. * @extends MDCComponent<!MDCRippleFoundation>
  593. */
  594. var MDCRipple = function (_MDCComponent) {
  595. _inherits(MDCRipple, _MDCComponent);
  596. /** @param {...?} args */
  597. function MDCRipple() {
  598. var _ref;
  599. _classCallCheck(this, MDCRipple);
  600. for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
  601. args[_key] = arguments[_key];
  602. }
  603. /** @type {boolean} */
  604. var _this = _possibleConstructorReturn(this, (_ref = MDCRipple.__proto__ || Object.getPrototypeOf(MDCRipple)).call.apply(_ref, [this].concat(args)));
  605. _this.disabled = false;
  606. /** @private {boolean} */
  607. _this.unbounded_;
  608. return _this;
  609. }
  610. /**
  611. * @param {!Element} root
  612. * @param {{isUnbounded: (boolean|undefined)}=} options
  613. * @return {!MDCRipple}
  614. */
  615. _createClass(MDCRipple, [{
  616. key: 'activate',
  617. value: function activate() {
  618. this.foundation_.activate();
  619. }
  620. }, {
  621. key: 'deactivate',
  622. value: function deactivate() {
  623. this.foundation_.deactivate();
  624. }
  625. }, {
  626. key: 'layout',
  627. value: function layout() {
  628. this.foundation_.layout();
  629. }
  630. /** @return {!MDCRippleFoundation} */
  631. }, {
  632. key: 'getDefaultFoundation',
  633. value: function getDefaultFoundation() {
  634. return new __WEBPACK_IMPORTED_MODULE_2__foundation__["a" /* default */](MDCRipple.createAdapter(this));
  635. }
  636. }, {
  637. key: 'initialSyncWithDOM',
  638. value: function initialSyncWithDOM() {
  639. this.unbounded = 'mdcRippleIsUnbounded' in this.root_.dataset;
  640. }
  641. }, {
  642. key: 'unbounded',
  643. /** @return {boolean} */
  644. get: function get() {
  645. return this.unbounded_;
  646. }
  647. /** @param {boolean} unbounded */
  648. ,
  649. set: function set(unbounded) {
  650. var UNBOUNDED = __WEBPACK_IMPORTED_MODULE_2__foundation__["a" /* default */].cssClasses.UNBOUNDED;
  651. this.unbounded_ = Boolean(unbounded);
  652. if (this.unbounded_) {
  653. this.root_.classList.add(UNBOUNDED);
  654. } else {
  655. this.root_.classList.remove(UNBOUNDED);
  656. }
  657. }
  658. }], [{
  659. key: 'attachTo',
  660. value: function attachTo(root) {
  661. var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
  662. _ref2$isUnbounded = _ref2.isUnbounded,
  663. isUnbounded = _ref2$isUnbounded === undefined ? undefined : _ref2$isUnbounded;
  664. var ripple = new MDCRipple(root);
  665. // Only override unbounded behavior if option is explicitly specified
  666. if (isUnbounded !== undefined) {
  667. ripple.unbounded = /** @type {boolean} */isUnbounded;
  668. }
  669. return ripple;
  670. }
  671. /**
  672. * @param {!RippleCapableSurface} instance
  673. * @return {!MDCRippleAdapter}
  674. */
  675. }, {
  676. key: 'createAdapter',
  677. value: function createAdapter(instance) {
  678. var MATCHES = __WEBPACK_IMPORTED_MODULE_3__util__["getMatchesProperty"](HTMLElement.prototype);
  679. return {
  680. browserSupportsCssVars: function browserSupportsCssVars() {
  681. return __WEBPACK_IMPORTED_MODULE_3__util__["supportsCssVariables"](window);
  682. },
  683. isUnbounded: function isUnbounded() {
  684. return instance.unbounded;
  685. },
  686. isSurfaceActive: function isSurfaceActive() {
  687. return instance.root_[MATCHES](':active');
  688. },
  689. isSurfaceDisabled: function isSurfaceDisabled() {
  690. return instance.disabled;
  691. },
  692. addClass: function addClass(className) {
  693. return instance.root_.classList.add(className);
  694. },
  695. removeClass: function removeClass(className) {
  696. return instance.root_.classList.remove(className);
  697. },
  698. registerInteractionHandler: function registerInteractionHandler(evtType, handler) {
  699. return instance.root_.addEventListener(evtType, handler, __WEBPACK_IMPORTED_MODULE_3__util__["applyPassive"]());
  700. },
  701. deregisterInteractionHandler: function deregisterInteractionHandler(evtType, handler) {
  702. return instance.root_.removeEventListener(evtType, handler, __WEBPACK_IMPORTED_MODULE_3__util__["applyPassive"]());
  703. },
  704. registerResizeHandler: function registerResizeHandler(handler) {
  705. return window.addEventListener('resize', handler);
  706. },
  707. deregisterResizeHandler: function deregisterResizeHandler(handler) {
  708. return window.removeEventListener('resize', handler);
  709. },
  710. updateCssVariable: function updateCssVariable(varName, value) {
  711. return instance.root_.style.setProperty(varName, value);
  712. },
  713. computeBoundingRect: function computeBoundingRect() {
  714. return instance.root_.getBoundingClientRect();
  715. },
  716. getWindowPageOffset: function getWindowPageOffset() {
  717. return { x: window.pageXOffset, y: window.pageYOffset };
  718. }
  719. };
  720. }
  721. }]);
  722. return MDCRipple;
  723. }(__WEBPACK_IMPORTED_MODULE_0__material_base_component__["a" /* default */]);
  724. /**
  725. * See Material Design spec for more details on when to use ripples.
  726. * https://material.io/guidelines/motion/choreography.html#choreography-creation
  727. * @record
  728. */
  729. var RippleCapableSurface = function RippleCapableSurface() {
  730. _classCallCheck(this, RippleCapableSurface);
  731. };
  732. /** @protected {!Element} */
  733. RippleCapableSurface.prototype.root_;
  734. /**
  735. * Whether or not the ripple bleeds out of the bounds of the element.
  736. * @type {boolean|undefined}
  737. */
  738. RippleCapableSurface.prototype.unbounded;
  739. /**
  740. * Whether or not the ripple is attached to a disabled component.
  741. * @type {boolean|undefined}
  742. */
  743. RippleCapableSurface.prototype.disabled;
  744. /***/ }),
  745. /***/ 7:
  746. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  747. "use strict";
  748. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return cssClasses; });
  749. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return strings; });
  750. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return numbers; });
  751. /**
  752. * Copyright 2016 Google Inc. All Rights Reserved.
  753. *
  754. * Licensed under the Apache License, Version 2.0 (the "License");
  755. * you may not use this file except in compliance with the License.
  756. * You may obtain a copy of the License at
  757. *
  758. * http://www.apache.org/licenses/LICENSE-2.0
  759. *
  760. * Unless required by applicable law or agreed to in writing, software
  761. * distributed under the License is distributed on an "AS IS" BASIS,
  762. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  763. * See the License for the specific language governing permissions and
  764. * limitations under the License.
  765. */
  766. var cssClasses = {
  767. // Ripple is a special case where the "root" component is really a "mixin" of sorts,
  768. // given that it's an 'upgrade' to an existing component. That being said it is the root
  769. // CSS class that all other CSS classes derive from.
  770. ROOT: 'mdc-ripple-upgraded',
  771. UNBOUNDED: 'mdc-ripple-upgraded--unbounded',
  772. BG_FOCUSED: 'mdc-ripple-upgraded--background-focused',
  773. BG_ACTIVE_FILL: 'mdc-ripple-upgraded--background-active-fill',
  774. FG_ACTIVATION: 'mdc-ripple-upgraded--foreground-activation',
  775. FG_DEACTIVATION: 'mdc-ripple-upgraded--foreground-deactivation'
  776. };
  777. var strings = {
  778. VAR_SURFACE_WIDTH: '--mdc-ripple-surface-width',
  779. VAR_SURFACE_HEIGHT: '--mdc-ripple-surface-height',
  780. VAR_FG_SIZE: '--mdc-ripple-fg-size',
  781. VAR_LEFT: '--mdc-ripple-left',
  782. VAR_TOP: '--mdc-ripple-top',
  783. VAR_FG_SCALE: '--mdc-ripple-fg-scale',
  784. VAR_FG_TRANSLATE_START: '--mdc-ripple-fg-translate-start',
  785. VAR_FG_TRANSLATE_END: '--mdc-ripple-fg-translate-end'
  786. };
  787. var numbers = {
  788. PADDING: 10,
  789. INITIAL_ORIGIN_SCALE: 0.6,
  790. DEACTIVATION_TIMEOUT_MS: 300,
  791. FG_DEACTIVATION_MS: 83
  792. };
  793. /***/ }),
  794. /***/ 8:
  795. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  796. "use strict";
  797. /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__material_base_foundation__ = __webpack_require__(0);
  798. /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__adapter__ = __webpack_require__(4);
  799. /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__constants__ = __webpack_require__(7);
  800. /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__util__ = __webpack_require__(5);
  801. 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; };
  802. 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; }; }();
  803. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  804. 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; }
  805. 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; }
  806. /**
  807. * Copyright 2016 Google Inc. All Rights Reserved.
  808. *
  809. * Licensed under the Apache License, Version 2.0 (the "License");
  810. * you may not use this file except in compliance with the License.
  811. * You may obtain a copy of the License at
  812. *
  813. * http://www.apache.org/licenses/LICENSE-2.0
  814. *
  815. * Unless required by applicable law or agreed to in writing, software
  816. * distributed under the License is distributed on an "AS IS" BASIS,
  817. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  818. * See the License for the specific language governing permissions and
  819. * limitations under the License.
  820. */
  821. /**
  822. * @typedef {!{
  823. * isActivated: (boolean|undefined),
  824. * hasDeactivationUXRun: (boolean|undefined),
  825. * wasActivatedByPointer: (boolean|undefined),
  826. * wasElementMadeActive: (boolean|undefined),
  827. * activationStartTime: (number|undefined),
  828. * activationEvent: Event,
  829. * isProgrammatic: (boolean|undefined)
  830. * }}
  831. */
  832. var ActivationStateType = void 0;
  833. /**
  834. * @typedef {!{
  835. * activate: (string|undefined),
  836. * deactivate: (string|undefined),
  837. * focus: (string|undefined),
  838. * blur: (string|undefined)
  839. * }}
  840. */
  841. var ListenerInfoType = void 0;
  842. /**
  843. * @typedef {!{
  844. * activate: function(!Event),
  845. * deactivate: function(!Event),
  846. * focus: function(),
  847. * blur: function()
  848. * }}
  849. */
  850. var ListenersType = void 0;
  851. /**
  852. * @typedef {!{
  853. * x: number,
  854. * y: number
  855. * }}
  856. */
  857. var PointType = void 0;
  858. /**
  859. * @enum {string}
  860. */
  861. var DEACTIVATION_ACTIVATION_PAIRS = {
  862. mouseup: 'mousedown',
  863. pointerup: 'pointerdown',
  864. touchend: 'touchstart',
  865. keyup: 'keydown',
  866. blur: 'focus'
  867. };
  868. /**
  869. * @extends {MDCFoundation<!MDCRippleAdapter>}
  870. */
  871. var MDCRippleFoundation = function (_MDCFoundation) {
  872. _inherits(MDCRippleFoundation, _MDCFoundation);
  873. _createClass(MDCRippleFoundation, [{
  874. key: 'isSupported_',
  875. /**
  876. * We compute this property so that we are not querying information about the client
  877. * until the point in time where the foundation requests it. This prevents scenarios where
  878. * client-side feature-detection may happen too early, such as when components are rendered on the server
  879. * and then initialized at mount time on the client.
  880. * @return {boolean}
  881. */
  882. get: function get() {
  883. return this.adapter_.browserSupportsCssVars();
  884. }
  885. }], [{
  886. key: 'cssClasses',
  887. get: function get() {
  888. return __WEBPACK_IMPORTED_MODULE_2__constants__["a" /* cssClasses */];
  889. }
  890. }, {
  891. key: 'strings',
  892. get: function get() {
  893. return __WEBPACK_IMPORTED_MODULE_2__constants__["b" /* strings */];
  894. }
  895. }, {
  896. key: 'numbers',
  897. get: function get() {
  898. return __WEBPACK_IMPORTED_MODULE_2__constants__["c" /* numbers */];
  899. }
  900. }, {
  901. key: 'defaultAdapter',
  902. get: function get() {
  903. return {
  904. browserSupportsCssVars: function browserSupportsCssVars() /* boolean - cached */{},
  905. isUnbounded: function isUnbounded() /* boolean */{},
  906. isSurfaceActive: function isSurfaceActive() /* boolean */{},
  907. isSurfaceDisabled: function isSurfaceDisabled() /* boolean */{},
  908. addClass: function addClass() /* className: string */{},
  909. removeClass: function removeClass() /* className: string */{},
  910. registerInteractionHandler: function registerInteractionHandler() /* evtType: string, handler: EventListener */{},
  911. deregisterInteractionHandler: function deregisterInteractionHandler() /* evtType: string, handler: EventListener */{},
  912. registerResizeHandler: function registerResizeHandler() /* handler: EventListener */{},
  913. deregisterResizeHandler: function deregisterResizeHandler() /* handler: EventListener */{},
  914. updateCssVariable: function updateCssVariable() /* varName: string, value: string */{},
  915. computeBoundingRect: function computeBoundingRect() /* ClientRect */{},
  916. getWindowPageOffset: function getWindowPageOffset() /* {x: number, y: number} */{}
  917. };
  918. }
  919. }]);
  920. function MDCRippleFoundation(adapter) {
  921. _classCallCheck(this, MDCRippleFoundation);
  922. /** @private {number} */
  923. var _this = _possibleConstructorReturn(this, (MDCRippleFoundation.__proto__ || Object.getPrototypeOf(MDCRippleFoundation)).call(this, _extends(MDCRippleFoundation.defaultAdapter, adapter)));
  924. _this.layoutFrame_ = 0;
  925. /** @private {!ClientRect} */
  926. _this.frame_ = /** @type {!ClientRect} */{ width: 0, height: 0 };
  927. /** @private {!ActivationStateType} */
  928. _this.activationState_ = _this.defaultActivationState_();
  929. /** @private {number} */
  930. _this.xfDuration_ = 0;
  931. /** @private {number} */
  932. _this.initialSize_ = 0;
  933. /** @private {number} */
  934. _this.maxRadius_ = 0;
  935. /** @private {!Array<{ListenerInfoType}>} */
  936. _this.listenerInfos_ = [{ activate: 'touchstart', deactivate: 'touchend' }, { activate: 'pointerdown', deactivate: 'pointerup' }, { activate: 'mousedown', deactivate: 'mouseup' }, { activate: 'keydown', deactivate: 'keyup' }, { focus: 'focus', blur: 'blur' }];
  937. /** @private {!ListenersType} */
  938. _this.listeners_ = {
  939. activate: function activate(e) {
  940. return _this.activate_(e);
  941. },
  942. deactivate: function deactivate(e) {
  943. return _this.deactivate_(e);
  944. },
  945. focus: function focus() {
  946. return requestAnimationFrame(function () {
  947. return _this.adapter_.addClass(MDCRippleFoundation.cssClasses.BG_FOCUSED);
  948. });
  949. },
  950. blur: function blur() {
  951. return requestAnimationFrame(function () {
  952. return _this.adapter_.removeClass(MDCRippleFoundation.cssClasses.BG_FOCUSED);
  953. });
  954. }
  955. };
  956. /** @private {!Function} */
  957. _this.resizeHandler_ = function () {
  958. return _this.layout();
  959. };
  960. /** @private {!{left: number, top:number}} */
  961. _this.unboundedCoords_ = {
  962. left: 0,
  963. top: 0
  964. };
  965. /** @private {number} */
  966. _this.fgScale_ = 0;
  967. /** @private {number} */
  968. _this.activationTimer_ = 0;
  969. /** @private {number} */
  970. _this.fgDeactivationRemovalTimer_ = 0;
  971. /** @private {boolean} */
  972. _this.activationAnimationHasEnded_ = false;
  973. /** @private {!Function} */
  974. _this.activationTimerCallback_ = function () {
  975. _this.activationAnimationHasEnded_ = true;
  976. _this.runDeactivationUXLogicIfReady_();
  977. };
  978. return _this;
  979. }
  980. /**
  981. * @return {!ActivationStateType}
  982. */
  983. _createClass(MDCRippleFoundation, [{
  984. key: 'defaultActivationState_',
  985. value: function defaultActivationState_() {
  986. return {
  987. isActivated: false,
  988. hasDeactivationUXRun: false,
  989. wasActivatedByPointer: false,
  990. wasElementMadeActive: false,
  991. activationStartTime: 0,
  992. activationEvent: null,
  993. isProgrammatic: false
  994. };
  995. }
  996. }, {
  997. key: 'init',
  998. value: function init() {
  999. var _this2 = this;
  1000. if (!this.isSupported_) {
  1001. return;
  1002. }
  1003. this.addEventListeners_();
  1004. var _MDCRippleFoundation$ = MDCRippleFoundation.cssClasses,
  1005. ROOT = _MDCRippleFoundation$.ROOT,
  1006. UNBOUNDED = _MDCRippleFoundation$.UNBOUNDED;
  1007. requestAnimationFrame(function () {
  1008. _this2.adapter_.addClass(ROOT);
  1009. if (_this2.adapter_.isUnbounded()) {
  1010. _this2.adapter_.addClass(UNBOUNDED);
  1011. }
  1012. _this2.layoutInternal_();
  1013. });
  1014. }
  1015. /** @private */
  1016. }, {
  1017. key: 'addEventListeners_',
  1018. value: function addEventListeners_() {
  1019. var _this3 = this;
  1020. this.listenerInfos_.forEach(function (info) {
  1021. Object.keys(info).forEach(function (k) {
  1022. _this3.adapter_.registerInteractionHandler(info[k], _this3.listeners_[k]);
  1023. });
  1024. });
  1025. this.adapter_.registerResizeHandler(this.resizeHandler_);
  1026. }
  1027. /**
  1028. * @param {Event} e
  1029. * @private
  1030. */
  1031. }, {
  1032. key: 'activate_',
  1033. value: function activate_(e) {
  1034. var _this4 = this;
  1035. if (this.adapter_.isSurfaceDisabled()) {
  1036. return;
  1037. }
  1038. var activationState = this.activationState_;
  1039. if (activationState.isActivated) {
  1040. return;
  1041. }
  1042. activationState.isActivated = true;
  1043. activationState.isProgrammatic = e === null;
  1044. activationState.activationEvent = e;
  1045. activationState.wasActivatedByPointer = activationState.isProgrammatic ? false : e.type === 'mousedown' || e.type === 'touchstart' || e.type === 'pointerdown';
  1046. activationState.activationStartTime = Date.now();
  1047. requestAnimationFrame(function () {
  1048. // This needs to be wrapped in an rAF call b/c web browsers
  1049. // report active states inconsistently when they're called within
  1050. // event handling code:
  1051. // - https://bugs.chromium.org/p/chromium/issues/detail?id=635971
  1052. // - https://bugzilla.mozilla.org/show_bug.cgi?id=1293741
  1053. activationState.wasElementMadeActive = e && e.type === 'keydown' ? _this4.adapter_.isSurfaceActive() : true;
  1054. if (activationState.wasElementMadeActive) {
  1055. _this4.animateActivation_();
  1056. } else {
  1057. // Reset activation state immediately if element was not made active.
  1058. _this4.activationState_ = _this4.defaultActivationState_();
  1059. }
  1060. });
  1061. }
  1062. }, {
  1063. key: 'activate',
  1064. value: function activate() {
  1065. this.activate_(null);
  1066. }
  1067. /** @private */
  1068. }, {
  1069. key: 'animateActivation_',
  1070. value: function animateActivation_() {
  1071. var _this5 = this;
  1072. var _MDCRippleFoundation$2 = MDCRippleFoundation.strings,
  1073. VAR_FG_TRANSLATE_START = _MDCRippleFoundation$2.VAR_FG_TRANSLATE_START,
  1074. VAR_FG_TRANSLATE_END = _MDCRippleFoundation$2.VAR_FG_TRANSLATE_END;
  1075. var _MDCRippleFoundation$3 = MDCRippleFoundation.cssClasses,
  1076. BG_ACTIVE_FILL = _MDCRippleFoundation$3.BG_ACTIVE_FILL,
  1077. FG_DEACTIVATION = _MDCRippleFoundation$3.FG_DEACTIVATION,
  1078. FG_ACTIVATION = _MDCRippleFoundation$3.FG_ACTIVATION;
  1079. var DEACTIVATION_TIMEOUT_MS = MDCRippleFoundation.numbers.DEACTIVATION_TIMEOUT_MS;
  1080. var translateStart = '';
  1081. var translateEnd = '';
  1082. if (!this.adapter_.isUnbounded()) {
  1083. var _getFgTranslationCoor = this.getFgTranslationCoordinates_(),
  1084. startPoint = _getFgTranslationCoor.startPoint,
  1085. endPoint = _getFgTranslationCoor.endPoint;
  1086. translateStart = startPoint.x + 'px, ' + startPoint.y + 'px';
  1087. translateEnd = endPoint.x + 'px, ' + endPoint.y + 'px';
  1088. }
  1089. this.adapter_.updateCssVariable(VAR_FG_TRANSLATE_START, translateStart);
  1090. this.adapter_.updateCssVariable(VAR_FG_TRANSLATE_END, translateEnd);
  1091. // Cancel any ongoing activation/deactivation animations
  1092. clearTimeout(this.activationTimer_);
  1093. clearTimeout(this.fgDeactivationRemovalTimer_);
  1094. this.rmBoundedActivationClasses_();
  1095. this.adapter_.removeClass(FG_DEACTIVATION);
  1096. // Force layout in order to re-trigger the animation.
  1097. this.adapter_.computeBoundingRect();
  1098. this.adapter_.addClass(BG_ACTIVE_FILL);
  1099. this.adapter_.addClass(FG_ACTIVATION);
  1100. this.activationTimer_ = setTimeout(function () {
  1101. return _this5.activationTimerCallback_();
  1102. }, DEACTIVATION_TIMEOUT_MS);
  1103. }
  1104. /**
  1105. * @private
  1106. * @return {{startPoint: PointType, endPoint: PointType}}
  1107. */
  1108. }, {
  1109. key: 'getFgTranslationCoordinates_',
  1110. value: function getFgTranslationCoordinates_() {
  1111. var activationState = this.activationState_;
  1112. var activationEvent = activationState.activationEvent,
  1113. wasActivatedByPointer = activationState.wasActivatedByPointer;
  1114. var startPoint = void 0;
  1115. if (wasActivatedByPointer) {
  1116. startPoint = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__util__["getNormalizedEventCoords"])(
  1117. /** @type {!Event} */activationEvent, this.adapter_.getWindowPageOffset(), this.adapter_.computeBoundingRect());
  1118. } else {
  1119. startPoint = {
  1120. x: this.frame_.width / 2,
  1121. y: this.frame_.height / 2
  1122. };
  1123. }
  1124. // Center the element around the start point.
  1125. startPoint = {
  1126. x: startPoint.x - this.initialSize_ / 2,
  1127. y: startPoint.y - this.initialSize_ / 2
  1128. };
  1129. var endPoint = {
  1130. x: this.frame_.width / 2 - this.initialSize_ / 2,
  1131. y: this.frame_.height / 2 - this.initialSize_ / 2
  1132. };
  1133. return { startPoint: startPoint, endPoint: endPoint };
  1134. }
  1135. /** @private */
  1136. }, {
  1137. key: 'runDeactivationUXLogicIfReady_',
  1138. value: function runDeactivationUXLogicIfReady_() {
  1139. var _this6 = this;
  1140. var FG_DEACTIVATION = MDCRippleFoundation.cssClasses.FG_DEACTIVATION;
  1141. var _activationState_ = this.activationState_,
  1142. hasDeactivationUXRun = _activationState_.hasDeactivationUXRun,
  1143. isActivated = _activationState_.isActivated;
  1144. var activationHasEnded = hasDeactivationUXRun || !isActivated;
  1145. if (activationHasEnded && this.activationAnimationHasEnded_) {
  1146. this.rmBoundedActivationClasses_();
  1147. this.adapter_.addClass(FG_DEACTIVATION);
  1148. this.fgDeactivationRemovalTimer_ = setTimeout(function () {
  1149. _this6.adapter_.removeClass(FG_DEACTIVATION);
  1150. }, __WEBPACK_IMPORTED_MODULE_2__constants__["c" /* numbers */].FG_DEACTIVATION_MS);
  1151. }
  1152. }
  1153. /** @private */
  1154. }, {
  1155. key: 'rmBoundedActivationClasses_',
  1156. value: function rmBoundedActivationClasses_() {
  1157. var _MDCRippleFoundation$4 = MDCRippleFoundation.cssClasses,
  1158. BG_ACTIVE_FILL = _MDCRippleFoundation$4.BG_ACTIVE_FILL,
  1159. FG_ACTIVATION = _MDCRippleFoundation$4.FG_ACTIVATION;
  1160. this.adapter_.removeClass(BG_ACTIVE_FILL);
  1161. this.adapter_.removeClass(FG_ACTIVATION);
  1162. this.activationAnimationHasEnded_ = false;
  1163. this.adapter_.computeBoundingRect();
  1164. }
  1165. /**
  1166. * @param {Event} e
  1167. * @private
  1168. */
  1169. }, {
  1170. key: 'deactivate_',
  1171. value: function deactivate_(e) {
  1172. var _this7 = this;
  1173. var activationState = this.activationState_;
  1174. // This can happen in scenarios such as when you have a keyup event that blurs the element.
  1175. if (!activationState.isActivated) {
  1176. return;
  1177. }
  1178. // Programmatic deactivation.
  1179. if (activationState.isProgrammatic) {
  1180. var evtObject = null;
  1181. var _state = /** @type {!ActivationStateType} */_extends({}, activationState);
  1182. requestAnimationFrame(function () {
  1183. return _this7.animateDeactivation_(evtObject, _state);
  1184. });
  1185. this.activationState_ = this.defaultActivationState_();
  1186. return;
  1187. }
  1188. var actualActivationType = DEACTIVATION_ACTIVATION_PAIRS[e.type];
  1189. var expectedActivationType = activationState.activationEvent.type;
  1190. // NOTE: Pointer events are tricky - https://patrickhlauke.github.io/touch/tests/results/
  1191. // Essentially, what we need to do here is decouple the deactivation UX from the actual
  1192. // deactivation state itself. This way, touch/pointer events in sequence do not trample one
  1193. // another.
  1194. var needsDeactivationUX = actualActivationType === expectedActivationType;
  1195. var needsActualDeactivation = needsDeactivationUX;
  1196. if (activationState.wasActivatedByPointer) {
  1197. needsActualDeactivation = e.type === 'mouseup';
  1198. }
  1199. var state = /** @type {!ActivationStateType} */_extends({}, activationState);
  1200. requestAnimationFrame(function () {
  1201. if (needsDeactivationUX) {
  1202. _this7.activationState_.hasDeactivationUXRun = true;
  1203. _this7.animateDeactivation_(e, state);
  1204. }
  1205. if (needsActualDeactivation) {
  1206. _this7.activationState_ = _this7.defaultActivationState_();
  1207. }
  1208. });
  1209. }
  1210. }, {
  1211. key: 'deactivate',
  1212. value: function deactivate() {
  1213. this.deactivate_(null);
  1214. }
  1215. /**
  1216. * @param {Event} e
  1217. * @param {!ActivationStateType} options
  1218. * @private
  1219. */
  1220. }, {
  1221. key: 'animateDeactivation_',
  1222. value: function animateDeactivation_(e, _ref) {
  1223. var wasActivatedByPointer = _ref.wasActivatedByPointer,
  1224. wasElementMadeActive = _ref.wasElementMadeActive;
  1225. var BG_FOCUSED = MDCRippleFoundation.cssClasses.BG_FOCUSED;
  1226. if (wasActivatedByPointer || wasElementMadeActive) {
  1227. // Remove class left over by element being focused
  1228. this.adapter_.removeClass(BG_FOCUSED);
  1229. this.runDeactivationUXLogicIfReady_();
  1230. }
  1231. }
  1232. }, {
  1233. key: 'destroy',
  1234. value: function destroy() {
  1235. var _this8 = this;
  1236. if (!this.isSupported_) {
  1237. return;
  1238. }
  1239. this.removeEventListeners_();
  1240. var _MDCRippleFoundation$5 = MDCRippleFoundation.cssClasses,
  1241. ROOT = _MDCRippleFoundation$5.ROOT,
  1242. UNBOUNDED = _MDCRippleFoundation$5.UNBOUNDED;
  1243. requestAnimationFrame(function () {
  1244. _this8.adapter_.removeClass(ROOT);
  1245. _this8.adapter_.removeClass(UNBOUNDED);
  1246. _this8.removeCssVars_();
  1247. });
  1248. }
  1249. /** @private */
  1250. }, {
  1251. key: 'removeEventListeners_',
  1252. value: function removeEventListeners_() {
  1253. var _this9 = this;
  1254. this.listenerInfos_.forEach(function (info) {
  1255. Object.keys(info).forEach(function (k) {
  1256. _this9.adapter_.deregisterInteractionHandler(info[k], _this9.listeners_[k]);
  1257. });
  1258. });
  1259. this.adapter_.deregisterResizeHandler(this.resizeHandler_);
  1260. }
  1261. /** @private */
  1262. }, {
  1263. key: 'removeCssVars_',
  1264. value: function removeCssVars_() {
  1265. var _this10 = this;
  1266. var strings = MDCRippleFoundation.strings;
  1267. Object.keys(strings).forEach(function (k) {
  1268. if (k.indexOf('VAR_') === 0) {
  1269. _this10.adapter_.updateCssVariable(strings[k], null);
  1270. }
  1271. });
  1272. }
  1273. }, {
  1274. key: 'layout',
  1275. value: function layout() {
  1276. var _this11 = this;
  1277. if (this.layoutFrame_) {
  1278. cancelAnimationFrame(this.layoutFrame_);
  1279. }
  1280. this.layoutFrame_ = requestAnimationFrame(function () {
  1281. _this11.layoutInternal_();
  1282. _this11.layoutFrame_ = 0;
  1283. });
  1284. }
  1285. /** @private */
  1286. }, {
  1287. key: 'layoutInternal_',
  1288. value: function layoutInternal_() {
  1289. this.frame_ = this.adapter_.computeBoundingRect();
  1290. var maxDim = Math.max(this.frame_.height, this.frame_.width);
  1291. var surfaceDiameter = Math.sqrt(Math.pow(this.frame_.width, 2) + Math.pow(this.frame_.height, 2));
  1292. // 60% of the largest dimension of the surface
  1293. this.initialSize_ = maxDim * MDCRippleFoundation.numbers.INITIAL_ORIGIN_SCALE;
  1294. // Diameter of the surface + 10px
  1295. this.maxRadius_ = surfaceDiameter + MDCRippleFoundation.numbers.PADDING;
  1296. this.fgScale_ = this.maxRadius_ / this.initialSize_;
  1297. this.xfDuration_ = 1000 * Math.sqrt(this.maxRadius_ / 1024);
  1298. this.updateLayoutCssVars_();
  1299. }
  1300. /** @private */
  1301. }, {
  1302. key: 'updateLayoutCssVars_',
  1303. value: function updateLayoutCssVars_() {
  1304. var _MDCRippleFoundation$6 = MDCRippleFoundation.strings,
  1305. VAR_SURFACE_WIDTH = _MDCRippleFoundation$6.VAR_SURFACE_WIDTH,
  1306. VAR_SURFACE_HEIGHT = _MDCRippleFoundation$6.VAR_SURFACE_HEIGHT,
  1307. VAR_FG_SIZE = _MDCRippleFoundation$6.VAR_FG_SIZE,
  1308. VAR_LEFT = _MDCRippleFoundation$6.VAR_LEFT,
  1309. VAR_TOP = _MDCRippleFoundation$6.VAR_TOP,
  1310. VAR_FG_SCALE = _MDCRippleFoundation$6.VAR_FG_SCALE;
  1311. this.adapter_.updateCssVariable(VAR_SURFACE_WIDTH, this.frame_.width + 'px');
  1312. this.adapter_.updateCssVariable(VAR_SURFACE_HEIGHT, this.frame_.height + 'px');
  1313. this.adapter_.updateCssVariable(VAR_FG_SIZE, this.initialSize_ + 'px');
  1314. this.adapter_.updateCssVariable(VAR_FG_SCALE, this.fgScale_);
  1315. if (this.adapter_.isUnbounded()) {
  1316. this.unboundedCoords_ = {
  1317. left: Math.round(this.frame_.width / 2 - this.initialSize_ / 2),
  1318. top: Math.round(this.frame_.height / 2 - this.initialSize_ / 2)
  1319. };
  1320. this.adapter_.updateCssVariable(VAR_LEFT, this.unboundedCoords_.left + 'px');
  1321. this.adapter_.updateCssVariable(VAR_TOP, this.unboundedCoords_.top + 'px');
  1322. }
  1323. }
  1324. }]);
  1325. return MDCRippleFoundation;
  1326. }(__WEBPACK_IMPORTED_MODULE_0__material_base_foundation__["a" /* default */]);
  1327. /* harmony default export */ __webpack_exports__["a"] = (MDCRippleFoundation);
  1328. /***/ }),
  1329. /***/ 93:
  1330. /***/ (function(module, exports, __webpack_require__) {
  1331. module.exports = __webpack_require__(6);
  1332. /***/ })
  1333. /******/ });
  1334. });