Copybara bot | be50d49 | 2023-11-30 00:16:42 +0100 | [diff] [blame] | 1 | (function webpackUniversalModuleDefinition(root, factory) { |
| 2 | if(typeof exports === 'object' && typeof module === 'object') |
| 3 | module.exports = factory(); |
| 4 | else if(typeof define === 'function' && define.amd) |
| 5 | define("mdl-ext", [], factory); |
| 6 | else if(typeof exports === 'object') |
| 7 | exports["mdl-ext"] = factory(); |
| 8 | else |
| 9 | root["mdl-ext"] = factory(); |
| 10 | })(this, function() { |
| 11 | return /******/ (function(modules) { // webpackBootstrap |
| 12 | /******/ // The module cache |
| 13 | /******/ var installedModules = {}; |
| 14 | /******/ |
| 15 | /******/ // The require function |
| 16 | /******/ function __webpack_require__(moduleId) { |
| 17 | /******/ |
| 18 | /******/ // Check if module is in cache |
| 19 | /******/ if(installedModules[moduleId]) |
| 20 | /******/ return installedModules[moduleId].exports; |
| 21 | /******/ |
| 22 | /******/ // Create a new module (and put it into the cache) |
| 23 | /******/ var module = installedModules[moduleId] = { |
| 24 | /******/ exports: {}, |
| 25 | /******/ id: moduleId, |
| 26 | /******/ loaded: false |
| 27 | /******/ }; |
| 28 | /******/ |
| 29 | /******/ // Execute the module function |
| 30 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); |
| 31 | /******/ |
| 32 | /******/ // Flag the module as loaded |
| 33 | /******/ module.loaded = true; |
| 34 | /******/ |
| 35 | /******/ // Return the exports of the module |
| 36 | /******/ return module.exports; |
| 37 | /******/ } |
| 38 | /******/ |
| 39 | /******/ |
| 40 | /******/ // expose the modules object (__webpack_modules__) |
| 41 | /******/ __webpack_require__.m = modules; |
| 42 | /******/ |
| 43 | /******/ // expose the module cache |
| 44 | /******/ __webpack_require__.c = installedModules; |
| 45 | /******/ |
| 46 | /******/ // __webpack_public_path__ |
| 47 | /******/ __webpack_require__.p = ""; |
| 48 | /******/ |
| 49 | /******/ // Load entry module and return exports |
| 50 | /******/ return __webpack_require__(0); |
| 51 | /******/ }) |
| 52 | /************************************************************************/ |
| 53 | /******/ ([ |
| 54 | /* 0 */ |
| 55 | /***/ function(module, exports, __webpack_require__) { |
| 56 | |
| 57 | __webpack_require__(113); |
| 58 | module.exports = __webpack_require__(53); |
| 59 | |
| 60 | |
| 61 | /***/ }, |
| 62 | /* 1 */ |
| 63 | /***/ function(module, exports) { |
| 64 | |
| 65 | var core = module.exports = {version: '2.4.0'}; |
| 66 | if(typeof __e == 'number')__e = core; // eslint-disable-line no-undef |
| 67 | |
| 68 | /***/ }, |
| 69 | /* 2 */ |
| 70 | /***/ function(module, exports) { |
| 71 | |
| 72 | 'use strict'; |
| 73 | |
| 74 | Object.defineProperty(exports, "__esModule", { |
| 75 | value: true |
| 76 | }); |
| 77 | var VK_TAB = 9; |
| 78 | var VK_ENTER = 13; |
| 79 | var VK_ESC = 27; |
| 80 | var VK_SPACE = 32; |
| 81 | var VK_PAGE_UP = 33; |
| 82 | var VK_PAGE_DOWN = 34; |
| 83 | var VK_END = 35; |
| 84 | var VK_HOME = 36; |
| 85 | var VK_ARROW_LEFT = 37; |
| 86 | var VK_ARROW_UP = 38; |
| 87 | var VK_ARROW_RIGHT = 39; |
| 88 | var VK_ARROW_DOWN = 40; |
| 89 | |
| 90 | var ARIA_EXPANDED = 'aria-expanded'; |
| 91 | var ARIA_HIDDEN = 'aria-hidden'; |
| 92 | var ARIA_MULTISELECTABLE = 'aria-multiselectable'; |
| 93 | var ARIA_SELECTED = 'aria-selected'; |
| 94 | |
| 95 | var IS_DIRTY = 'is-dirty'; |
| 96 | var IS_DISABLED = 'is-disabled'; |
| 97 | var IS_EXPANDED = 'is-expanded'; |
| 98 | var IS_FOCUSED = 'is-focused'; |
| 99 | var IS_INVALID = 'is-invalid'; |
| 100 | var IS_UPGRADED = 'is-upgraded'; |
| 101 | var DATA_UPGRADED = 'data-upgraded'; |
| 102 | |
| 103 | var MDL_RIPPLE = 'mdl-ripple'; |
| 104 | var MDL_RIPPLE_COMPONENT = 'MaterialRipple'; |
| 105 | var MDL_RIPPLE_EFFECT = 'mdl-js-ripple-effect'; |
| 106 | var MDL_RIPPLE_EFFECT_IGNORE_EVENTS = 'mdl-js-ripple-effect--ignore-events'; |
| 107 | |
| 108 | exports.VK_TAB = VK_TAB; |
| 109 | exports.VK_ENTER = VK_ENTER; |
| 110 | exports.VK_ESC = VK_ESC; |
| 111 | exports.VK_SPACE = VK_SPACE; |
| 112 | exports.VK_PAGE_UP = VK_PAGE_UP; |
| 113 | exports.VK_PAGE_DOWN = VK_PAGE_DOWN; |
| 114 | exports.VK_END = VK_END; |
| 115 | exports.VK_HOME = VK_HOME; |
| 116 | exports.VK_ARROW_LEFT = VK_ARROW_LEFT; |
| 117 | exports.VK_ARROW_UP = VK_ARROW_UP; |
| 118 | exports.VK_ARROW_RIGHT = VK_ARROW_RIGHT; |
| 119 | exports.VK_ARROW_DOWN = VK_ARROW_DOWN; |
| 120 | exports.ARIA_EXPANDED = ARIA_EXPANDED; |
| 121 | exports.ARIA_HIDDEN = ARIA_HIDDEN; |
| 122 | exports.ARIA_MULTISELECTABLE = ARIA_MULTISELECTABLE; |
| 123 | exports.ARIA_SELECTED = ARIA_SELECTED; |
| 124 | exports.IS_DIRTY = IS_DIRTY; |
| 125 | exports.IS_DISABLED = IS_DISABLED; |
| 126 | exports.IS_EXPANDED = IS_EXPANDED; |
| 127 | exports.IS_FOCUSED = IS_FOCUSED; |
| 128 | exports.IS_INVALID = IS_INVALID; |
| 129 | exports.IS_UPGRADED = IS_UPGRADED; |
| 130 | exports.DATA_UPGRADED = DATA_UPGRADED; |
| 131 | exports.MDL_RIPPLE = MDL_RIPPLE; |
| 132 | exports.MDL_RIPPLE_COMPONENT = MDL_RIPPLE_COMPONENT; |
| 133 | exports.MDL_RIPPLE_EFFECT = MDL_RIPPLE_EFFECT; |
| 134 | exports.MDL_RIPPLE_EFFECT_IGNORE_EVENTS = MDL_RIPPLE_EFFECT_IGNORE_EVENTS; |
| 135 | |
| 136 | /***/ }, |
| 137 | /* 3 */ |
| 138 | /***/ function(module, exports, __webpack_require__) { |
| 139 | |
| 140 | var global = __webpack_require__(5) |
| 141 | , core = __webpack_require__(1) |
| 142 | , ctx = __webpack_require__(37) |
| 143 | , hide = __webpack_require__(11) |
| 144 | , PROTOTYPE = 'prototype'; |
| 145 | |
| 146 | var $export = function(type, name, source){ |
| 147 | var IS_FORCED = type & $export.F |
| 148 | , IS_GLOBAL = type & $export.G |
| 149 | , IS_STATIC = type & $export.S |
| 150 | , IS_PROTO = type & $export.P |
| 151 | , IS_BIND = type & $export.B |
| 152 | , IS_WRAP = type & $export.W |
| 153 | , exports = IS_GLOBAL ? core : core[name] || (core[name] = {}) |
| 154 | , expProto = exports[PROTOTYPE] |
| 155 | , target = IS_GLOBAL ? global : IS_STATIC ? global[name] : (global[name] || {})[PROTOTYPE] |
| 156 | , key, own, out; |
| 157 | if(IS_GLOBAL)source = name; |
| 158 | for(key in source){ |
| 159 | // contains in native |
| 160 | own = !IS_FORCED && target && target[key] !== undefined; |
| 161 | if(own && key in exports)continue; |
| 162 | // export native or passed |
| 163 | out = own ? target[key] : source[key]; |
| 164 | // prevent global pollution for namespaces |
| 165 | exports[key] = IS_GLOBAL && typeof target[key] != 'function' ? source[key] |
| 166 | // bind timers to global for call from export context |
| 167 | : IS_BIND && own ? ctx(out, global) |
| 168 | // wrap global constructors for prevent change them in library |
| 169 | : IS_WRAP && target[key] == out ? (function(C){ |
| 170 | var F = function(a, b, c){ |
| 171 | if(this instanceof C){ |
| 172 | switch(arguments.length){ |
| 173 | case 0: return new C; |
| 174 | case 1: return new C(a); |
| 175 | case 2: return new C(a, b); |
| 176 | } return new C(a, b, c); |
| 177 | } return C.apply(this, arguments); |
| 178 | }; |
| 179 | F[PROTOTYPE] = C[PROTOTYPE]; |
| 180 | return F; |
| 181 | // make static versions for prototype methods |
| 182 | })(out) : IS_PROTO && typeof out == 'function' ? ctx(Function.call, out) : out; |
| 183 | // export proto methods to core.%CONSTRUCTOR%.methods.%NAME% |
| 184 | if(IS_PROTO){ |
| 185 | (exports.virtual || (exports.virtual = {}))[key] = out; |
| 186 | // export proto methods to core.%CONSTRUCTOR%.prototype.%NAME% |
| 187 | if(type & $export.R && expProto && !expProto[key])hide(expProto, key, out); |
| 188 | } |
| 189 | } |
| 190 | }; |
| 191 | // type bitmap |
| 192 | $export.F = 1; // forced |
| 193 | $export.G = 2; // global |
| 194 | $export.S = 4; // static |
| 195 | $export.P = 8; // proto |
| 196 | $export.B = 16; // bind |
| 197 | $export.W = 32; // wrap |
| 198 | $export.U = 64; // safe |
| 199 | $export.R = 128; // real proto method for `library` |
| 200 | module.exports = $export; |
| 201 | |
| 202 | /***/ }, |
| 203 | /* 4 */ |
| 204 | /***/ function(module, exports, __webpack_require__) { |
| 205 | |
| 206 | var store = __webpack_require__(44)('wks') |
| 207 | , uid = __webpack_require__(46) |
| 208 | , Symbol = __webpack_require__(5).Symbol |
| 209 | , USE_SYMBOL = typeof Symbol == 'function'; |
| 210 | |
| 211 | var $exports = module.exports = function(name){ |
| 212 | return store[name] || (store[name] = |
| 213 | USE_SYMBOL && Symbol[name] || (USE_SYMBOL ? Symbol : uid)('Symbol.' + name)); |
| 214 | }; |
| 215 | |
| 216 | $exports.store = store; |
| 217 | |
| 218 | /***/ }, |
| 219 | /* 5 */ |
| 220 | /***/ function(module, exports) { |
| 221 | |
| 222 | // https://github.com/zloirock/core-js/issues/86#issuecomment-115759028 |
| 223 | var global = module.exports = typeof window != 'undefined' && window.Math == Math |
| 224 | ? window : typeof self != 'undefined' && self.Math == Math ? self : Function('return this')(); |
| 225 | if(typeof __g == 'number')__g = global; // eslint-disable-line no-undef |
| 226 | |
| 227 | /***/ }, |
| 228 | /* 6 */ |
| 229 | /***/ function(module, exports, __webpack_require__) { |
| 230 | |
| 231 | var isObject = __webpack_require__(17); |
| 232 | module.exports = function(it){ |
| 233 | if(!isObject(it))throw TypeError(it + ' is not an object!'); |
| 234 | return it; |
| 235 | }; |
| 236 | |
| 237 | /***/ }, |
| 238 | /* 7 */ |
| 239 | /***/ function(module, exports) { |
| 240 | |
| 241 | module.exports = {}; |
| 242 | |
| 243 | /***/ }, |
| 244 | /* 8 */ |
| 245 | /***/ function(module, exports, __webpack_require__) { |
| 246 | |
| 247 | "use strict"; |
| 248 | |
| 249 | exports.__esModule = true; |
| 250 | |
| 251 | var _from = __webpack_require__(60); |
| 252 | |
| 253 | var _from2 = _interopRequireDefault(_from); |
| 254 | |
| 255 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } |
| 256 | |
| 257 | exports.default = function (arr) { |
| 258 | if (Array.isArray(arr)) { |
| 259 | for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { |
| 260 | arr2[i] = arr[i]; |
| 261 | } |
| 262 | |
| 263 | return arr2; |
| 264 | } else { |
| 265 | return (0, _from2.default)(arr); |
| 266 | } |
| 267 | }; |
| 268 | |
| 269 | /***/ }, |
| 270 | /* 9 */ |
| 271 | /***/ function(module, exports, __webpack_require__) { |
| 272 | |
| 273 | // Thank's IE8 for his funny defineProperty |
| 274 | module.exports = !__webpack_require__(10)(function(){ |
| 275 | return Object.defineProperty({}, 'a', {get: function(){ return 7; }}).a != 7; |
| 276 | }); |
| 277 | |
| 278 | /***/ }, |
| 279 | /* 10 */ |
| 280 | /***/ function(module, exports) { |
| 281 | |
| 282 | module.exports = function(exec){ |
| 283 | try { |
| 284 | return !!exec(); |
| 285 | } catch(e){ |
| 286 | return true; |
| 287 | } |
| 288 | }; |
| 289 | |
| 290 | /***/ }, |
| 291 | /* 11 */ |
| 292 | /***/ function(module, exports, __webpack_require__) { |
| 293 | |
| 294 | var dP = __webpack_require__(12) |
| 295 | , createDesc = __webpack_require__(25); |
| 296 | module.exports = __webpack_require__(9) ? function(object, key, value){ |
| 297 | return dP.f(object, key, createDesc(1, value)); |
| 298 | } : function(object, key, value){ |
| 299 | object[key] = value; |
| 300 | return object; |
| 301 | }; |
| 302 | |
| 303 | /***/ }, |
| 304 | /* 12 */ |
| 305 | /***/ function(module, exports, __webpack_require__) { |
| 306 | |
| 307 | var anObject = __webpack_require__(6) |
| 308 | , IE8_DOM_DEFINE = __webpack_require__(82) |
| 309 | , toPrimitive = __webpack_require__(101) |
| 310 | , dP = Object.defineProperty; |
| 311 | |
| 312 | exports.f = __webpack_require__(9) ? Object.defineProperty : function defineProperty(O, P, Attributes){ |
| 313 | anObject(O); |
| 314 | P = toPrimitive(P, true); |
| 315 | anObject(Attributes); |
| 316 | if(IE8_DOM_DEFINE)try { |
| 317 | return dP(O, P, Attributes); |
| 318 | } catch(e){ /* empty */ } |
| 319 | if('get' in Attributes || 'set' in Attributes)throw TypeError('Accessors not supported!'); |
| 320 | if('value' in Attributes)O[P] = Attributes.value; |
| 321 | return O; |
| 322 | }; |
| 323 | |
| 324 | /***/ }, |
| 325 | /* 13 */ |
| 326 | /***/ function(module, exports, __webpack_require__) { |
| 327 | |
| 328 | "use strict"; |
| 329 | |
| 330 | Object.defineProperty(exports, "__esModule", { |
| 331 | value: true |
| 332 | }); |
| 333 | |
| 334 | var _apply = __webpack_require__(66); |
| 335 | |
| 336 | var _apply2 = _interopRequireDefault(_apply); |
| 337 | |
| 338 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } |
| 339 | |
| 340 | /** |
| 341 | * Since some events can fire at a high rate, the event handler should be limited to execute computationally |
| 342 | * expensive operations, such as DOM modifications, inside a single rendered frame. |
| 343 | * When listening to e.g. scroll and resize events, the browser tends to fire off more events per |
| 344 | * second than are actually useful. For instance, if your event listener sets some element positions, then it |
| 345 | * is possible for those positions to be updated multiple times in a single rendered frame. In this case, all of |
| 346 | * the layout calculations triggered by setting the elements' positions will be wasted except for the one time that |
| 347 | * it runs immediately prior to the browser rendering the updated layout to the screen. |
| 348 | * To avoid wasting cycles, we can use requestAnimationFrame to only run the event listener once just before the page |
| 349 | * is rendered to the screen. |
| 350 | * * |
| 351 | * @param callback the function to throttle |
| 352 | * @param context optional context of this, default to global |
| 353 | * @return {function(...[*])} |
| 354 | */ |
| 355 | var fullThrottle = function fullThrottle(callback, context) { |
| 356 | |
| 357 | if (!context) { |
| 358 | context = undefined || window; |
| 359 | } |
| 360 | |
| 361 | var throttling = false; |
| 362 | |
| 363 | return function () { |
| 364 | for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { |
| 365 | args[_key] = arguments[_key]; |
| 366 | } |
| 367 | |
| 368 | if (!throttling) { |
| 369 | throttling = true; |
| 370 | window.requestAnimationFrame(function () { |
| 371 | throttling = false; |
| 372 | return (0, _apply2.default)(callback, context, args); |
| 373 | }); |
| 374 | } |
| 375 | }; |
| 376 | }; |
| 377 | |
| 378 | exports.default = fullThrottle; |
| 379 | module.exports = exports["default"]; |
| 380 | |
| 381 | /***/ }, |
| 382 | /* 14 */ |
| 383 | /***/ function(module, exports, __webpack_require__) { |
| 384 | |
| 385 | 'use strict'; |
| 386 | |
| 387 | /** |
| 388 | * Converts a JSON string to object |
| 389 | * @param jsonString |
| 390 | * @param source |
| 391 | */ |
| 392 | |
| 393 | Object.defineProperty(exports, "__esModule", { |
| 394 | value: true |
| 395 | }); |
| 396 | exports.jsonStringToObject = undefined; |
| 397 | |
| 398 | var _assign = __webpack_require__(33); |
| 399 | |
| 400 | var _assign2 = _interopRequireDefault(_assign); |
| 401 | |
| 402 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } |
| 403 | |
| 404 | var jsonStringToObject = function jsonStringToObject(jsonString) { |
| 405 | var source = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; |
| 406 | |
| 407 | var s = jsonString.replace(/'/g, '"'); |
| 408 | try { |
| 409 | return (0, _assign2.default)(source, JSON.parse(s)); |
| 410 | } catch (e) { |
| 411 | throw new Error('Failed to parse json string: ' + s + '. Error: ' + e.message); |
| 412 | } |
| 413 | }; |
| 414 | |
| 415 | exports.jsonStringToObject = jsonStringToObject; |
| 416 | |
| 417 | /***/ }, |
| 418 | /* 15 */ |
| 419 | /***/ function(module, exports, __webpack_require__) { |
| 420 | |
| 421 | 'use strict'; |
| 422 | |
| 423 | /** |
| 424 | * @license |
| 425 | * Copyright 2016 Leif Olsen. All Rights Reserved. |
| 426 | * |
| 427 | * Licensed under the Apache License, Version 2.0 (the "License"); |
| 428 | * you may not use this file except in compliance with the License. |
| 429 | * You may obtain a copy of the License at |
| 430 | * |
| 431 | * http://www.apache.org/licenses/LICENSE-2.0 |
| 432 | * |
| 433 | * Unless required by applicable law or agreed to in writing, software |
| 434 | * distributed under the License is distributed on an "AS IS" BASIS, |
| 435 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| 436 | * See the License for the specific language governing permissions and |
| 437 | * limitations under the License. |
| 438 | */ |
| 439 | |
| 440 | /** |
| 441 | * A javascript utility for conditionally creating a list of strings. |
| 442 | * The function takes any number of arguments which can be a string or object. |
| 443 | * Inspired by (but not copied from) JedWatson/classnames, https://github.com/JedWatson/classnames |
| 444 | * |
| 445 | * @param {*} args the strings and/or objects to |
| 446 | * @return {Array} a list of strings |
| 447 | * @example |
| 448 | * // Returns ['foo', 'bar', 'baz', 'quux'] |
| 449 | * stringList(', ', 'foo', { bar: true, duck: false }, 'baz', { quux: true }); |
| 450 | * @example see the tests for more examples |
| 451 | */ |
| 452 | |
| 453 | Object.defineProperty(exports, "__esModule", { |
| 454 | value: true |
| 455 | }); |
| 456 | exports.stringList = exports.randomString = exports.joinStrings = undefined; |
| 457 | |
| 458 | var _keys = __webpack_require__(65); |
| 459 | |
| 460 | var _keys2 = _interopRequireDefault(_keys); |
| 461 | |
| 462 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } |
| 463 | |
| 464 | var stringList = function stringList() { |
| 465 | for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { |
| 466 | args[_key] = arguments[_key]; |
| 467 | } |
| 468 | |
| 469 | var isString = function isString(str) { |
| 470 | return str != null && typeof str === 'string'; |
| 471 | }; |
| 472 | |
| 473 | var flatten = function flatten(list) { |
| 474 | return list.reduce(function (a, b) { |
| 475 | return a.concat(Array.isArray(b) ? flatten(b) : b); |
| 476 | }, []); |
| 477 | }; |
| 478 | |
| 479 | var objectToStrings = function objectToStrings(arg) { |
| 480 | return (0, _keys2.default)(arg).filter(function (key) { |
| 481 | return arg[key]; |
| 482 | }).map(function (key) { |
| 483 | return key; |
| 484 | }); |
| 485 | }; |
| 486 | |
| 487 | return args.filter(function (arg) { |
| 488 | return !!arg; |
| 489 | }).map(function (arg) { |
| 490 | return isString(arg) ? arg : objectToStrings(arg); |
| 491 | }).reduce(function (result, arg) { |
| 492 | return result.concat(Array.isArray(arg) ? flatten(arg) : arg); |
| 493 | }, []); |
| 494 | }; |
| 495 | |
| 496 | /** |
| 497 | * A simple javascript utility for conditionally joining strings together. |
| 498 | * The function takes a delimiter string and any number of arguments which can be a string or object. |
| 499 | * |
| 500 | * @param delimiter delimiter to separate joined strings |
| 501 | * @param {*} args the strings and/or objects to join |
| 502 | * @return {String} the joined strings |
| 503 | * @example |
| 504 | * // Returns 'foo, bar, baz, quux' |
| 505 | * joinStrings(', ', 'foo', { bar: true, duck: false }, 'baz', { quux: true }); |
| 506 | * @example see the tests for more examples |
| 507 | */ |
| 508 | var joinStrings = function joinStrings() { |
| 509 | for (var _len2 = arguments.length, args = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) { |
| 510 | args[_key2 - 1] = arguments[_key2]; |
| 511 | } |
| 512 | |
| 513 | var delimiter = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ' '; |
| 514 | return stringList.apply(undefined, args).join(delimiter); |
| 515 | }; |
| 516 | |
| 517 | /** |
| 518 | * Generates a random string with a given length |
| 519 | * @param n {Integer} length of generated string |
| 520 | * @see http://stackoverflow.com/questions/1349404/generate-random-string-characters-in-javascript |
| 521 | * @return {String} the random string |
| 522 | * @example |
| 523 | * // Returns e.g. 'pd781w0y' |
| 524 | * randomString(8); |
| 525 | * @example see the tests for more examples |
| 526 | */ |
| 527 | var randomString = function randomString() { |
| 528 | var n = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 12; |
| 529 | return Array(n + 1).join((Math.random().toString(36) + '00000000000000000').slice(2, 18)).slice(0, n); |
| 530 | }; |
| 531 | |
| 532 | exports.joinStrings = joinStrings; |
| 533 | exports.randomString = randomString; |
| 534 | exports.stringList = stringList; |
| 535 | |
| 536 | /***/ }, |
| 537 | /* 16 */ |
| 538 | /***/ function(module, exports) { |
| 539 | |
| 540 | var hasOwnProperty = {}.hasOwnProperty; |
| 541 | module.exports = function(it, key){ |
| 542 | return hasOwnProperty.call(it, key); |
| 543 | }; |
| 544 | |
| 545 | /***/ }, |
| 546 | /* 17 */ |
| 547 | /***/ function(module, exports) { |
| 548 | |
| 549 | module.exports = function(it){ |
| 550 | return typeof it === 'object' ? it !== null : typeof it === 'function'; |
| 551 | }; |
| 552 | |
| 553 | /***/ }, |
| 554 | /* 18 */ |
| 555 | /***/ function(module, exports, __webpack_require__) { |
| 556 | |
| 557 | // 19.1.2.14 / 15.2.3.14 Object.keys(O) |
| 558 | var $keys = __webpack_require__(95) |
| 559 | , enumBugKeys = __webpack_require__(39); |
| 560 | |
| 561 | module.exports = Object.keys || function keys(O){ |
| 562 | return $keys(O, enumBugKeys); |
| 563 | }; |
| 564 | |
| 565 | /***/ }, |
| 566 | /* 19 */ |
| 567 | /***/ function(module, exports, __webpack_require__) { |
| 568 | |
| 569 | // to indexed object, toObject with fallback for non-array-like ES3 strings |
| 570 | var IObject = __webpack_require__(40) |
| 571 | , defined = __webpack_require__(24); |
| 572 | module.exports = function(it){ |
| 573 | return IObject(defined(it)); |
| 574 | }; |
| 575 | |
| 576 | /***/ }, |
| 577 | /* 20 */ |
| 578 | /***/ function(module, exports, __webpack_require__) { |
| 579 | |
| 580 | // 7.1.13 ToObject(argument) |
| 581 | var defined = __webpack_require__(24); |
| 582 | module.exports = function(it){ |
| 583 | return Object(defined(it)); |
| 584 | }; |
| 585 | |
| 586 | /***/ }, |
| 587 | /* 21 */ |
| 588 | /***/ function(module, exports, __webpack_require__) { |
| 589 | |
| 590 | 'use strict'; |
| 591 | |
| 592 | Object.defineProperty(exports, "__esModule", { |
| 593 | value: true |
| 594 | }); |
| 595 | exports.tether = exports.removeChildElements = exports.moveElements = exports.isRectInsideWindowViewport = exports.isFocusable = exports.getScrollParents = exports.getParentElements = exports.getWindowViewport = undefined; |
| 596 | |
| 597 | var _isNan = __webpack_require__(62); |
| 598 | |
| 599 | var _isNan2 = _interopRequireDefault(_isNan); |
| 600 | |
| 601 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } |
| 602 | |
| 603 | /** |
| 604 | * Remove child element(s) |
| 605 | * element.innerHTNL = '' has a performance penality! |
| 606 | * @see http://jsperf.com/empty-an-element/16 |
| 607 | * @see http://jsperf.com/force-reflow |
| 608 | * @param element |
| 609 | * @param forceReflow |
| 610 | */ |
| 611 | var removeChildElements = function removeChildElements(element) { |
| 612 | var forceReflow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true; |
| 613 | |
| 614 | |
| 615 | // See: http://jsperf.com/empty-an-element/16 |
| 616 | while (element.lastChild) { |
| 617 | element.removeChild(element.lastChild); |
| 618 | } |
| 619 | if (forceReflow) { |
| 620 | // See: http://jsperf.com/force-reflow |
| 621 | var d = element.style.display; |
| 622 | |
| 623 | element.style.display = 'none'; |
| 624 | element.style.display = d; |
| 625 | } |
| 626 | }; |
| 627 | |
| 628 | /** |
| 629 | * Moves child elements from a DOM node to another dom node. |
| 630 | * @param source {HTMLElement} |
| 631 | * @param target {HTMLElement} If the target parameter is ommited, a document fragment is created |
| 632 | * @return {HTMLElement} The target node |
| 633 | * |
| 634 | * @example |
| 635 | * // Moves child elements from a DOM node to another dom node. |
| 636 | * moveElements(source, destination); |
| 637 | * |
| 638 | * @example |
| 639 | * // If the second parameter is ommited, a document fragment is created: |
| 640 | * let fragment = moveElements(source); |
| 641 | * |
| 642 | * @See: https://github.com/webmodules/dom-move |
| 643 | */ |
| 644 | var moveElements = function moveElements(source, target) { |
| 645 | if (!target) { |
| 646 | target = source.ownerDocument.createDocumentFragment(); |
| 647 | } |
| 648 | while (source.firstChild) { |
| 649 | target.appendChild(source.firstChild); |
| 650 | } |
| 651 | return target; |
| 652 | }; |
| 653 | |
| 654 | /** |
| 655 | * Get the browser viewport dimensions |
| 656 | * @see http://stackoverflow.com/questions/1248081/get-the-browser-viewport-dimensions-with-javascript |
| 657 | * @return {{windowWidth: number, windowHeight: number}} |
| 658 | */ |
| 659 | var getWindowViewport = function getWindowViewport() { |
| 660 | return { |
| 661 | viewportWidth: Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0), |
| 662 | viewportHeight: Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0) |
| 663 | }; |
| 664 | }; |
| 665 | |
| 666 | /** |
| 667 | * Check whether an element is in the window viewport |
| 668 | * @see http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport/ |
| 669 | * @param top |
| 670 | * @param left |
| 671 | * @param bottom |
| 672 | * @param right |
| 673 | * @return {boolean} true if rectangle is inside window viewport, otherwise false |
| 674 | */ |
| 675 | var isRectInsideWindowViewport = function isRectInsideWindowViewport(_ref) { |
| 676 | var top = _ref.top, |
| 677 | left = _ref.left, |
| 678 | bottom = _ref.bottom, |
| 679 | right = _ref.right; |
| 680 | |
| 681 | var _getWindowViewport = getWindowViewport(), |
| 682 | viewportWidth = _getWindowViewport.viewportWidth, |
| 683 | viewportHeight = _getWindowViewport.viewportHeight; |
| 684 | |
| 685 | return top >= 0 && left >= 0 && bottom <= viewportHeight && right <= viewportWidth; |
| 686 | }; |
| 687 | |
| 688 | /** |
| 689 | * Get a list of parent elements that can possibly scroll |
| 690 | * @param el the element to get parents for |
| 691 | * @returns {Array} |
| 692 | */ |
| 693 | var getScrollParents = function getScrollParents(el) { |
| 694 | var elements = []; |
| 695 | |
| 696 | /* |
| 697 | for (el = el.parentNode; el; el = el.parentNode) { |
| 698 | const cs = window.getComputedStyle(el); |
| 699 | if(!(cs.overflowY === 'hidden' && cs.overflowX === 'hidden')) { |
| 700 | elements.unshift(el); |
| 701 | } |
| 702 | if(el === document.body) { |
| 703 | break; |
| 704 | } |
| 705 | } |
| 706 | */ |
| 707 | |
| 708 | var element = el.parentNode; |
| 709 | while (element) { |
| 710 | var cs = window.getComputedStyle(element); |
| 711 | if (!(cs.overflowY === 'hidden' && cs.overflowX === 'hidden')) { |
| 712 | elements.unshift(element); |
| 713 | } |
| 714 | if (element === document.body) { |
| 715 | break; |
| 716 | } |
| 717 | element = element.parentNode; |
| 718 | } |
| 719 | |
| 720 | return elements; |
| 721 | }; |
| 722 | |
| 723 | /** |
| 724 | * Get a list of parent elements, from a given element to a given element |
| 725 | * @param {HTMLElement} from |
| 726 | * @param {HTMLElement} to |
| 727 | * @return {Array<HTMLElement>} the parent elements, not including from and to |
| 728 | */ |
| 729 | var getParentElements = function getParentElements(from, to) { |
| 730 | var result = []; |
| 731 | var element = from.parentNode; |
| 732 | while (element) { |
| 733 | if (element === to) { |
| 734 | break; |
| 735 | } |
| 736 | result.unshift(element); |
| 737 | element = element.parentNode; |
| 738 | } |
| 739 | return result; |
| 740 | }; |
| 741 | |
| 742 | /** |
| 743 | * Position element next to button |
| 744 | * |
| 745 | * Positioning strategy |
| 746 | * 1. element.height > viewport.height |
| 747 | * let element.height = viewport.heigt |
| 748 | * let element.overflow-y = auto |
| 749 | * 2. element.width > viewport.width |
| 750 | * let element.width = viewport.width |
| 751 | * 3. position element below button, align left edge of element with button left |
| 752 | * done if element inside viewport |
| 753 | * 4. position element below button, align right edge of element with button right |
| 754 | * done if element inside viewport |
| 755 | * 5. positions element above button, aligns left edge of element with button left |
| 756 | * done if element inside viewport |
| 757 | * 6. position element above the control element, aligned to its right. |
| 758 | * done if element inside viewport |
| 759 | * 7. position element at button right hand side, aligns element top with button top |
| 760 | * done if element inside viewport |
| 761 | * 8. position element at button left hand side, aligns element top with button top |
| 762 | * done if element inside viewport |
| 763 | * 9. position element inside viewport |
| 764 | * 1. position element at viewport bottom |
| 765 | * 2. position element at button right hand side |
| 766 | * done if element inside viewport |
| 767 | * 3. position element at button left hand side |
| 768 | * done if element inside viewport |
| 769 | * 4. position element at viewport right |
| 770 | * 10. done |
| 771 | * |
| 772 | */ |
| 773 | var tether = function tether(controlledBy, element) { |
| 774 | var controlRect = controlledBy.getBoundingClientRect(); |
| 775 | |
| 776 | // 1. will element height fit inside window viewport? |
| 777 | |
| 778 | var _getWindowViewport2 = getWindowViewport(), |
| 779 | viewportWidth = _getWindowViewport2.viewportWidth, |
| 780 | viewportHeight = _getWindowViewport2.viewportHeight; |
| 781 | |
| 782 | element.style.height = 'auto'; |
| 783 | //element.style.overflowY = 'hidden'; |
| 784 | if (element.offsetHeight > viewportHeight) { |
| 785 | element.style.height = viewportHeight + 'px'; |
| 786 | element.style.overflowY = 'auto'; |
| 787 | } |
| 788 | |
| 789 | // 2. will element width fit inside window viewport? |
| 790 | element.style.width = 'auto'; |
| 791 | if (element.offsetWidth > viewportWidth) { |
| 792 | element.style.width = viewportWidth + 'px'; |
| 793 | } |
| 794 | |
| 795 | var elementRect = element.getBoundingClientRect(); |
| 796 | |
| 797 | // element to control distance |
| 798 | var dy = controlRect.top - elementRect.top; |
| 799 | var dx = controlRect.left - elementRect.left; |
| 800 | |
| 801 | // element rect, window coordinates relative to top,left of control |
| 802 | var top = elementRect.top + dy; |
| 803 | var left = elementRect.left + dx; |
| 804 | var bottom = top + elementRect.height; |
| 805 | var right = left + elementRect.width; |
| 806 | |
| 807 | // Position relative to control |
| 808 | var ddy = dy; |
| 809 | var ddx = dx; |
| 810 | |
| 811 | if (isRectInsideWindowViewport({ |
| 812 | top: top + controlRect.height, |
| 813 | left: left, |
| 814 | bottom: bottom + controlRect.height, |
| 815 | right: right |
| 816 | })) { |
| 817 | // 3 position element below the control element, aligned to its left |
| 818 | ddy = controlRect.height + dy; |
| 819 | //console.log('***** 3'); |
| 820 | } else if (isRectInsideWindowViewport({ |
| 821 | top: top + controlRect.height, |
| 822 | left: left + controlRect.width - elementRect.width, |
| 823 | bottom: bottom + controlRect.height, |
| 824 | right: left + controlRect.width |
| 825 | })) { |
| 826 | // 4 position element below the control element, aligned to its right |
| 827 | ddy = controlRect.height + dy; |
| 828 | ddx = dx + controlRect.width - elementRect.width; |
| 829 | //console.log('***** 4'); |
| 830 | } else if (isRectInsideWindowViewport({ |
| 831 | top: top - elementRect.height, |
| 832 | left: left, |
| 833 | bottom: bottom - elementRect.height, |
| 834 | right: right |
| 835 | })) { |
| 836 | // 5. position element above the control element, aligned to its left. |
| 837 | ddy = dy - elementRect.height; |
| 838 | //console.log('***** 5'); |
| 839 | } else if (isRectInsideWindowViewport({ |
| 840 | top: top - elementRect.height, |
| 841 | left: left + controlRect.width - elementRect.width, |
| 842 | bottom: bottom - elementRect.height, |
| 843 | right: left + controlRect.width |
| 844 | })) { |
| 845 | // 6. position element above the control element, aligned to its right. |
| 846 | ddy = dy - elementRect.height; |
| 847 | ddx = dx + controlRect.width - elementRect.width; |
| 848 | //console.log('***** 6'); |
| 849 | } else if (isRectInsideWindowViewport({ |
| 850 | top: top, |
| 851 | left: left + controlRect.width, |
| 852 | bottom: bottom, |
| 853 | right: right + controlRect.width |
| 854 | })) { |
| 855 | // 7. position element at button right hand side |
| 856 | ddx = controlRect.width + dx; |
| 857 | //console.log('***** 7'); |
| 858 | } else if (isRectInsideWindowViewport({ |
| 859 | top: top, |
| 860 | left: left - controlRect.width, |
| 861 | bottom: bottom, |
| 862 | right: right - controlRect.width |
| 863 | })) { |
| 864 | // 8. position element at button left hand side |
| 865 | ddx = dx - elementRect.width; |
| 866 | //console.log('***** 8'); |
| 867 | } else { |
| 868 | // 9. position element inside viewport, near controlrect if possible |
| 869 | //console.log('***** 9'); |
| 870 | |
| 871 | // 9.1 position element near controlrect bottom |
| 872 | ddy = dy - bottom + viewportHeight; |
| 873 | if (top + controlRect.height >= 0 && bottom + controlRect.height <= viewportHeight) { |
| 874 | ddy = controlRect.height + dy; |
| 875 | } else if (top - elementRect.height >= 0 && bottom - elementRect.height <= viewportHeight) { |
| 876 | ddy = dy - elementRect.height; |
| 877 | } |
| 878 | |
| 879 | if (left + elementRect.width + controlRect.width <= viewportWidth) { |
| 880 | // 9.2 Position element at button right hand side |
| 881 | ddx = controlRect.width + dx; |
| 882 | //console.log('***** 9.2'); |
| 883 | } else if (left - elementRect.width >= 0) { |
| 884 | // 9.3 Position element at button left hand side |
| 885 | ddx = dx - elementRect.width; |
| 886 | //console.log('***** 9.3'); |
| 887 | } else { |
| 888 | // 9.4 position element at (near) viewport right |
| 889 | var r = left + elementRect.width - viewportWidth; |
| 890 | ddx = dx - r; |
| 891 | //console.log('***** 9.4'); |
| 892 | } |
| 893 | } |
| 894 | |
| 895 | // 10. done |
| 896 | element.style.top = element.offsetTop + ddy + 'px'; |
| 897 | element.style.left = element.offsetLeft + ddx + 'px'; |
| 898 | //console.log('***** 10. done'); |
| 899 | }; |
| 900 | |
| 901 | /** |
| 902 | * Check if the given element can receive focus |
| 903 | * @param {HTMLElement} element the element to check |
| 904 | * @return {boolean} true if the element is focusable, otherwise false |
| 905 | */ |
| 906 | var isFocusable = function isFocusable(element) { |
| 907 | // https://github.com/stephenmathieson/is-focusable/blob/master/index.js |
| 908 | // http://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus |
| 909 | |
| 910 | if (element.hasAttribute('tabindex')) { |
| 911 | var tabindex = element.getAttribute('tabindex'); |
| 912 | if (!(0, _isNan2.default)(tabindex)) { |
| 913 | return parseInt(tabindex) > -1; |
| 914 | } |
| 915 | } |
| 916 | |
| 917 | if (element.hasAttribute('contenteditable') && element.getAttribute('contenteditable') !== 'false') { |
| 918 | // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#attr-contenteditable |
| 919 | return true; |
| 920 | } |
| 921 | |
| 922 | // natively focusable, but only when enabled |
| 923 | var selector = /input|select|textarea|button|details/i; |
| 924 | var name = element.nodeName; |
| 925 | if (selector.test(name)) { |
| 926 | return element.type.toLowerCase() !== 'hidden' && !element.disabled; |
| 927 | } |
| 928 | |
| 929 | // anchors and area must have an href |
| 930 | if (name === 'A' || name === 'AREA') { |
| 931 | return !!element.href; |
| 932 | } |
| 933 | |
| 934 | if (name === 'IFRAME') { |
| 935 | // Check visible iframe |
| 936 | var cs = window.getComputedStyle(element); |
| 937 | return cs.getPropertyValue('display').toLowerCase() !== 'none'; |
| 938 | } |
| 939 | |
| 940 | return false; |
| 941 | }; |
| 942 | |
| 943 | /** |
| 944 | * Get a list of offset parents for given element |
| 945 | * @see https://www.benpickles.com/articles/51-finding-a-dom-nodes-common-ancestor-using-javascript |
| 946 | * @param el the element |
| 947 | * @return {Array} a list of offset parents |
| 948 | */ |
| 949 | /* |
| 950 | const offsetParents = (el) => { |
| 951 | const elements = []; |
| 952 | for (; el; el = el.offsetParent) { |
| 953 | elements.unshift(el); |
| 954 | } |
| 955 | if(!elements.find(e => e === document.body)) { |
| 956 | elements.unshift(document.body); |
| 957 | } |
| 958 | return elements; |
| 959 | }; |
| 960 | */ |
| 961 | |
| 962 | /** |
| 963 | * Finds the common offset ancestor of two DOM nodes |
| 964 | * @see https://www.benpickles.com/articles/51-finding-a-dom-nodes-common-ancestor-using-javascript |
| 965 | * @see https://gist.github.com/benpickles/4059636 |
| 966 | * @param a |
| 967 | * @param b |
| 968 | * @return {Element} The common offset ancestor of a and b |
| 969 | */ |
| 970 | /* |
| 971 | const commonOffsetAncestor = (a, b) => { |
| 972 | const parentsA = offsetParents(a); |
| 973 | const parentsB = offsetParents(b); |
| 974 | |
| 975 | for (let i = 0; i < parentsA.length; i++) { |
| 976 | if (parentsA[i] !== parentsB[i]) return parentsA[i-1]; |
| 977 | } |
| 978 | }; |
| 979 | */ |
| 980 | |
| 981 | /** |
| 982 | * Calculate position relative to a target element |
| 983 | * @see http://stackoverflow.com/questions/21064101/understanding-offsetwidth-clientwidth-scrollwidth-and-height-respectively |
| 984 | * @param target |
| 985 | * @param el |
| 986 | * @return {{top: number, left: number}} |
| 987 | */ |
| 988 | /* |
| 989 | const calcPositionRelativeToTarget = (target, el) => { |
| 990 | let top = 0; |
| 991 | let left = 0; |
| 992 | |
| 993 | while(el) { |
| 994 | top += (el.offsetTop - el.scrollTop + el.clientTop) || 0; |
| 995 | left += (el.offsetLeft - el.scrollLeft + el.clientLeft) || 0; |
| 996 | el = el.offsetParent; |
| 997 | |
| 998 | if(el === target) { |
| 999 | break; |
| 1000 | } |
| 1001 | } |
| 1002 | return { top: top, left: left }; |
| 1003 | }; |
| 1004 | */ |
| 1005 | |
| 1006 | exports.getWindowViewport = getWindowViewport; |
| 1007 | exports.getParentElements = getParentElements; |
| 1008 | exports.getScrollParents = getScrollParents; |
| 1009 | exports.isFocusable = isFocusable; |
| 1010 | exports.isRectInsideWindowViewport = isRectInsideWindowViewport; |
| 1011 | exports.moveElements = moveElements; |
| 1012 | exports.removeChildElements = removeChildElements; |
| 1013 | exports.tether = tether; |
| 1014 | |
| 1015 | /***/ }, |
| 1016 | /* 22 */ |
| 1017 | /***/ function(module, exports) { |
| 1018 | |
| 1019 | "use strict"; |
| 1020 | |
| 1021 | exports.__esModule = true; |
| 1022 | |
| 1023 | exports.default = function (instance, Constructor) { |
| 1024 | if (!(instance instanceof Constructor)) { |
| 1025 | throw new TypeError("Cannot call a class as a function"); |
| 1026 | } |
| 1027 | }; |
| 1028 | |
| 1029 | /***/ }, |
| 1030 | /* 23 */ |
| 1031 | /***/ function(module, exports, __webpack_require__) { |
| 1032 | |
| 1033 | "use strict"; |
| 1034 | |
| 1035 | exports.__esModule = true; |
| 1036 | |
| 1037 | var _defineProperty = __webpack_require__(63); |
| 1038 | |
| 1039 | var _defineProperty2 = _interopRequireDefault(_defineProperty); |
| 1040 | |
| 1041 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } |
| 1042 | |
| 1043 | exports.default = function () { |
| 1044 | function defineProperties(target, props) { |
| 1045 | for (var i = 0; i < props.length; i++) { |
| 1046 | var descriptor = props[i]; |
| 1047 | descriptor.enumerable = descriptor.enumerable || false; |
| 1048 | descriptor.configurable = true; |
| 1049 | if ("value" in descriptor) descriptor.writable = true; |
| 1050 | (0, _defineProperty2.default)(target, descriptor.key, descriptor); |
| 1051 | } |
| 1052 | } |
| 1053 | |
| 1054 | return function (Constructor, protoProps, staticProps) { |
| 1055 | if (protoProps) defineProperties(Constructor.prototype, protoProps); |
| 1056 | if (staticProps) defineProperties(Constructor, staticProps); |
| 1057 | return Constructor; |
| 1058 | }; |
| 1059 | }(); |
| 1060 | |
| 1061 | /***/ }, |
| 1062 | /* 24 */ |
| 1063 | /***/ function(module, exports) { |
| 1064 | |
| 1065 | // 7.2.1 RequireObjectCoercible(argument) |
| 1066 | module.exports = function(it){ |
| 1067 | if(it == undefined)throw TypeError("Can't call method on " + it); |
| 1068 | return it; |
| 1069 | }; |
| 1070 | |
| 1071 | /***/ }, |
| 1072 | /* 25 */ |
| 1073 | /***/ function(module, exports) { |
| 1074 | |
| 1075 | module.exports = function(bitmap, value){ |
| 1076 | return { |
| 1077 | enumerable : !(bitmap & 1), |
| 1078 | configurable: !(bitmap & 2), |
| 1079 | writable : !(bitmap & 4), |
| 1080 | value : value |
| 1081 | }; |
| 1082 | }; |
| 1083 | |
| 1084 | /***/ }, |
| 1085 | /* 26 */ |
| 1086 | /***/ function(module, exports, __webpack_require__) { |
| 1087 | |
| 1088 | var shared = __webpack_require__(44)('keys') |
| 1089 | , uid = __webpack_require__(46); |
| 1090 | module.exports = function(key){ |
| 1091 | return shared[key] || (shared[key] = uid(key)); |
| 1092 | }; |
| 1093 | |
| 1094 | /***/ }, |
| 1095 | /* 27 */ |
| 1096 | /***/ function(module, exports) { |
| 1097 | |
| 1098 | // 7.1.4 ToInteger |
| 1099 | var ceil = Math.ceil |
| 1100 | , floor = Math.floor; |
| 1101 | module.exports = function(it){ |
| 1102 | return isNaN(it = +it) ? 0 : (it > 0 ? floor : ceil)(it); |
| 1103 | }; |
| 1104 | |
| 1105 | /***/ }, |
| 1106 | /* 28 */ |
| 1107 | /***/ function(module, exports, __webpack_require__) { |
| 1108 | |
| 1109 | 'use strict'; |
| 1110 | var $at = __webpack_require__(99)(true); |
| 1111 | |
| 1112 | // 21.1.3.27 String.prototype[@@iterator]() |
| 1113 | __webpack_require__(41)(String, 'String', function(iterated){ |
| 1114 | this._t = String(iterated); // target |
| 1115 | this._i = 0; // next index |
| 1116 | // 21.1.5.2.1 %StringIteratorPrototype%.next() |
| 1117 | }, function(){ |
| 1118 | var O = this._t |
| 1119 | , index = this._i |
| 1120 | , point; |
| 1121 | if(index >= O.length)return {value: undefined, done: true}; |
| 1122 | point = $at(O, index); |
| 1123 | this._i += point.length; |
| 1124 | return {value: point, done: false}; |
| 1125 | }); |
| 1126 | |
| 1127 | /***/ }, |
| 1128 | /* 29 */ |
| 1129 | /***/ function(module, exports) { |
| 1130 | |
| 1131 | 'use strict'; |
| 1132 | |
| 1133 | // See: http://robertpenner.com/easing/ |
| 1134 | |
| 1135 | Object.defineProperty(exports, "__esModule", { |
| 1136 | value: true |
| 1137 | }); |
| 1138 | var easeInOutQuad = function easeInOutQuad(t, b, c, d) { |
| 1139 | t /= d / 2; |
| 1140 | if (t < 1) return c / 2 * t * t + b; |
| 1141 | t--; |
| 1142 | return -c / 2 * (t * (t - 2) - 1) + b; |
| 1143 | }; |
| 1144 | |
| 1145 | var inOutQuintic = function inOutQuintic(t, b, c, d) { |
| 1146 | var ts = (t /= d) * t; |
| 1147 | var tc = ts * t; |
| 1148 | return b + c * (6 * tc * ts + -15 * ts * ts + 10 * tc); |
| 1149 | }; |
| 1150 | |
| 1151 | exports.easeInOutQuad = easeInOutQuad; |
| 1152 | exports.inOutQuintic = inOutQuintic; |
| 1153 | |
| 1154 | /***/ }, |
| 1155 | /* 30 */ |
| 1156 | /***/ function(module, exports) { |
| 1157 | |
| 1158 | 'use strict'; |
| 1159 | |
| 1160 | Object.defineProperty(exports, "__esModule", { |
| 1161 | value: true |
| 1162 | }); |
| 1163 | var MIN_INERVAL = 1000 / 60; |
| 1164 | |
| 1165 | /** |
| 1166 | * Trigger a callback at a given interval |
| 1167 | * @param interval defaults to 1000/60 ms |
| 1168 | * @return {function()} reference to start, stop, immediate and started |
| 1169 | */ |
| 1170 | |
| 1171 | var intervalFunction = function intervalFunction() { |
| 1172 | var interval = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : MIN_INERVAL; |
| 1173 | |
| 1174 | |
| 1175 | var lapse = interval < MIN_INERVAL ? MIN_INERVAL : interval; |
| 1176 | var cb = undefined; |
| 1177 | var next = null; |
| 1178 | var timeElapsed = 0; |
| 1179 | |
| 1180 | var execute = function execute() { |
| 1181 | var f = cb(timeElapsed); |
| 1182 | if (!f) { |
| 1183 | cancel(); |
| 1184 | } |
| 1185 | }; |
| 1186 | |
| 1187 | var cancel = function cancel() { |
| 1188 | if (next) { |
| 1189 | window.cancelAnimationFrame(next); |
| 1190 | } |
| 1191 | next = null; |
| 1192 | timeElapsed = 0; |
| 1193 | }; |
| 1194 | |
| 1195 | var _start = function _start() { |
| 1196 | var timeStart = Date.now(); |
| 1197 | |
| 1198 | var loop = function loop(now) { |
| 1199 | if (next) { |
| 1200 | next = window.requestAnimationFrame(function () { |
| 1201 | return loop(Date.now()); |
| 1202 | }); |
| 1203 | |
| 1204 | timeElapsed += now - timeStart; |
| 1205 | |
| 1206 | if (timeElapsed >= lapse) { |
| 1207 | execute(); |
| 1208 | if ((timeElapsed -= lapse) > lapse) { |
| 1209 | // time elapsed - interval_ > interval_ , indicates inactivity |
| 1210 | // Could be due to browser minimized, tab changed, screen saver started, computer sleep, and so on |
| 1211 | timeElapsed = 0; |
| 1212 | } |
| 1213 | } |
| 1214 | timeStart = now; |
| 1215 | } |
| 1216 | }; |
| 1217 | |
| 1218 | next = 1; // a truthy value for first loop |
| 1219 | loop(timeStart); |
| 1220 | }; |
| 1221 | |
| 1222 | return { |
| 1223 | get started() { |
| 1224 | return next != null; |
| 1225 | }, |
| 1226 | get interval() { |
| 1227 | return lapse; |
| 1228 | }, |
| 1229 | set interval(value) { |
| 1230 | lapse = value < MIN_INERVAL ? MIN_INERVAL : value; |
| 1231 | }, |
| 1232 | start: function start(callback) { |
| 1233 | if (typeof callback !== 'function') { |
| 1234 | throw new TypeError('callback parameter must be a function'); |
| 1235 | } |
| 1236 | cb = callback; |
| 1237 | _start(); |
| 1238 | }, |
| 1239 | immediate: function immediate() { |
| 1240 | if (!cb) { |
| 1241 | throw new ReferenceError('callback parameter is not defined. Call start before immediate.'); |
| 1242 | } |
| 1243 | execute(); |
| 1244 | }, |
| 1245 | |
| 1246 | stop: function stop() { |
| 1247 | return cancel(); |
| 1248 | } |
| 1249 | }; |
| 1250 | }; |
| 1251 | |
| 1252 | exports.default = intervalFunction; |
| 1253 | module.exports = exports['default']; |
| 1254 | |
| 1255 | /***/ }, |
| 1256 | /* 31 */ |
| 1257 | /***/ function(module, exports, __webpack_require__) { |
| 1258 | |
| 1259 | module.exports = { "default": __webpack_require__(69), __esModule: true }; |
| 1260 | |
| 1261 | /***/ }, |
| 1262 | /* 32 */ |
| 1263 | /***/ function(module, exports, __webpack_require__) { |
| 1264 | |
| 1265 | module.exports = { "default": __webpack_require__(71), __esModule: true }; |
| 1266 | |
| 1267 | /***/ }, |
| 1268 | /* 33 */ |
| 1269 | /***/ function(module, exports, __webpack_require__) { |
| 1270 | |
| 1271 | module.exports = { "default": __webpack_require__(73), __esModule: true }; |
| 1272 | |
| 1273 | /***/ }, |
| 1274 | /* 34 */ |
| 1275 | /***/ function(module, exports) { |
| 1276 | |
| 1277 | module.exports = function(it){ |
| 1278 | if(typeof it != 'function')throw TypeError(it + ' is not a function!'); |
| 1279 | return it; |
| 1280 | }; |
| 1281 | |
| 1282 | /***/ }, |
| 1283 | /* 35 */ |
| 1284 | /***/ function(module, exports, __webpack_require__) { |
| 1285 | |
| 1286 | // getting tag from 19.1.3.6 Object.prototype.toString() |
| 1287 | var cof = __webpack_require__(36) |
| 1288 | , TAG = __webpack_require__(4)('toStringTag') |
| 1289 | // ES3 wrong here |
| 1290 | , ARG = cof(function(){ return arguments; }()) == 'Arguments'; |
| 1291 | |
| 1292 | // fallback for IE11 Script Access Denied error |
| 1293 | var tryGet = function(it, key){ |
| 1294 | try { |
| 1295 | return it[key]; |
| 1296 | } catch(e){ /* empty */ } |
| 1297 | }; |
| 1298 | |
| 1299 | module.exports = function(it){ |
| 1300 | var O, T, B; |
| 1301 | return it === undefined ? 'Undefined' : it === null ? 'Null' |
| 1302 | // @@toStringTag case |
| 1303 | : typeof (T = tryGet(O = Object(it), TAG)) == 'string' ? T |
| 1304 | // builtinTag case |
| 1305 | : ARG ? cof(O) |
| 1306 | // ES3 arguments fallback |
| 1307 | : (B = cof(O)) == 'Object' && typeof O.callee == 'function' ? 'Arguments' : B; |
| 1308 | }; |
| 1309 | |
| 1310 | /***/ }, |
| 1311 | /* 36 */ |
| 1312 | /***/ function(module, exports) { |
| 1313 | |
| 1314 | var toString = {}.toString; |
| 1315 | |
| 1316 | module.exports = function(it){ |
| 1317 | return toString.call(it).slice(8, -1); |
| 1318 | }; |
| 1319 | |
| 1320 | /***/ }, |
| 1321 | /* 37 */ |
| 1322 | /***/ function(module, exports, __webpack_require__) { |
| 1323 | |
| 1324 | // optional / simple context binding |
| 1325 | var aFunction = __webpack_require__(34); |
| 1326 | module.exports = function(fn, that, length){ |
| 1327 | aFunction(fn); |
| 1328 | if(that === undefined)return fn; |
| 1329 | switch(length){ |
| 1330 | case 1: return function(a){ |
| 1331 | return fn.call(that, a); |
| 1332 | }; |
| 1333 | case 2: return function(a, b){ |
| 1334 | return fn.call(that, a, b); |
| 1335 | }; |
| 1336 | case 3: return function(a, b, c){ |
| 1337 | return fn.call(that, a, b, c); |
| 1338 | }; |
| 1339 | } |
| 1340 | return function(/* ...args */){ |
| 1341 | return fn.apply(that, arguments); |
| 1342 | }; |
| 1343 | }; |
| 1344 | |
| 1345 | /***/ }, |
| 1346 | /* 38 */ |
| 1347 | /***/ function(module, exports, __webpack_require__) { |
| 1348 | |
| 1349 | var isObject = __webpack_require__(17) |
| 1350 | , document = __webpack_require__(5).document |
| 1351 | // in old IE typeof document.createElement is 'object' |
| 1352 | , is = isObject(document) && isObject(document.createElement); |
| 1353 | module.exports = function(it){ |
| 1354 | return is ? document.createElement(it) : {}; |
| 1355 | }; |
| 1356 | |
| 1357 | /***/ }, |
| 1358 | /* 39 */ |
| 1359 | /***/ function(module, exports) { |
| 1360 | |
| 1361 | // IE 8- don't enum bug keys |
| 1362 | module.exports = ( |
| 1363 | 'constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf' |
| 1364 | ).split(','); |
| 1365 | |
| 1366 | /***/ }, |
| 1367 | /* 40 */ |
| 1368 | /***/ function(module, exports, __webpack_require__) { |
| 1369 | |
| 1370 | // fallback for non-array-like ES3 and non-enumerable old V8 strings |
| 1371 | var cof = __webpack_require__(36); |
| 1372 | module.exports = Object('z').propertyIsEnumerable(0) ? Object : function(it){ |
| 1373 | return cof(it) == 'String' ? it.split('') : Object(it); |
| 1374 | }; |
| 1375 | |
| 1376 | /***/ }, |
| 1377 | /* 41 */ |
| 1378 | /***/ function(module, exports, __webpack_require__) { |
| 1379 | |
| 1380 | 'use strict'; |
| 1381 | var LIBRARY = __webpack_require__(89) |
| 1382 | , $export = __webpack_require__(3) |
| 1383 | , redefine = __webpack_require__(98) |
| 1384 | , hide = __webpack_require__(11) |
| 1385 | , has = __webpack_require__(16) |
| 1386 | , Iterators = __webpack_require__(7) |
| 1387 | , $iterCreate = __webpack_require__(86) |
| 1388 | , setToStringTag = __webpack_require__(43) |
| 1389 | , getPrototypeOf = __webpack_require__(94) |
| 1390 | , ITERATOR = __webpack_require__(4)('iterator') |
| 1391 | , BUGGY = !([].keys && 'next' in [].keys()) // Safari has buggy iterators w/o `next` |
| 1392 | , FF_ITERATOR = '@@iterator' |
| 1393 | , KEYS = 'keys' |
| 1394 | , VALUES = 'values'; |
| 1395 | |
| 1396 | var returnThis = function(){ return this; }; |
| 1397 | |
| 1398 | module.exports = function(Base, NAME, Constructor, next, DEFAULT, IS_SET, FORCED){ |
| 1399 | $iterCreate(Constructor, NAME, next); |
| 1400 | var getMethod = function(kind){ |
| 1401 | if(!BUGGY && kind in proto)return proto[kind]; |
| 1402 | switch(kind){ |
| 1403 | case KEYS: return function keys(){ return new Constructor(this, kind); }; |
| 1404 | case VALUES: return function values(){ return new Constructor(this, kind); }; |
| 1405 | } return function entries(){ return new Constructor(this, kind); }; |
| 1406 | }; |
| 1407 | var TAG = NAME + ' Iterator' |
| 1408 | , DEF_VALUES = DEFAULT == VALUES |
| 1409 | , VALUES_BUG = false |
| 1410 | , proto = Base.prototype |
| 1411 | , $native = proto[ITERATOR] || proto[FF_ITERATOR] || DEFAULT && proto[DEFAULT] |
| 1412 | , $default = $native || getMethod(DEFAULT) |
| 1413 | , $entries = DEFAULT ? !DEF_VALUES ? $default : getMethod('entries') : undefined |
| 1414 | , $anyNative = NAME == 'Array' ? proto.entries || $native : $native |
| 1415 | , methods, key, IteratorPrototype; |
| 1416 | // Fix native |
| 1417 | if($anyNative){ |
| 1418 | IteratorPrototype = getPrototypeOf($anyNative.call(new Base)); |
| 1419 | if(IteratorPrototype !== Object.prototype){ |
| 1420 | // Set @@toStringTag to native iterators |
| 1421 | setToStringTag(IteratorPrototype, TAG, true); |
| 1422 | // fix for some old engines |
| 1423 | if(!LIBRARY && !has(IteratorPrototype, ITERATOR))hide(IteratorPrototype, ITERATOR, returnThis); |
| 1424 | } |
| 1425 | } |
| 1426 | // fix Array#{values, @@iterator}.name in V8 / FF |
| 1427 | if(DEF_VALUES && $native && $native.name !== VALUES){ |
| 1428 | VALUES_BUG = true; |
| 1429 | $default = function values(){ return $native.call(this); }; |
| 1430 | } |
| 1431 | // Define iterator |
| 1432 | if((!LIBRARY || FORCED) && (BUGGY || VALUES_BUG || !proto[ITERATOR])){ |
| 1433 | hide(proto, ITERATOR, $default); |
| 1434 | } |
| 1435 | // Plug for library |
| 1436 | Iterators[NAME] = $default; |
| 1437 | Iterators[TAG] = returnThis; |
| 1438 | if(DEFAULT){ |
| 1439 | methods = { |
| 1440 | values: DEF_VALUES ? $default : getMethod(VALUES), |
| 1441 | keys: IS_SET ? $default : getMethod(KEYS), |
| 1442 | entries: $entries |
| 1443 | }; |
| 1444 | if(FORCED)for(key in methods){ |
| 1445 | if(!(key in proto))redefine(proto, key, methods[key]); |
| 1446 | } else $export($export.P + $export.F * (BUGGY || VALUES_BUG), NAME, methods); |
| 1447 | } |
| 1448 | return methods; |
| 1449 | }; |
| 1450 | |
| 1451 | /***/ }, |
| 1452 | /* 42 */ |
| 1453 | /***/ function(module, exports) { |
| 1454 | |
| 1455 | exports.f = {}.propertyIsEnumerable; |
| 1456 | |
| 1457 | /***/ }, |
| 1458 | /* 43 */ |
| 1459 | /***/ function(module, exports, __webpack_require__) { |
| 1460 | |
| 1461 | var def = __webpack_require__(12).f |
| 1462 | , has = __webpack_require__(16) |
| 1463 | , TAG = __webpack_require__(4)('toStringTag'); |
| 1464 | |
| 1465 | module.exports = function(it, tag, stat){ |
| 1466 | if(it && !has(it = stat ? it : it.prototype, TAG))def(it, TAG, {configurable: true, value: tag}); |
| 1467 | }; |
| 1468 | |
| 1469 | /***/ }, |
| 1470 | /* 44 */ |
| 1471 | /***/ function(module, exports, __webpack_require__) { |
| 1472 | |
| 1473 | var global = __webpack_require__(5) |
| 1474 | , SHARED = '__core-js_shared__' |
| 1475 | , store = global[SHARED] || (global[SHARED] = {}); |
| 1476 | module.exports = function(key){ |
| 1477 | return store[key] || (store[key] = {}); |
| 1478 | }; |
| 1479 | |
| 1480 | /***/ }, |
| 1481 | /* 45 */ |
| 1482 | /***/ function(module, exports, __webpack_require__) { |
| 1483 | |
| 1484 | // 7.1.15 ToLength |
| 1485 | var toInteger = __webpack_require__(27) |
| 1486 | , min = Math.min; |
| 1487 | module.exports = function(it){ |
| 1488 | return it > 0 ? min(toInteger(it), 0x1fffffffffffff) : 0; // pow(2, 53) - 1 == 9007199254740991 |
| 1489 | }; |
| 1490 | |
| 1491 | /***/ }, |
| 1492 | /* 46 */ |
| 1493 | /***/ function(module, exports) { |
| 1494 | |
| 1495 | var id = 0 |
| 1496 | , px = Math.random(); |
| 1497 | module.exports = function(key){ |
| 1498 | return 'Symbol('.concat(key === undefined ? '' : key, ')_', (++id + px).toString(36)); |
| 1499 | }; |
| 1500 | |
| 1501 | /***/ }, |
| 1502 | /* 47 */ |
| 1503 | /***/ function(module, exports, __webpack_require__) { |
| 1504 | |
| 1505 | var classof = __webpack_require__(35) |
| 1506 | , ITERATOR = __webpack_require__(4)('iterator') |
| 1507 | , Iterators = __webpack_require__(7); |
| 1508 | module.exports = __webpack_require__(1).getIteratorMethod = function(it){ |
| 1509 | if(it != undefined)return it[ITERATOR] |
| 1510 | || it['@@iterator'] |
| 1511 | || Iterators[classof(it)]; |
| 1512 | }; |
| 1513 | |
| 1514 | /***/ }, |
| 1515 | /* 48 */ |
| 1516 | /***/ function(module, exports, __webpack_require__) { |
| 1517 | |
| 1518 | __webpack_require__(105); |
| 1519 | var global = __webpack_require__(5) |
| 1520 | , hide = __webpack_require__(11) |
| 1521 | , Iterators = __webpack_require__(7) |
| 1522 | , TO_STRING_TAG = __webpack_require__(4)('toStringTag'); |
| 1523 | |
| 1524 | for(var collections = ['NodeList', 'DOMTokenList', 'MediaList', 'StyleSheetList', 'CSSRuleList'], i = 0; i < 5; i++){ |
| 1525 | var NAME = collections[i] |
| 1526 | , Collection = global[NAME] |
| 1527 | , proto = Collection && Collection.prototype; |
| 1528 | if(proto && !proto[TO_STRING_TAG])hide(proto, TO_STRING_TAG, NAME); |
| 1529 | Iterators[NAME] = Iterators.Array; |
| 1530 | } |
| 1531 | |
| 1532 | /***/ }, |
| 1533 | /* 49 */ |
| 1534 | /***/ function(module, exports, __webpack_require__) { |
| 1535 | |
| 1536 | 'use strict'; |
| 1537 | |
| 1538 | var _toConsumableArray2 = __webpack_require__(8); |
| 1539 | |
| 1540 | var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2); |
| 1541 | |
| 1542 | var _constants = __webpack_require__(2); |
| 1543 | |
| 1544 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } |
| 1545 | |
| 1546 | (function () { |
| 1547 | 'use strict'; |
| 1548 | |
| 1549 | var ACCORDION = 'mdlext-accordion'; |
| 1550 | var ACCORDION_VERTICAL = 'mdlext-accordion--vertical'; |
| 1551 | var ACCORDION_HORIZONTAL = 'mdlext-accordion--horizontal'; |
| 1552 | var PANEL = 'mdlext-accordion__panel'; |
| 1553 | var PANEL_ROLE = 'presentation'; |
| 1554 | var TAB = 'mdlext-accordion__tab'; |
| 1555 | var TAB_CAPTION = 'mdlext-accordion__tab__caption'; |
| 1556 | var TAB_ROLE = 'tab'; |
| 1557 | var TABPANEL = 'mdlext-accordion__tabpanel'; |
| 1558 | var TABPANEL_ROLE = 'tabpanel'; |
| 1559 | var RIPPLE_EFFECT = 'mdlext-js-ripple-effect'; |
| 1560 | var RIPPLE = 'mdlext-accordion__tab--ripple'; |
| 1561 | var ANIMATION_EFFECT = 'mdlext-js-animation-effect'; |
| 1562 | var ANIMATION = 'mdlext-accordion__tabpanel--animation'; |
| 1563 | |
| 1564 | /** |
| 1565 | * @constructor |
| 1566 | * @param {Element} element The element that will be upgraded. |
| 1567 | */ |
| 1568 | var MaterialExtAccordion = function MaterialExtAccordion(element) { |
| 1569 | |
| 1570 | // Stores the Accordion HTML element. |
| 1571 | this.element_ = element; |
| 1572 | |
| 1573 | // Initialize instance. |
| 1574 | this.init(); |
| 1575 | }; |
| 1576 | window['MaterialExtAccordion'] = MaterialExtAccordion; |
| 1577 | |
| 1578 | // Helpers |
| 1579 | var accordionPanelElements = function accordionPanelElements(element) { |
| 1580 | if (!element) { |
| 1581 | return { |
| 1582 | panel: null, |
| 1583 | tab: null, |
| 1584 | tabpanel: null |
| 1585 | }; |
| 1586 | } else if (element.classList.contains(PANEL)) { |
| 1587 | return { |
| 1588 | panel: element, |
| 1589 | tab: element.querySelector('.' + TAB), |
| 1590 | tabpanel: element.querySelector('.' + TABPANEL) |
| 1591 | }; |
| 1592 | } else { |
| 1593 | return { |
| 1594 | panel: element.parentNode, |
| 1595 | tab: element.parentNode.querySelector('.' + TAB), |
| 1596 | tabpanel: element.parentNode.querySelector('.' + TABPANEL) |
| 1597 | }; |
| 1598 | } |
| 1599 | }; |
| 1600 | |
| 1601 | // Private methods. |
| 1602 | |
| 1603 | /** |
| 1604 | * Handles custom command event, 'open', 'close', 'toggle' or upgrade |
| 1605 | * @param event. A custom event |
| 1606 | * @private |
| 1607 | */ |
| 1608 | MaterialExtAccordion.prototype.commandHandler_ = function (event) { |
| 1609 | event.preventDefault(); |
| 1610 | event.stopPropagation(); |
| 1611 | |
| 1612 | if (event && event.detail) { |
| 1613 | this.command(event.detail); |
| 1614 | } |
| 1615 | }; |
| 1616 | |
| 1617 | /** |
| 1618 | * Dispatch toggle event |
| 1619 | * @param {string} state |
| 1620 | * @param {Element} tab |
| 1621 | * @param {Element} tabpanel |
| 1622 | * @private |
| 1623 | */ |
| 1624 | MaterialExtAccordion.prototype.dispatchToggleEvent_ = function (state, tab, tabpanel) { |
| 1625 | var ce = new CustomEvent('toggle', { |
| 1626 | bubbles: true, |
| 1627 | cancelable: true, |
| 1628 | detail: { state: state, tab: tab, tabpanel: tabpanel } |
| 1629 | }); |
| 1630 | this.element_.dispatchEvent(ce); |
| 1631 | }; |
| 1632 | |
| 1633 | /** |
| 1634 | * Open tab |
| 1635 | * @param {Element} panel |
| 1636 | * @param {Element} tab |
| 1637 | * @param {Element} tabpanel |
| 1638 | * @private |
| 1639 | */ |
| 1640 | MaterialExtAccordion.prototype.openTab_ = function (panel, tab, tabpanel) { |
| 1641 | panel.classList.add(_constants.IS_EXPANDED); |
| 1642 | tab.setAttribute(_constants.ARIA_EXPANDED, 'true'); |
| 1643 | tabpanel.removeAttribute('hidden'); |
| 1644 | tabpanel.setAttribute(_constants.ARIA_HIDDEN, 'false'); |
| 1645 | this.dispatchToggleEvent_('open', tab, tabpanel); |
| 1646 | }; |
| 1647 | |
| 1648 | /** |
| 1649 | * Close tab |
| 1650 | * @param {Element} panel |
| 1651 | * @param {Element} tab |
| 1652 | * @param {Element} tabpanel |
| 1653 | * @private |
| 1654 | */ |
| 1655 | MaterialExtAccordion.prototype.closeTab_ = function (panel, tab, tabpanel) { |
| 1656 | panel.classList.remove(_constants.IS_EXPANDED); |
| 1657 | tab.setAttribute(_constants.ARIA_EXPANDED, 'false'); |
| 1658 | tabpanel.setAttribute('hidden', ''); |
| 1659 | tabpanel.setAttribute(_constants.ARIA_HIDDEN, 'true'); |
| 1660 | this.dispatchToggleEvent_('close', tab, tabpanel); |
| 1661 | }; |
| 1662 | |
| 1663 | /** |
| 1664 | * Toggle tab |
| 1665 | * @param {Element} panel |
| 1666 | * @param {Element} tab |
| 1667 | * @param {Element} tabpanel |
| 1668 | * @private |
| 1669 | */ |
| 1670 | MaterialExtAccordion.prototype.toggleTab_ = function (panel, tab, tabpanel) { |
| 1671 | if (!(this.element_.hasAttribute('disabled') || tab.hasAttribute('disabled'))) { |
| 1672 | if (tab.getAttribute(_constants.ARIA_EXPANDED).toLowerCase() === 'true') { |
| 1673 | this.closeTab_(panel, tab, tabpanel); |
| 1674 | } else { |
| 1675 | if (this.element_.getAttribute(_constants.ARIA_MULTISELECTABLE).toLowerCase() !== 'true') { |
| 1676 | this.closeTabs_(); |
| 1677 | } |
| 1678 | this.openTab_(panel, tab, tabpanel); |
| 1679 | } |
| 1680 | } |
| 1681 | }; |
| 1682 | |
| 1683 | /** |
| 1684 | * Open tabs |
| 1685 | * @private |
| 1686 | */ |
| 1687 | MaterialExtAccordion.prototype.openTabs_ = function () { |
| 1688 | var _this = this; |
| 1689 | |
| 1690 | if (this.element_.getAttribute(_constants.ARIA_MULTISELECTABLE).toLowerCase() === 'true') { |
| 1691 | [].concat((0, _toConsumableArray3.default)(this.element_.querySelectorAll('.' + ACCORDION + ' > .' + PANEL))).filter(function (panel) { |
| 1692 | return !panel.classList.contains(_constants.IS_EXPANDED); |
| 1693 | }).forEach(function (closedItem) { |
| 1694 | var tab = closedItem.querySelector('.' + TAB); |
| 1695 | if (!tab.hasAttribute('disabled')) { |
| 1696 | _this.openTab_(closedItem, tab, closedItem.querySelector('.' + TABPANEL)); |
| 1697 | } |
| 1698 | }); |
| 1699 | } |
| 1700 | }; |
| 1701 | |
| 1702 | /** |
| 1703 | * Close tabs |
| 1704 | * @private |
| 1705 | */ |
| 1706 | MaterialExtAccordion.prototype.closeTabs_ = function () { |
| 1707 | var _this2 = this; |
| 1708 | |
| 1709 | [].concat((0, _toConsumableArray3.default)(this.element_.querySelectorAll('.' + ACCORDION + ' > .' + PANEL + '.' + _constants.IS_EXPANDED))).forEach(function (panel) { |
| 1710 | var tab = panel.querySelector('.' + TAB); |
| 1711 | if (!tab.hasAttribute('disabled')) { |
| 1712 | _this2.closeTab_(panel, tab, panel.querySelector('.' + TABPANEL)); |
| 1713 | } |
| 1714 | }); |
| 1715 | }; |
| 1716 | |
| 1717 | // Public methods. |
| 1718 | |
| 1719 | /** |
| 1720 | * Upgrade an individual accordion tab |
| 1721 | * @public |
| 1722 | * @param {Element} tabElement The HTML element for the accordion panel. |
| 1723 | */ |
| 1724 | MaterialExtAccordion.prototype.upgradeTab = function (tabElement) { |
| 1725 | var _this3 = this; |
| 1726 | |
| 1727 | var _accordionPanelElemen = accordionPanelElements(tabElement), |
| 1728 | panel = _accordionPanelElemen.panel, |
| 1729 | tab = _accordionPanelElemen.tab, |
| 1730 | tabpanel = _accordionPanelElemen.tabpanel; |
| 1731 | |
| 1732 | var disableTab = function disableTab() { |
| 1733 | panel.classList.remove(_constants.IS_EXPANDED); |
| 1734 | tab.setAttribute('tabindex', '-1'); |
| 1735 | tab.setAttribute(_constants.ARIA_EXPANDED, 'false'); |
| 1736 | tabpanel.setAttribute('hidden', ''); |
| 1737 | tabpanel.setAttribute(_constants.ARIA_HIDDEN, 'true'); |
| 1738 | }; |
| 1739 | |
| 1740 | var enableTab = function enableTab() { |
| 1741 | if (!tab.hasAttribute(_constants.ARIA_EXPANDED)) { |
| 1742 | tab.setAttribute(_constants.ARIA_EXPANDED, 'false'); |
| 1743 | } |
| 1744 | |
| 1745 | tab.setAttribute('tabindex', '0'); |
| 1746 | |
| 1747 | if (tab.getAttribute(_constants.ARIA_EXPANDED).toLowerCase() === 'true') { |
| 1748 | panel.classList.add(_constants.IS_EXPANDED); |
| 1749 | tabpanel.removeAttribute('hidden'); |
| 1750 | tabpanel.setAttribute(_constants.ARIA_HIDDEN, 'false'); |
| 1751 | } else { |
| 1752 | panel.classList.remove(_constants.IS_EXPANDED); |
| 1753 | tabpanel.setAttribute('hidden', ''); |
| 1754 | tabpanel.setAttribute(_constants.ARIA_HIDDEN, 'true'); |
| 1755 | } |
| 1756 | }; |
| 1757 | |
| 1758 | // In horizontal layout, caption must have a max-width defined to prevent pushing elements to the right of the caption out of view. |
| 1759 | // In JsDom, offsetWidth and offsetHeight properties do not work, so this function is not testable. |
| 1760 | /* istanbul ignore next */ |
| 1761 | var calcMaxTabCaptionWidth = function calcMaxTabCaptionWidth() { |
| 1762 | |
| 1763 | var tabCaption = tab.querySelector('.' + TAB_CAPTION); |
| 1764 | if (tabCaption !== null) { |
| 1765 | var w = [].concat((0, _toConsumableArray3.default)(tab.children)).filter(function (el) { |
| 1766 | return el.classList && !el.classList.contains(TAB_CAPTION); |
| 1767 | }).reduce(function (v, el) { |
| 1768 | return v + el.offsetWidth; |
| 1769 | }, 0); |
| 1770 | |
| 1771 | var maxWidth = tab.clientHeight - w; |
| 1772 | if (maxWidth > 0) { |
| 1773 | tabCaption.style['max-width'] = maxWidth + 'px'; |
| 1774 | } |
| 1775 | } |
| 1776 | }; |
| 1777 | |
| 1778 | var selectTab = function selectTab() { |
| 1779 | if (!tab.hasAttribute(_constants.ARIA_SELECTED)) { |
| 1780 | [].concat((0, _toConsumableArray3.default)(_this3.element_.querySelectorAll('.' + TAB + '[aria-selected="true"]'))).forEach(function (selectedTab) { |
| 1781 | return selectedTab.removeAttribute(_constants.ARIA_SELECTED); |
| 1782 | }); |
| 1783 | tab.setAttribute(_constants.ARIA_SELECTED, 'true'); |
| 1784 | } |
| 1785 | }; |
| 1786 | |
| 1787 | var tabClickHandler = function tabClickHandler() { |
| 1788 | _this3.toggleTab_(panel, tab, tabpanel); |
| 1789 | selectTab(); |
| 1790 | }; |
| 1791 | |
| 1792 | var tabFocusHandler = function tabFocusHandler() { |
| 1793 | selectTab(); |
| 1794 | }; |
| 1795 | |
| 1796 | var tabpanelClickHandler = function tabpanelClickHandler() { |
| 1797 | selectTab(); |
| 1798 | }; |
| 1799 | |
| 1800 | var tabpanelFocusHandler = function tabpanelFocusHandler() { |
| 1801 | selectTab(); |
| 1802 | }; |
| 1803 | |
| 1804 | var tabKeydownHandler = function tabKeydownHandler(e) { |
| 1805 | |
| 1806 | if (_this3.element_.hasAttribute('disabled')) { |
| 1807 | return; |
| 1808 | } |
| 1809 | |
| 1810 | if (e.keyCode === _constants.VK_END || e.keyCode === _constants.VK_HOME || e.keyCode === _constants.VK_ARROW_UP || e.keyCode === _constants.VK_ARROW_LEFT || e.keyCode === _constants.VK_ARROW_DOWN || e.keyCode === _constants.VK_ARROW_RIGHT) { |
| 1811 | |
| 1812 | var nextTab = null; |
| 1813 | var keyCode = e.keyCode; |
| 1814 | |
| 1815 | if (keyCode === _constants.VK_HOME) { |
| 1816 | nextTab = _this3.element_.querySelector('.' + PANEL + ':first-child > .' + TAB); |
| 1817 | if (nextTab && nextTab.hasAttribute('disabled')) { |
| 1818 | nextTab = null; |
| 1819 | keyCode = _constants.VK_ARROW_DOWN; |
| 1820 | } |
| 1821 | } else if (keyCode === _constants.VK_END) { |
| 1822 | nextTab = _this3.element_.querySelector('.' + PANEL + ':last-child > .' + TAB); |
| 1823 | if (nextTab && nextTab.hasAttribute('disabled')) { |
| 1824 | nextTab = null; |
| 1825 | keyCode = _constants.VK_ARROW_UP; |
| 1826 | } |
| 1827 | } |
| 1828 | |
| 1829 | if (!nextTab) { |
| 1830 | var nextPanel = panel; |
| 1831 | |
| 1832 | do { |
| 1833 | if (keyCode === _constants.VK_ARROW_UP || keyCode === _constants.VK_ARROW_LEFT) { |
| 1834 | nextPanel = nextPanel.previousElementSibling; |
| 1835 | if (!nextPanel) { |
| 1836 | nextPanel = _this3.element_.querySelector('.' + PANEL + ':last-child'); |
| 1837 | } |
| 1838 | if (nextPanel) { |
| 1839 | nextTab = nextPanel.querySelector('.' + PANEL + ' > .' + TAB); |
| 1840 | } |
| 1841 | } else if (keyCode === _constants.VK_ARROW_DOWN || keyCode === _constants.VK_ARROW_RIGHT) { |
| 1842 | nextPanel = nextPanel.nextElementSibling; |
| 1843 | if (!nextPanel) { |
| 1844 | nextPanel = _this3.element_.querySelector('.' + PANEL + ':first-child'); |
| 1845 | } |
| 1846 | if (nextPanel) { |
| 1847 | nextTab = nextPanel.querySelector('.' + PANEL + ' > .' + TAB); |
| 1848 | } |
| 1849 | } |
| 1850 | |
| 1851 | if (nextTab && nextTab.hasAttribute('disabled')) { |
| 1852 | nextTab = null; |
| 1853 | } else { |
| 1854 | break; |
| 1855 | } |
| 1856 | } while (nextPanel !== panel); |
| 1857 | } |
| 1858 | |
| 1859 | if (nextTab) { |
| 1860 | e.preventDefault(); |
| 1861 | e.stopPropagation(); |
| 1862 | nextTab.focus(); |
| 1863 | |
| 1864 | // Workaround for JSDom testing: |
| 1865 | // In JsDom 'element.focus()' does not trigger any focus event |
| 1866 | if (!nextTab.hasAttribute(_constants.ARIA_SELECTED)) { |
| 1867 | |
| 1868 | [].concat((0, _toConsumableArray3.default)(_this3.element_.querySelectorAll('.' + TAB + '[aria-selected="true"]'))).forEach(function (selectedTab) { |
| 1869 | return selectedTab.removeAttribute(_constants.ARIA_SELECTED); |
| 1870 | }); |
| 1871 | |
| 1872 | nextTab.setAttribute(_constants.ARIA_SELECTED, 'true'); |
| 1873 | } |
| 1874 | } |
| 1875 | } else if (e.keyCode === _constants.VK_ENTER || e.keyCode === _constants.VK_SPACE) { |
| 1876 | e.preventDefault(); |
| 1877 | e.stopPropagation(); |
| 1878 | _this3.toggleTab_(panel, tab, tabpanel); |
| 1879 | } |
| 1880 | }; |
| 1881 | |
| 1882 | if (tab === null) { |
| 1883 | throw new Error('There must be a tab element for each accordion panel.'); |
| 1884 | } |
| 1885 | |
| 1886 | if (tabpanel === null) { |
| 1887 | throw new Error('There must be a tabpanel element for each accordion panel.'); |
| 1888 | } |
| 1889 | |
| 1890 | panel.setAttribute('role', PANEL_ROLE); |
| 1891 | tab.setAttribute('role', TAB_ROLE); |
| 1892 | tabpanel.setAttribute('role', TABPANEL_ROLE); |
| 1893 | |
| 1894 | if (tab.hasAttribute('disabled')) { |
| 1895 | disableTab(); |
| 1896 | } else { |
| 1897 | enableTab(); |
| 1898 | } |
| 1899 | |
| 1900 | if (this.element_.classList.contains(ACCORDION_HORIZONTAL)) { |
| 1901 | calcMaxTabCaptionWidth(); |
| 1902 | } |
| 1903 | |
| 1904 | if (this.element_.classList.contains(RIPPLE_EFFECT)) { |
| 1905 | tab.classList.add(RIPPLE); |
| 1906 | } |
| 1907 | |
| 1908 | if (this.element_.classList.contains(ANIMATION_EFFECT)) { |
| 1909 | tabpanel.classList.add(ANIMATION); |
| 1910 | } |
| 1911 | |
| 1912 | // Remove listeners, just in case ... |
| 1913 | tab.removeEventListener('click', tabClickHandler); |
| 1914 | tab.removeEventListener('focus', tabFocusHandler); |
| 1915 | tab.removeEventListener('keydown', tabKeydownHandler); |
| 1916 | tabpanel.removeEventListener('click', tabpanelClickHandler); |
| 1917 | tabpanel.removeEventListener('focus', tabpanelFocusHandler); |
| 1918 | |
| 1919 | tab.addEventListener('click', tabClickHandler); |
| 1920 | tab.addEventListener('focus', tabFocusHandler); |
| 1921 | tab.addEventListener('keydown', tabKeydownHandler); |
| 1922 | tabpanel.addEventListener('click', tabpanelClickHandler, true); |
| 1923 | tabpanel.addEventListener('focus', tabpanelFocusHandler, true); |
| 1924 | }; |
| 1925 | MaterialExtAccordion.prototype['upgradeTab'] = MaterialExtAccordion.prototype.upgradeTab; |
| 1926 | |
| 1927 | /** |
| 1928 | * Execute command |
| 1929 | * @param detail |
| 1930 | */ |
| 1931 | MaterialExtAccordion.prototype.command = function (detail) { |
| 1932 | var _this4 = this; |
| 1933 | |
| 1934 | var openTab = function openTab(tabElement) { |
| 1935 | |
| 1936 | if (tabElement === undefined) { |
| 1937 | _this4.openTabs_(); |
| 1938 | } else if (tabElement !== null) { |
| 1939 | var _accordionPanelElemen2 = accordionPanelElements(tabElement), |
| 1940 | panel = _accordionPanelElemen2.panel, |
| 1941 | tab = _accordionPanelElemen2.tab, |
| 1942 | tabpanel = _accordionPanelElemen2.tabpanel; |
| 1943 | |
| 1944 | if (tab.getAttribute(_constants.ARIA_EXPANDED).toLowerCase() !== 'true') { |
| 1945 | _this4.toggleTab_(panel, tab, tabpanel); |
| 1946 | } |
| 1947 | } |
| 1948 | }; |
| 1949 | |
| 1950 | var closeTab = function closeTab(tabElement) { |
| 1951 | if (tabElement === undefined) { |
| 1952 | _this4.closeTabs_(); |
| 1953 | } else if (tabElement !== null) { |
| 1954 | var _accordionPanelElemen3 = accordionPanelElements(tabElement), |
| 1955 | panel = _accordionPanelElemen3.panel, |
| 1956 | tab = _accordionPanelElemen3.tab, |
| 1957 | tabpanel = _accordionPanelElemen3.tabpanel; |
| 1958 | |
| 1959 | if (tab.getAttribute(_constants.ARIA_EXPANDED).toLowerCase() === 'true') { |
| 1960 | _this4.toggleTab_(panel, tab, tabpanel); |
| 1961 | } |
| 1962 | } |
| 1963 | }; |
| 1964 | |
| 1965 | var toggleTab = function toggleTab(tabElement) { |
| 1966 | if (tabElement) { |
| 1967 | var _accordionPanelElemen4 = accordionPanelElements(tabElement), |
| 1968 | panel = _accordionPanelElemen4.panel, |
| 1969 | tab = _accordionPanelElemen4.tab, |
| 1970 | tabpanel = _accordionPanelElemen4.tabpanel; |
| 1971 | |
| 1972 | _this4.toggleTab_(panel, tab, tabpanel); |
| 1973 | } |
| 1974 | }; |
| 1975 | |
| 1976 | if (detail && detail.action) { |
| 1977 | var action = detail.action, |
| 1978 | target = detail.target; |
| 1979 | |
| 1980 | |
| 1981 | switch (action.toLowerCase()) { |
| 1982 | case 'open': |
| 1983 | openTab(target); |
| 1984 | break; |
| 1985 | case 'close': |
| 1986 | closeTab(target); |
| 1987 | break; |
| 1988 | case 'toggle': |
| 1989 | toggleTab(target); |
| 1990 | break; |
| 1991 | case 'upgrade': |
| 1992 | if (target) { |
| 1993 | this.upgradeTab(target); |
| 1994 | } |
| 1995 | break; |
| 1996 | default: |
| 1997 | throw new Error('Unknown action "' + action + '". Action must be one of "open", "close", "toggle" or "upgrade"'); |
| 1998 | } |
| 1999 | } |
| 2000 | }; |
| 2001 | MaterialExtAccordion.prototype['command'] = MaterialExtAccordion.prototype.command; |
| 2002 | |
| 2003 | /** |
| 2004 | * Initialize component |
| 2005 | */ |
| 2006 | MaterialExtAccordion.prototype.init = function () { |
| 2007 | var _this5 = this; |
| 2008 | |
| 2009 | if (this.element_) { |
| 2010 | // Do the init required for this component to work |
| 2011 | if (!(this.element_.classList.contains(ACCORDION_HORIZONTAL) || this.element_.classList.contains(ACCORDION_VERTICAL))) { |
| 2012 | throw new Error('Accordion must have one of the classes "' + ACCORDION_HORIZONTAL + '" or "' + ACCORDION_VERTICAL + '"'); |
| 2013 | } |
| 2014 | |
| 2015 | this.element_.setAttribute('role', 'tablist'); |
| 2016 | |
| 2017 | if (!this.element_.hasAttribute(_constants.ARIA_MULTISELECTABLE)) { |
| 2018 | this.element_.setAttribute(_constants.ARIA_MULTISELECTABLE, 'false'); |
| 2019 | } |
| 2020 | |
| 2021 | this.element_.removeEventListener('command', this.commandHandler_); |
| 2022 | this.element_.addEventListener('command', this.commandHandler_.bind(this), false); |
| 2023 | |
| 2024 | [].concat((0, _toConsumableArray3.default)(this.element_.querySelectorAll('.' + ACCORDION + ' > .' + PANEL))).forEach(function (panel) { |
| 2025 | return _this5.upgradeTab(panel); |
| 2026 | }); |
| 2027 | |
| 2028 | // Set upgraded flag |
| 2029 | this.element_.classList.add(_constants.IS_UPGRADED); |
| 2030 | } |
| 2031 | }; |
| 2032 | |
| 2033 | /* |
| 2034 | * Downgrade component |
| 2035 | * E.g remove listeners and clean up resources |
| 2036 | * |
| 2037 | * Nothing to downgrade |
| 2038 | * |
| 2039 | MaterialExtAccordion.prototype.mdlDowngrade_ = function() { |
| 2040 | 'use strict'; |
| 2041 | console.log('***** MaterialExtAccordion.mdlDowngrade'); |
| 2042 | }; |
| 2043 | */ |
| 2044 | |
| 2045 | // The component registers itself. It can assume componentHandler is available |
| 2046 | // in the global scope. |
| 2047 | /* eslint no-undef: 0 */ |
| 2048 | componentHandler.register({ |
| 2049 | constructor: MaterialExtAccordion, |
| 2050 | classAsString: 'MaterialExtAccordion', |
| 2051 | cssClass: 'mdlext-js-accordion', |
| 2052 | widget: true |
| 2053 | }); |
| 2054 | })(); /** |
| 2055 | * @license |
| 2056 | * Copyright 2016 Leif Olsen. All Rights Reserved. |
| 2057 | * |
| 2058 | * Licensed under the Apache License, Version 2.0 (the "License"); |
| 2059 | * you may not use this file except in compliance with the License. |
| 2060 | * You may obtain a copy of the License at |
| 2061 | * |
| 2062 | * http://www.apache.org/licenses/LICENSE-2.0 |
| 2063 | * |
| 2064 | * Unless required by applicable law or agreed to in writing, software |
| 2065 | * distributed under the License is distributed on an "AS IS" BASIS, |
| 2066 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| 2067 | * See the License for the specific language governing permissions and |
| 2068 | * limitations under the License. |
| 2069 | * |
| 2070 | * This code is built with Google Material Design Lite, |
| 2071 | * which is Licensed under the Apache License, Version 2.0 |
| 2072 | */ |
| 2073 | |
| 2074 | /** |
| 2075 | * A WAI-ARIA friendly accordion component. |
| 2076 | * An accordion is a collection of expandable panels associated with a common outer container. Panels consist |
| 2077 | * of a header and an associated content region or tabpanel. The primary use of an Accordion is to present multiple sections |
| 2078 | * of content on a single page without scrolling, where all of the sections are peers in the application or object hierarchy. |
| 2079 | * The general look is similar to a tree where each root tree node is an expandable accordion header. The user navigates |
| 2080 | * and makes the contents of each panel visible (or not) by interacting with the Accordion Header |
| 2081 | */ |
| 2082 | |
| 2083 | /***/ }, |
| 2084 | /* 50 */ |
| 2085 | /***/ function(module, exports, __webpack_require__) { |
| 2086 | |
| 2087 | 'use strict'; |
| 2088 | |
| 2089 | var _isInteger = __webpack_require__(32); |
| 2090 | |
| 2091 | var _isInteger2 = _interopRequireDefault(_isInteger); |
| 2092 | |
| 2093 | var _toConsumableArray2 = __webpack_require__(8); |
| 2094 | |
| 2095 | var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2); |
| 2096 | |
| 2097 | var _assign = __webpack_require__(33); |
| 2098 | |
| 2099 | var _assign2 = _interopRequireDefault(_assign); |
| 2100 | |
| 2101 | var _intervalFunction = __webpack_require__(30); |
| 2102 | |
| 2103 | var _intervalFunction2 = _interopRequireDefault(_intervalFunction); |
| 2104 | |
| 2105 | var _easing = __webpack_require__(29); |
| 2106 | |
| 2107 | var _jsonUtils = __webpack_require__(14); |
| 2108 | |
| 2109 | var _constants = __webpack_require__(2); |
| 2110 | |
| 2111 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } |
| 2112 | |
| 2113 | /** |
| 2114 | * @license |
| 2115 | * Copyright 2016 Leif Olsen. All Rights Reserved. |
| 2116 | * |
| 2117 | * Licensed under the Apache License, Version 2.0 (the "License"); |
| 2118 | * you may not use this file except in compliance with the License. |
| 2119 | * You may obtain a copy of the License at |
| 2120 | * |
| 2121 | * http://www.apache.org/licenses/LICENSE-2.0 |
| 2122 | * |
| 2123 | * Unless required by applicable law or agreed to in writing, software |
| 2124 | * distributed under the License is distributed on an "AS IS" BASIS, |
| 2125 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| 2126 | * See the License for the specific language governing permissions and |
| 2127 | * limitations under the License. |
| 2128 | * |
| 2129 | * This code is built with Google Material Design Lite, |
| 2130 | * which is Licensed under the Apache License, Version 2.0 |
| 2131 | */ |
| 2132 | |
| 2133 | /** |
| 2134 | * Image carousel |
| 2135 | */ |
| 2136 | |
| 2137 | var MDL_RIPPLE_CONTAINER = 'mdlext-carousel__slide__ripple-container'; |
| 2138 | |
| 2139 | (function () { |
| 2140 | 'use strict'; |
| 2141 | |
| 2142 | //const CAROUSEL = 'mdlext-carousel'; |
| 2143 | |
| 2144 | var SLIDE = 'mdlext-carousel__slide'; |
| 2145 | var ROLE = 'list'; |
| 2146 | var SLIDE_ROLE = 'listitem'; |
| 2147 | |
| 2148 | /** |
| 2149 | * @constructor |
| 2150 | * @param {Element} element The element that will be upgraded. |
| 2151 | */ |
| 2152 | var MaterialExtCarousel = function MaterialExtCarousel(element) { |
| 2153 | // Stores the element. |
| 2154 | this.element_ = element; |
| 2155 | |
| 2156 | // Default config |
| 2157 | this.config_ = { |
| 2158 | interactive: true, |
| 2159 | autostart: false, |
| 2160 | type: 'slide', |
| 2161 | interval: 1000, |
| 2162 | animationLoop: (0, _intervalFunction2.default)(1000) |
| 2163 | }; |
| 2164 | |
| 2165 | this.scrollAnimation_ = (0, _intervalFunction2.default)(33); |
| 2166 | |
| 2167 | // Initialize instance. |
| 2168 | this.init(); |
| 2169 | }; |
| 2170 | |
| 2171 | window['MaterialExtCarousel'] = MaterialExtCarousel; |
| 2172 | |
| 2173 | /** |
| 2174 | * Start slideshow animation |
| 2175 | * @private |
| 2176 | */ |
| 2177 | MaterialExtCarousel.prototype.startSlideShow_ = function () { |
| 2178 | var _this = this; |
| 2179 | |
| 2180 | var nextSlide = function nextSlide() { |
| 2181 | var slide = _this.element_.querySelector('.' + SLIDE + '[aria-selected]'); |
| 2182 | if (slide) { |
| 2183 | slide.removeAttribute('aria-selected'); |
| 2184 | slide = slide.nextElementSibling; |
| 2185 | } |
| 2186 | if (!slide) { |
| 2187 | slide = _this.element_.querySelector('.' + SLIDE + ':first-child'); |
| 2188 | _this.animateScroll_(0); |
| 2189 | } |
| 2190 | if (slide) { |
| 2191 | _this.moveSlideIntoViewport_(slide); |
| 2192 | slide.setAttribute('aria-selected', ''); |
| 2193 | _this.emitSelectEvent_('next', null, slide); |
| 2194 | return true; |
| 2195 | } |
| 2196 | return false; |
| 2197 | }; |
| 2198 | |
| 2199 | var nextScroll = function nextScroll(direction) { |
| 2200 | var nextDirection = direction; |
| 2201 | |
| 2202 | if ('next' === direction && _this.element_.scrollLeft === _this.element_.scrollWidth - _this.element_.clientWidth) { |
| 2203 | nextDirection = 'prev'; |
| 2204 | } else if (_this.element_.scrollLeft === 0) { |
| 2205 | nextDirection = 'next'; |
| 2206 | } |
| 2207 | var x = 'next' === nextDirection ? Math.min(_this.element_.scrollLeft + _this.element_.clientWidth, _this.element_.scrollWidth - _this.element_.clientWidth) : Math.max(_this.element_.scrollLeft - _this.element_.clientWidth, 0); |
| 2208 | |
| 2209 | _this.animateScroll_(x, 1000); |
| 2210 | return nextDirection; |
| 2211 | }; |
| 2212 | |
| 2213 | if (!this.config_.animationLoop.started) { |
| 2214 | (function () { |
| 2215 | _this.config_.animationLoop.interval = _this.config_.interval; |
| 2216 | var direction = 'next'; |
| 2217 | |
| 2218 | if ('scroll' === _this.config_.type) { |
| 2219 | _this.config_.animationLoop.start(function () { |
| 2220 | direction = nextScroll(direction); |
| 2221 | return true; // It runs until cancelSlideShow_ is triggered |
| 2222 | }); |
| 2223 | } else { |
| 2224 | nextSlide(); |
| 2225 | _this.config_.animationLoop.start(function () { |
| 2226 | return nextSlide(); // It runs until cancelSlideShow_ is triggered |
| 2227 | }); |
| 2228 | } |
| 2229 | })(); |
| 2230 | } |
| 2231 | |
| 2232 | // TODO: Pause animation when carousel is not in browser viewport or user changes tab |
| 2233 | }; |
| 2234 | |
| 2235 | /** |
| 2236 | * Cancel slideshow if running. Emmits a 'pause' event |
| 2237 | * @private |
| 2238 | */ |
| 2239 | MaterialExtCarousel.prototype.cancelSlideShow_ = function () { |
| 2240 | if (this.config_.animationLoop.started) { |
| 2241 | this.config_.animationLoop.stop(); |
| 2242 | this.emitSelectEvent_('pause', _constants.VK_ESC, this.element_.querySelector('.' + SLIDE + '[aria-selected]')); |
| 2243 | } |
| 2244 | }; |
| 2245 | |
| 2246 | /** |
| 2247 | * Animate scroll |
| 2248 | * @param newPosition |
| 2249 | * @param newDuration |
| 2250 | * @param completedCallback |
| 2251 | * @private |
| 2252 | */ |
| 2253 | MaterialExtCarousel.prototype.animateScroll_ = function (newPosition, newDuration, completedCallback) { |
| 2254 | var _this2 = this; |
| 2255 | |
| 2256 | var start = this.element_.scrollLeft; |
| 2257 | var distance = newPosition - start; |
| 2258 | |
| 2259 | if (distance !== 0) { |
| 2260 | (function () { |
| 2261 | var duration = Math.max(Math.min(Math.abs(distance), newDuration || 400), 100); // duration is between 100 and newDuration||400ms||distance |
| 2262 | var t = 0; |
| 2263 | _this2.scrollAnimation_.stop(); |
| 2264 | _this2.scrollAnimation_.start(function (timeElapsed) { |
| 2265 | t += timeElapsed; |
| 2266 | if (t < duration) { |
| 2267 | _this2.element_.scrollLeft = (0, _easing.inOutQuintic)(t, start, distance, duration); |
| 2268 | return true; |
| 2269 | } else { |
| 2270 | _this2.element_.scrollLeft = newPosition; |
| 2271 | if (completedCallback) { |
| 2272 | completedCallback(); |
| 2273 | } |
| 2274 | return false; |
| 2275 | } |
| 2276 | }); |
| 2277 | })(); |
| 2278 | } else { |
| 2279 | if (completedCallback) { |
| 2280 | completedCallback(); |
| 2281 | } |
| 2282 | } |
| 2283 | }; |
| 2284 | |
| 2285 | /** |
| 2286 | * Execute commend |
| 2287 | * @param event |
| 2288 | * @private |
| 2289 | */ |
| 2290 | MaterialExtCarousel.prototype.command_ = function (event) { |
| 2291 | var _this3 = this; |
| 2292 | |
| 2293 | var x = 0; |
| 2294 | var slide = null; |
| 2295 | var a = event.detail.action.toLowerCase(); |
| 2296 | |
| 2297 | // Cancel slideshow if running |
| 2298 | this.cancelSlideShow_(); |
| 2299 | |
| 2300 | switch (a) { |
| 2301 | case 'first': |
| 2302 | slide = this.element_.querySelector('.' + SLIDE + ':first-child'); |
| 2303 | break; |
| 2304 | |
| 2305 | case 'last': |
| 2306 | x = this.element_.scrollWidth - this.element_.clientWidth; |
| 2307 | slide = this.element_.querySelector('.' + SLIDE + ':last-child'); |
| 2308 | break; |
| 2309 | |
| 2310 | case 'scroll-prev': |
| 2311 | x = Math.max(this.element_.scrollLeft - this.element_.clientWidth, 0); |
| 2312 | break; |
| 2313 | |
| 2314 | case 'scroll-next': |
| 2315 | x = Math.min(this.element_.scrollLeft + this.element_.clientWidth, this.element_.scrollWidth - this.element_.clientWidth); |
| 2316 | break; |
| 2317 | |
| 2318 | case 'next': |
| 2319 | case 'prev': |
| 2320 | slide = this.element_.querySelector('.' + SLIDE + '[aria-selected]'); |
| 2321 | if (slide) { |
| 2322 | slide = a === 'next' ? slide.nextElementSibling : slide.previousElementSibling; |
| 2323 | this.setAriaSelected_(slide); |
| 2324 | this.emitSelectEvent_(a, null, slide); |
| 2325 | } |
| 2326 | return; |
| 2327 | |
| 2328 | case 'play': |
| 2329 | (0, _assign2.default)(this.config_, event.detail); |
| 2330 | this.startSlideShow_(); |
| 2331 | return; |
| 2332 | |
| 2333 | case 'pause': |
| 2334 | return; |
| 2335 | |
| 2336 | default: |
| 2337 | return; |
| 2338 | } |
| 2339 | |
| 2340 | this.animateScroll_(x, undefined, function () { |
| 2341 | if ('scroll-next' === a || 'scroll-prev' === a) { |
| 2342 | var slides = _this3.getSlidesInViewport_(); |
| 2343 | if (slides.length > 0) { |
| 2344 | slide = 'scroll-next' === a ? slides[0] : slides[slides.length - 1]; |
| 2345 | } |
| 2346 | } |
| 2347 | _this3.setAriaSelected_(slide); |
| 2348 | _this3.emitSelectEvent_(a, null, slide); |
| 2349 | }); |
| 2350 | }; |
| 2351 | |
| 2352 | /** |
| 2353 | * Handles custom command event, 'scroll-prev', 'scroll-next', 'first', 'last', next, prev, play, pause |
| 2354 | * @param event. A custom event |
| 2355 | * @private |
| 2356 | */ |
| 2357 | MaterialExtCarousel.prototype.commandHandler_ = function (event) { |
| 2358 | event.preventDefault(); |
| 2359 | event.stopPropagation(); |
| 2360 | if (event.detail && event.detail.action) { |
| 2361 | this.command_(event); |
| 2362 | } |
| 2363 | }; |
| 2364 | |
| 2365 | /** |
| 2366 | * Handle keypress |
| 2367 | * @param event |
| 2368 | * @private |
| 2369 | */ |
| 2370 | MaterialExtCarousel.prototype.keyDownHandler_ = function (event) { |
| 2371 | |
| 2372 | if (event && event.target && event.target !== this.element_) { |
| 2373 | |
| 2374 | var action = 'first'; |
| 2375 | |
| 2376 | if (event.keyCode === _constants.VK_HOME || event.keyCode === _constants.VK_END || event.keyCode === _constants.VK_PAGE_UP || event.keyCode === _constants.VK_PAGE_DOWN) { |
| 2377 | |
| 2378 | event.preventDefault(); |
| 2379 | if (event.keyCode === _constants.VK_END) { |
| 2380 | action = 'last'; |
| 2381 | } else if (event.keyCode === _constants.VK_PAGE_UP) { |
| 2382 | action = 'scroll-prev'; |
| 2383 | } else if (event.keyCode === _constants.VK_PAGE_DOWN) { |
| 2384 | action = 'scroll-next'; |
| 2385 | } |
| 2386 | |
| 2387 | var cmd = new CustomEvent('select', { |
| 2388 | detail: { |
| 2389 | action: action |
| 2390 | } |
| 2391 | }); |
| 2392 | this.command_(cmd); |
| 2393 | } else if (event.keyCode === _constants.VK_TAB || event.keyCode === _constants.VK_ENTER || event.keyCode === _constants.VK_SPACE || event.keyCode === _constants.VK_ARROW_UP || event.keyCode === _constants.VK_ARROW_LEFT || event.keyCode === _constants.VK_ARROW_DOWN || event.keyCode === _constants.VK_ARROW_RIGHT) { |
| 2394 | |
| 2395 | var slide = getSlide_(event.target); |
| 2396 | |
| 2397 | if (!slide) { |
| 2398 | return; |
| 2399 | } |
| 2400 | |
| 2401 | // Cancel slideshow if running |
| 2402 | this.cancelSlideShow_(); |
| 2403 | |
| 2404 | switch (event.keyCode) { |
| 2405 | case _constants.VK_ARROW_UP: |
| 2406 | case _constants.VK_ARROW_LEFT: |
| 2407 | action = 'prev'; |
| 2408 | slide = slide.previousElementSibling; |
| 2409 | break; |
| 2410 | |
| 2411 | case _constants.VK_ARROW_DOWN: |
| 2412 | case _constants.VK_ARROW_RIGHT: |
| 2413 | action = 'next'; |
| 2414 | slide = slide.nextElementSibling; |
| 2415 | break; |
| 2416 | |
| 2417 | case _constants.VK_TAB: |
| 2418 | if (event.shiftKey) { |
| 2419 | action = 'prev'; |
| 2420 | slide = slide.previousElementSibling; |
| 2421 | } else { |
| 2422 | action = 'next'; |
| 2423 | slide = slide.nextElementSibling; |
| 2424 | } |
| 2425 | break; |
| 2426 | |
| 2427 | case _constants.VK_SPACE: |
| 2428 | case _constants.VK_ENTER: |
| 2429 | action = 'select'; |
| 2430 | break; |
| 2431 | } |
| 2432 | |
| 2433 | if (slide) { |
| 2434 | event.preventDefault(); |
| 2435 | setFocus_(slide); |
| 2436 | this.emitSelectEvent_(action, event.keyCode, slide); |
| 2437 | } |
| 2438 | } |
| 2439 | } |
| 2440 | }; |
| 2441 | |
| 2442 | /** |
| 2443 | * Handle dragging |
| 2444 | * @param event |
| 2445 | * @private |
| 2446 | */ |
| 2447 | MaterialExtCarousel.prototype.dragHandler_ = function (event) { |
| 2448 | var _this4 = this; |
| 2449 | |
| 2450 | event.preventDefault(); |
| 2451 | |
| 2452 | // Cancel slideshow if running |
| 2453 | this.cancelSlideShow_(); |
| 2454 | |
| 2455 | var updating = false; |
| 2456 | var rAFDragId = 0; |
| 2457 | |
| 2458 | var startX = event.clientX || (event.touches !== undefined ? event.touches[0].clientX : 0); |
| 2459 | var prevX = startX; |
| 2460 | var targetElement = event.target; |
| 2461 | |
| 2462 | var update = function update(e) { |
| 2463 | var currentX = e.clientX || (e.touches !== undefined ? e.touches[0].clientX : 0); |
| 2464 | var dx = prevX - currentX; |
| 2465 | |
| 2466 | if (dx < 0) { |
| 2467 | _this4.element_.scrollLeft = Math.max(_this4.element_.scrollLeft + dx, 0); |
| 2468 | } else if (dx > 0) { |
| 2469 | _this4.element_.scrollLeft = Math.min(_this4.element_.scrollLeft + dx, _this4.element_.scrollWidth - _this4.element_.clientWidth); |
| 2470 | } |
| 2471 | |
| 2472 | prevX = currentX; |
| 2473 | updating = false; |
| 2474 | }; |
| 2475 | |
| 2476 | // drag handler |
| 2477 | var drag = function drag(e) { |
| 2478 | e.preventDefault(); |
| 2479 | |
| 2480 | if (!updating) { |
| 2481 | rAFDragId = window.requestAnimationFrame(function () { |
| 2482 | return update(e); |
| 2483 | }); |
| 2484 | updating = true; |
| 2485 | } |
| 2486 | }; |
| 2487 | |
| 2488 | // end drag handler |
| 2489 | var endDrag = function endDrag(e) { |
| 2490 | e.preventDefault(); |
| 2491 | |
| 2492 | _this4.element_.removeEventListener('mousemove', drag); |
| 2493 | _this4.element_.removeEventListener('touchmove', drag); |
| 2494 | window.removeEventListener('mouseup', endDrag); |
| 2495 | window.removeEventListener('touchend', endDrag); |
| 2496 | |
| 2497 | // cancel any existing drag rAF, see: http://www.html5rocks.com/en/tutorials/speed/animations/ |
| 2498 | window.cancelAnimationFrame(rAFDragId); |
| 2499 | |
| 2500 | var slide = getSlide_(targetElement); |
| 2501 | setFocus_(slide); |
| 2502 | _this4.emitSelectEvent_('click', null, slide); |
| 2503 | }; |
| 2504 | |
| 2505 | this.element_.addEventListener('mousemove', drag); |
| 2506 | this.element_.addEventListener('touchmove', drag); |
| 2507 | window.addEventListener('mouseup', endDrag); |
| 2508 | window.addEventListener('touchend', endDrag); |
| 2509 | }; |
| 2510 | |
| 2511 | /** |
| 2512 | * Handle click |
| 2513 | * @param event |
| 2514 | * @private |
| 2515 | */ |
| 2516 | MaterialExtCarousel.prototype.clickHandler_ = function (event) { |
| 2517 | // Click is handled by drag |
| 2518 | event.preventDefault(); |
| 2519 | }; |
| 2520 | |
| 2521 | /** |
| 2522 | * Handle focus |
| 2523 | * @param event |
| 2524 | * @private |
| 2525 | */ |
| 2526 | MaterialExtCarousel.prototype.focusHandler_ = function (event) { |
| 2527 | var slide = getSlide_(event.target); |
| 2528 | if (slide) { |
| 2529 | // The last focused/selected slide has 'aria-selected', even if focus is lost |
| 2530 | this.setAriaSelected_(slide); |
| 2531 | slide.classList.add(_constants.IS_FOCUSED); |
| 2532 | } |
| 2533 | }; |
| 2534 | |
| 2535 | /** |
| 2536 | * Handle blur |
| 2537 | * @param event |
| 2538 | * @private |
| 2539 | */ |
| 2540 | MaterialExtCarousel.prototype.blurHandler_ = function (event) { |
| 2541 | var slide = getSlide_(event.target); |
| 2542 | if (slide) { |
| 2543 | slide.classList.remove(_constants.IS_FOCUSED); |
| 2544 | } |
| 2545 | }; |
| 2546 | |
| 2547 | /** |
| 2548 | * Emits a custeom 'select' event |
| 2549 | * @param command |
| 2550 | * @param keyCode |
| 2551 | * @param slide |
| 2552 | * @private |
| 2553 | */ |
| 2554 | MaterialExtCarousel.prototype.emitSelectEvent_ = function (command, keyCode, slide) { |
| 2555 | |
| 2556 | if (slide) { |
| 2557 | this.moveSlideIntoViewport_(slide); |
| 2558 | |
| 2559 | var evt = new CustomEvent('select', { |
| 2560 | bubbles: true, |
| 2561 | cancelable: true, |
| 2562 | detail: { |
| 2563 | command: command, |
| 2564 | keyCode: keyCode, |
| 2565 | source: slide |
| 2566 | } |
| 2567 | }); |
| 2568 | this.element_.dispatchEvent(evt); |
| 2569 | } |
| 2570 | }; |
| 2571 | |
| 2572 | /** |
| 2573 | * Get the first visible slide in component viewport |
| 2574 | * @private |
| 2575 | */ |
| 2576 | MaterialExtCarousel.prototype.getSlidesInViewport_ = function () { |
| 2577 | var carouselRect = this.element_.getBoundingClientRect(); |
| 2578 | |
| 2579 | var slidesInViewport = [].concat((0, _toConsumableArray3.default)(this.element_.querySelectorAll('.' + SLIDE))).filter(function (slide) { |
| 2580 | var slideRect = slide.getBoundingClientRect(); |
| 2581 | return slideRect.left >= carouselRect.left && slideRect.right <= carouselRect.right; |
| 2582 | }); |
| 2583 | return slidesInViewport; |
| 2584 | }; |
| 2585 | |
| 2586 | /** |
| 2587 | * Move slide into component viewport - if needed |
| 2588 | * @param slide |
| 2589 | * @private |
| 2590 | */ |
| 2591 | MaterialExtCarousel.prototype.moveSlideIntoViewport_ = function (slide) { |
| 2592 | var carouselRect = this.element_.getBoundingClientRect(); |
| 2593 | var slideRect = slide.getBoundingClientRect(); |
| 2594 | |
| 2595 | if (slideRect.left < carouselRect.left) { |
| 2596 | var x = this.element_.scrollLeft - (carouselRect.left - slideRect.left); |
| 2597 | this.animateScroll_(x); |
| 2598 | } else if (slideRect.right > carouselRect.right) { |
| 2599 | var _x = this.element_.scrollLeft - (carouselRect.right - slideRect.right); |
| 2600 | this.animateScroll_(_x); |
| 2601 | } |
| 2602 | }; |
| 2603 | |
| 2604 | /** |
| 2605 | * Removes 'aria-selected' from all slides in carousel |
| 2606 | * @private |
| 2607 | */ |
| 2608 | MaterialExtCarousel.prototype.setAriaSelected_ = function (slide) { |
| 2609 | if (slide) { |
| 2610 | [].concat((0, _toConsumableArray3.default)(this.element_.querySelectorAll('.' + SLIDE + '[aria-selected]'))).forEach(function (slide) { |
| 2611 | return slide.removeAttribute('aria-selected'); |
| 2612 | }); |
| 2613 | slide.setAttribute('aria-selected', ''); |
| 2614 | } |
| 2615 | }; |
| 2616 | |
| 2617 | /** |
| 2618 | * Removes event listeners |
| 2619 | * @private |
| 2620 | */ |
| 2621 | MaterialExtCarousel.prototype.removeListeners_ = function () { |
| 2622 | this.element_.removeEventListener('focus', this.focusHandler_); |
| 2623 | this.element_.removeEventListener('blur', this.blurHandler_); |
| 2624 | this.element_.removeEventListener('keydown', this.keyDownHandler_); |
| 2625 | this.element_.removeEventListener('mousedown', this.dragHandler_); |
| 2626 | this.element_.removeEventListener('touchstart', this.dragHandler_); |
| 2627 | this.element_.removeEventListener('click', this.clickHandler_, false); |
| 2628 | this.element_.removeEventListener('command', this.commandHandler_); |
| 2629 | this.element_.removeEventListener('mdl-componentdowngraded', this.mdlDowngrade_); |
| 2630 | }; |
| 2631 | |
| 2632 | // Helpers |
| 2633 | var getSlide_ = function getSlide_(element) { |
| 2634 | return element.closest('.' + SLIDE); |
| 2635 | }; |
| 2636 | |
| 2637 | var setFocus_ = function setFocus_(slide) { |
| 2638 | if (slide) { |
| 2639 | slide.focus(); |
| 2640 | } |
| 2641 | }; |
| 2642 | |
| 2643 | var addRipple_ = function addRipple_(slide) { |
| 2644 | if (!slide.querySelector('.' + MDL_RIPPLE_CONTAINER)) { |
| 2645 | var rippleContainer = document.createElement('span'); |
| 2646 | rippleContainer.classList.add(MDL_RIPPLE_CONTAINER); |
| 2647 | rippleContainer.classList.add(_constants.MDL_RIPPLE_EFFECT); |
| 2648 | var ripple = document.createElement('span'); |
| 2649 | ripple.classList.add(_constants.MDL_RIPPLE); |
| 2650 | rippleContainer.appendChild(ripple); |
| 2651 | |
| 2652 | var img = slide.querySelector('img'); |
| 2653 | if (img) { |
| 2654 | // rippleContainer blocks image title |
| 2655 | rippleContainer.title = img.title; |
| 2656 | } |
| 2657 | slide.appendChild(rippleContainer); |
| 2658 | componentHandler.upgradeElement(rippleContainer, _constants.MDL_RIPPLE_COMPONENT); |
| 2659 | } |
| 2660 | }; |
| 2661 | // End helpers |
| 2662 | |
| 2663 | |
| 2664 | // Public methods. |
| 2665 | |
| 2666 | /** |
| 2667 | * Cancel animation - if running. |
| 2668 | * |
| 2669 | * @public |
| 2670 | */ |
| 2671 | MaterialExtCarousel.prototype.stopAnimation = function () { |
| 2672 | this.config_.animationLoop.stop(); |
| 2673 | }; |
| 2674 | MaterialExtCarousel.prototype['stopAnimation'] = MaterialExtCarousel.prototype.stopAnimation; |
| 2675 | |
| 2676 | /** |
| 2677 | * Upgrade slides |
| 2678 | * Use if more list elements are added later (dynamically) |
| 2679 | * |
| 2680 | * @public |
| 2681 | */ |
| 2682 | MaterialExtCarousel.prototype.upgradeSlides = function () { |
| 2683 | var _this5 = this; |
| 2684 | |
| 2685 | var hasRippleEffect = this.element_.classList.contains(_constants.MDL_RIPPLE_EFFECT); |
| 2686 | |
| 2687 | [].concat((0, _toConsumableArray3.default)(this.element_.querySelectorAll('.' + SLIDE))).forEach(function (slide) { |
| 2688 | |
| 2689 | slide.setAttribute('role', SLIDE_ROLE); |
| 2690 | |
| 2691 | if (_this5.config_.interactive) { |
| 2692 | if (!slide.getAttribute('tabindex')) { |
| 2693 | slide.setAttribute('tabindex', '0'); |
| 2694 | } |
| 2695 | if (hasRippleEffect) { |
| 2696 | addRipple_(slide); |
| 2697 | } |
| 2698 | } else { |
| 2699 | slide.setAttribute('tabindex', '-1'); |
| 2700 | } |
| 2701 | }); |
| 2702 | }; |
| 2703 | MaterialExtCarousel.prototype['upgradeSlides'] = MaterialExtCarousel.prototype.upgradeSlides; |
| 2704 | |
| 2705 | /** |
| 2706 | * Get config object |
| 2707 | * |
| 2708 | * @public |
| 2709 | */ |
| 2710 | MaterialExtCarousel.prototype.getConfig = function () { |
| 2711 | return this.config_; |
| 2712 | }; |
| 2713 | MaterialExtCarousel.prototype['getConfig'] = MaterialExtCarousel.prototype.getConfig; |
| 2714 | |
| 2715 | /** |
| 2716 | * Initialize component |
| 2717 | */ |
| 2718 | MaterialExtCarousel.prototype.init = function () { |
| 2719 | |
| 2720 | if (this.element_) { |
| 2721 | // Config |
| 2722 | if (this.element_.hasAttribute('data-config')) { |
| 2723 | this.config_ = (0, _jsonUtils.jsonStringToObject)(this.element_.getAttribute('data-config'), this.config_); |
| 2724 | } |
| 2725 | |
| 2726 | // Wai-Aria |
| 2727 | this.element_.setAttribute('role', ROLE); |
| 2728 | |
| 2729 | // Prefer tabindex -1 |
| 2730 | if (!(0, _isInteger2.default)(this.element_.getAttribute('tabindex'))) { |
| 2731 | this.element_.setAttribute('tabindex', -1); |
| 2732 | } |
| 2733 | |
| 2734 | // Remove listeners, just in case ... |
| 2735 | this.removeListeners_(); |
| 2736 | |
| 2737 | if (this.config_.interactive) { |
| 2738 | |
| 2739 | // Ripple |
| 2740 | var hasRippleEffect = this.element_.classList.contains(_constants.MDL_RIPPLE_EFFECT); |
| 2741 | if (hasRippleEffect) { |
| 2742 | this.element_.classList.add(_constants.MDL_RIPPLE_EFFECT_IGNORE_EVENTS); |
| 2743 | } |
| 2744 | |
| 2745 | // Listen to focus/blur events |
| 2746 | this.element_.addEventListener('focus', this.focusHandler_.bind(this), true); |
| 2747 | this.element_.addEventListener('blur', this.blurHandler_.bind(this), true); |
| 2748 | |
| 2749 | // Listen to keyboard events |
| 2750 | this.element_.addEventListener('keydown', this.keyDownHandler_.bind(this), false); |
| 2751 | |
| 2752 | // Listen to drag events |
| 2753 | this.element_.addEventListener('mousedown', this.dragHandler_.bind(this), false); |
| 2754 | this.element_.addEventListener('touchstart', this.dragHandler_.bind(this), false); |
| 2755 | |
| 2756 | // Listen to click events |
| 2757 | this.element_.addEventListener('click', this.clickHandler_.bind(this), false); |
| 2758 | } |
| 2759 | |
| 2760 | // Listen to custom 'command' event |
| 2761 | this.element_.addEventListener('command', this.commandHandler_.bind(this), false); |
| 2762 | |
| 2763 | // Listen to 'mdl-componentdowngraded' event |
| 2764 | this.element_.addEventListener('mdl-componentdowngraded', this.mdlDowngrade_.bind(this)); |
| 2765 | |
| 2766 | // Slides collection |
| 2767 | this.upgradeSlides(); |
| 2768 | |
| 2769 | // Set upgraded flag |
| 2770 | this.element_.classList.add(_constants.IS_UPGRADED); |
| 2771 | |
| 2772 | if (this.config_.autostart) { |
| 2773 | // Start slideshow |
| 2774 | this.startSlideShow_(); |
| 2775 | } |
| 2776 | } |
| 2777 | }; |
| 2778 | |
| 2779 | /* |
| 2780 | * Downgrade component |
| 2781 | * E.g remove listeners and clean up resources |
| 2782 | */ |
| 2783 | MaterialExtCarousel.prototype.mdlDowngrade_ = function () { |
| 2784 | 'use strict'; |
| 2785 | //console.log('***** MaterialExtCarousel.mdlDowngrade_'); |
| 2786 | |
| 2787 | // Stop animation - if any |
| 2788 | |
| 2789 | this.stopAnimation(); |
| 2790 | |
| 2791 | // Remove listeners |
| 2792 | this.removeListeners_(); |
| 2793 | }; |
| 2794 | |
| 2795 | // The component registers itself. It can assume componentHandler is available |
| 2796 | // in the global scope. |
| 2797 | /* eslint no-undef: 0 */ |
| 2798 | componentHandler.register({ |
| 2799 | constructor: MaterialExtCarousel, |
| 2800 | classAsString: 'MaterialExtCarousel', |
| 2801 | cssClass: 'mdlext-js-carousel', |
| 2802 | widget: true |
| 2803 | }); |
| 2804 | })(); |
| 2805 | |
| 2806 | /***/ }, |
| 2807 | /* 51 */ |
| 2808 | /***/ function(module, exports, __webpack_require__) { |
| 2809 | |
| 2810 | 'use strict'; |
| 2811 | |
| 2812 | var _classCallCheck2 = __webpack_require__(22); |
| 2813 | |
| 2814 | var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); |
| 2815 | |
| 2816 | var _createClass2 = __webpack_require__(23); |
| 2817 | |
| 2818 | var _createClass3 = _interopRequireDefault(_createClass2); |
| 2819 | |
| 2820 | var _constants = __webpack_require__(2); |
| 2821 | |
| 2822 | var _stringUtils = __webpack_require__(15); |
| 2823 | |
| 2824 | var _domUtils = __webpack_require__(21); |
| 2825 | |
| 2826 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } |
| 2827 | |
| 2828 | var JS_COLLAPSIBLE = 'mdlext-js-collapsible'; /** |
| 2829 | * @license |
| 2830 | * Copyright 2016-2017 Leif Olsen. All Rights Reserved. |
| 2831 | * |
| 2832 | * Licensed under the Apache License, Version 2.0 (the "License"); |
| 2833 | * you may not use this file except in compliance with the License. |
| 2834 | * You may obtain a copy of the License at |
| 2835 | * |
| 2836 | * http://www.apache.org/licenses/LICENSE-2.0 |
| 2837 | * |
| 2838 | * Unless required by applicable law or agreed to in writing, software |
| 2839 | * distributed under the License is distributed on an "AS IS" BASIS, |
| 2840 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| 2841 | * See the License for the specific language governing permissions and |
| 2842 | * limitations under the License. |
| 2843 | * |
| 2844 | * This code is built with Google Material Design Lite, |
| 2845 | * which is Licensed under the Apache License, Version 2.0 |
| 2846 | */ |
| 2847 | |
| 2848 | /** |
| 2849 | * A collapsible is a component to mark expandable and collapsible regions. |
| 2850 | * The component use the aria-expanded state to indicate whether regions of |
| 2851 | * the content are collapsible, and to expose whether a region is currently |
| 2852 | * expanded or collapsed. |
| 2853 | * @see https://www.w3.org/WAI/GL/wiki/Using_the_WAI-ARIA_aria-expanded_state_to_mark_expandable_and_collapsible_regions |
| 2854 | */ |
| 2855 | |
| 2856 | var COLLAPSIBLE_CONTROL_CLASS = 'mdlext-collapsible'; |
| 2857 | var COLLAPSIBLE_GROUP_CLASS = 'mdlext-collapsible-group'; |
| 2858 | var COLLAPSIBLE_REGION_CLASS = 'mdlext-collapsible-region'; |
| 2859 | |
| 2860 | /** |
| 2861 | * The collapsible component |
| 2862 | */ |
| 2863 | |
| 2864 | var Collapsible = function () { |
| 2865 | |
| 2866 | /** |
| 2867 | * @constructor |
| 2868 | * @param {HTMLElement} element The element that this component is connected to. |
| 2869 | */ |
| 2870 | function Collapsible(element) { |
| 2871 | var _this = this; |
| 2872 | |
| 2873 | (0, _classCallCheck3.default)(this, Collapsible); |
| 2874 | this.element_ = null; |
| 2875 | this.controlElement_ = null; |
| 2876 | |
| 2877 | this.keyDownHandler = function (event) { |
| 2878 | if (event.keyCode === _constants.VK_ENTER || event.keyCode === _constants.VK_SPACE) { |
| 2879 | event.preventDefault(); |
| 2880 | |
| 2881 | // Trigger click |
| 2882 | (event.target || _this.controlElement).dispatchEvent(new MouseEvent('click', { |
| 2883 | bubbles: true, |
| 2884 | cancelable: true, |
| 2885 | view: window |
| 2886 | })); |
| 2887 | } |
| 2888 | }; |
| 2889 | |
| 2890 | this.clickHandler = function (event) { |
| 2891 | if (!_this.isDisabled) { |
| 2892 | if (event.target !== _this.controlElement) { |
| 2893 | // Do not toggle if a focusable element inside the control element triggered the event |
| 2894 | var p = (0, _domUtils.getParentElements)(event.target, _this.controlElement); |
| 2895 | p.push(event.target); |
| 2896 | if (p.find(function (el) { |
| 2897 | return (0, _domUtils.isFocusable)(el); |
| 2898 | })) { |
| 2899 | return; |
| 2900 | } |
| 2901 | } |
| 2902 | _this.toggle(); |
| 2903 | } |
| 2904 | }; |
| 2905 | |
| 2906 | this.element_ = element; |
| 2907 | this.init(); |
| 2908 | } |
| 2909 | |
| 2910 | (0, _createClass3.default)(Collapsible, [{ |
| 2911 | key: 'collapse', |
| 2912 | value: function collapse() { |
| 2913 | if (!this.isDisabled && this.isExpanded) { |
| 2914 | if (this.dispatchToggleEvent('collapse')) { |
| 2915 | this.controlElement.setAttribute('aria-expanded', 'false'); |
| 2916 | var regions = this.regionElements.slice(0); |
| 2917 | for (var i = regions.length - 1; i >= 0; --i) { |
| 2918 | regions[i].setAttribute('hidden', ''); |
| 2919 | } |
| 2920 | } |
| 2921 | } |
| 2922 | } |
| 2923 | }, { |
| 2924 | key: 'expand', |
| 2925 | value: function expand() { |
| 2926 | if (!this.isDisabled && !this.isExpanded) { |
| 2927 | if (this.dispatchToggleEvent('expand')) { |
| 2928 | this.controlElement.setAttribute('aria-expanded', 'true'); |
| 2929 | this.regionElements.forEach(function (region) { |
| 2930 | return region.removeAttribute('hidden'); |
| 2931 | }); |
| 2932 | } |
| 2933 | } |
| 2934 | } |
| 2935 | }, { |
| 2936 | key: 'toggle', |
| 2937 | value: function toggle() { |
| 2938 | if (this.isExpanded) { |
| 2939 | this.collapse(); |
| 2940 | } else { |
| 2941 | this.expand(); |
| 2942 | } |
| 2943 | } |
| 2944 | }, { |
| 2945 | key: 'dispatchToggleEvent', |
| 2946 | value: function dispatchToggleEvent(action) { |
| 2947 | return this.element.dispatchEvent(new CustomEvent('toggle', { |
| 2948 | bubbles: true, |
| 2949 | cancelable: true, |
| 2950 | detail: { |
| 2951 | action: action |
| 2952 | } |
| 2953 | })); |
| 2954 | } |
| 2955 | }, { |
| 2956 | key: 'disableToggle', |
| 2957 | value: function disableToggle() { |
| 2958 | this.controlElement.setAttribute('aria-disabled', true); |
| 2959 | } |
| 2960 | }, { |
| 2961 | key: 'enableToggle', |
| 2962 | value: function enableToggle() { |
| 2963 | this.controlElement.removeAttribute('aria-disabled'); |
| 2964 | } |
| 2965 | }, { |
| 2966 | key: 'addRegionId', |
| 2967 | value: function addRegionId(regionId) { |
| 2968 | var ids = this.regionIds; |
| 2969 | if (!ids.find(function (id) { |
| 2970 | return regionId === id; |
| 2971 | })) { |
| 2972 | ids.push(regionId); |
| 2973 | this.controlElement.setAttribute('aria-controls', ids.join(' ')); |
| 2974 | } |
| 2975 | } |
| 2976 | }, { |
| 2977 | key: 'addRegionElement', |
| 2978 | value: function addRegionElement(region) { |
| 2979 | if (!(region.classList.contains(COLLAPSIBLE_GROUP_CLASS) || region.classList.contains(COLLAPSIBLE_REGION_CLASS))) { |
| 2980 | region.classList.add(COLLAPSIBLE_GROUP_CLASS); |
| 2981 | } |
| 2982 | |
| 2983 | if (!region.hasAttribute('role')) { |
| 2984 | var role = region.classList.contains(COLLAPSIBLE_GROUP_CLASS) ? 'group' : 'region'; |
| 2985 | region.setAttribute('role', role); |
| 2986 | } |
| 2987 | |
| 2988 | if (!region.hasAttribute('id')) { |
| 2989 | region.id = region.getAttribute('role') + '-' + (0, _stringUtils.randomString)(); |
| 2990 | } |
| 2991 | |
| 2992 | if (this.isExpanded) { |
| 2993 | region.removeAttribute('hidden'); |
| 2994 | } else { |
| 2995 | region.setAttribute('hidden', ''); |
| 2996 | } |
| 2997 | this.addRegionId(region.id); |
| 2998 | } |
| 2999 | }, { |
| 3000 | key: 'removeRegionElement', |
| 3001 | value: function removeRegionElement(region) { |
| 3002 | if (region && region.id) { |
| 3003 | var ids = this.regionIds.filter(function (id) { |
| 3004 | return id === region.id; |
| 3005 | }); |
| 3006 | this.controlElement.setAttribute('aria-controls', ids.join(' ')); |
| 3007 | } |
| 3008 | } |
| 3009 | }, { |
| 3010 | key: 'removeListeners', |
| 3011 | value: function removeListeners() { |
| 3012 | this.controlElement.removeEventListener('keydown', this.keyDownHandler); |
| 3013 | this.controlElement.removeEventListener('click', this.clickHandler); |
| 3014 | } |
| 3015 | }, { |
| 3016 | key: 'init', |
| 3017 | value: function init() { |
| 3018 | var _this2 = this; |
| 3019 | |
| 3020 | var initControl = function initControl() { |
| 3021 | // Find the button element |
| 3022 | _this2.controlElement_ = _this2.element.querySelector('.' + COLLAPSIBLE_CONTROL_CLASS) || _this2.element; |
| 3023 | |
| 3024 | // Add "aria-expanded" attribute if not present |
| 3025 | if (!_this2.controlElement.hasAttribute('aria-expanded')) { |
| 3026 | _this2.controlElement.setAttribute('aria-expanded', 'false'); |
| 3027 | } |
| 3028 | |
| 3029 | // Add role=button if control != <button> |
| 3030 | if (_this2.controlElement.nodeName.toLowerCase() !== 'button') { |
| 3031 | _this2.controlElement.setAttribute('role', 'button'); |
| 3032 | } |
| 3033 | |
| 3034 | // Add tabindex |
| 3035 | if (!(0, _domUtils.isFocusable)(_this2.controlElement) && !_this2.controlElement.hasAttribute('tabindex')) { |
| 3036 | _this2.controlElement.setAttribute('tabindex', '0'); |
| 3037 | } |
| 3038 | }; |
| 3039 | |
| 3040 | var initRegions = function initRegions() { |
| 3041 | var regions = []; |
| 3042 | if (!_this2.controlElement.hasAttribute('aria-controls')) { |
| 3043 | // Add siblings as collapsible region(s) |
| 3044 | var r = _this2.element.nextElementSibling; |
| 3045 | while (r) { |
| 3046 | if (r.classList.contains(COLLAPSIBLE_GROUP_CLASS) || r.classList.contains(COLLAPSIBLE_REGION_CLASS)) { |
| 3047 | regions.push(r); |
| 3048 | } else if (r.classList.contains(JS_COLLAPSIBLE)) { |
| 3049 | // A new collapsible component |
| 3050 | break; |
| 3051 | } |
| 3052 | r = r.nextElementSibling; |
| 3053 | } |
| 3054 | } else { |
| 3055 | regions = _this2.regionElements; |
| 3056 | } |
| 3057 | regions.forEach(function (region) { |
| 3058 | return _this2.addRegionElement(region); |
| 3059 | }); |
| 3060 | }; |
| 3061 | |
| 3062 | var addListeners = function addListeners() { |
| 3063 | _this2.controlElement.addEventListener('keydown', _this2.keyDownHandler); |
| 3064 | _this2.controlElement.addEventListener('click', _this2.clickHandler); |
| 3065 | }; |
| 3066 | |
| 3067 | initControl(); |
| 3068 | initRegions(); |
| 3069 | this.removeListeners(); |
| 3070 | addListeners(); |
| 3071 | } |
| 3072 | }, { |
| 3073 | key: 'downgrade', |
| 3074 | value: function downgrade() { |
| 3075 | this.removeListeners(); |
| 3076 | } |
| 3077 | }, { |
| 3078 | key: 'element', |
| 3079 | get: function get() { |
| 3080 | return this.element_; |
| 3081 | } |
| 3082 | }, { |
| 3083 | key: 'controlElement', |
| 3084 | get: function get() { |
| 3085 | return this.controlElement_; |
| 3086 | } |
| 3087 | }, { |
| 3088 | key: 'isDisabled', |
| 3089 | get: function get() { |
| 3090 | return this.controlElement.hasAttribute('disabled') && this.controlElement.getAttribute('disabled').toLowerCase() !== 'false' || this.controlElement.hasAttribute('aria-disabled') && this.controlElement.getAttribute('aria-disabled').toLowerCase() !== 'false'; |
| 3091 | } |
| 3092 | }, { |
| 3093 | key: 'isExpanded', |
| 3094 | get: function get() { |
| 3095 | return this.controlElement.hasAttribute('aria-expanded') && this.controlElement.getAttribute('aria-expanded').toLowerCase() === 'true'; |
| 3096 | } |
| 3097 | }, { |
| 3098 | key: 'regionIds', |
| 3099 | get: function get() { |
| 3100 | return this.controlElement.hasAttribute('aria-controls') ? this.controlElement.getAttribute('aria-controls').split(' ') : []; |
| 3101 | } |
| 3102 | }, { |
| 3103 | key: 'regionElements', |
| 3104 | get: function get() { |
| 3105 | return this.regionIds.map(function (id) { |
| 3106 | return document.querySelector('#' + id); |
| 3107 | }).filter(function (el) { |
| 3108 | return el != null; |
| 3109 | }); |
| 3110 | } |
| 3111 | }]); |
| 3112 | return Collapsible; |
| 3113 | }(); |
| 3114 | |
| 3115 | (function () { |
| 3116 | 'use strict'; |
| 3117 | |
| 3118 | /** |
| 3119 | * @constructor |
| 3120 | * @param {HTMLElement} element The element that will be upgraded. |
| 3121 | */ |
| 3122 | |
| 3123 | var MaterialExtCollapsible = function MaterialExtCollapsible(element) { |
| 3124 | this.element_ = element; |
| 3125 | this.collapsible = null; |
| 3126 | |
| 3127 | // Initialize instance. |
| 3128 | this.init(); |
| 3129 | }; |
| 3130 | window['MaterialExtCollapsible'] = MaterialExtCollapsible; |
| 3131 | |
| 3132 | /** |
| 3133 | * Initialize component |
| 3134 | */ |
| 3135 | MaterialExtCollapsible.prototype.init = function () { |
| 3136 | if (this.element_) { |
| 3137 | this.collapsible = new Collapsible(this.element_); |
| 3138 | this.element_.classList.add(_constants.IS_UPGRADED); |
| 3139 | |
| 3140 | // Listen to 'mdl-componentdowngraded' event |
| 3141 | this.element_.addEventListener('mdl-componentdowngraded', this.mdlDowngrade_.bind(this)); |
| 3142 | } |
| 3143 | }; |
| 3144 | |
| 3145 | /* |
| 3146 | * Downgrade component |
| 3147 | * E.g remove listeners and clean up resources |
| 3148 | */ |
| 3149 | MaterialExtCollapsible.prototype.mdlDowngrade_ = function () { |
| 3150 | this.collapsible.downgrade(); |
| 3151 | }; |
| 3152 | |
| 3153 | // Public methods. |
| 3154 | |
| 3155 | /** |
| 3156 | * Get control element. |
| 3157 | * @return {HTMLElement} element The element that controls the collapsible region. |
| 3158 | * @public |
| 3159 | */ |
| 3160 | MaterialExtCollapsible.prototype.getControlElement = function () { |
| 3161 | return this.collapsible.controlElement; |
| 3162 | }; |
| 3163 | MaterialExtCollapsible.prototype['getControlElement'] = MaterialExtCollapsible.prototype.getControlElement; |
| 3164 | |
| 3165 | /** |
| 3166 | * Get region elements controlled by this collapsible |
| 3167 | * @returns {Array<HTMLElement>} the collapsible region elements |
| 3168 | * @public |
| 3169 | */ |
| 3170 | MaterialExtCollapsible.prototype.getRegionElements = function () { |
| 3171 | return this.collapsible.regionElements; |
| 3172 | }; |
| 3173 | MaterialExtCollapsible.prototype['getRegionElements'] = MaterialExtCollapsible.prototype.getRegionElements; |
| 3174 | |
| 3175 | /** |
| 3176 | * Add region elements. |
| 3177 | * @param {Array<HTMLElement>} elements The element that will be upgraded. |
| 3178 | * @return {void} |
| 3179 | * @public |
| 3180 | */ |
| 3181 | MaterialExtCollapsible.prototype.addRegionElements = function () { |
| 3182 | var _this3 = this; |
| 3183 | |
| 3184 | for (var _len = arguments.length, elements = Array(_len), _key = 0; _key < _len; _key++) { |
| 3185 | elements[_key] = arguments[_key]; |
| 3186 | } |
| 3187 | |
| 3188 | elements.forEach(function (element) { |
| 3189 | return _this3.collapsible.addRegionElement(element); |
| 3190 | }); |
| 3191 | }; |
| 3192 | MaterialExtCollapsible.prototype['addRegionElements'] = MaterialExtCollapsible.prototype.addRegionElements; |
| 3193 | |
| 3194 | /** |
| 3195 | * Remove collapsible region(s) from component. |
| 3196 | * Note: This operation does not delete the element from the DOM tree. |
| 3197 | * @param {Array<HTMLElement>} elements The element that will be upgraded. |
| 3198 | * @public |
| 3199 | */ |
| 3200 | MaterialExtCollapsible.prototype.removeRegionElements = function () { |
| 3201 | var _this4 = this; |
| 3202 | |
| 3203 | for (var _len2 = arguments.length, elements = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { |
| 3204 | elements[_key2] = arguments[_key2]; |
| 3205 | } |
| 3206 | |
| 3207 | elements.forEach(function (element) { |
| 3208 | return _this4.collapsible.removeRegionElement(element); |
| 3209 | }); |
| 3210 | }; |
| 3211 | MaterialExtCollapsible.prototype['removeRegionElements'] = MaterialExtCollapsible.prototype.removeRegionElements; |
| 3212 | |
| 3213 | /** |
| 3214 | * Expand collapsible region(s) |
| 3215 | * @return {void} |
| 3216 | * @public |
| 3217 | */ |
| 3218 | MaterialExtCollapsible.prototype.expand = function () { |
| 3219 | this.collapsible.expand(); |
| 3220 | }; |
| 3221 | MaterialExtCollapsible.prototype['expand'] = MaterialExtCollapsible.prototype.expand; |
| 3222 | |
| 3223 | /** |
| 3224 | * Collapse collapsible region(s) |
| 3225 | * @return {void} |
| 3226 | * @public |
| 3227 | */ |
| 3228 | MaterialExtCollapsible.prototype.collapse = function () { |
| 3229 | this.collapsible.collapse(); |
| 3230 | }; |
| 3231 | MaterialExtCollapsible.prototype['collapse'] = MaterialExtCollapsible.prototype.collapse; |
| 3232 | |
| 3233 | /** |
| 3234 | * Toggle collapsible region(s) |
| 3235 | * @return {void} |
| 3236 | * @public |
| 3237 | */ |
| 3238 | MaterialExtCollapsible.prototype.toggle = function () { |
| 3239 | this.collapsible.toggle(); |
| 3240 | }; |
| 3241 | MaterialExtCollapsible.prototype['toggle'] = MaterialExtCollapsible.prototype.toggle; |
| 3242 | |
| 3243 | /** |
| 3244 | * Check whether component has aria-expanded state true |
| 3245 | * @return {Boolean} true if aria-expanded="true", otherwise false |
| 3246 | */ |
| 3247 | MaterialExtCollapsible.prototype.isExpanded = function () { |
| 3248 | return this.collapsible.isExpanded; |
| 3249 | }; |
| 3250 | MaterialExtCollapsible.prototype['isExpanded'] = MaterialExtCollapsible.prototype.isExpanded; |
| 3251 | |
| 3252 | /** |
| 3253 | * Check whether component has aria-disabled state set to true |
| 3254 | * @return {Boolean} true if aria-disabled="true", otherwise false |
| 3255 | */ |
| 3256 | MaterialExtCollapsible.prototype.isDisabled = function () { |
| 3257 | return this.collapsible.isDisabled; |
| 3258 | }; |
| 3259 | MaterialExtCollapsible.prototype['isDisabled'] = MaterialExtCollapsible.prototype.isDisabled; |
| 3260 | |
| 3261 | /** |
| 3262 | * Disables toggling of collapsible region(s) |
| 3263 | * @return {void} |
| 3264 | * @public |
| 3265 | */ |
| 3266 | MaterialExtCollapsible.prototype.disableToggle = function () { |
| 3267 | this.collapsible.disableToggle(); |
| 3268 | }; |
| 3269 | MaterialExtCollapsible.prototype['disableToggle'] = MaterialExtCollapsible.prototype.disableToggle; |
| 3270 | |
| 3271 | /** |
| 3272 | * Enables toggling of collapsible region(s) |
| 3273 | * @return {void} |
| 3274 | * @public |
| 3275 | */ |
| 3276 | MaterialExtCollapsible.prototype.enableToggle = function () { |
| 3277 | this.collapsible.enableToggle(); |
| 3278 | }; |
| 3279 | MaterialExtCollapsible.prototype['enableToggle'] = MaterialExtCollapsible.prototype.enableToggle; |
| 3280 | |
| 3281 | // The component registers itself. It can assume componentHandler is available |
| 3282 | // in the global scope. |
| 3283 | /* eslint no-undef: 0 */ |
| 3284 | componentHandler.register({ |
| 3285 | constructor: MaterialExtCollapsible, |
| 3286 | classAsString: 'MaterialExtCollapsible', |
| 3287 | cssClass: JS_COLLAPSIBLE, |
| 3288 | widget: true |
| 3289 | }); |
| 3290 | })(); |
| 3291 | |
| 3292 | /***/ }, |
| 3293 | /* 52 */ |
| 3294 | /***/ function(module, exports, __webpack_require__) { |
| 3295 | |
| 3296 | 'use strict'; |
| 3297 | |
| 3298 | var _classCallCheck2 = __webpack_require__(22); |
| 3299 | |
| 3300 | var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); |
| 3301 | |
| 3302 | var _createClass2 = __webpack_require__(23); |
| 3303 | |
| 3304 | var _createClass3 = _interopRequireDefault(_createClass2); |
| 3305 | |
| 3306 | var _class, _temp; /** |
| 3307 | * @license |
| 3308 | * Copyright 2016-2017 Leif Olsen. All Rights Reserved. |
| 3309 | * |
| 3310 | * Licensed under the Apache License, Version 2.0 (the "License"); |
| 3311 | * you may not use this file except in compliance with the License. |
| 3312 | * You may obtain a copy of the License at |
| 3313 | * |
| 3314 | * http://www.apache.org/licenses/LICENSE-2.0 |
| 3315 | * |
| 3316 | * Unless required by applicable law or agreed to in writing, software |
| 3317 | * distributed under the License is distributed on an "AS IS" BASIS, |
| 3318 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| 3319 | * See the License for the specific language governing permissions and |
| 3320 | * limitations under the License. |
| 3321 | * |
| 3322 | * This code is built with Google Material Design Lite, |
| 3323 | * which is Licensed under the Apache License, Version 2.0 |
| 3324 | */ |
| 3325 | |
| 3326 | var _jsonUtils = __webpack_require__(14); |
| 3327 | |
| 3328 | var _constants = __webpack_require__(2); |
| 3329 | |
| 3330 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } |
| 3331 | |
| 3332 | var JS_FORMAT_FIELD = 'mdlext-js-formatfield'; |
| 3333 | var FORMAT_FIELD_COMPONENT = 'MaterialExtFormatfield'; |
| 3334 | |
| 3335 | /** |
| 3336 | * Detect browser locale |
| 3337 | * @returns {string} the locale |
| 3338 | * @see http://stackoverflow.com/questions/1043339/javascript-for-detecting-browser-language-preference |
| 3339 | */ |
| 3340 | var browserLanguage = function browserLanguage() { |
| 3341 | return navigator.languages ? navigator.languages[0] : navigator.language || navigator.userLanguage; |
| 3342 | }; |
| 3343 | |
| 3344 | /** |
| 3345 | * The formatfield formats an input field using language sensitive number formatting. |
| 3346 | */ |
| 3347 | |
| 3348 | var FormatField = (_temp = _class = function () { |
| 3349 | function FormatField(element) { |
| 3350 | var _this = this; |
| 3351 | |
| 3352 | (0, _classCallCheck3.default)(this, FormatField); |
| 3353 | this.options_ = {}; |
| 3354 | |
| 3355 | this.clickHandler = function () { |
| 3356 | clearTimeout(FormatField.timer); |
| 3357 | }; |
| 3358 | |
| 3359 | this.focusInHandler = function () { |
| 3360 | if (!(_this.input.readOnly || _this.input.disabled)) { |
| 3361 | _this.input.value = _this.unformatInput(); |
| 3362 | //setTimeout(() => this.input.setSelectionRange(0, this.input.value.length), 20); |
| 3363 | FormatField.timer = setTimeout(function () { |
| 3364 | return _this.input.select(); |
| 3365 | }, 200); |
| 3366 | } |
| 3367 | }; |
| 3368 | |
| 3369 | this.focusOutHandler = function () { |
| 3370 | clearTimeout(FormatField.timer); |
| 3371 | |
| 3372 | if (!(_this.input.readOnly || _this.input.disabled)) { |
| 3373 | _this.formatValue(); |
| 3374 | } |
| 3375 | }; |
| 3376 | |
| 3377 | this.element_ = element; |
| 3378 | this.init(); |
| 3379 | } |
| 3380 | |
| 3381 | (0, _createClass3.default)(FormatField, [{ |
| 3382 | key: 'stripSeparatorsFromValue', |
| 3383 | value: function stripSeparatorsFromValue() { |
| 3384 | var _this2 = this; |
| 3385 | |
| 3386 | var doReplace = function doReplace() { |
| 3387 | return _this2.input.value.replace(/\s/g, '').replace(new RegExp(_this2.options.groupSeparator, 'g'), '').replace(_this2.options.decimalSeparator, '.'); |
| 3388 | }; |
| 3389 | //.replace(this.intlGroupSeparator_, ''), |
| 3390 | //.replace(this.intlDecimalSeparator_, '.'); |
| 3391 | |
| 3392 | return this.input.value ? doReplace() : this.input.value; |
| 3393 | } |
| 3394 | }, { |
| 3395 | key: 'fixSeparators', |
| 3396 | value: function fixSeparators(value) { |
| 3397 | var _this3 = this; |
| 3398 | |
| 3399 | var doReplace = function doReplace() { |
| 3400 | return value.replace(new RegExp(_this3.intlGroupSeparator_, 'g'), _this3.options.groupSeparator).replace(_this3.intlDecimalSeparator_, _this3.options.decimalSeparator); |
| 3401 | }; |
| 3402 | |
| 3403 | return value ? doReplace() : value; |
| 3404 | } |
| 3405 | }, { |
| 3406 | key: 'formatValue', |
| 3407 | value: function formatValue() { |
| 3408 | if (this.input.value) { |
| 3409 | var v = new Intl.NumberFormat(this.options.locales, this.options).format(this.stripSeparatorsFromValue()); |
| 3410 | |
| 3411 | if ('NaN' !== v) { |
| 3412 | this.input.value = this.fixSeparators(v); |
| 3413 | } |
| 3414 | } |
| 3415 | } |
| 3416 | }, { |
| 3417 | key: 'unformat', |
| 3418 | value: function unformat() { |
| 3419 | var _this4 = this; |
| 3420 | |
| 3421 | var doReplace = function doReplace() { |
| 3422 | return _this4.input.value.replace(/\s/g, '').replace(new RegExp(_this4.options.groupSeparator, 'g'), '').replace(_this4.options.decimalSeparator, '.'); |
| 3423 | }; |
| 3424 | |
| 3425 | return this.input.value ? doReplace() : this.input.value; |
| 3426 | } |
| 3427 | }, { |
| 3428 | key: 'unformatInput', |
| 3429 | value: function unformatInput() { |
| 3430 | var _this5 = this; |
| 3431 | |
| 3432 | var doReplace = function doReplace() { |
| 3433 | return _this5.input.value.replace(/\s/g, '').replace(new RegExp(_this5.options.groupSeparator, 'g'), ''); |
| 3434 | }; |
| 3435 | |
| 3436 | return this.input.value ? doReplace() : this.input.value; |
| 3437 | } |
| 3438 | }, { |
| 3439 | key: 'removeListeners', |
| 3440 | value: function removeListeners() { |
| 3441 | this.input.removeEventListener('click', this.clickHandler); |
| 3442 | this.input.removeEventListener('focusin', this.focusInHandler); |
| 3443 | this.input.removeEventListener('focusout', this.focusOutHandler); |
| 3444 | } |
| 3445 | }, { |
| 3446 | key: 'init', |
| 3447 | value: function init() { |
| 3448 | var _this6 = this; |
| 3449 | |
| 3450 | var addListeners = function addListeners() { |
| 3451 | _this6.input.addEventListener('click', _this6.clickHandler); |
| 3452 | _this6.input.addEventListener('focusin', _this6.focusInHandler); |
| 3453 | _this6.input.addEventListener('focusout', _this6.focusOutHandler); |
| 3454 | }; |
| 3455 | |
| 3456 | var addOptions = function addOptions() { |
| 3457 | var opts = _this6.element.getAttribute('data-formatfield-options') || _this6.input.getAttribute('data-formatfield-options'); |
| 3458 | if (opts) { |
| 3459 | _this6.options_ = (0, _jsonUtils.jsonStringToObject)(opts, _this6.options); |
| 3460 | } |
| 3461 | }; |
| 3462 | |
| 3463 | var addLocale = function addLocale() { |
| 3464 | if (!_this6.options.locales) { |
| 3465 | _this6.options.locales = browserLanguage() || 'en-US'; //'nb-NO', //'en-US', |
| 3466 | } |
| 3467 | }; |
| 3468 | |
| 3469 | var addGrouping = function addGrouping() { |
| 3470 | var s = 1234.5.toLocaleString(_this6.options.locales, { |
| 3471 | style: 'decimal', |
| 3472 | useGrouping: true, |
| 3473 | minimumFractionDigits: 1, |
| 3474 | maximumFractionDigits: 1 |
| 3475 | }); |
| 3476 | |
| 3477 | _this6.intlGroupSeparator_ = s.charAt(1); |
| 3478 | _this6.intlDecimalSeparator_ = s.charAt(s.length - 2); |
| 3479 | _this6.options.groupSeparator = _this6.options.groupSeparator || _this6.intlGroupSeparator_; |
| 3480 | _this6.options.decimalSeparator = _this6.options.decimalSeparator || _this6.intlDecimalSeparator_; |
| 3481 | |
| 3482 | if (_this6.options.groupSeparator === _this6.options.decimalSeparator) { |
| 3483 | var e = 'Error! options.groupSeparator, "' + _this6.options.groupSeparator + '" ' + 'and options.decimalSeparator, ' + ('"' + _this6.options.decimalSeparator + '" should not be equal'); |
| 3484 | throw new Error(e); |
| 3485 | } |
| 3486 | }; |
| 3487 | |
| 3488 | this.input_ = this.element.querySelector('input') || this.element; |
| 3489 | |
| 3490 | addOptions(); |
| 3491 | addLocale(); |
| 3492 | addGrouping(); |
| 3493 | this.formatValue(); |
| 3494 | addListeners(); |
| 3495 | } |
| 3496 | }, { |
| 3497 | key: 'downgrade', |
| 3498 | value: function downgrade() { |
| 3499 | this.removeListeners(); |
| 3500 | } |
| 3501 | }, { |
| 3502 | key: 'element', |
| 3503 | get: function get() { |
| 3504 | return this.element_; |
| 3505 | } |
| 3506 | }, { |
| 3507 | key: 'input', |
| 3508 | get: function get() { |
| 3509 | return this.input_; |
| 3510 | } |
| 3511 | }, { |
| 3512 | key: 'options', |
| 3513 | get: function get() { |
| 3514 | return this.options_; |
| 3515 | } |
| 3516 | }]); |
| 3517 | return FormatField; |
| 3518 | }(), _class.timer = null, _temp); |
| 3519 | |
| 3520 | |
| 3521 | (function () { |
| 3522 | 'use strict'; |
| 3523 | |
| 3524 | /** |
| 3525 | * @constructor |
| 3526 | * @param {HTMLElement} element The element that will be upgraded. |
| 3527 | */ |
| 3528 | |
| 3529 | var MaterialExtFormatfield = function MaterialExtFormatfield(element) { |
| 3530 | this.element_ = element; |
| 3531 | this.formatField_ = null; |
| 3532 | |
| 3533 | // Initialize instance. |
| 3534 | this.init(); |
| 3535 | }; |
| 3536 | window['MaterialExtFormatfield'] = MaterialExtFormatfield; |
| 3537 | |
| 3538 | /** |
| 3539 | * Initialize component |
| 3540 | */ |
| 3541 | MaterialExtFormatfield.prototype.init = function () { |
| 3542 | if (this.element_) { |
| 3543 | this.element_.classList.add(_constants.IS_UPGRADED); |
| 3544 | this.formatField_ = new FormatField(this.element_); |
| 3545 | |
| 3546 | // Listen to 'mdl-componentdowngraded' event |
| 3547 | this.element_.addEventListener('mdl-componentdowngraded', this.mdlDowngrade_.bind(this)); |
| 3548 | } |
| 3549 | }; |
| 3550 | |
| 3551 | /** |
| 3552 | * Get options object |
| 3553 | * |
| 3554 | * @public |
| 3555 | * |
| 3556 | * @returns {Object} the options object |
| 3557 | */ |
| 3558 | MaterialExtFormatfield.prototype.getOptions = function () { |
| 3559 | return this.formatField_.options; |
| 3560 | }; |
| 3561 | MaterialExtFormatfield.prototype['getOptions'] = MaterialExtFormatfield.prototype.getOptions; |
| 3562 | |
| 3563 | /** |
| 3564 | * A unformatted value is a string value where the locale specific decimal separator |
| 3565 | * is replaced with a '.' separator and group separators are stripped. |
| 3566 | * The returned value is suitable for parsing to a JavaScript numerical value. |
| 3567 | * |
| 3568 | * @example |
| 3569 | * input.value = '1 234,5'; |
| 3570 | * inputElement.MaterialExtFormatfield.getUnformattedValue(); |
| 3571 | * // Returns '1234.5' |
| 3572 | * |
| 3573 | * @public |
| 3574 | * |
| 3575 | * @returns {String} the unformatted value |
| 3576 | */ |
| 3577 | MaterialExtFormatfield.prototype.getUnformattedValue = function () { |
| 3578 | return this.formatField_.unformat(); |
| 3579 | }; |
| 3580 | MaterialExtFormatfield.prototype['getUnformattedValue'] = MaterialExtFormatfield.prototype.getUnformattedValue; |
| 3581 | |
| 3582 | /* |
| 3583 | * Downgrade component |
| 3584 | * E.g remove listeners and clean up resources |
| 3585 | */ |
| 3586 | MaterialExtFormatfield.prototype.mdlDowngrade_ = function () { |
| 3587 | this.formatField_.downgrade(); |
| 3588 | }; |
| 3589 | |
| 3590 | // The component registers itself. It can assume componentHandler is available |
| 3591 | // in the global scope. |
| 3592 | /* eslint no-undef: 0 */ |
| 3593 | componentHandler.register({ |
| 3594 | constructor: MaterialExtFormatfield, |
| 3595 | classAsString: FORMAT_FIELD_COMPONENT, |
| 3596 | cssClass: JS_FORMAT_FIELD, |
| 3597 | widget: true |
| 3598 | }); |
| 3599 | })(); |
| 3600 | |
| 3601 | /***/ }, |
| 3602 | /* 53 */ |
| 3603 | /***/ function(module, exports, __webpack_require__) { |
| 3604 | |
| 3605 | 'use strict'; |
| 3606 | |
| 3607 | __webpack_require__(59); |
| 3608 | |
| 3609 | __webpack_require__(49); |
| 3610 | |
| 3611 | __webpack_require__(51); |
| 3612 | |
| 3613 | __webpack_require__(50); |
| 3614 | |
| 3615 | __webpack_require__(54); |
| 3616 | |
| 3617 | __webpack_require__(55); |
| 3618 | |
| 3619 | __webpack_require__(56); |
| 3620 | |
| 3621 | __webpack_require__(57); |
| 3622 | |
| 3623 | __webpack_require__(52); |
| 3624 | |
| 3625 | __webpack_require__(58); |
| 3626 | |
| 3627 | /***/ }, |
| 3628 | /* 54 */ |
| 3629 | /***/ function(module, exports, __webpack_require__) { |
| 3630 | |
| 3631 | 'use strict'; |
| 3632 | |
| 3633 | var _toConsumableArray2 = __webpack_require__(8); |
| 3634 | |
| 3635 | var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2); |
| 3636 | |
| 3637 | var _constants = __webpack_require__(2); |
| 3638 | |
| 3639 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } |
| 3640 | |
| 3641 | var MDL_RIPPLE_CONTAINER = 'mdlext-lightboard__slide__ripple-container'; /** |
| 3642 | * @license |
| 3643 | * Copyright 2016 Leif Olsen. All Rights Reserved. |
| 3644 | * |
| 3645 | * Licensed under the Apache License, Version 2.0 (the "License"); |
| 3646 | * you may not use this file except in compliance with the License. |
| 3647 | * You may obtain a copy of the License at |
| 3648 | * |
| 3649 | * http://www.apache.org/licenses/LICENSE-2.0 |
| 3650 | * |
| 3651 | * Unless required by applicable law or agreed to in writing, software |
| 3652 | * distributed under the License is distributed on an "AS IS" BASIS, |
| 3653 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| 3654 | * See the License for the specific language governing permissions and |
| 3655 | * limitations under the License. |
| 3656 | * |
| 3657 | * This code is built with Google Material Design Lite, |
| 3658 | * which is Licensed under the Apache License, Version 2.0 |
| 3659 | */ |
| 3660 | |
| 3661 | /** |
| 3662 | * A lightboard is a translucent surface illuminated from behind, used for situations |
| 3663 | * where a shape laid upon the surface needs to be seen with high contrast. In the "old days" of photography |
| 3664 | * photograpers used a lightboard to get a quick view of their slides. The goal is to create a responsive lightbox |
| 3665 | * design, based on flex layout, similar to what is used in Adobe LightRoom to browse images. |
| 3666 | */ |
| 3667 | |
| 3668 | (function () { |
| 3669 | 'use strict'; |
| 3670 | |
| 3671 | //const LIGHTBOARD = 'mdlext-lightboard'; |
| 3672 | |
| 3673 | var LIGHTBOARD_ROLE = 'grid'; |
| 3674 | var SLIDE = 'mdlext-lightboard__slide'; |
| 3675 | var SLIDE_ROLE = 'gridcell'; |
| 3676 | var SLIDE_TABSTOP = 'mdlext-lightboard__slide__frame'; |
| 3677 | /** |
| 3678 | * @constructor |
| 3679 | * @param {Element} element The element that will be upgraded. |
| 3680 | */ |
| 3681 | var MaterialExtLightboard = function MaterialExtLightboard(element) { |
| 3682 | // Stores the element. |
| 3683 | this.element_ = element; |
| 3684 | |
| 3685 | // Initialize instance. |
| 3686 | this.init(); |
| 3687 | }; |
| 3688 | window['MaterialExtLightboard'] = MaterialExtLightboard; |
| 3689 | |
| 3690 | // Helpers |
| 3691 | var getSlide = function getSlide(element) { |
| 3692 | return element ? element.closest('.' + SLIDE) : null; |
| 3693 | }; |
| 3694 | |
| 3695 | // Private methods. |
| 3696 | |
| 3697 | /** |
| 3698 | * Select a slide, i.e. set aria-selected="true" |
| 3699 | * @param element |
| 3700 | * @private |
| 3701 | */ |
| 3702 | MaterialExtLightboard.prototype.selectSlide_ = function (element) { |
| 3703 | var slide = getSlide(element); |
| 3704 | if (slide && !slide.hasAttribute('aria-selected')) { |
| 3705 | [].concat((0, _toConsumableArray3.default)(this.element_.querySelectorAll('.' + SLIDE + '[aria-selected="true"]'))).forEach(function (selectedSlide) { |
| 3706 | return selectedSlide.removeAttribute('aria-selected'); |
| 3707 | }); |
| 3708 | |
| 3709 | slide.setAttribute('aria-selected', 'true'); |
| 3710 | } |
| 3711 | }; |
| 3712 | |
| 3713 | /** |
| 3714 | * Dispatch select event |
| 3715 | * @param {Element} slide The slide that caused the event |
| 3716 | * @private |
| 3717 | */ |
| 3718 | MaterialExtLightboard.prototype.dispatchSelectEvent_ = function (slide) { |
| 3719 | this.element_.dispatchEvent(new CustomEvent('select', { |
| 3720 | bubbles: true, |
| 3721 | cancelable: true, |
| 3722 | detail: { source: slide } |
| 3723 | })); |
| 3724 | }; |
| 3725 | |
| 3726 | /** |
| 3727 | * Handles custom command event, 'first', 'next', 'prev', 'last', 'select' or upgrade |
| 3728 | * @param event. A custom event |
| 3729 | * @private |
| 3730 | */ |
| 3731 | MaterialExtLightboard.prototype.commandHandler_ = function (event) { |
| 3732 | event.preventDefault(); |
| 3733 | event.stopPropagation(); |
| 3734 | |
| 3735 | if (event && event.detail) { |
| 3736 | this.command(event.detail); |
| 3737 | } |
| 3738 | }; |
| 3739 | |
| 3740 | // Public methods |
| 3741 | |
| 3742 | /** |
| 3743 | * Initialize lightboard slides |
| 3744 | * @public |
| 3745 | */ |
| 3746 | MaterialExtLightboard.prototype.upgradeSlides = function () { |
| 3747 | |
| 3748 | var addRipple = function addRipple(slide) { |
| 3749 | // Use slide frame as ripple container |
| 3750 | if (!slide.querySelector('.' + MDL_RIPPLE_CONTAINER)) { |
| 3751 | var a = slide.querySelector('.' + SLIDE_TABSTOP); |
| 3752 | if (a) { |
| 3753 | var rippleContainer = a; |
| 3754 | rippleContainer.classList.add(MDL_RIPPLE_CONTAINER); |
| 3755 | rippleContainer.classList.add(_constants.MDL_RIPPLE_EFFECT); |
| 3756 | var ripple = document.createElement('span'); |
| 3757 | ripple.classList.add(_constants.MDL_RIPPLE); |
| 3758 | rippleContainer.appendChild(ripple); |
| 3759 | componentHandler.upgradeElement(rippleContainer, _constants.MDL_RIPPLE_COMPONENT); |
| 3760 | } |
| 3761 | } |
| 3762 | }; |
| 3763 | |
| 3764 | var hasRippleEffect = this.element_.classList.contains(_constants.MDL_RIPPLE_EFFECT); |
| 3765 | |
| 3766 | [].concat((0, _toConsumableArray3.default)(this.element_.querySelectorAll('.' + SLIDE))).forEach(function (slide) { |
| 3767 | |
| 3768 | slide.setAttribute('role', SLIDE_ROLE); |
| 3769 | |
| 3770 | if (!slide.querySelector('a')) { |
| 3771 | slide.setAttribute('tabindex', '0'); |
| 3772 | } |
| 3773 | if (hasRippleEffect) { |
| 3774 | addRipple(slide); |
| 3775 | } |
| 3776 | }); |
| 3777 | }; |
| 3778 | MaterialExtLightboard.prototype['upgradeSlides'] = MaterialExtLightboard.prototype.upgradeSlides; |
| 3779 | |
| 3780 | /** |
| 3781 | * Execute command |
| 3782 | * @param detail |
| 3783 | * @public |
| 3784 | */ |
| 3785 | MaterialExtLightboard.prototype.command = function (detail) { |
| 3786 | var _this = this; |
| 3787 | |
| 3788 | var firstSlide = function firstSlide() { |
| 3789 | return _this.element_.querySelector('.' + SLIDE + ':first-child'); |
| 3790 | }; |
| 3791 | |
| 3792 | var lastSlide = function lastSlide() { |
| 3793 | return _this.element_.querySelector('.' + SLIDE + ':last-child'); |
| 3794 | }; |
| 3795 | |
| 3796 | var nextSlide = function nextSlide() { |
| 3797 | var slide = _this.element_.querySelector('.' + SLIDE + '[aria-selected="true"]').nextElementSibling; |
| 3798 | return slide ? slide : firstSlide(); |
| 3799 | }; |
| 3800 | |
| 3801 | var prevSlide = function prevSlide() { |
| 3802 | var slide = _this.element_.querySelector('.' + SLIDE + '[aria-selected="true"]').previousElementSibling; |
| 3803 | return slide ? slide : lastSlide(); |
| 3804 | }; |
| 3805 | |
| 3806 | if (detail && detail.action) { |
| 3807 | var action = detail.action, |
| 3808 | target = detail.target; |
| 3809 | |
| 3810 | |
| 3811 | var slide = void 0; |
| 3812 | switch (action.toLowerCase()) { |
| 3813 | case 'select': |
| 3814 | slide = getSlide(target); |
| 3815 | this.dispatchSelectEvent_(slide); |
| 3816 | break; |
| 3817 | case 'first': |
| 3818 | slide = firstSlide(); |
| 3819 | break; |
| 3820 | case 'next': |
| 3821 | slide = nextSlide(); |
| 3822 | break; |
| 3823 | case 'prev': |
| 3824 | slide = prevSlide(); |
| 3825 | break; |
| 3826 | case 'last': |
| 3827 | slide = lastSlide(); |
| 3828 | break; |
| 3829 | case 'upgrade': |
| 3830 | this.upgradeSlides(); |
| 3831 | break; |
| 3832 | default: |
| 3833 | throw new Error('Unknown action "' + action + '". Action must be one of "first", "next", "prev", "last", "select" or "upgrade"'); |
| 3834 | } |
| 3835 | |
| 3836 | if (slide) { |
| 3837 | var a = slide.querySelector('a'); |
| 3838 | if (a) { |
| 3839 | a.focus(); |
| 3840 | } else { |
| 3841 | slide.focus(); |
| 3842 | } |
| 3843 | |
| 3844 | // Workaround for JSDom testing: |
| 3845 | // In JsDom 'element.focus()' does not trigger any focus event |
| 3846 | if (!slide.hasAttribute('aria-selected')) { |
| 3847 | this.selectSlide_(slide); |
| 3848 | } |
| 3849 | } |
| 3850 | } |
| 3851 | }; |
| 3852 | MaterialExtLightboard.prototype['command'] = MaterialExtLightboard.prototype.command; |
| 3853 | |
| 3854 | /** |
| 3855 | * Initialize component |
| 3856 | */ |
| 3857 | MaterialExtLightboard.prototype.init = function () { |
| 3858 | var _this2 = this; |
| 3859 | |
| 3860 | var keydownHandler = function keydownHandler(event) { |
| 3861 | |
| 3862 | if (event.target !== _this2.element_) { |
| 3863 | var action = void 0; |
| 3864 | var target = void 0; |
| 3865 | switch (event.keyCode) { |
| 3866 | case _constants.VK_HOME: |
| 3867 | action = 'first'; |
| 3868 | break; |
| 3869 | case _constants.VK_END: |
| 3870 | action = 'last'; |
| 3871 | break; |
| 3872 | case _constants.VK_ARROW_UP: |
| 3873 | case _constants.VK_ARROW_LEFT: |
| 3874 | action = 'prev'; |
| 3875 | break; |
| 3876 | case _constants.VK_ARROW_DOWN: |
| 3877 | case _constants.VK_ARROW_RIGHT: |
| 3878 | action = 'next'; |
| 3879 | break; |
| 3880 | case _constants.VK_ENTER: |
| 3881 | case _constants.VK_SPACE: |
| 3882 | action = 'select'; |
| 3883 | target = event.target; |
| 3884 | break; |
| 3885 | } |
| 3886 | if (action) { |
| 3887 | event.preventDefault(); |
| 3888 | event.stopPropagation(); |
| 3889 | _this2.command({ action: action, target: target }); |
| 3890 | } |
| 3891 | } |
| 3892 | }; |
| 3893 | |
| 3894 | var clickHandler = function clickHandler(event) { |
| 3895 | event.preventDefault(); |
| 3896 | event.stopPropagation(); |
| 3897 | |
| 3898 | if (event.target !== _this2.element_) { |
| 3899 | _this2.command({ action: 'select', target: event.target }); |
| 3900 | } |
| 3901 | }; |
| 3902 | |
| 3903 | var focusHandler = function focusHandler(event) { |
| 3904 | event.preventDefault(); |
| 3905 | event.stopPropagation(); |
| 3906 | |
| 3907 | if (event.target !== _this2.element_) { |
| 3908 | _this2.selectSlide_(event.target); |
| 3909 | } |
| 3910 | }; |
| 3911 | |
| 3912 | if (this.element_) { |
| 3913 | this.element_.setAttribute('role', LIGHTBOARD_ROLE); |
| 3914 | |
| 3915 | if (this.element_.classList.contains(_constants.MDL_RIPPLE_EFFECT)) { |
| 3916 | this.element_.classList.add(_constants.MDL_RIPPLE_EFFECT_IGNORE_EVENTS); |
| 3917 | } |
| 3918 | |
| 3919 | // Remove listeners, just in case ... |
| 3920 | this.element_.removeEventListener('command', this.commandHandler_); |
| 3921 | this.element_.removeEventListener('keydown', keydownHandler); |
| 3922 | this.element_.removeEventListener('click', clickHandler); |
| 3923 | this.element_.removeEventListener('focus', focusHandler); |
| 3924 | |
| 3925 | this.element_.addEventListener('command', this.commandHandler_.bind(this), false); |
| 3926 | this.element_.addEventListener('keydown', keydownHandler, true); |
| 3927 | this.element_.addEventListener('click', clickHandler, true); |
| 3928 | this.element_.addEventListener('focus', focusHandler, true); |
| 3929 | |
| 3930 | this.upgradeSlides(); |
| 3931 | |
| 3932 | this.element_.classList.add(_constants.IS_UPGRADED); |
| 3933 | } |
| 3934 | }; |
| 3935 | |
| 3936 | // The component registers itself. It can assume componentHandler is available |
| 3937 | // in the global scope. |
| 3938 | /* eslint no-undef: 0 */ |
| 3939 | /* jshint undef:false */ |
| 3940 | componentHandler.register({ |
| 3941 | constructor: MaterialExtLightboard, |
| 3942 | classAsString: 'MaterialExtLightboard', |
| 3943 | cssClass: 'mdlext-js-lightboard', |
| 3944 | widget: true |
| 3945 | }); |
| 3946 | })(); |
| 3947 | |
| 3948 | /***/ }, |
| 3949 | /* 55 */ |
| 3950 | /***/ function(module, exports, __webpack_require__) { |
| 3951 | |
| 3952 | 'use strict'; |
| 3953 | |
| 3954 | var _toConsumableArray2 = __webpack_require__(8); |
| 3955 | |
| 3956 | var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2); |
| 3957 | |
| 3958 | var _isInteger = __webpack_require__(32); |
| 3959 | |
| 3960 | var _isInteger2 = _interopRequireDefault(_isInteger); |
| 3961 | |
| 3962 | var _slicedToArray2 = __webpack_require__(67); |
| 3963 | |
| 3964 | var _slicedToArray3 = _interopRequireDefault(_slicedToArray2); |
| 3965 | |
| 3966 | var _entries = __webpack_require__(64); |
| 3967 | |
| 3968 | var _entries2 = _interopRequireDefault(_entries); |
| 3969 | |
| 3970 | var _getIterator2 = __webpack_require__(31); |
| 3971 | |
| 3972 | var _getIterator3 = _interopRequireDefault(_getIterator2); |
| 3973 | |
| 3974 | var _fullThrottle = __webpack_require__(13); |
| 3975 | |
| 3976 | var _fullThrottle2 = _interopRequireDefault(_fullThrottle); |
| 3977 | |
| 3978 | var _constants = __webpack_require__(2); |
| 3979 | |
| 3980 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } |
| 3981 | |
| 3982 | /** |
| 3983 | * @license |
| 3984 | * Copyright 2016 Leif Olsen. All Rights Reserved. |
| 3985 | * |
| 3986 | * Licensed under the Apache License, Version 2.0 (the "License"); |
| 3987 | * you may not use this file except in compliance with the License. |
| 3988 | * You may obtain a copy of the License at |
| 3989 | * |
| 3990 | * http://www.apache.org/licenses/LICENSE-2.0 |
| 3991 | * |
| 3992 | * Unless required by applicable law or agreed to in writing, software |
| 3993 | * distributed under the License is distributed on an "AS IS" BASIS, |
| 3994 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| 3995 | * See the License for the specific language governing permissions and |
| 3996 | * limitations under the License. |
| 3997 | * |
| 3998 | * This code is built with Google Material Design Lite, |
| 3999 | * which is Licensed under the Apache License, Version 2.0 |
| 4000 | */ |
| 4001 | |
| 4002 | /** |
| 4003 | * Responsive Lightbox |
| 4004 | */ |
| 4005 | |
| 4006 | (function () { |
| 4007 | 'use strict'; |
| 4008 | |
| 4009 | var LIGHTBOX = 'mdlext-lightbox'; |
| 4010 | var LIGHTBOX_SLIDER = 'mdlext-lightbox__slider'; |
| 4011 | var LIGHTBOX_SLIDER_SLIDE = 'mdlext-lightbox__slider__slide'; |
| 4012 | var STICKY_FOOTER = 'mdlext-lightbox--sticky-footer'; |
| 4013 | var BUTTON = 'mdl-button'; |
| 4014 | |
| 4015 | /** |
| 4016 | * https://github.com/google/material-design-lite/issues/4205 |
| 4017 | * @constructor |
| 4018 | * @param {Element} element The element that will be upgraded. |
| 4019 | */ |
| 4020 | var MaterialExtLightbox = function MaterialExtLightbox(element) { |
| 4021 | // Stores the element. |
| 4022 | this.element_ = element; |
| 4023 | |
| 4024 | // Initialize instance. |
| 4025 | this.init(); |
| 4026 | }; |
| 4027 | window['MaterialExtLightbox'] = MaterialExtLightbox; |
| 4028 | |
| 4029 | /** |
| 4030 | * Handle keypress |
| 4031 | * @param event |
| 4032 | * @private |
| 4033 | */ |
| 4034 | MaterialExtLightbox.prototype.keyDownHandler_ = function (event) { |
| 4035 | |
| 4036 | if (event) { |
| 4037 | if (event.keyCode === _constants.VK_ESC || event.keyCode === _constants.VK_SPACE || event.keyCode === _constants.VK_END || event.keyCode === _constants.VK_HOME || event.keyCode === _constants.VK_ARROW_UP || event.keyCode === _constants.VK_ARROW_LEFT || event.keyCode === _constants.VK_ARROW_DOWN || event.keyCode === _constants.VK_ARROW_RIGHT) { |
| 4038 | |
| 4039 | if (event.keyCode !== _constants.VK_ESC) { |
| 4040 | event.preventDefault(); |
| 4041 | event.stopPropagation(); |
| 4042 | } |
| 4043 | |
| 4044 | var action = 'first'; |
| 4045 | if (event.keyCode === _constants.VK_END) { |
| 4046 | action = 'last'; |
| 4047 | } else if (event.keyCode === _constants.VK_ARROW_UP || event.keyCode === _constants.VK_ARROW_LEFT) { |
| 4048 | action = 'prev'; |
| 4049 | } else if (event.keyCode === _constants.VK_ARROW_DOWN || event.keyCode === _constants.VK_ARROW_RIGHT) { |
| 4050 | action = 'next'; |
| 4051 | } else if (event.keyCode === _constants.VK_SPACE) { |
| 4052 | action = 'select'; |
| 4053 | } else if (event.keyCode === _constants.VK_ESC) { |
| 4054 | action = 'cancel'; |
| 4055 | } |
| 4056 | |
| 4057 | dispatchAction_(action, this); |
| 4058 | } |
| 4059 | } |
| 4060 | }; |
| 4061 | |
| 4062 | /** |
| 4063 | * Handle button clicks |
| 4064 | * @param event |
| 4065 | * @private |
| 4066 | */ |
| 4067 | MaterialExtLightbox.prototype.buttonClickHandler_ = function (event) { |
| 4068 | |
| 4069 | if (event) { |
| 4070 | event.preventDefault(); |
| 4071 | event.stopPropagation(); |
| 4072 | |
| 4073 | dispatchAction_(this.getAttribute('data-action') || '', this); |
| 4074 | |
| 4075 | var n = this.closest('.' + LIGHTBOX); |
| 4076 | if (n) { |
| 4077 | n.focus(); |
| 4078 | } |
| 4079 | } |
| 4080 | }; |
| 4081 | |
| 4082 | /** |
| 4083 | * Dispatches an action custom event |
| 4084 | * @param action |
| 4085 | * @param source |
| 4086 | * @param target |
| 4087 | * @private |
| 4088 | */ |
| 4089 | var dispatchAction_ = function dispatchAction_(action, source) { |
| 4090 | var target = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : source; |
| 4091 | |
| 4092 | |
| 4093 | target.dispatchEvent(new CustomEvent('action', { |
| 4094 | bubbles: true, |
| 4095 | cancelable: true, |
| 4096 | detail: { |
| 4097 | action: action || '', |
| 4098 | source: source |
| 4099 | } |
| 4100 | })); |
| 4101 | }; |
| 4102 | |
| 4103 | /** |
| 4104 | * Reposition dialog if component parent element is "DIALOG" |
| 4105 | * @param lightboxElement |
| 4106 | * @private |
| 4107 | */ |
| 4108 | var repositionDialog_ = function repositionDialog_(lightboxElement) { |
| 4109 | var footerHeight = function footerHeight(footer, isSticky) { |
| 4110 | return isSticky && footer ? footer.offsetHeight : 0; |
| 4111 | }; |
| 4112 | |
| 4113 | var reposition = function reposition(dialog, fh) { |
| 4114 | if (window.getComputedStyle(dialog).position === 'absolute') { |
| 4115 | var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; |
| 4116 | var topValue = scrollTop + (window.innerHeight - dialog.offsetHeight - fh) / 2; |
| 4117 | dialog.style.top = Math.max(scrollTop, topValue) + 'px'; |
| 4118 | } |
| 4119 | }; |
| 4120 | |
| 4121 | var p = lightboxElement.parentNode; |
| 4122 | var dialog = p && p.nodeName === 'DIALOG' ? p : null; |
| 4123 | |
| 4124 | if (dialog && dialog.hasAttribute('open')) { |
| 4125 | lightboxElement.style.width = 'auto'; |
| 4126 | lightboxElement.style.maxWidth = '100%'; |
| 4127 | var img = lightboxElement.querySelector('img'); |
| 4128 | if (img) { |
| 4129 | lightboxElement.style.maxWidth = img.naturalWidth !== undefined ? img.naturalWidth + 'px' : img.width + 'px' || '100%'; |
| 4130 | } |
| 4131 | |
| 4132 | var fh = footerHeight(lightboxElement.querySelector('footer'), lightboxElement.classList.contains(STICKY_FOOTER)); |
| 4133 | var vh = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - fh; |
| 4134 | if (dialog.offsetHeight > vh) { |
| 4135 | var n = 0; |
| 4136 | while (dialog.offsetHeight > vh && ++n < 4) { |
| 4137 | lightboxElement.style.width = lightboxElement.offsetWidth * vh / lightboxElement.offsetHeight + 'px'; |
| 4138 | } |
| 4139 | } |
| 4140 | reposition(dialog, fh); |
| 4141 | } |
| 4142 | }; |
| 4143 | |
| 4144 | /** |
| 4145 | * Handle image load |
| 4146 | * @param event |
| 4147 | * @private |
| 4148 | */ |
| 4149 | |
| 4150 | MaterialExtLightbox.prototype.imgLoadHandler_ = function () /*event*/{ |
| 4151 | repositionDialog_(this); |
| 4152 | }; |
| 4153 | |
| 4154 | /** |
| 4155 | * Handle image drag |
| 4156 | * @param event |
| 4157 | * @private |
| 4158 | */ |
| 4159 | MaterialExtLightbox.prototype.imgDragHandler_ = function (event) { |
| 4160 | |
| 4161 | var setStyles = function setStyles(element, properties) { |
| 4162 | //noinspection JSAnnotator |
| 4163 | var _iteratorNormalCompletion = true; |
| 4164 | var _didIteratorError = false; |
| 4165 | var _iteratorError = undefined; |
| 4166 | |
| 4167 | try { |
| 4168 | for (var _iterator = (0, _getIterator3.default)((0, _entries2.default)(properties)), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { |
| 4169 | var _step$value = (0, _slicedToArray3.default)(_step.value, 2), |
| 4170 | key = _step$value[0], |
| 4171 | value = _step$value[1]; |
| 4172 | |
| 4173 | element.style[key] = value; |
| 4174 | } |
| 4175 | // ... or: |
| 4176 | //for (const key in properties) { |
| 4177 | // element.style[key] = properties[key]; |
| 4178 | //} |
| 4179 | } catch (err) { |
| 4180 | _didIteratorError = true; |
| 4181 | _iteratorError = err; |
| 4182 | } finally { |
| 4183 | try { |
| 4184 | if (!_iteratorNormalCompletion && _iterator.return) { |
| 4185 | _iterator.return(); |
| 4186 | } |
| 4187 | } finally { |
| 4188 | if (_didIteratorError) { |
| 4189 | throw _iteratorError; |
| 4190 | } |
| 4191 | } |
| 4192 | } |
| 4193 | }; |
| 4194 | |
| 4195 | event.preventDefault(); |
| 4196 | //event.stopPropagation(); |
| 4197 | |
| 4198 | var x = event.clientX || (event.touches !== undefined ? event.touches[0].clientX : 0); |
| 4199 | |
| 4200 | var img = this; |
| 4201 | img.style.opacity = '0.2'; |
| 4202 | |
| 4203 | var slider = document.createElement('div'); |
| 4204 | slider.classList.add(LIGHTBOX_SLIDER); |
| 4205 | setStyles(slider, { 'width': img.offsetWidth + 'px', 'height': img.offsetHeight + 'px' }); |
| 4206 | |
| 4207 | var slide = document.createElement('div'); |
| 4208 | slide.classList.add(LIGHTBOX_SLIDER_SLIDE); |
| 4209 | slide.textContent = '>'; |
| 4210 | setStyles(slide, { |
| 4211 | 'width': img.offsetWidth + 'px', |
| 4212 | 'height': img.offsetHeight + 'px', |
| 4213 | 'line-height': img.offsetHeight + 'px', |
| 4214 | 'font-size': img.offsetHeight / 4 + 'px', |
| 4215 | 'text-align': 'right', |
| 4216 | 'background-image': 'url("' + (img.getAttribute('data-img-url-prev') || '') + '")' |
| 4217 | }); |
| 4218 | slider.appendChild(slide); |
| 4219 | |
| 4220 | slide = document.createElement('div'); |
| 4221 | slide.classList.add(LIGHTBOX_SLIDER_SLIDE); |
| 4222 | setStyles(slide, { |
| 4223 | 'width': img.offsetWidth + 'px', |
| 4224 | 'height': img.offsetHeight + 'px', |
| 4225 | 'background-image': 'url("' + img.src + '")' |
| 4226 | }); |
| 4227 | slider.appendChild(slide); |
| 4228 | |
| 4229 | slide = document.createElement('div'); |
| 4230 | slide.classList.add(LIGHTBOX_SLIDER_SLIDE); |
| 4231 | slide.textContent = '<'; |
| 4232 | setStyles(slide, { |
| 4233 | 'width': img.offsetWidth + 'px', |
| 4234 | 'height': img.offsetHeight + 'px', |
| 4235 | 'line-height': img.offsetHeight + 'px', |
| 4236 | 'font-size': img.offsetHeight / 4 + 'px', |
| 4237 | 'text-align': 'left', |
| 4238 | 'background-image': 'url("' + (img.getAttribute('data-img-url-next') || '') + '")' |
| 4239 | }); |
| 4240 | slider.appendChild(slide); |
| 4241 | |
| 4242 | img.parentNode.appendChild(slider); |
| 4243 | |
| 4244 | // drag handler |
| 4245 | var drag = function drag(e) { |
| 4246 | e.preventDefault(); |
| 4247 | var dx = (e.clientX || (e.touches !== undefined ? e.touches[0].clientX : 0)) - x; // TODO: maybe rewrite to improve performance |
| 4248 | |
| 4249 | if (slider.offsetWidth - Math.abs(dx) > 19) { |
| 4250 | slider.style.left = dx + 'px'; |
| 4251 | } |
| 4252 | }; |
| 4253 | |
| 4254 | // end drag handler |
| 4255 | var endDrag = function endDrag(e) { |
| 4256 | e.preventDefault(); |
| 4257 | //e.stopPropagation(); |
| 4258 | |
| 4259 | window.removeEventListener('mousemove', drag); |
| 4260 | window.removeEventListener('touchmove', drag); |
| 4261 | window.removeEventListener('mouseup', endDrag); |
| 4262 | window.removeEventListener('touchend', endDrag); |
| 4263 | |
| 4264 | var dx = slider.offsetLeft; |
| 4265 | img.parentNode.removeChild(slider); |
| 4266 | img.style.opacity = '1.0'; |
| 4267 | |
| 4268 | if (Math.abs(dx) > 19) { |
| 4269 | dispatchAction_(dx > 0 ? 'prev' : 'next', img); |
| 4270 | } |
| 4271 | }; |
| 4272 | |
| 4273 | window.addEventListener('mousemove', drag); |
| 4274 | window.addEventListener('touchmove', drag); |
| 4275 | window.addEventListener('mouseup', endDrag); |
| 4276 | window.addEventListener('touchend', endDrag); |
| 4277 | }; |
| 4278 | |
| 4279 | /** |
| 4280 | * Initialize component |
| 4281 | */ |
| 4282 | MaterialExtLightbox.prototype.init = function () { |
| 4283 | var _this = this; |
| 4284 | |
| 4285 | if (this.element_) { |
| 4286 | // Do the init required for this component to work |
| 4287 | this.element_.addEventListener('keydown', this.keyDownHandler_.bind(this.element_), true); |
| 4288 | |
| 4289 | if (!(0, _isInteger2.default)(this.element_.getAttribute('tabindex'))) { |
| 4290 | this.element_.setAttribute('tabindex', 1); |
| 4291 | } |
| 4292 | |
| 4293 | [].concat((0, _toConsumableArray3.default)(this.element_.querySelectorAll('.' + BUTTON))).forEach(function (button) { |
| 4294 | return button.addEventListener('click', _this.buttonClickHandler_.bind(button), false); |
| 4295 | }); |
| 4296 | |
| 4297 | var figcaption = this.element_.querySelector('figcaption'); |
| 4298 | if (figcaption) { |
| 4299 | figcaption.addEventListener('click', this.buttonClickHandler_.bind(figcaption), false); |
| 4300 | } |
| 4301 | |
| 4302 | var footer = this.element_.querySelector('footer'); |
| 4303 | if (footer) { |
| 4304 | footer.addEventListener('click', this.buttonClickHandler_.bind(footer), false); |
| 4305 | } |
| 4306 | |
| 4307 | var img = this.element_.querySelector('img'); |
| 4308 | if (img) { |
| 4309 | img.addEventListener('load', this.imgLoadHandler_.bind(this.element_), false); |
| 4310 | img.addEventListener('click', function (e) { |
| 4311 | return e.preventDefault(); |
| 4312 | }, true); |
| 4313 | img.addEventListener('mousedown', this.imgDragHandler_.bind(img), true); |
| 4314 | img.addEventListener('touchstart', this.imgDragHandler_.bind(img), true); |
| 4315 | } |
| 4316 | window.addEventListener('resize', (0, _fullThrottle2.default)(function () { |
| 4317 | return repositionDialog_(_this.element_); |
| 4318 | })); |
| 4319 | window.addEventListener('orientationchange', function () { |
| 4320 | return repositionDialog_(_this.element_); |
| 4321 | }); |
| 4322 | |
| 4323 | // Set upgraded flag |
| 4324 | this.element_.classList.add(_constants.IS_UPGRADED); |
| 4325 | } |
| 4326 | }; |
| 4327 | |
| 4328 | /* |
| 4329 | * Downgrade component |
| 4330 | * E.g remove listeners and clean up resources |
| 4331 | * |
| 4332 | * Nothing to downgrade |
| 4333 | * |
| 4334 | MaterialExtLightbox.prototype.mdlDowngrade_ = function() { |
| 4335 | }; |
| 4336 | */ |
| 4337 | |
| 4338 | /** |
| 4339 | * The component registers itself. It can assume componentHandler is available in the global scope. |
| 4340 | */ |
| 4341 | /* jshint undef:false */ |
| 4342 | componentHandler.register({ |
| 4343 | constructor: MaterialExtLightbox, |
| 4344 | classAsString: 'MaterialExtLightbox', |
| 4345 | cssClass: 'mdlext-js-lightbox' |
| 4346 | }); |
| 4347 | })(); |
| 4348 | |
| 4349 | /***/ }, |
| 4350 | /* 56 */ |
| 4351 | /***/ function(module, exports, __webpack_require__) { |
| 4352 | |
| 4353 | 'use strict'; |
| 4354 | |
| 4355 | var _classCallCheck2 = __webpack_require__(22); |
| 4356 | |
| 4357 | var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); |
| 4358 | |
| 4359 | var _createClass2 = __webpack_require__(23); |
| 4360 | |
| 4361 | var _createClass3 = _interopRequireDefault(_createClass2); |
| 4362 | |
| 4363 | var _toConsumableArray2 = __webpack_require__(8); |
| 4364 | |
| 4365 | var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2); |
| 4366 | |
| 4367 | var _stringUtils = __webpack_require__(15); |
| 4368 | |
| 4369 | var _fullThrottle = __webpack_require__(13); |
| 4370 | |
| 4371 | var _fullThrottle2 = _interopRequireDefault(_fullThrottle); |
| 4372 | |
| 4373 | var _constants = __webpack_require__(2); |
| 4374 | |
| 4375 | var _domUtils = __webpack_require__(21); |
| 4376 | |
| 4377 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } |
| 4378 | |
| 4379 | /** |
| 4380 | * @license |
| 4381 | * Copyright 2016 Leif Olsen. All Rights Reserved. |
| 4382 | * |
| 4383 | * Licensed under the Apache License, Version 2.0 (the "License"); |
| 4384 | * you may not use this file except in compliance with the License. |
| 4385 | * You may obtain a copy of the License at |
| 4386 | * |
| 4387 | * http://www.apache.org/licenses/LICENSE-2.0 |
| 4388 | * |
| 4389 | * Unless required by applicable law or agreed to in writing, software |
| 4390 | * distributed under the License is distributed on an "AS IS" BASIS, |
| 4391 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| 4392 | * See the License for the specific language governing permissions and |
| 4393 | * limitations under the License. |
| 4394 | * |
| 4395 | * This code is built with Google Material Design Lite, |
| 4396 | * which is Licensed under the Apache License, Version 2.0 |
| 4397 | */ |
| 4398 | |
| 4399 | /** |
| 4400 | * A menu button is a button that opens a menu. It is often styled as a |
| 4401 | * typical push button with a downward pointing arrow or triangle to hint |
| 4402 | * that activating the button will display a menu. |
| 4403 | */ |
| 4404 | var JS_MENU_BUTTON = 'mdlext-js-menu-button'; |
| 4405 | var MENU_BUTTON_MENU = 'mdlext-menu'; |
| 4406 | var MENU_BUTTON_MENU_ITEM = 'mdlext-menu__item'; |
| 4407 | var MENU_BUTTON_MENU_ITEM_SEPARATOR = 'mdlext-menu__item-separator'; |
| 4408 | //const MDL_LAYOUT_CONTENT = 'mdl-layout__content'; |
| 4409 | |
| 4410 | /** |
| 4411 | * Creates the menu controlled by the menu button |
| 4412 | * @param element |
| 4413 | * @return {{element: Element, selected: Element, open: (function(*=)), removeListeners: (function()), downgrade: (function())}} |
| 4414 | */ |
| 4415 | |
| 4416 | var menuFactory = function menuFactory(element) { |
| 4417 | |
| 4418 | var ariaControls = null; |
| 4419 | var parentNode = null; |
| 4420 | |
| 4421 | var removeAllSelected = function removeAllSelected() { |
| 4422 | [].concat((0, _toConsumableArray3.default)(element.querySelectorAll('.' + MENU_BUTTON_MENU_ITEM + '[aria-selected="true"]'))).forEach(function (selectedItem) { |
| 4423 | return selectedItem.removeAttribute('aria-selected'); |
| 4424 | }); |
| 4425 | }; |
| 4426 | |
| 4427 | var setSelected = function setSelected(item) { |
| 4428 | var force = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; |
| 4429 | |
| 4430 | if (force || item && !item.hasAttribute('aria-selected')) { |
| 4431 | removeAllSelected(); |
| 4432 | if (item) { |
| 4433 | item.setAttribute('aria-selected', 'true'); |
| 4434 | } |
| 4435 | } |
| 4436 | }; |
| 4437 | |
| 4438 | var getSelected = function getSelected() { |
| 4439 | return element.querySelector('.' + MENU_BUTTON_MENU_ITEM + '[aria-selected="true"]'); |
| 4440 | }; |
| 4441 | |
| 4442 | var isDisabled = function isDisabled(item) { |
| 4443 | return item && item.hasAttribute('disabled'); |
| 4444 | }; |
| 4445 | |
| 4446 | var isSeparator = function isSeparator(item) { |
| 4447 | return item && item.classList.contains(MENU_BUTTON_MENU_ITEM_SEPARATOR); |
| 4448 | }; |
| 4449 | |
| 4450 | var focus = function focus(item) { |
| 4451 | if (item) { |
| 4452 | item = item.closest('.' + MENU_BUTTON_MENU_ITEM); |
| 4453 | } |
| 4454 | if (item) { |
| 4455 | item.focus(); |
| 4456 | } |
| 4457 | }; |
| 4458 | |
| 4459 | var nextItem = function nextItem(current) { |
| 4460 | var n = current.nextElementSibling; |
| 4461 | if (!n) { |
| 4462 | n = element.firstElementChild; |
| 4463 | } |
| 4464 | if (!isDisabled(n) && !isSeparator(n)) { |
| 4465 | focus(n); |
| 4466 | } else { |
| 4467 | var i = element.children.length; |
| 4468 | while (n && i-- > 0) { |
| 4469 | if (isDisabled(n) || isSeparator(n)) { |
| 4470 | n = n.nextElementSibling; |
| 4471 | if (!n) { |
| 4472 | n = element.firstElementChild; |
| 4473 | } |
| 4474 | } else { |
| 4475 | focus(n); |
| 4476 | break; |
| 4477 | } |
| 4478 | } |
| 4479 | } |
| 4480 | }; |
| 4481 | |
| 4482 | var previousItem = function previousItem(current) { |
| 4483 | var p = current.previousElementSibling; |
| 4484 | if (!p) { |
| 4485 | p = element.lastElementChild; |
| 4486 | } |
| 4487 | if (!isDisabled(p) && !isSeparator(p)) { |
| 4488 | focus(p); |
| 4489 | } else { |
| 4490 | var i = element.children.length; |
| 4491 | while (p && i-- > 0) { |
| 4492 | if (isDisabled(p) || isSeparator(p)) { |
| 4493 | p = p.previousElementSibling; |
| 4494 | if (!p) { |
| 4495 | p = element.lastElementChild; |
| 4496 | } |
| 4497 | } else { |
| 4498 | focus(p); |
| 4499 | break; |
| 4500 | } |
| 4501 | } |
| 4502 | } |
| 4503 | }; |
| 4504 | |
| 4505 | var firstItem = function firstItem() { |
| 4506 | var item = element.firstElementChild; |
| 4507 | if (isDisabled(item) || isSeparator(item)) { |
| 4508 | nextItem(item); |
| 4509 | } else { |
| 4510 | focus(item); |
| 4511 | } |
| 4512 | }; |
| 4513 | |
| 4514 | var lastItem = function lastItem() { |
| 4515 | var item = element.lastElementChild; |
| 4516 | if (isDisabled(item) || isSeparator(item)) { |
| 4517 | previousItem(item); |
| 4518 | } else { |
| 4519 | focus(item); |
| 4520 | } |
| 4521 | }; |
| 4522 | |
| 4523 | var selectItem = function selectItem(item) { |
| 4524 | if (item && !isDisabled(item) && !isSeparator(item)) { |
| 4525 | setSelected(item); |
| 4526 | close(true, item); |
| 4527 | } |
| 4528 | }; |
| 4529 | |
| 4530 | var keyDownHandler = function keyDownHandler(event) { |
| 4531 | |
| 4532 | var item = event.target.closest('.' + MENU_BUTTON_MENU_ITEM); |
| 4533 | |
| 4534 | switch (event.keyCode) { |
| 4535 | case _constants.VK_ARROW_UP: |
| 4536 | case _constants.VK_ARROW_LEFT: |
| 4537 | if (item) { |
| 4538 | previousItem(item); |
| 4539 | } else { |
| 4540 | firstItem(); |
| 4541 | } |
| 4542 | break; |
| 4543 | |
| 4544 | case _constants.VK_ARROW_DOWN: |
| 4545 | case _constants.VK_ARROW_RIGHT: |
| 4546 | if (item) { |
| 4547 | nextItem(item); |
| 4548 | } else { |
| 4549 | lastItem(); |
| 4550 | } |
| 4551 | break; |
| 4552 | |
| 4553 | case _constants.VK_HOME: |
| 4554 | firstItem(); |
| 4555 | break; |
| 4556 | |
| 4557 | case _constants.VK_END: |
| 4558 | lastItem(); |
| 4559 | break; |
| 4560 | |
| 4561 | case _constants.VK_SPACE: |
| 4562 | case _constants.VK_ENTER: |
| 4563 | selectItem(item); |
| 4564 | break; |
| 4565 | |
| 4566 | case _constants.VK_ESC: |
| 4567 | close(true); |
| 4568 | break; |
| 4569 | |
| 4570 | case _constants.VK_TAB: |
| 4571 | // We do not have a "natural" tab order from menu, so the best we can do is to set focus back to the button |
| 4572 | close(true); |
| 4573 | break; |
| 4574 | |
| 4575 | default: |
| 4576 | return; |
| 4577 | } |
| 4578 | event.preventDefault(); |
| 4579 | }; |
| 4580 | |
| 4581 | var blurHandler = function blurHandler(event) { |
| 4582 | |
| 4583 | // See: https://github.com/facebook/react/issues/2011 |
| 4584 | var t = event.relatedTarget || event.explicitOriginalTarget || // FF |
| 4585 | document.activeElement; // IE11 |
| 4586 | |
| 4587 | //console.log('***** blur, target, relatedTarget', event.target, t); |
| 4588 | |
| 4589 | try { |
| 4590 | if (t) { |
| 4591 | if (t.closest('.' + MENU_BUTTON_MENU) !== element && shouldClose(t)) { |
| 4592 | close(); |
| 4593 | } |
| 4594 | } else { |
| 4595 | close(); |
| 4596 | } |
| 4597 | } catch (err) { |
| 4598 | // FF throws error: "TypeError: n.closest is not a function" if related target is a text node |
| 4599 | close(); |
| 4600 | } |
| 4601 | }; |
| 4602 | |
| 4603 | var clickHandler = function clickHandler(event) { |
| 4604 | //console.log('***** click, target', event.target); |
| 4605 | |
| 4606 | event.preventDefault(); |
| 4607 | var t = event.target; |
| 4608 | if (t && t.closest('.' + MENU_BUTTON_MENU) === element) { |
| 4609 | var item = t.closest('.' + MENU_BUTTON_MENU_ITEM); |
| 4610 | if (item) { |
| 4611 | selectItem(item); |
| 4612 | } |
| 4613 | } else { |
| 4614 | if (shouldClose(t)) { |
| 4615 | close(); |
| 4616 | } |
| 4617 | } |
| 4618 | }; |
| 4619 | |
| 4620 | var touchStartHandler = function touchStartHandler(event) { |
| 4621 | //console.log('***** touchStart, target', event.target); |
| 4622 | |
| 4623 | var t = event.target; |
| 4624 | if (!(t && t.closest('.' + MENU_BUTTON_MENU) === element)) { |
| 4625 | if (event.type === 'touchstart') { |
| 4626 | event.preventDefault(); |
| 4627 | } |
| 4628 | close(); |
| 4629 | } |
| 4630 | }; |
| 4631 | |
| 4632 | var addListeners = function addListeners() { |
| 4633 | element.addEventListener('keydown', keyDownHandler, false); |
| 4634 | element.addEventListener('blur', blurHandler, true); |
| 4635 | element.addEventListener('click', clickHandler, true); |
| 4636 | document.documentElement.addEventListener('touchstart', touchStartHandler, true); |
| 4637 | }; |
| 4638 | |
| 4639 | var _removeListeners = function _removeListeners() { |
| 4640 | element.removeEventListener('keydown', keyDownHandler, false); |
| 4641 | element.removeEventListener('blur', blurHandler, true); |
| 4642 | element.removeEventListener('click', clickHandler, true); |
| 4643 | document.documentElement.removeEventListener('touchstart', touchStartHandler, true); |
| 4644 | }; |
| 4645 | |
| 4646 | var _open = function _open(controlElement) { |
| 4647 | var position = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'first'; |
| 4648 | |
| 4649 | |
| 4650 | ariaControls = controlElement.closest('.' + JS_MENU_BUTTON); |
| 4651 | |
| 4652 | element.style['min-width'] = Math.max(124, controlElement.getBoundingClientRect().width) + 'px'; |
| 4653 | element.removeAttribute('hidden'); |
| 4654 | (0, _domUtils.tether)(controlElement, element); |
| 4655 | |
| 4656 | var item = void 0; |
| 4657 | switch (position.toLowerCase()) { |
| 4658 | case 'first': |
| 4659 | firstItem(); |
| 4660 | break; |
| 4661 | |
| 4662 | case 'last': |
| 4663 | lastItem(); |
| 4664 | break; |
| 4665 | |
| 4666 | case 'selected': |
| 4667 | item = getSelected(); |
| 4668 | if (item && !item.hasAttribute('disabled')) { |
| 4669 | focus(item); |
| 4670 | } else { |
| 4671 | firstItem(); |
| 4672 | } |
| 4673 | break; |
| 4674 | } |
| 4675 | |
| 4676 | addListeners(); |
| 4677 | }; |
| 4678 | |
| 4679 | var shouldClose = function shouldClose(target) { |
| 4680 | //console.log('***** shouldClose'); |
| 4681 | |
| 4682 | var result = false; |
| 4683 | var btn = target && target.closest('.' + JS_MENU_BUTTON) || null; |
| 4684 | if (!btn) { |
| 4685 | result = true; |
| 4686 | } else if (btn.getAttribute('aria-controls') === element.id) { |
| 4687 | if (btn !== ariaControls) { |
| 4688 | result = true; |
| 4689 | } |
| 4690 | } else { |
| 4691 | result = true; |
| 4692 | } |
| 4693 | return result; |
| 4694 | }; |
| 4695 | |
| 4696 | var close = function close() { |
| 4697 | var forceFocus = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false; |
| 4698 | var item = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null; |
| 4699 | |
| 4700 | _removeListeners(); |
| 4701 | |
| 4702 | element.dispatchEvent(new CustomEvent('_closemenu', { |
| 4703 | bubbles: true, |
| 4704 | cancelable: true, |
| 4705 | detail: { forceFocus: forceFocus, item: item } |
| 4706 | })); |
| 4707 | }; |
| 4708 | |
| 4709 | var addWaiAria = function addWaiAria() { |
| 4710 | if (!element.hasAttribute('id')) { |
| 4711 | // Generate a random id |
| 4712 | element.id = 'menu-button-' + (0, _stringUtils.randomString)(); |
| 4713 | } |
| 4714 | element.setAttribute('tabindex', '-1'); |
| 4715 | element.setAttribute('role', 'menu'); |
| 4716 | element.setAttribute('hidden', ''); |
| 4717 | |
| 4718 | [].concat((0, _toConsumableArray3.default)(element.querySelectorAll('.' + MENU_BUTTON_MENU_ITEM))).forEach(function (menuitem) { |
| 4719 | menuitem.setAttribute('tabindex', '-1'); |
| 4720 | menuitem.setAttribute('role', 'menuitem'); |
| 4721 | }); |
| 4722 | |
| 4723 | [].concat((0, _toConsumableArray3.default)(element.querySelectorAll('.' + MENU_BUTTON_MENU_ITEM_SEPARATOR))).forEach(function (menuitem) { |
| 4724 | menuitem.setAttribute('role', 'separator'); |
| 4725 | }); |
| 4726 | }; |
| 4727 | |
| 4728 | var init = function init() { |
| 4729 | addWaiAria(); |
| 4730 | parentNode = element.parentNode; |
| 4731 | element.classList.add('is-upgraded'); |
| 4732 | }; |
| 4733 | |
| 4734 | var _downgrade = function _downgrade() { |
| 4735 | _removeListeners(); |
| 4736 | if (element.parentNode !== parentNode) { |
| 4737 | parentNode.appendChild(element); |
| 4738 | } |
| 4739 | element.classList.remove('is-upgraded'); |
| 4740 | }; |
| 4741 | |
| 4742 | init(); |
| 4743 | |
| 4744 | return { |
| 4745 | /** |
| 4746 | * Get the menu element |
| 4747 | * @returns {Element} the menu element |
| 4748 | */ |
| 4749 | get element() { |
| 4750 | return element; |
| 4751 | }, |
| 4752 | |
| 4753 | /** |
| 4754 | * Set selected menu item |
| 4755 | * @param item |
| 4756 | */ |
| 4757 | set selected(item) { |
| 4758 | setSelected(item, true); |
| 4759 | }, |
| 4760 | |
| 4761 | /** |
| 4762 | * Open menu |
| 4763 | * @param {Element} controlElement the element where the menu should be aligned to |
| 4764 | * @param {String} position menuElement item to receive focus after menu element is opened |
| 4765 | */ |
| 4766 | open: function open(controlElement) { |
| 4767 | var position = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'first'; |
| 4768 | return _open(controlElement, position); |
| 4769 | }, |
| 4770 | |
| 4771 | /** |
| 4772 | * Remove event listeners. |
| 4773 | */ |
| 4774 | removeListeners: function removeListeners() { |
| 4775 | return _removeListeners(); |
| 4776 | }, |
| 4777 | |
| 4778 | /** |
| 4779 | * Downgrade menu |
| 4780 | */ |
| 4781 | downgrade: function downgrade() { |
| 4782 | return _downgrade(); |
| 4783 | } |
| 4784 | }; |
| 4785 | }; |
| 4786 | |
| 4787 | /** |
| 4788 | * The menubutton component |
| 4789 | */ |
| 4790 | |
| 4791 | var MenuButton = function () { |
| 4792 | function MenuButton(element) { |
| 4793 | var _this = this; |
| 4794 | |
| 4795 | (0, _classCallCheck3.default)(this, MenuButton); |
| 4796 | |
| 4797 | this.keyDownHandler = function (event) { |
| 4798 | if (!_this.isDisabled()) { |
| 4799 | switch (event.keyCode) { |
| 4800 | case _constants.VK_ARROW_UP: |
| 4801 | _this.openMenu('last'); |
| 4802 | break; |
| 4803 | |
| 4804 | case _constants.VK_ARROW_DOWN: |
| 4805 | _this.openMenu(); |
| 4806 | break; |
| 4807 | |
| 4808 | case _constants.VK_SPACE: |
| 4809 | case _constants.VK_ENTER: |
| 4810 | _this.openMenu('selected'); |
| 4811 | break; |
| 4812 | |
| 4813 | case _constants.VK_ESC: |
| 4814 | _this.closeMenu(); |
| 4815 | break; |
| 4816 | |
| 4817 | case _constants.VK_TAB: |
| 4818 | _this.closeMenu(); |
| 4819 | return; |
| 4820 | |
| 4821 | default: |
| 4822 | return; |
| 4823 | } |
| 4824 | } |
| 4825 | //event.stopPropagation(); |
| 4826 | event.preventDefault(); |
| 4827 | }; |
| 4828 | |
| 4829 | this.clickHandler = function () { |
| 4830 | if (!_this.isDisabled()) { |
| 4831 | if (_this.element.getAttribute('aria-expanded').toLowerCase() === 'true') { |
| 4832 | _this.closeMenu(true); |
| 4833 | } else { |
| 4834 | _this.openMenu('selected'); |
| 4835 | } |
| 4836 | } |
| 4837 | }; |
| 4838 | |
| 4839 | this.recalcMenuPosition = (0, _fullThrottle2.default)(function () { |
| 4840 | var c = _this.focusElement.getBoundingClientRect(); |
| 4841 | var dx = _this.focusElementLastScrollPosition.left - c.left; |
| 4842 | var dy = _this.focusElementLastScrollPosition.top - c.top; |
| 4843 | var left = (parseFloat(_this.menu.element.style.left) || 0) - dx; |
| 4844 | var top = (parseFloat(_this.menu.element.style.top) || 0) - dy; |
| 4845 | |
| 4846 | _this.menu.element.style.left = left + 'px'; |
| 4847 | _this.menu.element.style.top = top + 'px'; |
| 4848 | _this.focusElementLastScrollPosition = c; |
| 4849 | }); |
| 4850 | |
| 4851 | this.positionChangeHandler = function () { |
| 4852 | _this.recalcMenuPosition(_this); |
| 4853 | }; |
| 4854 | |
| 4855 | this.closeMenuHandler = function (event) { |
| 4856 | if (event && event.detail) { |
| 4857 | if (event.detail.item && event.detail.item !== _this.selectedItem) { |
| 4858 | _this.selectedItem = event.detail.item; |
| 4859 | _this.dispatchMenuSelect(); |
| 4860 | } |
| 4861 | _this.closeMenu(event.detail.forceFocus); |
| 4862 | } |
| 4863 | }; |
| 4864 | |
| 4865 | this.element = element; |
| 4866 | this.focusElement = undefined; |
| 4867 | this.focusElementLastScrollPosition = undefined; |
| 4868 | this.scrollElements = []; |
| 4869 | this.menu = undefined; |
| 4870 | this.selectedItem = null; |
| 4871 | this.init(); |
| 4872 | } |
| 4873 | |
| 4874 | /** |
| 4875 | * Re-position menu if content is scrolled, window is resized or orientation change |
| 4876 | * @see https://javascriptweblog.wordpress.com/2015/11/02/of-classes-and-arrow-functions-a-cautionary-tale/ |
| 4877 | */ |
| 4878 | |
| 4879 | |
| 4880 | (0, _createClass3.default)(MenuButton, [{ |
| 4881 | key: 'dispatchMenuSelect', |
| 4882 | value: function dispatchMenuSelect() { |
| 4883 | this.element.dispatchEvent(new CustomEvent('menuselect', { |
| 4884 | bubbles: true, |
| 4885 | cancelable: true, |
| 4886 | detail: { source: this.selectedItem } |
| 4887 | })); |
| 4888 | } |
| 4889 | }, { |
| 4890 | key: 'isDisabled', |
| 4891 | value: function isDisabled() { |
| 4892 | return this.element.hasAttribute('disabled'); |
| 4893 | } |
| 4894 | }, { |
| 4895 | key: 'removeListeners', |
| 4896 | value: function removeListeners() { |
| 4897 | this.element.removeEventListener('keydown', this.keyDownHandler); |
| 4898 | this.element.removeEventListener('click', this.clickHandler); |
| 4899 | } |
| 4900 | }, { |
| 4901 | key: 'openMenu', |
| 4902 | value: function openMenu() { |
| 4903 | var _this2 = this; |
| 4904 | |
| 4905 | var position = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'first'; |
| 4906 | |
| 4907 | |
| 4908 | if (!this.isDisabled() && this.menu) { |
| 4909 | |
| 4910 | // Close the menu if button position change |
| 4911 | this.scrollElements = (0, _domUtils.getScrollParents)(this.element); |
| 4912 | this.scrollElements.forEach(function (el) { |
| 4913 | return el.addEventListener('scroll', _this2.positionChangeHandler); |
| 4914 | }); |
| 4915 | |
| 4916 | window.addEventListener('resize', this.positionChangeHandler); |
| 4917 | window.addEventListener('orientationchange', this.positionChangeHandler); |
| 4918 | this.menu.element.addEventListener('_closemenu', this.closeMenuHandler); |
| 4919 | |
| 4920 | this.menu.selected = this.selectedItem; |
| 4921 | this.menu.open(this.focusElement, position); |
| 4922 | this.element.setAttribute('aria-expanded', 'true'); |
| 4923 | |
| 4924 | this.focusElementLastScrollPosition = this.focusElement.getBoundingClientRect(); |
| 4925 | } |
| 4926 | } |
| 4927 | }, { |
| 4928 | key: 'closeMenu', |
| 4929 | value: function closeMenu() { |
| 4930 | var _this3 = this; |
| 4931 | |
| 4932 | var forceFocus = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false; |
| 4933 | |
| 4934 | if (this.menu) { |
| 4935 | this.menu.removeListeners(); |
| 4936 | this.scrollElements.forEach(function (el) { |
| 4937 | return el.removeEventListener('scroll', _this3.positionChangeHandler); |
| 4938 | }); |
| 4939 | window.removeEventListener('resize', this.positionChangeHandler); |
| 4940 | window.removeEventListener('orientationchange', this.positionChangeHandler); |
| 4941 | this.menu.element.removeEventListener('_closemenu', this.closeMenuHandler); |
| 4942 | |
| 4943 | if (forceFocus) { |
| 4944 | this.focus(); |
| 4945 | } |
| 4946 | this.element.setAttribute('aria-expanded', 'false'); |
| 4947 | this.menu.element.setAttribute('hidden', ''); |
| 4948 | } |
| 4949 | } |
| 4950 | }, { |
| 4951 | key: 'focus', |
| 4952 | value: function focus() { |
| 4953 | if (!this.isDisabled()) { |
| 4954 | this.focusElement.focus(); |
| 4955 | } |
| 4956 | } |
| 4957 | }, { |
| 4958 | key: 'init', |
| 4959 | value: function init() { |
| 4960 | var _this4 = this; |
| 4961 | |
| 4962 | var addListeners = function addListeners() { |
| 4963 | _this4.element.addEventListener('keydown', _this4.keyDownHandler); |
| 4964 | _this4.element.addEventListener('click', _this4.clickHandler); |
| 4965 | }; |
| 4966 | |
| 4967 | var addWaiAria = function addWaiAria() { |
| 4968 | _this4.element.setAttribute('role', 'button'); |
| 4969 | _this4.element.setAttribute('aria-expanded', 'false'); |
| 4970 | _this4.element.setAttribute('aria-haspopup', 'true'); |
| 4971 | }; |
| 4972 | |
| 4973 | var addFocusElement = function addFocusElement() { |
| 4974 | _this4.focusElement = _this4.element.querySelector('input[type="text"]'); |
| 4975 | if (!_this4.focusElement) { |
| 4976 | _this4.focusElement = _this4.element; |
| 4977 | |
| 4978 | if (!(_this4.focusElement.tagName.toLowerCase() === 'button' || _this4.focusElement.tagName.toLowerCase() === 'input')) { |
| 4979 | if (!_this4.focusElement.hasAttribute('tabindex')) { |
| 4980 | _this4.focusElement.setAttribute('tabindex', '0'); |
| 4981 | } |
| 4982 | } |
| 4983 | } |
| 4984 | }; |
| 4985 | |
| 4986 | var moveElementToDocumentBody = function moveElementToDocumentBody(element) { |
| 4987 | // To position an element on top of all other z-indexed elements, the element should be moved to document.body |
| 4988 | // See: https://philipwalton.com/articles/what-no-one-told-you-about-z-index/ |
| 4989 | |
| 4990 | if (element.parentNode !== document.body) { |
| 4991 | return document.body.appendChild(element); |
| 4992 | } |
| 4993 | return element; |
| 4994 | }; |
| 4995 | |
| 4996 | var findMenuElement = function findMenuElement() { |
| 4997 | var menuElement = void 0; |
| 4998 | var menuElementId = _this4.element.getAttribute('aria-controls'); |
| 4999 | if (menuElementId !== null) { |
| 5000 | menuElement = document.querySelector('#' + menuElementId); |
| 5001 | } else { |
| 5002 | menuElement = _this4.element.parentNode.querySelector('.' + MENU_BUTTON_MENU); |
| 5003 | } |
| 5004 | return menuElement; |
| 5005 | }; |
| 5006 | |
| 5007 | var addMenu = function addMenu() { |
| 5008 | var menuElement = findMenuElement(); |
| 5009 | if (menuElement) { |
| 5010 | if (menuElement.componentInstance) { |
| 5011 | _this4.menu = menuElement.componentInstance; |
| 5012 | } else { |
| 5013 | _this4.menu = menuFactory(menuElement); |
| 5014 | menuElement.componentInstance = _this4.menu; |
| 5015 | moveElementToDocumentBody(menuElement); |
| 5016 | } |
| 5017 | _this4.element.setAttribute('aria-controls', _this4.menu.element.id); |
| 5018 | } |
| 5019 | }; |
| 5020 | |
| 5021 | addFocusElement(); |
| 5022 | addWaiAria(); |
| 5023 | addMenu(); |
| 5024 | this.removeListeners(); |
| 5025 | addListeners(); |
| 5026 | } |
| 5027 | }, { |
| 5028 | key: 'downgrade', |
| 5029 | value: function downgrade() { |
| 5030 | var _this5 = this; |
| 5031 | |
| 5032 | if (this.menu) { |
| 5033 | // Do not downgrade menu if there are other buttons sharing this menu |
| 5034 | var related = [].concat((0, _toConsumableArray3.default)(document.querySelectorAll('.' + JS_MENU_BUTTON + '[aria-controls="' + this.element.getAttribute('aria-controls') + '"]'))); |
| 5035 | if (related.filter(function (c) { |
| 5036 | return c !== _this5.element && c.getAttribute('data-upgraded').indexOf('MaterialExtMenuButton') >= 0; |
| 5037 | }).length === 0) { |
| 5038 | this.menu.downgrade(); |
| 5039 | } |
| 5040 | } |
| 5041 | this.removeListeners(); |
| 5042 | } |
| 5043 | }]); |
| 5044 | return MenuButton; |
| 5045 | }(); |
| 5046 | |
| 5047 | (function () { |
| 5048 | 'use strict'; |
| 5049 | |
| 5050 | /** |
| 5051 | * https://github.com/google/material-design-lite/issues/4205 |
| 5052 | * @constructor |
| 5053 | * @param {Element} element The element that will be upgraded. |
| 5054 | */ |
| 5055 | |
| 5056 | var MaterialExtMenuButton = function MaterialExtMenuButton(element) { |
| 5057 | this.element_ = element; |
| 5058 | this.menuButton_ = null; |
| 5059 | |
| 5060 | // Initialize instance. |
| 5061 | this.init(); |
| 5062 | }; |
| 5063 | window['MaterialExtMenuButton'] = MaterialExtMenuButton; |
| 5064 | |
| 5065 | // Public methods. |
| 5066 | |
| 5067 | /** |
| 5068 | * Get the menu element controlled by this button, null if no menu is controlled by this button |
| 5069 | * @public |
| 5070 | */ |
| 5071 | MaterialExtMenuButton.prototype.getMenuElement = function () { |
| 5072 | return this.menuButton_.menu ? this.menuButton_.menu.element : null; |
| 5073 | }; |
| 5074 | MaterialExtMenuButton.prototype['getMenuElement'] = MaterialExtMenuButton.prototype.getMenuElement; |
| 5075 | |
| 5076 | /** |
| 5077 | * Open menu |
| 5078 | * @public |
| 5079 | * @param {String} position one of "first", "last" or "selected" |
| 5080 | */ |
| 5081 | MaterialExtMenuButton.prototype.openMenu = function (position) { |
| 5082 | this.menuButton_.openMenu(position); |
| 5083 | }; |
| 5084 | MaterialExtMenuButton.prototype['openMenu'] = MaterialExtMenuButton.prototype.openMenu; |
| 5085 | |
| 5086 | /** |
| 5087 | * Close menu |
| 5088 | * @public |
| 5089 | */ |
| 5090 | MaterialExtMenuButton.prototype.closeMenu = function () { |
| 5091 | this.menuButton_.closeMenu(true); |
| 5092 | }; |
| 5093 | MaterialExtMenuButton.prototype['closeMenu'] = MaterialExtMenuButton.prototype.closeMenu; |
| 5094 | |
| 5095 | /** |
| 5096 | * Get selected menu item |
| 5097 | * @public |
| 5098 | * @returns {Element} The selected menu item or null if no item selected |
| 5099 | */ |
| 5100 | MaterialExtMenuButton.prototype.getSelectedMenuItem = function () { |
| 5101 | return this.menuButton_.selectedItem; |
| 5102 | }; |
| 5103 | MaterialExtMenuButton.prototype['getSelectedMenuItem'] = MaterialExtMenuButton.prototype.getSelectedMenuItem; |
| 5104 | |
| 5105 | /** |
| 5106 | * Set (default) selected menu item |
| 5107 | * @param {Element} item |
| 5108 | */ |
| 5109 | MaterialExtMenuButton.prototype.setSelectedMenuItem = function (item) { |
| 5110 | this.menuButton_.selectedItem = item; |
| 5111 | }; |
| 5112 | MaterialExtMenuButton.prototype['setSelectedMenuItem'] = MaterialExtMenuButton.prototype.setSelectedMenuItem; |
| 5113 | |
| 5114 | /** |
| 5115 | * Initialize component |
| 5116 | */ |
| 5117 | MaterialExtMenuButton.prototype.init = function () { |
| 5118 | if (this.element_) { |
| 5119 | this.menuButton_ = new MenuButton(this.element_); |
| 5120 | this.element_.addEventListener('mdl-componentdowngraded', this.mdlDowngrade_.bind(this)); |
| 5121 | this.element_.classList.add(_constants.IS_UPGRADED); |
| 5122 | } |
| 5123 | }; |
| 5124 | |
| 5125 | /** |
| 5126 | * Downgrade component |
| 5127 | * E.g remove listeners and clean up resources |
| 5128 | */ |
| 5129 | MaterialExtMenuButton.prototype.mdlDowngrade_ = function () { |
| 5130 | this.menuButton_.downgrade(); |
| 5131 | }; |
| 5132 | |
| 5133 | // The component registers itself. It can assume componentHandler is available |
| 5134 | // in the global scope. |
| 5135 | /* eslint no-undef: 0 */ |
| 5136 | componentHandler.register({ |
| 5137 | constructor: MaterialExtMenuButton, |
| 5138 | classAsString: 'MaterialExtMenuButton', |
| 5139 | cssClass: JS_MENU_BUTTON, |
| 5140 | widget: true |
| 5141 | }); |
| 5142 | })(); |
| 5143 | |
| 5144 | /***/ }, |
| 5145 | /* 57 */ |
| 5146 | /***/ function(module, exports, __webpack_require__) { |
| 5147 | |
| 5148 | 'use strict'; |
| 5149 | |
| 5150 | var _stringUtils = __webpack_require__(15); |
| 5151 | |
| 5152 | var _constants = __webpack_require__(2); |
| 5153 | |
| 5154 | /** |
| 5155 | * @license |
| 5156 | * Copyright 2016 Leif Olsen. All Rights Reserved. |
| 5157 | * |
| 5158 | * Licensed under the Apache License, Version 2.0 (the "License"); |
| 5159 | * you may not use this file except in compliance with the License. |
| 5160 | * You may obtain a copy of the License at |
| 5161 | * |
| 5162 | * http://www.apache.org/licenses/LICENSE-2.0 |
| 5163 | * |
| 5164 | * Unless required by applicable law or agreed to in writing, software |
| 5165 | * distributed under the License is distributed on an "AS IS" BASIS, |
| 5166 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| 5167 | * See the License for the specific language governing permissions and |
| 5168 | * limitations under the License. |
| 5169 | * |
| 5170 | * This code is built with Google Material Design Lite, |
| 5171 | * which is Licensed under the Apache License, Version 2.0 |
| 5172 | */ |
| 5173 | |
| 5174 | /* |
| 5175 | * Copied/Modified from https://github.com/google/material-design-lite/tree/master/src/textfield |
| 5176 | */ |
| 5177 | |
| 5178 | (function () { |
| 5179 | 'use strict'; |
| 5180 | |
| 5181 | var LABEL = 'mdlext-selectfield__label'; |
| 5182 | var INPUT = 'mdlext-selectfield__select'; |
| 5183 | |
| 5184 | /** |
| 5185 | * Class constructor for Selectfield MDLEXT component. |
| 5186 | * Implements MDL component design pattern defined at: |
| 5187 | * https://github.com/jasonmayes/mdl-component-design-pattern |
| 5188 | * |
| 5189 | * @constructor |
| 5190 | * @param {HTMLElement} element The element that will be upgraded. |
| 5191 | */ |
| 5192 | var MaterialExtSelectfield = function MaterialExtSelectfield(element) { |
| 5193 | this.element_ = element; |
| 5194 | this.init(); // Initialize instance. |
| 5195 | }; |
| 5196 | |
| 5197 | window['MaterialExtSelectfield'] = MaterialExtSelectfield; |
| 5198 | |
| 5199 | /** |
| 5200 | * Handle focus. |
| 5201 | * |
| 5202 | * @param {Event} event The event that fired. |
| 5203 | * @private |
| 5204 | */ |
| 5205 | /*eslint no-unused-vars: 0*/ |
| 5206 | MaterialExtSelectfield.prototype.onFocus_ = function () /*event*/{ |
| 5207 | this.element_.classList.add(_constants.IS_FOCUSED); |
| 5208 | }; |
| 5209 | |
| 5210 | /** |
| 5211 | * Handle lost focus. |
| 5212 | * |
| 5213 | * @param {Event} event The event that fired. |
| 5214 | * @private |
| 5215 | */ |
| 5216 | /*eslint no-unused-vars: 0*/ |
| 5217 | MaterialExtSelectfield.prototype.onBlur_ = function () /*event*/{ |
| 5218 | this.element_.classList.remove(_constants.IS_FOCUSED); |
| 5219 | }; |
| 5220 | |
| 5221 | /** |
| 5222 | * Handle reset event from out side. |
| 5223 | * |
| 5224 | * @param {Event} event The event that fired. |
| 5225 | * @private |
| 5226 | */ |
| 5227 | MaterialExtSelectfield.prototype.onReset_ = function () /*event*/{ |
| 5228 | this.updateClasses_(); |
| 5229 | }; |
| 5230 | |
| 5231 | /** |
| 5232 | * Handle class updates. |
| 5233 | * |
| 5234 | * @private |
| 5235 | */ |
| 5236 | MaterialExtSelectfield.prototype.updateClasses_ = function () { |
| 5237 | this.checkDisabled(); |
| 5238 | this.checkValidity(); |
| 5239 | this.checkDirty(); |
| 5240 | this.checkFocus(); |
| 5241 | }; |
| 5242 | |
| 5243 | // Public methods. |
| 5244 | |
| 5245 | /** |
| 5246 | * Check the disabled state and update field accordingly. |
| 5247 | * |
| 5248 | * @public |
| 5249 | */ |
| 5250 | MaterialExtSelectfield.prototype.checkDisabled = function () { |
| 5251 | if (this.select_.disabled) { |
| 5252 | this.element_.classList.add(_constants.IS_DISABLED); |
| 5253 | } else { |
| 5254 | this.element_.classList.remove(_constants.IS_DISABLED); |
| 5255 | } |
| 5256 | }; |
| 5257 | MaterialExtSelectfield.prototype['checkDisabled'] = MaterialExtSelectfield.prototype.checkDisabled; |
| 5258 | |
| 5259 | /** |
| 5260 | * Check the focus state and update field accordingly. |
| 5261 | * |
| 5262 | * @public |
| 5263 | */ |
| 5264 | MaterialExtSelectfield.prototype.checkFocus = function () { |
| 5265 | // Note: element.querySelector(':focus') always return null in JsDom, even if select element has focus |
| 5266 | /*eslint no-extra-boolean-cast: 0*/ |
| 5267 | if (Boolean(this.element_.querySelector(':focus'))) { |
| 5268 | this.element_.classList.add(_constants.IS_FOCUSED); |
| 5269 | } else { |
| 5270 | this.element_.classList.remove(_constants.IS_FOCUSED); |
| 5271 | } |
| 5272 | }; |
| 5273 | |
| 5274 | MaterialExtSelectfield.prototype['checkFocus'] = MaterialExtSelectfield.prototype.checkFocus; |
| 5275 | |
| 5276 | /** |
| 5277 | * Check the validity state and update field accordingly. |
| 5278 | * |
| 5279 | * @public |
| 5280 | */ |
| 5281 | MaterialExtSelectfield.prototype.checkValidity = function () { |
| 5282 | |
| 5283 | /* Don't think it makes any sense to check validity. |
| 5284 | Tests I've done, so far, indicates that setting an illegal value via JS returns selectedIndex=0 |
| 5285 | if (this.select_.validity) { |
| 5286 | if (this.select_.validity.valid) { |
| 5287 | this.element_.classList.remove(this.CssClasses_.IS_INVALID); |
| 5288 | } else { |
| 5289 | this.element_.classList.add(this.CssClasses_.IS_INVALID); |
| 5290 | } |
| 5291 | } |
| 5292 | */ |
| 5293 | }; |
| 5294 | |
| 5295 | MaterialExtSelectfield.prototype['checkValidity'] = MaterialExtSelectfield.prototype.checkValidity; |
| 5296 | |
| 5297 | /** |
| 5298 | * Check the dirty state and update field accordingly. |
| 5299 | * |
| 5300 | * @public |
| 5301 | */ |
| 5302 | MaterialExtSelectfield.prototype.checkDirty = function () { |
| 5303 | if (this.select_.value && this.select_.value.length > 0) { |
| 5304 | this.element_.classList.add(_constants.IS_DIRTY); |
| 5305 | } else { |
| 5306 | this.element_.classList.remove(_constants.IS_DIRTY); |
| 5307 | } |
| 5308 | }; |
| 5309 | |
| 5310 | MaterialExtSelectfield.prototype['checkDirty'] = MaterialExtSelectfield.prototype.checkDirty; |
| 5311 | |
| 5312 | /** |
| 5313 | * Disable select field. |
| 5314 | * |
| 5315 | * @public |
| 5316 | */ |
| 5317 | MaterialExtSelectfield.prototype.disable = function () { |
| 5318 | this.select_.disabled = true; |
| 5319 | this.updateClasses_(); |
| 5320 | }; |
| 5321 | |
| 5322 | MaterialExtSelectfield.prototype['disable'] = MaterialExtSelectfield.prototype.disable; |
| 5323 | |
| 5324 | /** |
| 5325 | * Enable select field. |
| 5326 | * |
| 5327 | * @public |
| 5328 | */ |
| 5329 | MaterialExtSelectfield.prototype.enable = function () { |
| 5330 | this.select_.disabled = false; |
| 5331 | this.updateClasses_(); |
| 5332 | }; |
| 5333 | |
| 5334 | MaterialExtSelectfield.prototype['enable'] = MaterialExtSelectfield.prototype.enable; |
| 5335 | |
| 5336 | /** |
| 5337 | * Update select field value. |
| 5338 | * |
| 5339 | * @param {string} value The value to which to set the control (optional). |
| 5340 | * @public |
| 5341 | */ |
| 5342 | MaterialExtSelectfield.prototype.change = function (value) { |
| 5343 | this.select_.value = value || ''; |
| 5344 | this.updateClasses_(); |
| 5345 | }; |
| 5346 | MaterialExtSelectfield.prototype['change'] = MaterialExtSelectfield.prototype.change; |
| 5347 | |
| 5348 | /** |
| 5349 | * Initialize element. |
| 5350 | */ |
| 5351 | MaterialExtSelectfield.prototype.init = function () { |
| 5352 | if (this.element_) { |
| 5353 | this.label_ = this.element_.querySelector('.' + LABEL); |
| 5354 | this.select_ = this.element_.querySelector('.' + INPUT); |
| 5355 | |
| 5356 | if (this.select_) { |
| 5357 | // Remove listeners, just in case ... |
| 5358 | this.select_.removeEventListener('change', this.updateClasses_); |
| 5359 | this.select_.removeEventListener('focus', this.onFocus_); |
| 5360 | this.select_.removeEventListener('blur', this.onBlur_); |
| 5361 | this.select_.removeEventListener('reset', this.onReset_); |
| 5362 | |
| 5363 | this.select_.addEventListener('change', this.updateClasses_.bind(this)); |
| 5364 | this.select_.addEventListener('focus', this.onFocus_.bind(this)); |
| 5365 | this.select_.addEventListener('blur', this.onBlur_.bind(this)); |
| 5366 | this.select_.addEventListener('reset', this.onReset_.bind(this)); |
| 5367 | |
| 5368 | if (this.label_) { |
| 5369 | var id = void 0; |
| 5370 | if (!this.select_.hasAttribute('id')) { |
| 5371 | id = 'select-' + (0, _stringUtils.randomString)(); |
| 5372 | this.select_.id = id; |
| 5373 | } else { |
| 5374 | id = this.select_.id; |
| 5375 | } |
| 5376 | |
| 5377 | if (!this.label_.hasAttribute('for')) { |
| 5378 | this.label_.setAttribute('for', id); |
| 5379 | } |
| 5380 | } |
| 5381 | |
| 5382 | var invalid = this.element_.classList.contains(_constants.IS_INVALID); |
| 5383 | this.updateClasses_(); |
| 5384 | this.element_.classList.add(_constants.IS_UPGRADED); |
| 5385 | |
| 5386 | if (invalid) { |
| 5387 | this.element_.classList.add(_constants.IS_INVALID); |
| 5388 | } |
| 5389 | if (this.select_.hasAttribute('autofocus')) { |
| 5390 | this.element_.focus(); |
| 5391 | this.checkFocus(); |
| 5392 | } |
| 5393 | } |
| 5394 | } |
| 5395 | }; |
| 5396 | |
| 5397 | /** |
| 5398 | * Downgrade component |
| 5399 | * E.g remove listeners and clean up resources |
| 5400 | * |
| 5401 | * Nothing to downgrade |
| 5402 | * |
| 5403 | MaterialExtSelectfield.prototype.mdlDowngrade_ = function() { |
| 5404 | 'use strict'; |
| 5405 | console.log('***** MaterialExtSelectfield.mdlDowngrade '); |
| 5406 | }; |
| 5407 | */ |
| 5408 | |
| 5409 | // The component registers itself. It can assume componentHandler is available |
| 5410 | // in the global scope. |
| 5411 | /*eslint no-undef: 0*/ |
| 5412 | componentHandler.register({ |
| 5413 | constructor: MaterialExtSelectfield, |
| 5414 | classAsString: 'MaterialExtSelectfield', |
| 5415 | cssClass: 'mdlext-js-selectfield', |
| 5416 | widget: true |
| 5417 | }); |
| 5418 | })(); |
| 5419 | |
| 5420 | /***/ }, |
| 5421 | /* 58 */ |
| 5422 | /***/ function(module, exports, __webpack_require__) { |
| 5423 | |
| 5424 | 'use strict'; |
| 5425 | |
| 5426 | var _fullThrottle = __webpack_require__(13); |
| 5427 | |
| 5428 | var _fullThrottle2 = _interopRequireDefault(_fullThrottle); |
| 5429 | |
| 5430 | var _jsonUtils = __webpack_require__(14); |
| 5431 | |
| 5432 | var _constants = __webpack_require__(2); |
| 5433 | |
| 5434 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } |
| 5435 | |
| 5436 | (function () { |
| 5437 | 'use strict'; |
| 5438 | |
| 5439 | var MDL_LAYOUT_CONTENT = 'mdl-layout__content'; |
| 5440 | var IS_SCROLL_CLASS = 'mdlext-is-scroll'; |
| 5441 | |
| 5442 | /** |
| 5443 | * @constructor |
| 5444 | * @param {Element} element The element that will be upgraded. |
| 5445 | */ |
| 5446 | var MaterialExtStickyHeader = function MaterialExtStickyHeader(element) { |
| 5447 | // Stores the element. |
| 5448 | this.header_ = element; |
| 5449 | |
| 5450 | // Heder listens to scroll events from content |
| 5451 | this.content_ = null; |
| 5452 | this.lastScrollTop_ = 0; |
| 5453 | |
| 5454 | // Default config |
| 5455 | this.config_ = { |
| 5456 | visibleAtScrollEnd: false |
| 5457 | }; |
| 5458 | |
| 5459 | this.mutationObserver_ = null; |
| 5460 | |
| 5461 | this.drawing_ = false; |
| 5462 | |
| 5463 | // Initialize instance. |
| 5464 | this.init(); |
| 5465 | }; |
| 5466 | |
| 5467 | window['MaterialExtStickyHeader'] = MaterialExtStickyHeader; |
| 5468 | |
| 5469 | /** |
| 5470 | * Update header width |
| 5471 | * @private |
| 5472 | */ |
| 5473 | MaterialExtStickyHeader.prototype.recalcWidth_ = function () { |
| 5474 | this.header_.style.width = this.content_.clientWidth + 'px'; |
| 5475 | }; |
| 5476 | |
| 5477 | var throttleResize = (0, _fullThrottle2.default)(function (self) { |
| 5478 | return self.recalcWidth_(); |
| 5479 | }); |
| 5480 | |
| 5481 | /** |
| 5482 | * Adjust header width when window resizes or oreientation changes |
| 5483 | * @param event |
| 5484 | * @private |
| 5485 | */ |
| 5486 | MaterialExtStickyHeader.prototype.resizeHandler_ = function () /* event */{ |
| 5487 | throttleResize(this); |
| 5488 | }; |
| 5489 | |
| 5490 | /** |
| 5491 | * Update header position |
| 5492 | * @private |
| 5493 | */ |
| 5494 | MaterialExtStickyHeader.prototype.reposition_ = function () { |
| 5495 | |
| 5496 | var currentContentScrollTop = this.content_.scrollTop; |
| 5497 | var scrollDiff = this.lastScrollTop_ - currentContentScrollTop; |
| 5498 | |
| 5499 | if (currentContentScrollTop <= 0) { |
| 5500 | // Scrolled to the top. Header sticks to the top |
| 5501 | this.header_.style.top = '0'; |
| 5502 | this.header_.classList.remove(IS_SCROLL_CLASS); |
| 5503 | } else if (scrollDiff > 0) { |
| 5504 | |
| 5505 | if (scrollDiff >= this.header_.offsetHeight) { |
| 5506 | |
| 5507 | // Scrolled up. Header slides in |
| 5508 | var headerTop = parseInt(window.getComputedStyle(this.header_).getPropertyValue('top')) || 0; |
| 5509 | if (headerTop != 0) { |
| 5510 | this.header_.style.top = '0'; |
| 5511 | this.header_.classList.add(IS_SCROLL_CLASS); |
| 5512 | } |
| 5513 | this.lastScrollTop_ = currentContentScrollTop; |
| 5514 | } |
| 5515 | return; |
| 5516 | } else if (scrollDiff < 0) { |
| 5517 | // Scrolled down |
| 5518 | this.header_.classList.add(IS_SCROLL_CLASS); |
| 5519 | var _headerTop = parseInt(window.getComputedStyle(this.header_).getPropertyValue('top')) || 0; |
| 5520 | |
| 5521 | if (this.content_.scrollHeight - this.content_.scrollTop <= this.content_.offsetHeight) { |
| 5522 | // Bottom of content |
| 5523 | if (_headerTop != 0) { |
| 5524 | this.header_.style.top = this.config_.visibleAtScrollEnd ? '0' : '-' + this.header_.offsetHeight + 'px'; |
| 5525 | } |
| 5526 | } else { |
| 5527 | _headerTop += scrollDiff; |
| 5528 | var offsetHeight = this.header_.offsetHeight; |
| 5529 | this.header_.style.top = (Math.abs(_headerTop) > offsetHeight ? -offsetHeight : _headerTop) + 'px'; |
| 5530 | } |
| 5531 | } |
| 5532 | |
| 5533 | this.lastScrollTop_ = currentContentScrollTop; |
| 5534 | }; |
| 5535 | |
| 5536 | var throttleScroll = (0, _fullThrottle2.default)(function (self) { |
| 5537 | return self.reposition_(); |
| 5538 | }); |
| 5539 | |
| 5540 | /** |
| 5541 | * Scroll header when content scrolls |
| 5542 | * @param event |
| 5543 | * @private |
| 5544 | */ |
| 5545 | MaterialExtStickyHeader.prototype.scrollHandler_ = function () /* event */{ |
| 5546 | throttleScroll(this); |
| 5547 | }; |
| 5548 | |
| 5549 | /** |
| 5550 | * Init header position |
| 5551 | * @private |
| 5552 | */ |
| 5553 | MaterialExtStickyHeader.prototype.updatePosition_ = function () /* event */{ |
| 5554 | this.recalcWidth_(); |
| 5555 | this.reposition_(); |
| 5556 | }; |
| 5557 | |
| 5558 | /** |
| 5559 | * Add mutation observer |
| 5560 | * @private |
| 5561 | */ |
| 5562 | MaterialExtStickyHeader.prototype.addMutationObserver_ = function () { |
| 5563 | var _this = this; |
| 5564 | |
| 5565 | // jsdom does not support MutationObserver - so this is not testable |
| 5566 | /* istanbul ignore next */ |
| 5567 | this.mutationObserver_ = new MutationObserver(function () /*mutations*/{ |
| 5568 | // Adjust header width if content changes (e.g. in a SPA) |
| 5569 | _this.updatePosition_(); |
| 5570 | }); |
| 5571 | |
| 5572 | this.mutationObserver_.observe(this.content_, { |
| 5573 | attributes: false, |
| 5574 | childList: true, |
| 5575 | characterData: false, |
| 5576 | subtree: true |
| 5577 | }); |
| 5578 | }; |
| 5579 | |
| 5580 | /** |
| 5581 | * Removes event listeners |
| 5582 | * @private |
| 5583 | */ |
| 5584 | MaterialExtStickyHeader.prototype.removeListeners_ = function () { |
| 5585 | |
| 5586 | window.removeEventListener('resize', this.resizeHandler_); |
| 5587 | window.removeEventListener('orientationchange', this.resizeHandler_); |
| 5588 | |
| 5589 | if (this.content_) { |
| 5590 | this.content_.removeEventListener('scroll', this.scrollHandler_); |
| 5591 | } |
| 5592 | |
| 5593 | if (this.mutationObserver_) { |
| 5594 | this.mutationObserver_.disconnect(); |
| 5595 | this.mutationObserver_ = null; |
| 5596 | } |
| 5597 | }; |
| 5598 | |
| 5599 | /** |
| 5600 | * Initialize component |
| 5601 | */ |
| 5602 | MaterialExtStickyHeader.prototype.init = function () { |
| 5603 | |
| 5604 | if (this.header_) { |
| 5605 | |
| 5606 | this.removeListeners_(); |
| 5607 | |
| 5608 | if (this.header_.hasAttribute('data-config')) { |
| 5609 | this.config_ = (0, _jsonUtils.jsonStringToObject)(this.header_.getAttribute('data-config')); |
| 5610 | } |
| 5611 | |
| 5612 | this.content_ = this.header_.parentNode.querySelector('.' + MDL_LAYOUT_CONTENT) || null; |
| 5613 | |
| 5614 | if (this.content_) { |
| 5615 | this.content_.style.paddingTop = this.header_.offsetHeight + 'px'; // Make room for sticky header |
| 5616 | this.lastScrollTop_ = this.content_.scrollTop; |
| 5617 | |
| 5618 | this.content_.addEventListener('scroll', this.scrollHandler_.bind(this)); |
| 5619 | window.addEventListener('resize', this.resizeHandler_.bind(this)); |
| 5620 | window.addEventListener('orientationchange', this.resizeHandler_.bind(this)); |
| 5621 | |
| 5622 | this.addMutationObserver_(); |
| 5623 | this.updatePosition_(); |
| 5624 | |
| 5625 | // Set upgraded flag |
| 5626 | this.header_.classList.add(_constants.IS_UPGRADED); |
| 5627 | } |
| 5628 | } |
| 5629 | }; |
| 5630 | |
| 5631 | /* |
| 5632 | * Downgrade component |
| 5633 | * E.g remove listeners and clean up resources |
| 5634 | * |
| 5635 | * Nothing to clean |
| 5636 | * |
| 5637 | MaterialExtStickyHeader.prototype.mdlDowngrade_ = function() { |
| 5638 | 'use strict'; |
| 5639 | console.log('***** MaterialExtStickyHeader.prototype.mdlDowngrade_'); |
| 5640 | }; |
| 5641 | */ |
| 5642 | |
| 5643 | // The component registers itself. It can assume componentHandler is available |
| 5644 | // in the global scope. |
| 5645 | /* eslint no-undef: 0 */ |
| 5646 | componentHandler.register({ |
| 5647 | constructor: MaterialExtStickyHeader, |
| 5648 | classAsString: 'MaterialExtStickyHeader', |
| 5649 | cssClass: 'mdlext-js-sticky-header' |
| 5650 | }); |
| 5651 | })(); /** |
| 5652 | * @license |
| 5653 | * Copyright 2016 Leif Olsen. All Rights Reserved. |
| 5654 | * |
| 5655 | * Licensed under the Apache License, Version 2.0 (the "License"); |
| 5656 | * you may not use this file except in compliance with the License. |
| 5657 | * You may obtain a copy of the License at |
| 5658 | * |
| 5659 | * http://www.apache.org/licenses/LICENSE-2.0 |
| 5660 | * |
| 5661 | * Unless required by applicable law or agreed to in writing, software |
| 5662 | * distributed under the License is distributed on an "AS IS" BASIS, |
| 5663 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| 5664 | * See the License for the specific language governing permissions and |
| 5665 | * limitations under the License. |
| 5666 | * |
| 5667 | * This code is built with Google Material Design Lite, |
| 5668 | * which is Licensed under the Apache License, Version 2.0 |
| 5669 | */ |
| 5670 | |
| 5671 | /** |
| 5672 | * A sticky header makes site navigation easily accessible anywhere on the page and saves content space at the same. |
| 5673 | * The header should auto-hide, i.e. hiding the header automatically when a user starts scrolling down the page and |
| 5674 | * bringing the header back when a user might need it: they reach the bottom of the page or start scrolling up. |
| 5675 | */ |
| 5676 | |
| 5677 | /***/ }, |
| 5678 | /* 59 */ |
| 5679 | /***/ function(module, exports, __webpack_require__) { |
| 5680 | |
| 5681 | 'use strict'; |
| 5682 | |
| 5683 | __webpack_require__(2); |
| 5684 | |
| 5685 | __webpack_require__(21); |
| 5686 | |
| 5687 | __webpack_require__(15); |
| 5688 | |
| 5689 | __webpack_require__(14); |
| 5690 | |
| 5691 | __webpack_require__(13); |
| 5692 | |
| 5693 | __webpack_require__(29); |
| 5694 | |
| 5695 | __webpack_require__(30); |
| 5696 | |
| 5697 | /***/ }, |
| 5698 | /* 60 */ |
| 5699 | /***/ function(module, exports, __webpack_require__) { |
| 5700 | |
| 5701 | module.exports = { "default": __webpack_require__(68), __esModule: true }; |
| 5702 | |
| 5703 | /***/ }, |
| 5704 | /* 61 */ |
| 5705 | /***/ function(module, exports, __webpack_require__) { |
| 5706 | |
| 5707 | module.exports = { "default": __webpack_require__(70), __esModule: true }; |
| 5708 | |
| 5709 | /***/ }, |
| 5710 | /* 62 */ |
| 5711 | /***/ function(module, exports, __webpack_require__) { |
| 5712 | |
| 5713 | module.exports = { "default": __webpack_require__(72), __esModule: true }; |
| 5714 | |
| 5715 | /***/ }, |
| 5716 | /* 63 */ |
| 5717 | /***/ function(module, exports, __webpack_require__) { |
| 5718 | |
| 5719 | module.exports = { "default": __webpack_require__(74), __esModule: true }; |
| 5720 | |
| 5721 | /***/ }, |
| 5722 | /* 64 */ |
| 5723 | /***/ function(module, exports, __webpack_require__) { |
| 5724 | |
| 5725 | module.exports = { "default": __webpack_require__(75), __esModule: true }; |
| 5726 | |
| 5727 | /***/ }, |
| 5728 | /* 65 */ |
| 5729 | /***/ function(module, exports, __webpack_require__) { |
| 5730 | |
| 5731 | module.exports = { "default": __webpack_require__(76), __esModule: true }; |
| 5732 | |
| 5733 | /***/ }, |
| 5734 | /* 66 */ |
| 5735 | /***/ function(module, exports, __webpack_require__) { |
| 5736 | |
| 5737 | module.exports = { "default": __webpack_require__(77), __esModule: true }; |
| 5738 | |
| 5739 | /***/ }, |
| 5740 | /* 67 */ |
| 5741 | /***/ function(module, exports, __webpack_require__) { |
| 5742 | |
| 5743 | "use strict"; |
| 5744 | |
| 5745 | exports.__esModule = true; |
| 5746 | |
| 5747 | var _isIterable2 = __webpack_require__(61); |
| 5748 | |
| 5749 | var _isIterable3 = _interopRequireDefault(_isIterable2); |
| 5750 | |
| 5751 | var _getIterator2 = __webpack_require__(31); |
| 5752 | |
| 5753 | var _getIterator3 = _interopRequireDefault(_getIterator2); |
| 5754 | |
| 5755 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } |
| 5756 | |
| 5757 | exports.default = function () { |
| 5758 | function sliceIterator(arr, i) { |
| 5759 | var _arr = []; |
| 5760 | var _n = true; |
| 5761 | var _d = false; |
| 5762 | var _e = undefined; |
| 5763 | |
| 5764 | try { |
| 5765 | for (var _i = (0, _getIterator3.default)(arr), _s; !(_n = (_s = _i.next()).done); _n = true) { |
| 5766 | _arr.push(_s.value); |
| 5767 | |
| 5768 | if (i && _arr.length === i) break; |
| 5769 | } |
| 5770 | } catch (err) { |
| 5771 | _d = true; |
| 5772 | _e = err; |
| 5773 | } finally { |
| 5774 | try { |
| 5775 | if (!_n && _i["return"]) _i["return"](); |
| 5776 | } finally { |
| 5777 | if (_d) throw _e; |
| 5778 | } |
| 5779 | } |
| 5780 | |
| 5781 | return _arr; |
| 5782 | } |
| 5783 | |
| 5784 | return function (arr, i) { |
| 5785 | if (Array.isArray(arr)) { |
| 5786 | return arr; |
| 5787 | } else if ((0, _isIterable3.default)(Object(arr))) { |
| 5788 | return sliceIterator(arr, i); |
| 5789 | } else { |
| 5790 | throw new TypeError("Invalid attempt to destructure non-iterable instance"); |
| 5791 | } |
| 5792 | }; |
| 5793 | }(); |
| 5794 | |
| 5795 | /***/ }, |
| 5796 | /* 68 */ |
| 5797 | /***/ function(module, exports, __webpack_require__) { |
| 5798 | |
| 5799 | __webpack_require__(28); |
| 5800 | __webpack_require__(104); |
| 5801 | module.exports = __webpack_require__(1).Array.from; |
| 5802 | |
| 5803 | /***/ }, |
| 5804 | /* 69 */ |
| 5805 | /***/ function(module, exports, __webpack_require__) { |
| 5806 | |
| 5807 | __webpack_require__(48); |
| 5808 | __webpack_require__(28); |
| 5809 | module.exports = __webpack_require__(102); |
| 5810 | |
| 5811 | /***/ }, |
| 5812 | /* 70 */ |
| 5813 | /***/ function(module, exports, __webpack_require__) { |
| 5814 | |
| 5815 | __webpack_require__(48); |
| 5816 | __webpack_require__(28); |
| 5817 | module.exports = __webpack_require__(103); |
| 5818 | |
| 5819 | /***/ }, |
| 5820 | /* 71 */ |
| 5821 | /***/ function(module, exports, __webpack_require__) { |
| 5822 | |
| 5823 | __webpack_require__(106); |
| 5824 | module.exports = __webpack_require__(1).Number.isInteger; |
| 5825 | |
| 5826 | /***/ }, |
| 5827 | /* 72 */ |
| 5828 | /***/ function(module, exports, __webpack_require__) { |
| 5829 | |
| 5830 | __webpack_require__(107); |
| 5831 | module.exports = __webpack_require__(1).Number.isNaN; |
| 5832 | |
| 5833 | /***/ }, |
| 5834 | /* 73 */ |
| 5835 | /***/ function(module, exports, __webpack_require__) { |
| 5836 | |
| 5837 | __webpack_require__(108); |
| 5838 | module.exports = __webpack_require__(1).Object.assign; |
| 5839 | |
| 5840 | /***/ }, |
| 5841 | /* 74 */ |
| 5842 | /***/ function(module, exports, __webpack_require__) { |
| 5843 | |
| 5844 | __webpack_require__(109); |
| 5845 | var $Object = __webpack_require__(1).Object; |
| 5846 | module.exports = function defineProperty(it, key, desc){ |
| 5847 | return $Object.defineProperty(it, key, desc); |
| 5848 | }; |
| 5849 | |
| 5850 | /***/ }, |
| 5851 | /* 75 */ |
| 5852 | /***/ function(module, exports, __webpack_require__) { |
| 5853 | |
| 5854 | __webpack_require__(112); |
| 5855 | module.exports = __webpack_require__(1).Object.entries; |
| 5856 | |
| 5857 | /***/ }, |
| 5858 | /* 76 */ |
| 5859 | /***/ function(module, exports, __webpack_require__) { |
| 5860 | |
| 5861 | __webpack_require__(110); |
| 5862 | module.exports = __webpack_require__(1).Object.keys; |
| 5863 | |
| 5864 | /***/ }, |
| 5865 | /* 77 */ |
| 5866 | /***/ function(module, exports, __webpack_require__) { |
| 5867 | |
| 5868 | __webpack_require__(111); |
| 5869 | module.exports = __webpack_require__(1).Reflect.apply; |
| 5870 | |
| 5871 | /***/ }, |
| 5872 | /* 78 */ |
| 5873 | /***/ function(module, exports) { |
| 5874 | |
| 5875 | module.exports = function(){ /* empty */ }; |
| 5876 | |
| 5877 | /***/ }, |
| 5878 | /* 79 */ |
| 5879 | /***/ function(module, exports, __webpack_require__) { |
| 5880 | |
| 5881 | // false -> Array#indexOf |
| 5882 | // true -> Array#includes |
| 5883 | var toIObject = __webpack_require__(19) |
| 5884 | , toLength = __webpack_require__(45) |
| 5885 | , toIndex = __webpack_require__(100); |
| 5886 | module.exports = function(IS_INCLUDES){ |
| 5887 | return function($this, el, fromIndex){ |
| 5888 | var O = toIObject($this) |
| 5889 | , length = toLength(O.length) |
| 5890 | , index = toIndex(fromIndex, length) |
| 5891 | , value; |
| 5892 | // Array#includes uses SameValueZero equality algorithm |
| 5893 | if(IS_INCLUDES && el != el)while(length > index){ |
| 5894 | value = O[index++]; |
| 5895 | if(value != value)return true; |
| 5896 | // Array#toIndex ignores holes, Array#includes - not |
| 5897 | } else for(;length > index; index++)if(IS_INCLUDES || index in O){ |
| 5898 | if(O[index] === el)return IS_INCLUDES || index || 0; |
| 5899 | } return !IS_INCLUDES && -1; |
| 5900 | }; |
| 5901 | }; |
| 5902 | |
| 5903 | /***/ }, |
| 5904 | /* 80 */ |
| 5905 | /***/ function(module, exports, __webpack_require__) { |
| 5906 | |
| 5907 | 'use strict'; |
| 5908 | var $defineProperty = __webpack_require__(12) |
| 5909 | , createDesc = __webpack_require__(25); |
| 5910 | |
| 5911 | module.exports = function(object, index, value){ |
| 5912 | if(index in object)$defineProperty.f(object, index, createDesc(0, value)); |
| 5913 | else object[index] = value; |
| 5914 | }; |
| 5915 | |
| 5916 | /***/ }, |
| 5917 | /* 81 */ |
| 5918 | /***/ function(module, exports, __webpack_require__) { |
| 5919 | |
| 5920 | module.exports = __webpack_require__(5).document && document.documentElement; |
| 5921 | |
| 5922 | /***/ }, |
| 5923 | /* 82 */ |
| 5924 | /***/ function(module, exports, __webpack_require__) { |
| 5925 | |
| 5926 | module.exports = !__webpack_require__(9) && !__webpack_require__(10)(function(){ |
| 5927 | return Object.defineProperty(__webpack_require__(38)('div'), 'a', {get: function(){ return 7; }}).a != 7; |
| 5928 | }); |
| 5929 | |
| 5930 | /***/ }, |
| 5931 | /* 83 */ |
| 5932 | /***/ function(module, exports, __webpack_require__) { |
| 5933 | |
| 5934 | // check on default Array iterator |
| 5935 | var Iterators = __webpack_require__(7) |
| 5936 | , ITERATOR = __webpack_require__(4)('iterator') |
| 5937 | , ArrayProto = Array.prototype; |
| 5938 | |
| 5939 | module.exports = function(it){ |
| 5940 | return it !== undefined && (Iterators.Array === it || ArrayProto[ITERATOR] === it); |
| 5941 | }; |
| 5942 | |
| 5943 | /***/ }, |
| 5944 | /* 84 */ |
| 5945 | /***/ function(module, exports, __webpack_require__) { |
| 5946 | |
| 5947 | // 20.1.2.3 Number.isInteger(number) |
| 5948 | var isObject = __webpack_require__(17) |
| 5949 | , floor = Math.floor; |
| 5950 | module.exports = function isInteger(it){ |
| 5951 | return !isObject(it) && isFinite(it) && floor(it) === it; |
| 5952 | }; |
| 5953 | |
| 5954 | /***/ }, |
| 5955 | /* 85 */ |
| 5956 | /***/ function(module, exports, __webpack_require__) { |
| 5957 | |
| 5958 | // call something on iterator step with safe closing on error |
| 5959 | var anObject = __webpack_require__(6); |
| 5960 | module.exports = function(iterator, fn, value, entries){ |
| 5961 | try { |
| 5962 | return entries ? fn(anObject(value)[0], value[1]) : fn(value); |
| 5963 | // 7.4.6 IteratorClose(iterator, completion) |
| 5964 | } catch(e){ |
| 5965 | var ret = iterator['return']; |
| 5966 | if(ret !== undefined)anObject(ret.call(iterator)); |
| 5967 | throw e; |
| 5968 | } |
| 5969 | }; |
| 5970 | |
| 5971 | /***/ }, |
| 5972 | /* 86 */ |
| 5973 | /***/ function(module, exports, __webpack_require__) { |
| 5974 | |
| 5975 | 'use strict'; |
| 5976 | var create = __webpack_require__(91) |
| 5977 | , descriptor = __webpack_require__(25) |
| 5978 | , setToStringTag = __webpack_require__(43) |
| 5979 | , IteratorPrototype = {}; |
| 5980 | |
| 5981 | // 25.1.2.1.1 %IteratorPrototype%[@@iterator]() |
| 5982 | __webpack_require__(11)(IteratorPrototype, __webpack_require__(4)('iterator'), function(){ return this; }); |
| 5983 | |
| 5984 | module.exports = function(Constructor, NAME, next){ |
| 5985 | Constructor.prototype = create(IteratorPrototype, {next: descriptor(1, next)}); |
| 5986 | setToStringTag(Constructor, NAME + ' Iterator'); |
| 5987 | }; |
| 5988 | |
| 5989 | /***/ }, |
| 5990 | /* 87 */ |
| 5991 | /***/ function(module, exports, __webpack_require__) { |
| 5992 | |
| 5993 | var ITERATOR = __webpack_require__(4)('iterator') |
| 5994 | , SAFE_CLOSING = false; |
| 5995 | |
| 5996 | try { |
| 5997 | var riter = [7][ITERATOR](); |
| 5998 | riter['return'] = function(){ SAFE_CLOSING = true; }; |
| 5999 | Array.from(riter, function(){ throw 2; }); |
| 6000 | } catch(e){ /* empty */ } |
| 6001 | |
| 6002 | module.exports = function(exec, skipClosing){ |
| 6003 | if(!skipClosing && !SAFE_CLOSING)return false; |
| 6004 | var safe = false; |
| 6005 | try { |
| 6006 | var arr = [7] |
| 6007 | , iter = arr[ITERATOR](); |
| 6008 | iter.next = function(){ return {done: safe = true}; }; |
| 6009 | arr[ITERATOR] = function(){ return iter; }; |
| 6010 | exec(arr); |
| 6011 | } catch(e){ /* empty */ } |
| 6012 | return safe; |
| 6013 | }; |
| 6014 | |
| 6015 | /***/ }, |
| 6016 | /* 88 */ |
| 6017 | /***/ function(module, exports) { |
| 6018 | |
| 6019 | module.exports = function(done, value){ |
| 6020 | return {value: value, done: !!done}; |
| 6021 | }; |
| 6022 | |
| 6023 | /***/ }, |
| 6024 | /* 89 */ |
| 6025 | /***/ function(module, exports) { |
| 6026 | |
| 6027 | module.exports = true; |
| 6028 | |
| 6029 | /***/ }, |
| 6030 | /* 90 */ |
| 6031 | /***/ function(module, exports, __webpack_require__) { |
| 6032 | |
| 6033 | 'use strict'; |
| 6034 | // 19.1.2.1 Object.assign(target, source, ...) |
| 6035 | var getKeys = __webpack_require__(18) |
| 6036 | , gOPS = __webpack_require__(93) |
| 6037 | , pIE = __webpack_require__(42) |
| 6038 | , toObject = __webpack_require__(20) |
| 6039 | , IObject = __webpack_require__(40) |
| 6040 | , $assign = Object.assign; |
| 6041 | |
| 6042 | // should work with symbols and should have deterministic property order (V8 bug) |
| 6043 | module.exports = !$assign || __webpack_require__(10)(function(){ |
| 6044 | var A = {} |
| 6045 | , B = {} |
| 6046 | , S = Symbol() |
| 6047 | , K = 'abcdefghijklmnopqrst'; |
| 6048 | A[S] = 7; |
| 6049 | K.split('').forEach(function(k){ B[k] = k; }); |
| 6050 | return $assign({}, A)[S] != 7 || Object.keys($assign({}, B)).join('') != K; |
| 6051 | }) ? function assign(target, source){ // eslint-disable-line no-unused-vars |
| 6052 | var T = toObject(target) |
| 6053 | , aLen = arguments.length |
| 6054 | , index = 1 |
| 6055 | , getSymbols = gOPS.f |
| 6056 | , isEnum = pIE.f; |
| 6057 | while(aLen > index){ |
| 6058 | var S = IObject(arguments[index++]) |
| 6059 | , keys = getSymbols ? getKeys(S).concat(getSymbols(S)) : getKeys(S) |
| 6060 | , length = keys.length |
| 6061 | , j = 0 |
| 6062 | , key; |
| 6063 | while(length > j)if(isEnum.call(S, key = keys[j++]))T[key] = S[key]; |
| 6064 | } return T; |
| 6065 | } : $assign; |
| 6066 | |
| 6067 | /***/ }, |
| 6068 | /* 91 */ |
| 6069 | /***/ function(module, exports, __webpack_require__) { |
| 6070 | |
| 6071 | // 19.1.2.2 / 15.2.3.5 Object.create(O [, Properties]) |
| 6072 | var anObject = __webpack_require__(6) |
| 6073 | , dPs = __webpack_require__(92) |
| 6074 | , enumBugKeys = __webpack_require__(39) |
| 6075 | , IE_PROTO = __webpack_require__(26)('IE_PROTO') |
| 6076 | , Empty = function(){ /* empty */ } |
| 6077 | , PROTOTYPE = 'prototype'; |
| 6078 | |
| 6079 | // Create object with fake `null` prototype: use iframe Object with cleared prototype |
| 6080 | var createDict = function(){ |
| 6081 | // Thrash, waste and sodomy: IE GC bug |
| 6082 | var iframe = __webpack_require__(38)('iframe') |
| 6083 | , i = enumBugKeys.length |
| 6084 | , lt = '<' |
| 6085 | , gt = '>' |
| 6086 | , iframeDocument; |
| 6087 | iframe.style.display = 'none'; |
| 6088 | __webpack_require__(81).appendChild(iframe); |
| 6089 | iframe.src = 'javascript:'; // eslint-disable-line no-script-url |
| 6090 | // createDict = iframe.contentWindow.Object; |
| 6091 | // html.removeChild(iframe); |
| 6092 | iframeDocument = iframe.contentWindow.document; |
| 6093 | iframeDocument.open(); |
| 6094 | iframeDocument.write(lt + 'script' + gt + 'document.F=Object' + lt + '/script' + gt); |
| 6095 | iframeDocument.close(); |
| 6096 | createDict = iframeDocument.F; |
| 6097 | while(i--)delete createDict[PROTOTYPE][enumBugKeys[i]]; |
| 6098 | return createDict(); |
| 6099 | }; |
| 6100 | |
| 6101 | module.exports = Object.create || function create(O, Properties){ |
| 6102 | var result; |
| 6103 | if(O !== null){ |
| 6104 | Empty[PROTOTYPE] = anObject(O); |
| 6105 | result = new Empty; |
| 6106 | Empty[PROTOTYPE] = null; |
| 6107 | // add "__proto__" for Object.getPrototypeOf polyfill |
| 6108 | result[IE_PROTO] = O; |
| 6109 | } else result = createDict(); |
| 6110 | return Properties === undefined ? result : dPs(result, Properties); |
| 6111 | }; |
| 6112 | |
| 6113 | |
| 6114 | /***/ }, |
| 6115 | /* 92 */ |
| 6116 | /***/ function(module, exports, __webpack_require__) { |
| 6117 | |
| 6118 | var dP = __webpack_require__(12) |
| 6119 | , anObject = __webpack_require__(6) |
| 6120 | , getKeys = __webpack_require__(18); |
| 6121 | |
| 6122 | module.exports = __webpack_require__(9) ? Object.defineProperties : function defineProperties(O, Properties){ |
| 6123 | anObject(O); |
| 6124 | var keys = getKeys(Properties) |
| 6125 | , length = keys.length |
| 6126 | , i = 0 |
| 6127 | , P; |
| 6128 | while(length > i)dP.f(O, P = keys[i++], Properties[P]); |
| 6129 | return O; |
| 6130 | }; |
| 6131 | |
| 6132 | /***/ }, |
| 6133 | /* 93 */ |
| 6134 | /***/ function(module, exports) { |
| 6135 | |
| 6136 | exports.f = Object.getOwnPropertySymbols; |
| 6137 | |
| 6138 | /***/ }, |
| 6139 | /* 94 */ |
| 6140 | /***/ function(module, exports, __webpack_require__) { |
| 6141 | |
| 6142 | // 19.1.2.9 / 15.2.3.2 Object.getPrototypeOf(O) |
| 6143 | var has = __webpack_require__(16) |
| 6144 | , toObject = __webpack_require__(20) |
| 6145 | , IE_PROTO = __webpack_require__(26)('IE_PROTO') |
| 6146 | , ObjectProto = Object.prototype; |
| 6147 | |
| 6148 | module.exports = Object.getPrototypeOf || function(O){ |
| 6149 | O = toObject(O); |
| 6150 | if(has(O, IE_PROTO))return O[IE_PROTO]; |
| 6151 | if(typeof O.constructor == 'function' && O instanceof O.constructor){ |
| 6152 | return O.constructor.prototype; |
| 6153 | } return O instanceof Object ? ObjectProto : null; |
| 6154 | }; |
| 6155 | |
| 6156 | /***/ }, |
| 6157 | /* 95 */ |
| 6158 | /***/ function(module, exports, __webpack_require__) { |
| 6159 | |
| 6160 | var has = __webpack_require__(16) |
| 6161 | , toIObject = __webpack_require__(19) |
| 6162 | , arrayIndexOf = __webpack_require__(79)(false) |
| 6163 | , IE_PROTO = __webpack_require__(26)('IE_PROTO'); |
| 6164 | |
| 6165 | module.exports = function(object, names){ |
| 6166 | var O = toIObject(object) |
| 6167 | , i = 0 |
| 6168 | , result = [] |
| 6169 | , key; |
| 6170 | for(key in O)if(key != IE_PROTO)has(O, key) && result.push(key); |
| 6171 | // Don't enum bug & hidden keys |
| 6172 | while(names.length > i)if(has(O, key = names[i++])){ |
| 6173 | ~arrayIndexOf(result, key) || result.push(key); |
| 6174 | } |
| 6175 | return result; |
| 6176 | }; |
| 6177 | |
| 6178 | /***/ }, |
| 6179 | /* 96 */ |
| 6180 | /***/ function(module, exports, __webpack_require__) { |
| 6181 | |
| 6182 | // most Object methods by ES6 should accept primitives |
| 6183 | var $export = __webpack_require__(3) |
| 6184 | , core = __webpack_require__(1) |
| 6185 | , fails = __webpack_require__(10); |
| 6186 | module.exports = function(KEY, exec){ |
| 6187 | var fn = (core.Object || {})[KEY] || Object[KEY] |
| 6188 | , exp = {}; |
| 6189 | exp[KEY] = exec(fn); |
| 6190 | $export($export.S + $export.F * fails(function(){ fn(1); }), 'Object', exp); |
| 6191 | }; |
| 6192 | |
| 6193 | /***/ }, |
| 6194 | /* 97 */ |
| 6195 | /***/ function(module, exports, __webpack_require__) { |
| 6196 | |
| 6197 | var getKeys = __webpack_require__(18) |
| 6198 | , toIObject = __webpack_require__(19) |
| 6199 | , isEnum = __webpack_require__(42).f; |
| 6200 | module.exports = function(isEntries){ |
| 6201 | return function(it){ |
| 6202 | var O = toIObject(it) |
| 6203 | , keys = getKeys(O) |
| 6204 | , length = keys.length |
| 6205 | , i = 0 |
| 6206 | , result = [] |
| 6207 | , key; |
| 6208 | while(length > i)if(isEnum.call(O, key = keys[i++])){ |
| 6209 | result.push(isEntries ? [key, O[key]] : O[key]); |
| 6210 | } return result; |
| 6211 | }; |
| 6212 | }; |
| 6213 | |
| 6214 | /***/ }, |
| 6215 | /* 98 */ |
| 6216 | /***/ function(module, exports, __webpack_require__) { |
| 6217 | |
| 6218 | module.exports = __webpack_require__(11); |
| 6219 | |
| 6220 | /***/ }, |
| 6221 | /* 99 */ |
| 6222 | /***/ function(module, exports, __webpack_require__) { |
| 6223 | |
| 6224 | var toInteger = __webpack_require__(27) |
| 6225 | , defined = __webpack_require__(24); |
| 6226 | // true -> String#at |
| 6227 | // false -> String#codePointAt |
| 6228 | module.exports = function(TO_STRING){ |
| 6229 | return function(that, pos){ |
| 6230 | var s = String(defined(that)) |
| 6231 | , i = toInteger(pos) |
| 6232 | , l = s.length |
| 6233 | , a, b; |
| 6234 | if(i < 0 || i >= l)return TO_STRING ? '' : undefined; |
| 6235 | a = s.charCodeAt(i); |
| 6236 | return a < 0xd800 || a > 0xdbff || i + 1 === l || (b = s.charCodeAt(i + 1)) < 0xdc00 || b > 0xdfff |
| 6237 | ? TO_STRING ? s.charAt(i) : a |
| 6238 | : TO_STRING ? s.slice(i, i + 2) : (a - 0xd800 << 10) + (b - 0xdc00) + 0x10000; |
| 6239 | }; |
| 6240 | }; |
| 6241 | |
| 6242 | /***/ }, |
| 6243 | /* 100 */ |
| 6244 | /***/ function(module, exports, __webpack_require__) { |
| 6245 | |
| 6246 | var toInteger = __webpack_require__(27) |
| 6247 | , max = Math.max |
| 6248 | , min = Math.min; |
| 6249 | module.exports = function(index, length){ |
| 6250 | index = toInteger(index); |
| 6251 | return index < 0 ? max(index + length, 0) : min(index, length); |
| 6252 | }; |
| 6253 | |
| 6254 | /***/ }, |
| 6255 | /* 101 */ |
| 6256 | /***/ function(module, exports, __webpack_require__) { |
| 6257 | |
| 6258 | // 7.1.1 ToPrimitive(input [, PreferredType]) |
| 6259 | var isObject = __webpack_require__(17); |
| 6260 | // instead of the ES6 spec version, we didn't implement @@toPrimitive case |
| 6261 | // and the second argument - flag - preferred type is a string |
| 6262 | module.exports = function(it, S){ |
| 6263 | if(!isObject(it))return it; |
| 6264 | var fn, val; |
| 6265 | if(S && typeof (fn = it.toString) == 'function' && !isObject(val = fn.call(it)))return val; |
| 6266 | if(typeof (fn = it.valueOf) == 'function' && !isObject(val = fn.call(it)))return val; |
| 6267 | if(!S && typeof (fn = it.toString) == 'function' && !isObject(val = fn.call(it)))return val; |
| 6268 | throw TypeError("Can't convert object to primitive value"); |
| 6269 | }; |
| 6270 | |
| 6271 | /***/ }, |
| 6272 | /* 102 */ |
| 6273 | /***/ function(module, exports, __webpack_require__) { |
| 6274 | |
| 6275 | var anObject = __webpack_require__(6) |
| 6276 | , get = __webpack_require__(47); |
| 6277 | module.exports = __webpack_require__(1).getIterator = function(it){ |
| 6278 | var iterFn = get(it); |
| 6279 | if(typeof iterFn != 'function')throw TypeError(it + ' is not iterable!'); |
| 6280 | return anObject(iterFn.call(it)); |
| 6281 | }; |
| 6282 | |
| 6283 | /***/ }, |
| 6284 | /* 103 */ |
| 6285 | /***/ function(module, exports, __webpack_require__) { |
| 6286 | |
| 6287 | var classof = __webpack_require__(35) |
| 6288 | , ITERATOR = __webpack_require__(4)('iterator') |
| 6289 | , Iterators = __webpack_require__(7); |
| 6290 | module.exports = __webpack_require__(1).isIterable = function(it){ |
| 6291 | var O = Object(it); |
| 6292 | return O[ITERATOR] !== undefined |
| 6293 | || '@@iterator' in O |
| 6294 | || Iterators.hasOwnProperty(classof(O)); |
| 6295 | }; |
| 6296 | |
| 6297 | /***/ }, |
| 6298 | /* 104 */ |
| 6299 | /***/ function(module, exports, __webpack_require__) { |
| 6300 | |
| 6301 | 'use strict'; |
| 6302 | var ctx = __webpack_require__(37) |
| 6303 | , $export = __webpack_require__(3) |
| 6304 | , toObject = __webpack_require__(20) |
| 6305 | , call = __webpack_require__(85) |
| 6306 | , isArrayIter = __webpack_require__(83) |
| 6307 | , toLength = __webpack_require__(45) |
| 6308 | , createProperty = __webpack_require__(80) |
| 6309 | , getIterFn = __webpack_require__(47); |
| 6310 | |
| 6311 | $export($export.S + $export.F * !__webpack_require__(87)(function(iter){ Array.from(iter); }), 'Array', { |
| 6312 | // 22.1.2.1 Array.from(arrayLike, mapfn = undefined, thisArg = undefined) |
| 6313 | from: function from(arrayLike/*, mapfn = undefined, thisArg = undefined*/){ |
| 6314 | var O = toObject(arrayLike) |
| 6315 | , C = typeof this == 'function' ? this : Array |
| 6316 | , aLen = arguments.length |
| 6317 | , mapfn = aLen > 1 ? arguments[1] : undefined |
| 6318 | , mapping = mapfn !== undefined |
| 6319 | , index = 0 |
| 6320 | , iterFn = getIterFn(O) |
| 6321 | , length, result, step, iterator; |
| 6322 | if(mapping)mapfn = ctx(mapfn, aLen > 2 ? arguments[2] : undefined, 2); |
| 6323 | // if object isn't iterable or it's array with default iterator - use simple case |
| 6324 | if(iterFn != undefined && !(C == Array && isArrayIter(iterFn))){ |
| 6325 | for(iterator = iterFn.call(O), result = new C; !(step = iterator.next()).done; index++){ |
| 6326 | createProperty(result, index, mapping ? call(iterator, mapfn, [step.value, index], true) : step.value); |
| 6327 | } |
| 6328 | } else { |
| 6329 | length = toLength(O.length); |
| 6330 | for(result = new C(length); length > index; index++){ |
| 6331 | createProperty(result, index, mapping ? mapfn(O[index], index) : O[index]); |
| 6332 | } |
| 6333 | } |
| 6334 | result.length = index; |
| 6335 | return result; |
| 6336 | } |
| 6337 | }); |
| 6338 | |
| 6339 | |
| 6340 | /***/ }, |
| 6341 | /* 105 */ |
| 6342 | /***/ function(module, exports, __webpack_require__) { |
| 6343 | |
| 6344 | 'use strict'; |
| 6345 | var addToUnscopables = __webpack_require__(78) |
| 6346 | , step = __webpack_require__(88) |
| 6347 | , Iterators = __webpack_require__(7) |
| 6348 | , toIObject = __webpack_require__(19); |
| 6349 | |
| 6350 | // 22.1.3.4 Array.prototype.entries() |
| 6351 | // 22.1.3.13 Array.prototype.keys() |
| 6352 | // 22.1.3.29 Array.prototype.values() |
| 6353 | // 22.1.3.30 Array.prototype[@@iterator]() |
| 6354 | module.exports = __webpack_require__(41)(Array, 'Array', function(iterated, kind){ |
| 6355 | this._t = toIObject(iterated); // target |
| 6356 | this._i = 0; // next index |
| 6357 | this._k = kind; // kind |
| 6358 | // 22.1.5.2.1 %ArrayIteratorPrototype%.next() |
| 6359 | }, function(){ |
| 6360 | var O = this._t |
| 6361 | , kind = this._k |
| 6362 | , index = this._i++; |
| 6363 | if(!O || index >= O.length){ |
| 6364 | this._t = undefined; |
| 6365 | return step(1); |
| 6366 | } |
| 6367 | if(kind == 'keys' )return step(0, index); |
| 6368 | if(kind == 'values')return step(0, O[index]); |
| 6369 | return step(0, [index, O[index]]); |
| 6370 | }, 'values'); |
| 6371 | |
| 6372 | // argumentsList[@@iterator] is %ArrayProto_values% (9.4.4.6, 9.4.4.7) |
| 6373 | Iterators.Arguments = Iterators.Array; |
| 6374 | |
| 6375 | addToUnscopables('keys'); |
| 6376 | addToUnscopables('values'); |
| 6377 | addToUnscopables('entries'); |
| 6378 | |
| 6379 | /***/ }, |
| 6380 | /* 106 */ |
| 6381 | /***/ function(module, exports, __webpack_require__) { |
| 6382 | |
| 6383 | // 20.1.2.3 Number.isInteger(number) |
| 6384 | var $export = __webpack_require__(3); |
| 6385 | |
| 6386 | $export($export.S, 'Number', {isInteger: __webpack_require__(84)}); |
| 6387 | |
| 6388 | /***/ }, |
| 6389 | /* 107 */ |
| 6390 | /***/ function(module, exports, __webpack_require__) { |
| 6391 | |
| 6392 | // 20.1.2.4 Number.isNaN(number) |
| 6393 | var $export = __webpack_require__(3); |
| 6394 | |
| 6395 | $export($export.S, 'Number', { |
| 6396 | isNaN: function isNaN(number){ |
| 6397 | return number != number; |
| 6398 | } |
| 6399 | }); |
| 6400 | |
| 6401 | /***/ }, |
| 6402 | /* 108 */ |
| 6403 | /***/ function(module, exports, __webpack_require__) { |
| 6404 | |
| 6405 | // 19.1.3.1 Object.assign(target, source) |
| 6406 | var $export = __webpack_require__(3); |
| 6407 | |
| 6408 | $export($export.S + $export.F, 'Object', {assign: __webpack_require__(90)}); |
| 6409 | |
| 6410 | /***/ }, |
| 6411 | /* 109 */ |
| 6412 | /***/ function(module, exports, __webpack_require__) { |
| 6413 | |
| 6414 | var $export = __webpack_require__(3); |
| 6415 | // 19.1.2.4 / 15.2.3.6 Object.defineProperty(O, P, Attributes) |
| 6416 | $export($export.S + $export.F * !__webpack_require__(9), 'Object', {defineProperty: __webpack_require__(12).f}); |
| 6417 | |
| 6418 | /***/ }, |
| 6419 | /* 110 */ |
| 6420 | /***/ function(module, exports, __webpack_require__) { |
| 6421 | |
| 6422 | // 19.1.2.14 Object.keys(O) |
| 6423 | var toObject = __webpack_require__(20) |
| 6424 | , $keys = __webpack_require__(18); |
| 6425 | |
| 6426 | __webpack_require__(96)('keys', function(){ |
| 6427 | return function keys(it){ |
| 6428 | return $keys(toObject(it)); |
| 6429 | }; |
| 6430 | }); |
| 6431 | |
| 6432 | /***/ }, |
| 6433 | /* 111 */ |
| 6434 | /***/ function(module, exports, __webpack_require__) { |
| 6435 | |
| 6436 | // 26.1.1 Reflect.apply(target, thisArgument, argumentsList) |
| 6437 | var $export = __webpack_require__(3) |
| 6438 | , aFunction = __webpack_require__(34) |
| 6439 | , anObject = __webpack_require__(6) |
| 6440 | , rApply = (__webpack_require__(5).Reflect || {}).apply |
| 6441 | , fApply = Function.apply; |
| 6442 | // MS Edge argumentsList argument is optional |
| 6443 | $export($export.S + $export.F * !__webpack_require__(10)(function(){ |
| 6444 | rApply(function(){}); |
| 6445 | }), 'Reflect', { |
| 6446 | apply: function apply(target, thisArgument, argumentsList){ |
| 6447 | var T = aFunction(target) |
| 6448 | , L = anObject(argumentsList); |
| 6449 | return rApply ? rApply(T, thisArgument, L) : fApply.call(T, thisArgument, L); |
| 6450 | } |
| 6451 | }); |
| 6452 | |
| 6453 | /***/ }, |
| 6454 | /* 112 */ |
| 6455 | /***/ function(module, exports, __webpack_require__) { |
| 6456 | |
| 6457 | // https://github.com/tc39/proposal-object-values-entries |
| 6458 | var $export = __webpack_require__(3) |
| 6459 | , $entries = __webpack_require__(97)(true); |
| 6460 | |
| 6461 | $export($export.S, 'Object', { |
| 6462 | entries: function entries(it){ |
| 6463 | return $entries(it); |
| 6464 | } |
| 6465 | }); |
| 6466 | |
| 6467 | /***/ }, |
| 6468 | /* 113 */ |
| 6469 | /***/ function(module, exports) { |
| 6470 | |
| 6471 | // removed by extract-text-webpack-plugin |
| 6472 | |
| 6473 | /***/ } |
| 6474 | /******/ ]) |
| 6475 | }); |
| 6476 | ; |
| 6477 | //# sourceMappingURL=mdl-ext.js.map |