]> pere.pagekite.me Git - homepage.git/blob - mypapers/webslides/static/js/webslides.js
New post on DD orphaned packages.
[homepage.git] / mypapers / webslides / static / js / webslides.js
1 /*!
2 * Name: WebSlides
3 * Version: 1.5.0
4 * Date: 2017-09-16
5 * Description: Making HTML presentations easy
6 * URL: https://github.com/webslides/webslides#readme
7 * Credits: @jlantunez, @LuisSacristan, @Belelros
8 */
9 /******/ (function(modules) { // webpackBootstrap
10 /******/ // The module cache
11 /******/ var installedModules = {};
12 /******/
13 /******/ // The require function
14 /******/ function __webpack_require__(moduleId) {
15 /******/
16 /******/ // Check if module is in cache
17 /******/ if(installedModules[moduleId]) {
18 /******/ return installedModules[moduleId].exports;
19 /******/ }
20 /******/ // Create a new module (and put it into the cache)
21 /******/ var module = installedModules[moduleId] = {
22 /******/ i: moduleId,
23 /******/ l: false,
24 /******/ exports: {}
25 /******/ };
26 /******/
27 /******/ // Execute the module function
28 /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
29 /******/
30 /******/ // Flag the module as loaded
31 /******/ module.l = true;
32 /******/
33 /******/ // Return the exports of the module
34 /******/ return module.exports;
35 /******/ }
36 /******/
37 /******/
38 /******/ // expose the modules object (__webpack_modules__)
39 /******/ __webpack_require__.m = modules;
40 /******/
41 /******/ // expose the module cache
42 /******/ __webpack_require__.c = installedModules;
43 /******/
44 /******/ // define getter function for harmony exports
45 /******/ __webpack_require__.d = function(exports, name, getter) {
46 /******/ if(!__webpack_require__.o(exports, name)) {
47 /******/ Object.defineProperty(exports, name, {
48 /******/ configurable: false,
49 /******/ enumerable: true,
50 /******/ get: getter
51 /******/ });
52 /******/ }
53 /******/ };
54 /******/
55 /******/ // getDefaultExport function for compatibility with non-harmony modules
56 /******/ __webpack_require__.n = function(module) {
57 /******/ var getter = module && module.__esModule ?
58 /******/ function getDefault() { return module['default']; } :
59 /******/ function getModuleExports() { return module; };
60 /******/ __webpack_require__.d(getter, 'a', getter);
61 /******/ return getter;
62 /******/ };
63 /******/
64 /******/ // Object.prototype.hasOwnProperty.call
65 /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
66 /******/
67 /******/ // __webpack_public_path__
68 /******/ __webpack_require__.p = "/static/js/";
69 /******/
70 /******/ // Load entry module and return exports
71 /******/ return __webpack_require__(__webpack_require__.s = 5);
72 /******/ })
73 /************************************************************************/
74 /******/ ([
75 /* 0 */
76 /***/ (function(module, __webpack_exports__, __webpack_require__) {
77
78 "use strict";
79 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__custom_event__ = __webpack_require__(9);
80 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
81
82 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
83
84
85
86 var transitionEvent = '';
87 var animationEvent = '';
88
89 /**
90 * Static class for DOM helper.
91 */
92
93 var DOM = function () {
94 function DOM() {
95 _classCallCheck(this, DOM);
96 }
97
98 _createClass(DOM, null, [{
99 key: 'createNode',
100
101 /**
102 * Creates a node with optional parameters.
103 * @param {string} tag The name of the tag of the needed element.
104 * @param {string} id The desired id for the element. It defaults to an
105 * empty string.
106 * @param {string} text The desired text to go inside of the element. It
107 * defaults to an empty string.
108 * @return {Element}
109 */
110 value: function createNode(tag) {
111 var id = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
112 var text = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
113
114 var node = document.createElement(tag);
115 if (id) {
116 node.id = id;
117 }
118
119 if (text) {
120 node.textContent = text;
121 }
122
123 return node;
124 }
125
126 /**
127 * Listens for an event once.
128 * @param {Element} el Element to listen to.
129 * @param {string} event Event Type.
130 * @param {Function} callback Function to execute once the event fires.
131 */
132
133 }, {
134 key: 'once',
135 value: function once(el, event, callback) {
136 var cb = function cb(e) {
137 if (e.target === el) {
138 el.removeEventListener(event, cb);
139 callback(e);
140 }
141 };
142
143 el.addEventListener(event, cb, false);
144 }
145
146 /**
147 * Gets the prefixed transitionend event.
148 * @param {?Element} optEl Element to check
149 * @return {string}
150 */
151
152 }, {
153 key: 'getTransitionEvent',
154 value: function getTransitionEvent(optEl) {
155 if (transitionEvent && !optEl) {
156 return transitionEvent;
157 }
158
159 transitionEvent = '';
160
161 var el = optEl || document.createElement('ws');
162 var transitions = {
163 'transition': 'transitionend',
164 'OTransition': 'oTransitionEnd',
165 'MozTransition': 'transitionend',
166 'WebkitTransition': 'webkitTransitionEnd'
167 };
168 var transitionNames = Object.keys(transitions);
169
170 for (var i = 0, length = transitionNames.length; i < length && !transitionEvent; i++) {
171 var transitionName = transitionNames[i];
172
173 if (typeof el.style[transitionName] !== 'undefined') {
174 transitionEvent = transitions[transitionName];
175 }
176 }
177
178 return transitionEvent;
179 }
180
181 /**
182 * Gets the prefixed animation end event.
183 * @param {?Element} optEl Element to check
184 * @return {string}
185 */
186
187 }, {
188 key: 'getAnimationEvent',
189 value: function getAnimationEvent(optEl) {
190 if (animationEvent && !optEl) {
191 return animationEvent;
192 }
193
194 animationEvent = 'animationend';
195
196 var el = optEl || document.createElement('ws');
197 var animations = {
198 'animation': 'animationend',
199 'OAnimation': 'oAnimationEnd',
200 'MozAnimation': 'animationend',
201 'WebkitAnimation': 'webkitAnimationEnd'
202 };
203 var animationNames = Object.keys(animations);
204
205 for (var i = 0, length = animationNames.length; i < length; i++) {
206 var animationName = animationNames[i];
207
208 if (typeof el.style[animationName] !== 'undefined') {
209 animationEvent = animations[animationName];
210 break;
211 }
212 }
213
214 return animationEvent;
215 }
216
217 /**
218 * Hides an element setting the display to none.
219 * @param {Element} el Element to be hidden.
220 */
221
222 }, {
223 key: 'hide',
224 value: function hide(el) {
225 el.style.display = 'none';
226 }
227
228 /**
229 * Shows an element by removing the display property. This is only intended
230 * to be used in conjunction with DOM.hide.
231 * @param {Element} el Element to be shown.
232 */
233
234 }, {
235 key: 'show',
236 value: function show(el) {
237 el.style.display = '';
238 }
239
240 /**
241 * Checks if the element is visible.
242 * @param {Element} el Element to check.
243 * @return {boolean}
244 */
245
246 }, {
247 key: 'isVisible',
248 value: function isVisible(el) {
249 return el.offsetParent !== null;
250 }
251
252 /**
253 * Fires a custom event on the given target.
254 * @param {Element} target The target of the event.
255 * @param {string} eventType The event type.
256 * @param {Object} eventInfo Optional parameter to provide additional data
257 * to the event.
258 */
259
260 }, {
261 key: 'fireEvent',
262 value: function fireEvent(target, eventType) {
263 var eventInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
264
265 var event = new __WEBPACK_IMPORTED_MODULE_0__custom_event__["a" /* default */](eventType, {
266 detail: eventInfo
267 });
268
269 target.dispatchEvent(event);
270 }
271
272 /**
273 * Converts an iterable to an array.
274 * @param {*} iterable Element to convert to array
275 * @return {Array} the element casted to an array.
276 */
277
278 }, {
279 key: 'toArray',
280 value: function toArray(iterable) {
281 return [].slice.call(iterable);
282 }
283
284 /**
285 * Checks whether the document has focus on an input or contenteditable
286 * element.
287 * @return {boolean} Whether the focused element is an input or content
288 * editable.
289 */
290
291 }, {
292 key: 'isFocusableElement',
293 value: function isFocusableElement() {
294 var result = false;
295
296 if (document.activeElement) {
297 var isContentEditable = document.activeElement.contentEditable !== 'inherit' && document.activeElement.contentEditable !== undefined;
298 var isInput = ['INPUT', 'SELECT', 'OPTION', 'TEXTAREA'].indexOf(document.activeElement.tagName) > -1;
299 result = isInput || isContentEditable;
300 }
301
302 return result;
303 }
304
305 /**
306 * Gets the integer value of a style property.
307 * @param {string} prop CSS property value.
308 * @return {Number} The property without the units.
309 */
310
311 }, {
312 key: 'parseSize',
313 value: function parseSize(prop) {
314 return Number(prop.replace(/[^\d\.]/g, ''));
315 }
316
317 /**
318 * Wraps a HTML structure around an element.
319 * @param {Element} elem the element to be wrapped.
320 * @param {string} tag the new element tag.
321 * @return {Element} the new element.
322 */
323
324 }, {
325 key: 'wrap',
326 value: function wrap(elem, tag) {
327 var wrap = document.createElement(tag);
328 elem.parentElement.insertBefore(wrap, elem);
329 wrap.appendChild(elem);
330
331 return wrap;
332 }
333
334 /**
335 * Inserts and element after another element.
336 * @param {Element} elem the element to be inserted.
337 * @param {Element} target the element to be inserted after.
338 */
339
340 }, {
341 key: 'after',
342 value: function after(elem, target) {
343 var parent = target.parentNode;
344
345 if (parent.lastChild === target) {
346 parent.appendChild(elem);
347 } else {
348 parent.insertBefore(elem, target.nextSibling);
349 }
350 }
351 }]);
352
353 return DOM;
354 }();
355
356 /* harmony default export */ __webpack_exports__["a"] = (DOM);
357
358 /***/ }),
359 /* 1 */
360 /***/ (function(module, __webpack_exports__, __webpack_require__) {
361
362 "use strict";
363 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return Slide; });
364 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Events; });
365 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_dom__ = __webpack_require__(0);
366 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
367
368 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
369
370
371
372 var CLASSES = {
373 SLIDE: 'slide',
374 CURRENT: 'current'
375 };
376
377 var Events = {
378 ENTER: 'dom:enter',
379 LEAVE: 'dom:leave',
380 ENABLE: 'slide:enable',
381 DISABLE: 'slide:disable'
382 };
383
384 /**
385 * Wrapper for the Slide section.
386 */
387
388 var Slide = function () {
389 /**
390 * Bootstraps the slide by saving some data, adding a class and hiding it.
391 * @param {Element} el Section element.
392 * @param {number} i Zero based index of the slide.
393 */
394 function Slide(el, i) {
395 _classCallCheck(this, Slide);
396
397 /**
398 * @type {Element}
399 */
400 this.el = el;
401 /**
402 * The section's parent.
403 * @type {Node}
404 */
405 this.parent = el.parentNode;
406 /**
407 * @type {number}
408 */
409 this.i = i;
410
411 this.el.id = 'section-' + (i + 1);
412 this.el.classList.add(CLASSES.SLIDE);
413
414 // Hide slides by default
415 this.hide();
416 }
417
418 /**
419 * Hides the node and removes the class that makes it "active".
420 */
421
422
423 _createClass(Slide, [{
424 key: 'hide',
425 value: function hide() {
426 __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].hide(this.el);
427 this.el.classList.remove(CLASSES.CURRENT);
428 }
429
430 /**
431 * Shows the node and adds the class that makes it "active".
432 */
433
434 }, {
435 key: 'show',
436 value: function show() {
437 __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].show(this.el);
438 this.el.classList.add(CLASSES.CURRENT);
439 }
440
441 /**
442 * Moves the section to the bottom of the section's list.
443 * @fires Slide#dom:leave
444 * @fires Slide#dom:enter
445 */
446
447 }, {
448 key: 'moveAfterLast',
449 value: function moveAfterLast() {
450 var last = this.parent.childNodes[this.parent.childElementCount - 1];
451
452 this.fire_(Events.LEAVE);
453 this.parent.insertBefore(this.el, last.nextSibling);
454 this.fire_(Events.ENTER);
455 }
456
457 /**
458 * Moves the section to the top of the section's list.
459 * @fires Slide#dom:leave
460 * @fires Slide#dom:enter
461 */
462
463 }, {
464 key: 'moveBeforeFirst',
465 value: function moveBeforeFirst() {
466 var first = this.parent.childNodes[0];
467
468 this.fire_(Events.LEAVE);
469 this.parent.insertBefore(this.el, first);
470 this.fire_(Events.ENTER);
471 }
472
473 /**
474 * Fires an enable event.
475 * @fires Slide#slide:enable
476 */
477
478 }, {
479 key: 'enable',
480 value: function enable() {
481 this.fire_(Events.ENABLE);
482 }
483
484 /**
485 * Fires a disable event.
486 * @fires Slide#slide:disable
487 */
488
489 }, {
490 key: 'disable',
491 value: function disable() {
492 this.fire_(Events.DISABLE);
493 }
494
495 /**
496 * Fires an event passing the slide instance on the detail.
497 * @param {String} name Name of the event to fire.
498 * @private
499 */
500
501 }, {
502 key: 'fire_',
503 value: function fire_(name) {
504 __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].fireEvent(this.el, name, {
505 slide: this
506 });
507 }
508
509 /**
510 * Checks whether an element is a valid candidate to be a slide by ensuring
511 * it's a "section" element.
512 * @param {Element} el Element to be checked.
513 * @return {boolean} Whether is candidate or not.
514 */
515
516 }], [{
517 key: 'isCandidate',
518 value: function isCandidate(el) {
519 return el.nodeType === 1 && el.tagName === 'SECTION';
520 }
521
522 /**
523 * Gets the section element from an inner element.
524 * @param {Node} el
525 * @return {{section: ?Node, i: ?number}} A map with the section and the
526 * position of the section.
527 */
528
529 }, {
530 key: 'getSectionFromEl',
531 value: function getSectionFromEl(el) {
532 var parent = el;
533 var section = null;
534 var i = null;
535
536 while (parent.parentElement && !parent.classList.contains(CLASSES.SLIDE)) {
537 parent = parent.parentElement;
538 }
539
540 if (parent.classList.contains(CLASSES.SLIDE)) {
541 section = parent;
542 i = parseInt(section.id.replace('section-', ''), 10);
543 }
544
545 return { section: section, i: i };
546 }
547 }]);
548
549 return Slide;
550 }();
551
552
553
554 /***/ }),
555 /* 2 */
556 /***/ (function(module, __webpack_exports__, __webpack_require__) {
557
558 "use strict";
559 var Keys = {
560 ENTER: 13,
561 SPACE: 32,
562 RE_PAGE: 33,
563 AV_PAGE: 34,
564 END: 35,
565 HOME: 36,
566 LEFT: 37,
567 UP: 38,
568 RIGHT: 39,
569 DOWN: 40,
570 PLUS: [107, 171, 187],
571 MINUS: [109, 173, 189],
572 ESCAPE: 27,
573 F: 70
574 };
575
576 /* harmony default export */ __webpack_exports__["a"] = (Keys);
577
578 /***/ }),
579 /* 3 */
580 /***/ (function(module, __webpack_exports__, __webpack_require__) {
581
582 "use strict";
583 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
584
585 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
586
587 var UA = window.navigator.userAgent;
588
589 /**
590 * Mobile detector helper class. Tests the User Agent to see if we're, likely,
591 * on a mobile device.
592 */
593
594 var MobileDetector = function () {
595 function MobileDetector() {
596 _classCallCheck(this, MobileDetector);
597 }
598
599 _createClass(MobileDetector, null, [{
600 key: "isAndroid",
601
602 /**
603 * Whether the device is Android or not.
604 * @return {Boolean}
605 */
606 value: function isAndroid() {
607 return !!UA.match(/Android/i);
608 }
609
610 /**
611 * Whether the device is BlackBerry or not.
612 * @return {Boolean}
613 */
614
615 }, {
616 key: "isBlackBerry",
617 value: function isBlackBerry() {
618 return !!UA.match(/BlackBerry/i);
619 }
620
621 /**
622 * Whether the device is iOS or not.
623 * @return {Boolean}
624 */
625
626 }, {
627 key: "isiOS",
628 value: function isiOS() {
629 return !!UA.match(/iPad|iPhone|iPod/i);
630 }
631
632 /**
633 * Whether the device is Opera or not.
634 * @return {Boolean}
635 */
636
637 }, {
638 key: "isOpera",
639 value: function isOpera() {
640 return !!UA.match(/Opera Mini/i);
641 }
642
643 /**
644 * Whether the device is Windows or not.
645 * @return {Boolean}
646 */
647
648 }, {
649 key: "isWindows",
650 value: function isWindows() {
651 return !!UA.match(/IEMobile/i);
652 }
653
654 /**
655 * Whether the device is Windows Phone or not.
656 * @return {Boolean}
657 */
658
659 }, {
660 key: "isWindowsPhone",
661 value: function isWindowsPhone() {
662 return !!UA.match(/Windows Phone/i);
663 }
664
665 /**
666 * Whether the device is any mobile device or not.
667 * @return {Boolean}
668 */
669
670 }, {
671 key: "isAny",
672 value: function isAny() {
673 return MobileDetector.isAndroid() || MobileDetector.isBlackBerry() || MobileDetector.isiOS() || MobileDetector.isOpera() || MobileDetector.isWindows() || MobileDetector.isWindowsPhone();
674 }
675 }]);
676
677 return MobileDetector;
678 }();
679
680 /* harmony default export */ __webpack_exports__["a"] = (MobileDetector);
681
682 /***/ }),
683 /* 4 */
684 /***/ (function(module, __webpack_exports__, __webpack_require__) {
685
686 "use strict";
687 /* harmony export (immutable) */ __webpack_exports__["a"] = scrollTo;
688 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__easing__ = __webpack_require__(20);
689
690
691 var SCROLLABLE_CONTAINER = document.getElementById('webslides');
692
693 /**
694 * Smoothly scrolls to a given Y position using Easing.Swing. It'll run a
695 * callback upon finishing.
696 * @param {number} y Offset of the page to scroll to.
697 * @param {number} duration Duration of the animation. 500ms by default.
698 * @param {function} cb Callback function to call upon completion.
699 * @param {HTMLElement} container The HTML element where to scroll
700 */
701 function scrollTo(y) {
702 var duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 500;
703 var cb = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function () {};
704 var container = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
705
706 SCROLLABLE_CONTAINER = container ? container : document.getElementById('webslides');
707
708 var delta = y - SCROLLABLE_CONTAINER.scrollTop;
709 var startLocation = SCROLLABLE_CONTAINER.scrollTop;
710 var increment = 16;
711
712 if (!duration) {
713 SCROLLABLE_CONTAINER.scrollTop = y;
714 cb();
715 return;
716 }
717
718 var animateScroll = function animateScroll(elapsedTime) {
719 elapsedTime += increment;
720 var percent = Math.min(1, elapsedTime / duration);
721 var easingP = __WEBPACK_IMPORTED_MODULE_0__easing__["a" /* default */].swing(percent, elapsedTime * percent, y, delta, duration);
722
723 SCROLLABLE_CONTAINER.scrollTop = Math.floor(startLocation + easingP * delta);
724
725 if (elapsedTime < duration) {
726 setTimeout(function () {
727 return animateScroll(elapsedTime);
728 }, increment);
729 } else {
730 cb();
731 }
732 };
733
734 animateScroll(0);
735 }
736
737 /***/ }),
738 /* 5 */
739 /***/ (function(module, __webpack_exports__, __webpack_require__) {
740
741 "use strict";
742 Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
743 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__modules_webslides__ = __webpack_require__(6);
744
745 __webpack_require__(21);
746
747 window.WebSlides = __WEBPACK_IMPORTED_MODULE_0__modules_webslides__["a" /* default */];
748
749 /***/ }),
750 /* 6 */
751 /***/ (function(module, __webpack_exports__, __webpack_require__) {
752
753 "use strict";
754 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__ = __webpack_require__(7);
755 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__slide__ = __webpack_require__(1);
756 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__utils_dom__ = __webpack_require__(0);
757 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__utils_scroll_to__ = __webpack_require__(4);
758 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
759
760 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
761
762
763
764
765
766
767 var CLASSES = {
768 VERTICAL: 'vertical',
769 READY: 'ws-ready',
770 DISABLED: 'disabled'
771 };
772
773 // Default plugins
774 var PLUGINS = {
775 'autoslide': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].AutoSlide,
776 'clickNav': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].ClickNav,
777 'grid': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].Grid,
778 'hash': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].Hash,
779 'keyboard': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].Keyboard,
780 'nav': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].Navigation,
781 'scroll': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].Scroll,
782 'touch': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].Touch,
783 'video': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].Video,
784 'youtube': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].YouTube,
785 'zoom': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].Zoom
786 };
787
788 /**
789 * WebSlides module.
790 */
791
792 var WebSlides = function () {
793 /**
794 * Options for WebSlides
795 * @param {number|boolean} autoslide If a number is provided, it will allow
796 * autosliding by said amount of milliseconds.
797 * @param {boolean} changeOnClick If true, it will allow
798 * clicking on any place to change the slide.
799 * @param {boolean} loop Whether to go to first slide from last one or not.
800 * @param {number} minWheelDelta Controls the amount of needed scroll to
801 * trigger navigation.
802 * @param {boolean} navigateOnScroll Whether scroll can trigger navigation or
803 * not.
804 * @param {number} scrollWait Controls the amount of time to wait till
805 * navigation can occur again with scroll.
806 * @param {number} slideOffset Controls the amount of needed touch delta to
807 * trigger navigation.
808 * @param {boolean} showIndex Controls if the index can be shown.
809 */
810 function WebSlides() {
811 var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
812 _ref$autoslide = _ref.autoslide,
813 autoslide = _ref$autoslide === undefined ? false : _ref$autoslide,
814 _ref$changeOnClick = _ref.changeOnClick,
815 changeOnClick = _ref$changeOnClick === undefined ? false : _ref$changeOnClick,
816 _ref$loop = _ref.loop,
817 loop = _ref$loop === undefined ? true : _ref$loop,
818 _ref$minWheelDelta = _ref.minWheelDelta,
819 minWheelDelta = _ref$minWheelDelta === undefined ? 40 : _ref$minWheelDelta,
820 _ref$navigateOnScroll = _ref.navigateOnScroll,
821 navigateOnScroll = _ref$navigateOnScroll === undefined ? true : _ref$navigateOnScroll,
822 _ref$scrollWait = _ref.scrollWait,
823 scrollWait = _ref$scrollWait === undefined ? 450 : _ref$scrollWait,
824 _ref$slideOffset = _ref.slideOffset,
825 slideOffset = _ref$slideOffset === undefined ? 50 : _ref$slideOffset,
826 _ref$showIndex = _ref.showIndex,
827 showIndex = _ref$showIndex === undefined ? true : _ref$showIndex;
828
829 _classCallCheck(this, WebSlides);
830
831 /**
832 * WebSlide element.
833 * @type {Element}
834 */
835 this.el = document.getElementById('webslides');
836
837 if (!this.el) {
838 throw new Error('Couldn\'t find the webslides container!');
839 }
840
841 /**
842 * Moving flag.
843 * @type {boolean}
844 */
845 this.isMoving = false;
846 /**
847 * Slide's array.
848 * @type {?Array<Slide>}
849 */
850 this.slides = null;
851 /**
852 * Current slide's index.
853 * @type {number}
854 * @private
855 */
856 this.currentSlideI_ = -1;
857 /**
858 * Current slide reference.
859 * @type {?Slide}
860 * @private
861 */
862 this.currentSlide_ = null;
863 /**
864 * Max slide index.
865 * @type {number}
866 * @private
867 */
868 this.maxSlide_ = 0;
869 /**
870 * Whether the layout is going to be vertical or horizontal.
871 * @type {boolean}
872 */
873 this.isVertical = this.el.classList.contains(CLASSES.VERTICAL);
874 /**
875 * Plugin's dictionary.
876 * @type {Object}
877 */
878 this.plugins = {};
879 /**
880 * Options dictionary.
881 * @type {Object}
882 */
883 this.options = {
884 autoslide: autoslide,
885 changeOnClick: changeOnClick,
886 loop: loop,
887 minWheelDelta: minWheelDelta,
888 navigateOnScroll: navigateOnScroll,
889 scrollWait: scrollWait,
890 slideOffset: slideOffset,
891 showIndex: showIndex
892 };
893 /**
894 * Initialisation flag.
895 * @type {boolean}
896 */
897 this.initialised = false;
898
899 // Bootstrapping
900 this.removeChildren_();
901 this.grabSlides_();
902 this.createPlugins_();
903 this.initSlides_();
904 // Finished
905 this.onInit_();
906 }
907
908 /**
909 * Removes all children elements inside of the main container that are not
910 * eligible to be a Slide Element.
911 * @private
912 */
913
914
915 _createClass(WebSlides, [{
916 key: 'removeChildren_',
917 value: function removeChildren_() {
918 var nodes = this.el.childNodes;
919 var i = nodes.length;
920
921 while (i--) {
922 var node = nodes[i];
923
924 if (!__WEBPACK_IMPORTED_MODULE_1__slide__["b" /* default */].isCandidate(node)) {
925 this.el.removeChild(node);
926 }
927 }
928 }
929
930 /**
931 * Creates all the registered plugins and store the instances inside of the
932 * the webslide instance.
933 * @private
934 */
935
936 }, {
937 key: 'createPlugins_',
938 value: function createPlugins_() {
939 var _this = this;
940
941 Object.keys(PLUGINS).forEach(function (pluginName) {
942 var PluginCto = PLUGINS[pluginName];
943 _this.plugins[pluginName] = new PluginCto(_this);
944 });
945 }
946
947 /**
948 * Called once the WebSlide instance has finished initialising.
949 * @private
950 * @fires WebSlide#ws:init
951 */
952
953 }, {
954 key: 'onInit_',
955 value: function onInit_() {
956 this.initialised = true;
957 __WEBPACK_IMPORTED_MODULE_2__utils_dom__["a" /* default */].fireEvent(this.el, 'ws:init');
958 document.documentElement.classList.add(CLASSES.READY);
959 }
960
961 /**
962 * Grabs the slides from the DOM and creates all the Slides modules.
963 * @private
964 */
965
966 }, {
967 key: 'grabSlides_',
968 value: function grabSlides_() {
969 this.slides = __WEBPACK_IMPORTED_MODULE_2__utils_dom__["a" /* default */].toArray(this.el.childNodes).map(function (slide, i) {
970 return new __WEBPACK_IMPORTED_MODULE_1__slide__["b" /* default */](slide, i);
971 });
972
973 this.maxSlide_ = this.slides.length;
974 }
975
976 /**
977 * Goes to a given slide.
978 * @param {!number} slideI The slide index.
979 * @param {?boolean=} forward Whether we're forcing moving forward/backwards.
980 * This parameter is used only from the goNext, goPrev functions to adjust the
981 * scroll animations.
982 */
983
984 }, {
985 key: 'goToSlide',
986 value: function goToSlide(slideI) {
987 var forward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
988
989 if (this.isValidIndexSlide_(slideI) && !this.isMoving && this.currentSlideI_ !== slideI) {
990 this.isMoving = true;
991 var isMovingForward = false;
992
993 if (forward !== null) {
994 isMovingForward = forward;
995 } else {
996 if (this.currentSlideI_ >= 0) {
997 isMovingForward = slideI > this.currentSlideI_;
998 }
999 }
1000 var nextSlide = this.slides[slideI];
1001
1002 if (this.currentSlide_ !== null && this.isVertical && (!this.plugins.touch || !this.plugins.touch.isEnabled)) {
1003 this.scrollTransitionToSlide_(isMovingForward, nextSlide, this.onSlideChange_);
1004 } else {
1005 this.transitionToSlide_(isMovingForward, nextSlide, this.onSlideChange_);
1006 }
1007 }
1008 }
1009
1010 /**
1011 * Transitions to a slide, doing the scroll animation.
1012 * @param {boolean} isMovingForward Whether we're going forward or backwards.
1013 * @param {Slide} nextSlide Next slide.
1014 * @param {Function} callback Callback to be called upon finishing. This is an
1015 * async function so it'll happen once the scroll animation finishes.
1016 * @private
1017 * @see scrollTo
1018 */
1019
1020 }, {
1021 key: 'scrollTransitionToSlide_',
1022 value: function scrollTransitionToSlide_(isMovingForward, nextSlide, callback) {
1023 var _this2 = this;
1024
1025 this.el.style.overflow = 'hidden';
1026
1027 if (!isMovingForward) {
1028 nextSlide.moveBeforeFirst();
1029 nextSlide.show();
1030 Object(__WEBPACK_IMPORTED_MODULE_3__utils_scroll_to__["a" /* default */])(this.currentSlide_.el.offsetTop, 0);
1031 } else {
1032 nextSlide.show();
1033 }
1034
1035 Object(__WEBPACK_IMPORTED_MODULE_3__utils_scroll_to__["a" /* default */])(nextSlide.el.offsetTop, 500, function () {
1036 _this2.currentSlide_.hide();
1037
1038 if (isMovingForward) {
1039 _this2.currentSlide_.moveAfterLast();
1040 }
1041
1042 _this2.el.style.overflow = 'auto';
1043 setTimeout(function () {
1044 callback.call(_this2, nextSlide);
1045 }, 150);
1046 });
1047 }
1048
1049 /**
1050 * Transitions to a slide, without doing the scroll animation. If the page is
1051 * already initialised and on mobile device, it will do a slide animation.
1052 * @param {boolean} isMovingForward Whether we're going forward or backwards.
1053 * @param {Slide} nextSlide Next slide.
1054 * @param {Function} callback Callback to be called upon finishing. This is a
1055 * sync function so it'll happen on run time.
1056 * @private
1057 */
1058
1059 }, {
1060 key: 'transitionToSlide_',
1061 value: function transitionToSlide_(isMovingForward, nextSlide, callback) {
1062 var _this3 = this;
1063
1064 Object(__WEBPACK_IMPORTED_MODULE_3__utils_scroll_to__["a" /* default */])(0, 0);
1065 var className = 'slideInRight';
1066
1067 if (!isMovingForward) {
1068 nextSlide.moveBeforeFirst();
1069 className = 'slideInLeft';
1070 }
1071
1072 if (this.currentSlide_) {
1073 if (isMovingForward) {
1074 this.currentSlide_.moveAfterLast();
1075 }
1076
1077 this.currentSlide_.hide();
1078 }
1079
1080 nextSlide.show();
1081
1082 if (this.initialised && this.plugins.touch && this.plugins.touch.isEnabled) {
1083 __WEBPACK_IMPORTED_MODULE_2__utils_dom__["a" /* default */].once(nextSlide.el, __WEBPACK_IMPORTED_MODULE_2__utils_dom__["a" /* default */].getAnimationEvent(), function () {
1084 nextSlide.el.classList.remove(className);
1085 callback.call(_this3, nextSlide);
1086 });
1087
1088 nextSlide.el.classList.add(className);
1089 } else {
1090 callback.call(this, nextSlide);
1091 }
1092 }
1093
1094 /**
1095 * Whenever a slide is changed, this function gets called. It updates the
1096 * references to the current slide, disables the moving flag and fires
1097 * a custom event.
1098 * @param {Slide} slide The slide we're transitioning to.
1099 * @fires WebSlide#ws:slide-change
1100 * @private
1101 */
1102
1103 }, {
1104 key: 'onSlideChange_',
1105 value: function onSlideChange_(slide) {
1106 if (this.currentSlide_) {
1107 this.currentSlide_.disable();
1108 }
1109
1110 this.currentSlide_ = slide;
1111 this.currentSlideI_ = slide.i;
1112 this.currentSlide_.enable();
1113 this.isMoving = false;
1114
1115 __WEBPACK_IMPORTED_MODULE_2__utils_dom__["a" /* default */].fireEvent(this.el, 'ws:slide-change', {
1116 slides: this.maxSlide_,
1117 currentSlide0: this.currentSlideI_,
1118 currentSlide: this.currentSlideI_ + 1
1119 });
1120 }
1121
1122 /**
1123 * Goes to the next slide.
1124 */
1125
1126 }, {
1127 key: 'goNext',
1128 value: function goNext() {
1129 var nextIndex = this.currentSlideI_ + 1;
1130
1131 if (nextIndex >= this.maxSlide_) {
1132 if (!this.options.loop) {
1133 return;
1134 }
1135
1136 nextIndex = 0;
1137 }
1138
1139 this.goToSlide(nextIndex, true);
1140 }
1141
1142 /**
1143 * Goes to the previous slide.
1144 */
1145
1146 }, {
1147 key: 'goPrev',
1148 value: function goPrev() {
1149 var prevIndex = this.currentSlideI_ - 1;
1150
1151 if (prevIndex < 0) {
1152 if (!this.options.loop) {
1153 return;
1154 }
1155
1156 prevIndex = this.maxSlide_ - 1;
1157 }
1158
1159 this.goToSlide(prevIndex, false);
1160 }
1161
1162 /**
1163 * Check if the given number is a valid index to go to.
1164 * @param {number} i The index to check.
1165 * @return {boolean} Whether you can move to that slide or not.
1166 * @private
1167 */
1168
1169 }, {
1170 key: 'isValidIndexSlide_',
1171 value: function isValidIndexSlide_(i) {
1172 return typeof i === 'number' && i >= 0 && i < this.maxSlide_;
1173 }
1174
1175 /**
1176 * Init the shown slide on load. It'll fetch it from the Hash if present
1177 * and, otherwise, it'll default to the first one.
1178 * @private
1179 * @see Hash.getSlideNumber
1180 */
1181
1182 }, {
1183 key: 'initSlides_',
1184 value: function initSlides_() {
1185 var slideNumber = this.plugins.hash.constructor.getSlideNumber();
1186
1187 // Not valid
1188 if (slideNumber === null || slideNumber >= this.maxSlide_) {
1189 slideNumber = 0;
1190 }
1191
1192 // Keeping the order
1193 if (slideNumber !== 0) {
1194 var i = 0;
1195
1196 while (i < slideNumber) {
1197 this.slides[i].moveAfterLast();
1198 i++;
1199 }
1200 }
1201
1202 this.goToSlide(slideNumber);
1203 }
1204
1205 /**
1206 * Toggles zoom
1207 */
1208
1209 }, {
1210 key: 'toggleZoom',
1211 value: function toggleZoom() {
1212 if (this.options.showIndex) {
1213 this.plugins.zoom.toggleZoom();
1214 }
1215 }
1216
1217 /**
1218 * Disables the webslides element adding a class "disabled"
1219 */
1220
1221 }, {
1222 key: 'disable',
1223 value: function disable() {
1224 this.el.classList.add(CLASSES.DISABLED);
1225
1226 if (this.plugins.autoslide && this.plugins.autoslide.time !== false) {
1227 this.plugins.autoslide.stop();
1228 }
1229 }
1230
1231 /**
1232 * Enables the webslides element removing a class "disabled"
1233 */
1234
1235 }, {
1236 key: 'enable',
1237 value: function enable() {
1238 this.el.classList.remove(CLASSES.DISABLED);
1239
1240 if (this.plugins.autoslide && this.plugins.autoslide.time !== false) {
1241 this.plugins.autoslide.play();
1242 }
1243 }
1244
1245 /**
1246 * Checks if it is disabled
1247 * @return {boolean}
1248 */
1249
1250 }, {
1251 key: 'isDisabled',
1252 value: function isDisabled() {
1253 return this.el.classList.contains(CLASSES.DISABLED);
1254 }
1255
1256 /**
1257 * Puts the browser into fullscreen
1258 */
1259
1260 }, {
1261 key: 'fullscreen',
1262 value: function fullscreen() {
1263 var el = document.documentElement;
1264 var isFullscreen = document.fullscreen || document.webkitIsFullScreen || document.mozFullScreen || document.msFullScreenElement;
1265
1266 if (!isFullscreen) {
1267 /* istanbul ignore next hard to test prefixes */
1268 var requestFullscreen = el.requestFullscreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;
1269 requestFullscreen.call(el);
1270 } else {
1271 /* istanbul ignore next hard to test prefixes */
1272 var cancelFullscreen = document.exitFullScreen || document.webkitCancelFullScreen || document.mozCancelFullScreen || document.msExitFullscreen;
1273
1274 cancelFullscreen.call(document);
1275 }
1276 }
1277
1278 /**
1279 * Registers a plugin to be loaded when the instance is created. It allows
1280 * (on purpose) to replace default plugins.
1281 * @param {!string} key They key under which it'll be stored inside of the
1282 * instance, inside the plugins dict.
1283 * @param {!Function} cto Plugin constructor.
1284 */
1285
1286 }], [{
1287 key: 'registerPlugin',
1288 value: function registerPlugin(key, cto) {
1289 PLUGINS[key] = cto;
1290 }
1291 }]);
1292
1293 return WebSlides;
1294 }();
1295
1296 /* harmony default export */ __webpack_exports__["a"] = (WebSlides);
1297
1298 /***/ }),
1299 /* 7 */
1300 /***/ (function(module, __webpack_exports__, __webpack_require__) {
1301
1302 "use strict";
1303 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__autoslide__ = __webpack_require__(8);
1304 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__click_nav__ = __webpack_require__(10);
1305 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__grid__ = __webpack_require__(11);
1306 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__hash__ = __webpack_require__(12);
1307 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__keyboard__ = __webpack_require__(13);
1308 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__navigation__ = __webpack_require__(14);
1309 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__scroll__ = __webpack_require__(15);
1310 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__touch__ = __webpack_require__(16);
1311 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__video__ = __webpack_require__(17);
1312 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__youtube__ = __webpack_require__(18);
1313 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_10__zoom__ = __webpack_require__(19);
1314
1315
1316
1317
1318
1319
1320
1321
1322
1323
1324
1325
1326 /* harmony default export */ __webpack_exports__["a"] = ({
1327 AutoSlide: __WEBPACK_IMPORTED_MODULE_0__autoslide__["a" /* default */],
1328 ClickNav: __WEBPACK_IMPORTED_MODULE_1__click_nav__["a" /* default */],
1329 Grid: __WEBPACK_IMPORTED_MODULE_2__grid__["a" /* default */],
1330 Hash: __WEBPACK_IMPORTED_MODULE_3__hash__["a" /* default */],
1331 Keyboard: __WEBPACK_IMPORTED_MODULE_4__keyboard__["a" /* default */],
1332 Navigation: __WEBPACK_IMPORTED_MODULE_5__navigation__["a" /* default */],
1333 Scroll: __WEBPACK_IMPORTED_MODULE_6__scroll__["a" /* default */],
1334 Touch: __WEBPACK_IMPORTED_MODULE_7__touch__["a" /* default */],
1335 Video: __WEBPACK_IMPORTED_MODULE_8__video__["a" /* default */],
1336 YouTube: __WEBPACK_IMPORTED_MODULE_9__youtube__["a" /* default */],
1337 Zoom: __WEBPACK_IMPORTED_MODULE_10__zoom__["a" /* default */]
1338 });
1339
1340 /***/ }),
1341 /* 8 */
1342 /***/ (function(module, __webpack_exports__, __webpack_require__) {
1343
1344 "use strict";
1345 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_dom__ = __webpack_require__(0);
1346 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
1347
1348 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
1349
1350
1351
1352 /**
1353 * Autoslide plugin.
1354 */
1355
1356 var AutoSlide = function () {
1357 /**
1358 * @param {WebSlides} wsInstance The WebSlides instance
1359 * @constructor
1360 */
1361 function AutoSlide(wsInstance) {
1362 _classCallCheck(this, AutoSlide);
1363
1364 /**
1365 * @type {WebSlides}
1366 * @private
1367 */
1368 this.ws_ = wsInstance;
1369 /**
1370 * Interval ID reference for the autoslide.
1371 * @type {?number}
1372 * @private
1373 */
1374 this.interval_ = null;
1375 /**
1376 * Internal stored time.
1377 * @type {?number}
1378 */
1379 this.time = this.ws_.options.autoslide;
1380
1381 if (this.time) {
1382 __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].once(wsInstance.el, 'ws:init', this.play.bind(this));
1383 document.body.addEventListener('focus', this.onFocus.bind(this));
1384 }
1385 }
1386
1387 /**
1388 * On focus handler. Will decide if stops/play depending on the focused
1389 * element if autoslide is active.
1390 */
1391
1392
1393 _createClass(AutoSlide, [{
1394 key: 'onFocus',
1395 value: function onFocus() {
1396 if (__WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].isFocusableElement()) {
1397 this.stop();
1398 } else if (this.interval_ === null) {
1399 this.play();
1400 }
1401 }
1402
1403 /**
1404 * Starts autosliding all the slides if it's not currently doing it and the
1405 * autoslide option was a number greater than 0.
1406 * @param {?number=} time Amount of milliseconds to wait to go to next slide
1407 * automatically.
1408 */
1409
1410 }, {
1411 key: 'play',
1412 value: function play(time) {
1413 if (typeof time !== 'number') {
1414 time = this.time;
1415 }
1416
1417 this.time = time;
1418
1419 if (!this.interval_ && typeof time === 'number' && time > 0) {
1420 this.interval_ = setInterval(this.ws_.goNext.bind(this.ws_), time);
1421 }
1422 }
1423
1424 /**
1425 * Stops autosliding all the slides.
1426 */
1427
1428 }, {
1429 key: 'stop',
1430 value: function stop() {
1431 if (this.interval_) {
1432 clearInterval(this.interval_);
1433 this.interval_ = null;
1434 }
1435 }
1436 }]);
1437
1438 return AutoSlide;
1439 }();
1440
1441 /* harmony default export */ __webpack_exports__["a"] = (AutoSlide);
1442
1443 /***/ }),
1444 /* 9 */
1445 /***/ (function(module, __webpack_exports__, __webpack_require__) {
1446
1447 "use strict";
1448 var NativeCustomEvent = window.CustomEvent;
1449
1450 /**
1451 * Check for the usage of native support for CustomEvents which is lacking
1452 * completely on IE.
1453 * @return {boolean} Whether it can be used or not.
1454 */
1455 function canIuseNativeCustom() {
1456 try {
1457 var p = new NativeCustomEvent('t', {
1458 detail: {
1459 a: 'b'
1460 }
1461 });
1462 return 't' === p.type && 'b' === p.detail.a;
1463 } catch (e) {}
1464
1465 /* istanbul ignore next: hard to reproduce on test environment */
1466 return false;
1467 }
1468
1469 /**
1470 * Lousy polyfill for the Custom Event constructor for IE.
1471 * @param {!string} type The type of the event.
1472 * @param {?Object} params Additional information for the event.
1473 * @return {Event}
1474 * @constructor
1475 */
1476 /* istanbul ignore next: hard to reproduce on test environment */
1477 var IECustomEvent = function CustomEvent(type, params) {
1478 var e = document.createEvent('CustomEvent');
1479
1480 if (params) {
1481 e.initCustomEvent(type, params.bubbles, params.cancelable, params.detail);
1482 } else {
1483 e.initCustomEvent(type, false, false, undefined);
1484 }
1485
1486 return e;
1487 };
1488
1489 /* istanbul ignore next: hard to reproduce on test environment */
1490 var WSCustomEvent = canIuseNativeCustom() ? NativeCustomEvent : IECustomEvent;
1491
1492 /* harmony default export */ __webpack_exports__["a"] = (WSCustomEvent);
1493
1494 /***/ }),
1495 /* 10 */
1496 /***/ (function(module, __webpack_exports__, __webpack_require__) {
1497
1498 "use strict";
1499 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
1500
1501 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
1502
1503 var CLICKABLE_ELS = ['INPUT', 'SELECT', 'OPTION', 'BUTTON', 'A', 'TEXTAREA'];
1504
1505 /**
1506 * ClickNav plugin that allows to click on the page to get to the next slide.
1507 */
1508
1509 var ClickNav = function () {
1510 /**
1511 * @param {WebSlides} wsInstance The WebSlides instance
1512 * @constructor
1513 */
1514 function ClickNav(wsInstance) {
1515 _classCallCheck(this, ClickNav);
1516
1517 /**
1518 * @type {WebSlides}
1519 * @private
1520 */
1521 this.ws_ = wsInstance;
1522
1523 if (wsInstance.options.changeOnClick) {
1524 this.ws_.el.addEventListener('click', this.onClick_.bind(this));
1525 }
1526 }
1527
1528 /**
1529 * Reacts to the click event. It will go to the next slide unless the element
1530 * has a data-prevent-nav attribute or is on the list of CLICKABLE_ELS.
1531 * @param {MouseEvent} event The click event.
1532 * @private
1533 */
1534
1535
1536 _createClass(ClickNav, [{
1537 key: 'onClick_',
1538 value: function onClick_(event) {
1539 if (CLICKABLE_ELS.indexOf(event.target.tagName) < 0 && typeof event.target.dataset.preventNav === 'undefined') {
1540 this.ws_.goNext();
1541 }
1542 }
1543 }]);
1544
1545 return ClickNav;
1546 }();
1547
1548 /* harmony default export */ __webpack_exports__["a"] = (ClickNav);
1549
1550 /***/ }),
1551 /* 11 */
1552 /***/ (function(module, __webpack_exports__, __webpack_require__) {
1553
1554 "use strict";
1555 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_keys__ = __webpack_require__(2);
1556 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
1557
1558 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
1559
1560
1561
1562 var GRID_IMAGE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYAg' + 'MAAACdGdVrAAAACVBMVEUAAAAtXsUtXcPDDPUWAAAAA3RSTlMAZmHzZFkxAAAAFklEQVQI12M' + 'AA9bBR3ExhAJB1iooBQBGwgVEs/QtuAAAAABJRU5ErkJggg==';
1563
1564 /**
1565 * Grid plugin that shows a grid on top of the WebSlides for easy prototyping.
1566 */
1567
1568 var Grid = function () {
1569 /**
1570 * @param {WebSlides} wsInstance The WebSlides instance
1571 * @constructor
1572 */
1573 function Grid(wsInstance) {
1574 _classCallCheck(this, Grid);
1575
1576 /**
1577 * @type {WebSlides}
1578 * @private
1579 */
1580 this.ws_ = wsInstance;
1581
1582 var CSS = 'body.baseline {\n background: url(' + GRID_IMAGE + ') left top .8rem/.8rem;\n }';
1583 var head = document.head || document.getElementsByTagName('head')[0];
1584 var style = document.createElement('style');
1585
1586 style.type = 'text/css';
1587
1588 if (style.styleSheet) {
1589 style.styleSheet.cssText = CSS;
1590 } else {
1591 style.appendChild(document.createTextNode(CSS));
1592 }
1593
1594 head.appendChild(style);
1595
1596 document.addEventListener('keydown', this.onKeyPress_.bind(this), false);
1597 }
1598
1599 /**
1600 * Reacts to the keydown event. It reacts to ENTER key to toggle the class.
1601 * @param {KeyboardEvent} event The key event.
1602 * @private
1603 */
1604
1605
1606 _createClass(Grid, [{
1607 key: 'onKeyPress_',
1608 value: function onKeyPress_(event) {
1609 if (event.which === __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].ENTER) {
1610 document.body.classList.toggle('baseline');
1611 }
1612 }
1613 }]);
1614
1615 return Grid;
1616 }();
1617
1618 /* harmony default export */ __webpack_exports__["a"] = (Grid);
1619
1620 /***/ }),
1621 /* 12 */
1622 /***/ (function(module, __webpack_exports__, __webpack_require__) {
1623
1624 "use strict";
1625 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
1626
1627 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
1628
1629 var HASH = '#slide';
1630 var slideRegex = /#slide=(\d+)/;
1631
1632 /**
1633 * Static class with methods to manipulate and extract info from the hash of
1634 * the URL.
1635 */
1636
1637 var Hash = function () {
1638 /**
1639 * @param {WebSlides} wsInstance
1640 * @constructor
1641 */
1642 function Hash(wsInstance) {
1643 _classCallCheck(this, Hash);
1644
1645 this.ws_ = wsInstance;
1646
1647 wsInstance.el.addEventListener('ws:slide-change', Hash.onSlideChange_);
1648 window.addEventListener('hashchange', this.onHashChange_.bind(this), false);
1649 }
1650
1651 /**
1652 * hashchange event handler, makes the WebSlide instance navigate to the
1653 * needed slide.
1654 */
1655
1656
1657 _createClass(Hash, [{
1658 key: 'onHashChange_',
1659 value: function onHashChange_() {
1660 var newSlideIndex = Hash.getSlideNumber();
1661
1662 if (newSlideIndex !== null) {
1663 this.ws_.goToSlide(newSlideIndex);
1664 }
1665 }
1666
1667 /**
1668 * Handler for the slide change event which updates the slide on the hash.
1669 * @param {Event} event
1670 * @private
1671 */
1672
1673 }], [{
1674 key: 'onSlideChange_',
1675 value: function onSlideChange_(event) {
1676 Hash.setSlideNumber(event.detail.currentSlide);
1677 }
1678
1679 /**
1680 * Gets the slide number from the hash by a regex matching `#slide=` and gets
1681 * the number after it. If the number is invalid or less than 0, it will
1682 * return null as an invalid value.
1683 * @return {?number}
1684 */
1685
1686 }, {
1687 key: 'getSlideNumber',
1688 value: function getSlideNumber() {
1689 var results = document.location.hash.match(slideRegex);
1690 var slide = 0;
1691
1692 if (Array.isArray(results)) {
1693 slide = parseInt(results[1], 10);
1694 }
1695
1696 if (typeof slide !== 'number' || slide < 0 || !Array.isArray(results)) {
1697 slide = null;
1698 } else {
1699 slide--; // Convert to 0 index
1700 }
1701
1702 return slide;
1703 }
1704
1705 /**
1706 * It will update the hash (if it's different) so it reflects the slide
1707 * number being visible.
1708 * @param {number} number The number of the slide we're transitioning to.
1709 */
1710
1711 }, {
1712 key: 'setSlideNumber',
1713 value: function setSlideNumber(number) {
1714 if (Hash.getSlideNumber() !== number - 1) {
1715 history.pushState({
1716 slideI: number - 1
1717 }, 'Slide ' + number, HASH + '=' + number);
1718 }
1719 }
1720 }]);
1721
1722 return Hash;
1723 }();
1724
1725 /* harmony default export */ __webpack_exports__["a"] = (Hash);
1726
1727 /***/ }),
1728 /* 13 */
1729 /***/ (function(module, __webpack_exports__, __webpack_require__) {
1730
1731 "use strict";
1732 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_keys__ = __webpack_require__(2);
1733 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__utils_dom__ = __webpack_require__(0);
1734 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
1735
1736 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
1737
1738
1739
1740
1741 /**
1742 * Keyboard interaction plugin.
1743 */
1744
1745 var Keyboard = function () {
1746 /**
1747 * @param {WebSlides} wsInstance The WebSlides instance
1748 * @constructor
1749 */
1750 function Keyboard(wsInstance) {
1751 _classCallCheck(this, Keyboard);
1752
1753 /**
1754 * @type {WebSlides}
1755 * @private
1756 */
1757 this.ws_ = wsInstance;
1758
1759 document.addEventListener('keydown', this.onKeyPress_.bind(this), false);
1760 }
1761
1762 /**
1763 * Reacts to the keydown event. It reacts to the arrows and space key
1764 * depending on the layout of the page.
1765 * @param {KeyboardEvent} event The key event.
1766 * @private
1767 */
1768
1769
1770 _createClass(Keyboard, [{
1771 key: 'onKeyPress_',
1772 value: function onKeyPress_(event) {
1773 var method = void 0;
1774 var argument = void 0;
1775
1776 if (__WEBPACK_IMPORTED_MODULE_1__utils_dom__["a" /* default */].isFocusableElement() || this.ws_.isDisabled()) {
1777 return;
1778 }
1779
1780 switch (event.which) {
1781 case __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].AV_PAGE:
1782 method = this.ws_.goNext;
1783 break;
1784 case __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].SPACE:
1785 if (event.shiftKey) {
1786 method = this.ws_.goPrev;
1787 } else {
1788 method = this.ws_.goNext;
1789 }
1790 break;
1791 case __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].RE_PAGE:
1792 method = this.ws_.goPrev;
1793 break;
1794 case __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].HOME:
1795 method = this.ws_.goToSlide;
1796 argument = 0;
1797 break;
1798 case __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].END:
1799 method = this.ws_.goToSlide;
1800 argument = this.ws_.maxSlide_ - 1;
1801 break;
1802 case __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].DOWN:
1803 method = this.ws_.isVertical ? this.ws_.goNext : null;
1804 break;
1805 case __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].UP:
1806 method = this.ws_.isVertical ? this.ws_.goPrev : null;
1807 break;
1808 case __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].LEFT:
1809 method = !this.ws_.isVertical ? this.ws_.goPrev : null;
1810 break;
1811 case __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].RIGHT:
1812 method = !this.ws_.isVertical ? this.ws_.goNext : null;
1813 break;
1814 case __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].F:
1815 if (!event.metaKey && !event.ctrlKey) {
1816 method = this.ws_.fullscreen;
1817 }
1818
1819 break;
1820 }
1821
1822 if (method) {
1823 method.call(this.ws_, argument);
1824 // Prevents Firefox key events.
1825 event.preventDefault();
1826 }
1827 }
1828 }]);
1829
1830 return Keyboard;
1831 }();
1832
1833 /* harmony default export */ __webpack_exports__["a"] = (Keyboard);
1834
1835 /***/ }),
1836 /* 14 */
1837 /***/ (function(module, __webpack_exports__, __webpack_require__) {
1838
1839 "use strict";
1840 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_dom__ = __webpack_require__(0);
1841 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
1842
1843 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
1844
1845
1846
1847 var ELEMENT_ID = {
1848 NAV: 'navigation',
1849 NEXT: 'next',
1850 PREV: 'previous',
1851 COUNTER: 'counter'
1852 };
1853
1854 var LABELS = {
1855 VERTICAL: {
1856 NEXT: '↓',
1857 PREV: '↑'
1858 },
1859 HORIZONTAL: {
1860 NEXT: '→',
1861 PREV: '←'
1862 }
1863 };
1864
1865 /**
1866 * Navigation plugin.
1867 */
1868
1869 var Navigation = function () {
1870 /**
1871 * @param {WebSlides} wsInstance The WebSlides instance
1872 * @constructor
1873 */
1874 function Navigation(wsInstance) {
1875 _classCallCheck(this, Navigation);
1876
1877 var arrowLabels = wsInstance.isVertical ? LABELS.VERTICAL : LABELS.HORIZONTAL;
1878 /**
1879 * Navigation element.
1880 * @type {Element}
1881 */
1882 this.el = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].createNode('div', 'navigation');
1883 /**
1884 * Next button.
1885 * @type {Element}
1886 */
1887 this.next = Navigation.createArrow(ELEMENT_ID.NEXT, arrowLabels.NEXT);
1888 /**
1889 * Prev button.
1890 * @type {Element}
1891 */
1892 this.prev = Navigation.createArrow(ELEMENT_ID.PREV, arrowLabels.PREV);
1893 /**
1894 * Counter Element.
1895 * @type {Element}
1896 */
1897 this.counter = Navigation.createCounter(ELEMENT_ID.COUNTER, wsInstance);
1898 /**
1899 * @type {WebSlides}
1900 * @private
1901 */
1902 this.ws_ = wsInstance;
1903
1904 this.el.appendChild(this.next);
1905 this.el.appendChild(this.prev);
1906 this.el.appendChild(this.counter);
1907
1908 this.ws_.el.appendChild(this.el);
1909 this.bindEvents_();
1910 }
1911
1912 /**
1913 * Bind all events for the navigation.
1914 * @private
1915 */
1916
1917
1918 _createClass(Navigation, [{
1919 key: 'bindEvents_',
1920 value: function bindEvents_() {
1921 this.ws_.el.addEventListener('ws:slide-change', this.onSlideChanged_.bind(this));
1922 this.next.addEventListener('click', this.onButtonClicked_.bind(this));
1923 this.prev.addEventListener('click', this.onButtonClicked_.bind(this));
1924 this.counter.addEventListener('click', this.onButtonClicked_.bind(this));
1925 }
1926
1927 /**
1928 * Updates the counter inside the navigation.
1929 * @param {string|number} current Current slide number.
1930 * @param {string|number} max Max slide number.
1931 */
1932
1933 }, {
1934 key: 'updateCounter',
1935 value: function updateCounter(current, max) {
1936 if (this.ws_.options.showIndex) {
1937 this.counter.childNodes[0].textContent = current + ' / ' + max;
1938 } else {
1939 this.counter.textContent = current + ' / ' + max;
1940 }
1941 }
1942
1943 /**
1944 * Creates an arrow to navigate.
1945 * @param {!String} id Desired ID for the arrow.
1946 * @param {!String} text Desired text for the arrow.
1947 * @return {Element} The arrow element.
1948 */
1949
1950 }, {
1951 key: 'onSlideChanged_',
1952
1953
1954 /**
1955 * Slide Change event handler. Will update the text on the navigation.
1956 * @param {CustomEvent} event
1957 * @private
1958 */
1959 value: function onSlideChanged_(event) {
1960 this.updateCounter(event.detail.currentSlide, event.detail.slides);
1961 }
1962
1963 /**
1964 * Handles clicks on the next/prev buttons.
1965 * @param {MouseEvent} event
1966 * @private
1967 */
1968
1969 }, {
1970 key: 'onButtonClicked_',
1971 value: function onButtonClicked_(event) {
1972 event.preventDefault();
1973 if (event.target === this.next) {
1974 this.ws_.goNext();
1975 } else if (event.target === this.prev) {
1976 this.ws_.goPrev();
1977 } else {
1978 this.ws_.toggleZoom();
1979 }
1980 }
1981 }], [{
1982 key: 'createArrow',
1983 value: function createArrow(id, text) {
1984 var arrow = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].createNode('a', id, text);
1985 arrow.href = '#';
1986 arrow.title = 'Arrow Keys';
1987
1988 return arrow;
1989 }
1990
1991 /**
1992 * Creates the navigation counter.
1993 * @param {!String} id Desired ID for the counter.
1994 * @param {WebSlides} ws_ WebSlides object.
1995 * @return {Element} The arrow element.
1996 */
1997
1998 }, {
1999 key: 'createCounter',
2000 value: function createCounter(id, ws_) {
2001 var counter = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].createNode('span', id);
2002 if (ws_.options.showIndex) {
2003 var link = document.createElement('a');
2004 link.href = '#';
2005 link.title = 'View all slides';
2006 counter.appendChild(link);
2007 }
2008
2009 return counter;
2010 }
2011 }]);
2012
2013 return Navigation;
2014 }();
2015
2016 /* harmony default export */ __webpack_exports__["a"] = (Navigation);
2017
2018 /***/ }),
2019 /* 15 */
2020 /***/ (function(module, __webpack_exports__, __webpack_require__) {
2021
2022 "use strict";
2023 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_mobile_detector__ = __webpack_require__(3);
2024 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
2025
2026 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
2027
2028
2029
2030 /**
2031 * Scroll plugin.
2032 */
2033
2034 var Scroll = function () {
2035 /**
2036 * @param {WebSlides} wsInstance The WebSlides instance
2037 * @constructor
2038 */
2039 function Scroll(wsInstance) {
2040 _classCallCheck(this, Scroll);
2041
2042 /**
2043 * @type {WebSlides}
2044 * @private
2045 */
2046 this.ws_ = wsInstance;
2047 /**
2048 * Where the scroll is going to happen. The WebSlides element.
2049 * @type {Element}
2050 * @private
2051 */
2052 this.scrollContainer_ = wsInstance.el;
2053 /**
2054 * Whether movement is happening up or down.
2055 * @type {boolean}
2056 * @private
2057 */
2058 this.isGoingUp_ = false;
2059 /**
2060 * Whether movement is happening left or right.
2061 * @type {boolean}
2062 * @private
2063 */
2064 this.isGoingLeft_ = false;
2065 /**
2066 * Timeout id holder.
2067 * @type {?number}
2068 * @private
2069 */
2070 this.timeout_ = null;
2071
2072 // Disabling from option
2073 if (!this.ws_.options.navigateOnScroll) {
2074 return;
2075 }
2076
2077 if (!__WEBPACK_IMPORTED_MODULE_0__utils_mobile_detector__["a" /* default */].isAny()) {
2078 this.scrollContainer_.addEventListener('wheel', this.onMouseWheel_.bind(this));
2079
2080 if (!wsInstance.isVertical) {
2081 wsInstance.el.addEventListener('ws:slide-change', this.onSlideChange_.bind(this));
2082 }
2083 }
2084 }
2085
2086 /**
2087 * When the slides change, set an inner timeout to avoid prematurely
2088 * changing to the next slide again.
2089 * @private
2090 */
2091
2092
2093 _createClass(Scroll, [{
2094 key: 'onSlideChange_',
2095 value: function onSlideChange_() {
2096 var _this = this;
2097
2098 this.timeout_ = setTimeout(function () {
2099 _this.timeout_ = null;
2100 }, this.ws_.options.scrollWait);
2101 }
2102
2103 /**
2104 * Reacts to the wheel event. Detects whether is going up or down and decides
2105 * if it needs to move the slide based on the amount of delta.
2106 * @param {WheelEvent} event The Wheel Event.
2107 * @private
2108 */
2109
2110 }, {
2111 key: 'onMouseWheel_',
2112 value: function onMouseWheel_(event) {
2113 if (this.ws_.isDisabled()) {
2114 return;
2115 }
2116
2117 if (this.ws_.isMoving || this.timeout_) {
2118 event.preventDefault();
2119 return;
2120 }
2121
2122 // Firefox uses lines instead of pixels for delta
2123 var linesToPx = event.deltaMode * this.ws_.options.minWheelDelta;
2124 var wheelDeltaY = event.deltaY,
2125 wheelDeltaX = event.deltaX;
2126
2127 var isVertical = this.ws_.isVertical;
2128 var isHorizontalMovement = Math.abs(wheelDeltaX) > Math.abs(wheelDeltaY);
2129 this.isGoingUp_ = wheelDeltaY < 0;
2130 this.isGoingLeft_ = wheelDeltaX < 0;
2131
2132 // If we're mainly moving horizontally, prevent default
2133 if (isHorizontalMovement) {
2134 if (!isVertical) {
2135 event.preventDefault();
2136 } else {
2137 // If we're moving horizontally but this is vertical, return to avoid
2138 // unwanted navigation.
2139 return;
2140 }
2141 }
2142
2143 if (Math.abs(wheelDeltaY + linesToPx) >= this.ws_.options.minWheelDelta || Math.abs(wheelDeltaX + linesToPx) >= this.ws_.options.minWheelDelta) {
2144 if (isHorizontalMovement && this.isGoingLeft_ || !isHorizontalMovement && this.isGoingUp_) {
2145 this.ws_.goPrev();
2146 } else {
2147 this.ws_.goNext();
2148 }
2149
2150 event.preventDefault();
2151 }
2152 }
2153 }]);
2154
2155 return Scroll;
2156 }();
2157
2158 /* harmony default export */ __webpack_exports__["a"] = (Scroll);
2159
2160 /***/ }),
2161 /* 16 */
2162 /***/ (function(module, __webpack_exports__, __webpack_require__) {
2163
2164 "use strict";
2165 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_mobile_detector__ = __webpack_require__(3);
2166 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
2167
2168 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
2169
2170
2171
2172 var EVENTS = {
2173 touch: {
2174 START: 'touchstart',
2175 MOVE: 'touchmove',
2176 END: 'touchend'
2177 },
2178 pointer: {
2179 START: 'pointerdown',
2180 MOVE: 'pointermove',
2181 END: 'pointerup'
2182 }
2183 };
2184
2185 /**
2186 * Touch plugin.
2187 */
2188
2189 var Touch = function () {
2190 /**
2191 * @param {WebSlides} wsInstance The WebSlides instance
2192 * @constructor
2193 */
2194 function Touch(wsInstance) {
2195 _classCallCheck(this, Touch);
2196
2197 /**
2198 * @type {WebSlides}
2199 * @private
2200 */
2201 this.ws_ = wsInstance;
2202
2203 /**
2204 * Start position for the X coordinate.
2205 * @type {number}
2206 * @private
2207 */
2208 this.startX_ = 0;
2209
2210 /**
2211 * Start position for the Y coordinate.
2212 * @type {number}
2213 * @private
2214 */
2215 this.startY_ = 0;
2216
2217 /**
2218 * Start position for the X coord.
2219 * @type {number}
2220 * @private
2221 */
2222 this.endX_ = 0;
2223
2224 /**
2225 * Start position for the Y coord.
2226 * @type {number}
2227 * @private
2228 */
2229 this.endY_ = 0;
2230
2231 /**
2232 * Whether is enabled or not. Only enabled for touch devices.
2233 * @type {boolean}
2234 * @private
2235 */
2236 this.isEnabled = false;
2237
2238 /**
2239 * Whether is a gesture or not.
2240 * @type {boolean}
2241 * @private
2242 */
2243 this.isGesture = false;
2244
2245 /**
2246 * Stores start touch event (x, y).
2247 * @type {array}
2248 * @private
2249 */
2250 this.startTouches = [];
2251
2252 /**
2253 * Stores end touch event (x, y).
2254 * @type {array}
2255 * @private
2256 */
2257 this.endTouches = [];
2258
2259 var events = void 0;
2260
2261 if (__WEBPACK_IMPORTED_MODULE_0__utils_mobile_detector__["a" /* default */].isAny()) {
2262 // Likely IE
2263 if (window.PointerEvent && (__WEBPACK_IMPORTED_MODULE_0__utils_mobile_detector__["a" /* default */].isWindows() || __WEBPACK_IMPORTED_MODULE_0__utils_mobile_detector__["a" /* default */].isWindowsPhone())) {
2264 events = EVENTS.pointer;
2265 } else {
2266 events = EVENTS.touch;
2267 }
2268
2269 this.isEnabled = true;
2270 document.addEventListener(events.START, this.onStart_.bind(this), false);
2271 document.addEventListener(events.MOVE, this.onMove_.bind(this), false);
2272 document.addEventListener(events.END, this.onStop_.bind(this), false);
2273 }
2274 }
2275
2276 /**
2277 * Start touch handler. Saves starting points.
2278 * @param {Event} event The Touch event.
2279 * @private
2280 */
2281
2282
2283 _createClass(Touch, [{
2284 key: 'onStart_',
2285 value: function onStart_(event) {
2286 if (this.ws_.isDisabled()) {
2287 return;
2288 }
2289
2290 var info = Touch.normalizeEventInfo(event);
2291
2292 if (event.touches.length === 1) {
2293 this.startX_ = info.x;
2294 this.startY_ = info.y;
2295 this.endX_ = info.x;
2296 this.endY_ = info.y;
2297 } else if (event.touches.length > 1) {
2298 this.startTouches = Touch.getTouchCoordinates(event);
2299 this.endTouches = this.startTouches;
2300 this.isGesture = true;
2301 }
2302 }
2303
2304 /**
2305 * Move touch handler. Saves end points.
2306 * @param {Event} event The Touch event.
2307 * @private
2308 */
2309
2310 }, {
2311 key: 'onMove_',
2312 value: function onMove_(event) {
2313 if (this.ws_.isDisabled()) {
2314 return;
2315 }
2316
2317 var info = Touch.normalizeEventInfo(event);
2318
2319 if (this.isGesture) {
2320 this.endTouches = Touch.getTouchCoordinates(event);
2321 } else {
2322 this.endX_ = info.x;
2323 this.endY_ = info.y;
2324 }
2325 }
2326
2327 /**
2328 * Stop touch handler. Checks if it needs to make any actions.
2329 * @private
2330 */
2331
2332 }, {
2333 key: 'onStop_',
2334 value: function onStop_() {
2335 if (this.ws_.isDisabled()) {
2336 return;
2337 }
2338
2339 if (this.isGesture) {
2340 var startDistance = Math.sqrt(Math.pow(this.startTouches[0].x - this.startTouches[1].x, 2) + Math.pow(this.startTouches[0].y - this.startTouches[1].y, 2));
2341 var endDistance = Math.sqrt(Math.pow(this.endTouches[0].x - this.endTouches[1].x, 2) + Math.pow(this.endTouches[0].y - this.endTouches[1].y, 2));
2342 if (startDistance > endDistance) {
2343 // Pinch gesture
2344 this.ws_.toggleZoom();
2345 }
2346 this.isGesture = false;
2347 } else {
2348 var diffX = this.startX_ - this.endX_;
2349 var diffY = this.startY_ - this.endY_;
2350
2351 // It's an horizontal drag
2352 if (Math.abs(diffX) > Math.abs(diffY)) {
2353 if (diffX < -this.ws_.options.slideOffset) {
2354 this.ws_.goPrev();
2355 } else if (diffX > this.ws_.options.slideOffset) {
2356 this.ws_.goNext();
2357 }
2358 }
2359 }
2360 }
2361
2362 /**
2363 * Get X,Y coordinates from touch pointers.
2364 * @param {Event} event
2365 * @return {Object}
2366 */
2367
2368 }], [{
2369 key: 'getTouchCoordinates',
2370 value: function getTouchCoordinates(event) {
2371 return [{
2372 x: event.touches[0].clientX,
2373 y: event.touches[0].clientY
2374 }, {
2375 x: event.touches[1].clientX,
2376 y: event.touches[1].clientY
2377 }];
2378 }
2379
2380 /**
2381 * Normalizes an event to deal with differences between PointerEvent and
2382 * TouchEvent.
2383 * @param {Event} event
2384 * @return {Object} Normalised touch points.
2385 */
2386
2387 }, {
2388 key: 'normalizeEventInfo',
2389 value: function normalizeEventInfo(event) {
2390 var touchEvent = { pageX: 0, pageY: 0 };
2391
2392 if (typeof event.changedTouches !== 'undefined') {
2393 touchEvent = event.changedTouches[0];
2394 } else if (typeof event.originalEvent !== 'undefined' && typeof event.originalEvent.changedTouches !== 'undefined') {
2395 touchEvent = event.originalEvent.changedTouches[0];
2396 }
2397
2398 var x = event.offsetX || event.layerX || touchEvent.pageX;
2399 var y = event.offsetY || event.layerY || touchEvent.pageY;
2400
2401 return { x: x, y: y };
2402 }
2403 }]);
2404
2405 return Touch;
2406 }();
2407
2408 /* harmony default export */ __webpack_exports__["a"] = (Touch);
2409
2410 /***/ }),
2411 /* 17 */
2412 /***/ (function(module, __webpack_exports__, __webpack_require__) {
2413
2414 "use strict";
2415 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_dom__ = __webpack_require__(0);
2416 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__modules_slide__ = __webpack_require__(1);
2417 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
2418
2419 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
2420
2421
2422
2423
2424 /**
2425 * Video plugin. Video plugin that allows to autoplay videos once the slide gets
2426 * active.
2427 */
2428
2429 var Video = function () {
2430 /**
2431 * @param {WebSlides} wsInstance The WebSlides instance.
2432 * @constructor
2433 */
2434 function Video(wsInstance) {
2435 _classCallCheck(this, Video);
2436
2437 /**
2438 * @type {WebSlides}
2439 * @private
2440 */
2441 this.ws_ = wsInstance;
2442
2443 var videos = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].toArray(this.ws_.el.querySelectorAll('video'));
2444
2445 if (videos.length) {
2446 videos.forEach(function (video) {
2447 if (!video.hasAttribute('autoplay')) {
2448 return;
2449 }
2450
2451 video.removeAttribute('autoplay');
2452 video.pause();
2453 video.currentTime = 0;
2454
2455 var _Slide$getSectionFrom = __WEBPACK_IMPORTED_MODULE_1__modules_slide__["b" /* default */].getSectionFromEl(video),
2456 i = _Slide$getSectionFrom.i;
2457
2458 var slide = wsInstance.slides[i - 1];
2459
2460 slide.video = video;
2461
2462 slide.el.addEventListener(__WEBPACK_IMPORTED_MODULE_1__modules_slide__["a" /* Events */].ENABLE, Video.onSectionEnabled);
2463 slide.el.addEventListener(__WEBPACK_IMPORTED_MODULE_1__modules_slide__["a" /* Events */].DISABLE, Video.onSectionDisabled);
2464 });
2465 }
2466 }
2467
2468 /**
2469 * On Section enable hook. Will play the video.
2470 * @param {CustomEvent} event
2471 */
2472
2473
2474 _createClass(Video, null, [{
2475 key: 'onSectionEnabled',
2476 value: function onSectionEnabled(event) {
2477 event.detail.slide.video.play();
2478 }
2479
2480 /**
2481 * On Section enable hook. Will pause the video.
2482 * @param {CustomEvent} event
2483 */
2484
2485 }, {
2486 key: 'onSectionDisabled',
2487 value: function onSectionDisabled(event) {
2488 event.detail.slide.video.pause();
2489 }
2490 }]);
2491
2492 return Video;
2493 }();
2494
2495 /* harmony default export */ __webpack_exports__["a"] = (Video);
2496
2497 /***/ }),
2498 /* 18 */
2499 /***/ (function(module, __webpack_exports__, __webpack_require__) {
2500
2501 "use strict";
2502 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_dom__ = __webpack_require__(0);
2503 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__modules_slide__ = __webpack_require__(1);
2504 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
2505
2506 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
2507
2508 /* global YT */
2509
2510
2511
2512 /**
2513 * Player wrapper around the YT player. This is mostly to get around the event
2514 * in which we need to play a video which player isn't ready yet.
2515 */
2516
2517 var Player = function () {
2518 /**
2519 * @param {Element} el
2520 */
2521 function Player(el) {
2522 _classCallCheck(this, Player);
2523
2524 /**
2525 * Whether the Player is ready or not.
2526 * @type {boolean}
2527 */
2528 this.ready = false;
2529 /**
2530 * Ready callback.
2531 * @type {?function}
2532 */
2533 this.onReadyCb = null;
2534 /**
2535 * Slide element in which the video is located.
2536 * @type {Node}
2537 */
2538 this.slide = __WEBPACK_IMPORTED_MODULE_1__modules_slide__["b" /* default */].getSectionFromEl(el).section;
2539 /**
2540 * Whether it should autoplay on load or not.
2541 * @type {boolean}
2542 */
2543 this.autoplay = typeof el.dataset.autoplay !== 'undefined';
2544 /**
2545 * Whether the video should be muted or not.
2546 * @type {boolean}
2547 */
2548 this.isMuted = typeof el.dataset.mute !== 'undefined';
2549
2550 /**
2551 * Options with which the player is created.
2552 * @type {Object}
2553 */
2554 this.options = {
2555 videoId: el.dataset.youtubeId,
2556 playerVars: this.getPlayerVars(el),
2557 events: {
2558 onReady: this.onPlayerReady.bind(this)
2559 }
2560 };
2561
2562 /**
2563 * The iframe in which the video is loaded.
2564 * @type {Element}
2565 */
2566 this.el = el;
2567 /**
2568 * Timeout id.
2569 * @type {?number}
2570 */
2571 this.timeout = null;
2572
2573 this.create();
2574 }
2575
2576 /**
2577 * Destroys the iframe. Saves the current time in case it gets restored.
2578 */
2579
2580
2581 _createClass(Player, [{
2582 key: 'destroy',
2583 value: function destroy() {
2584 this.currentTime = this.player.getCurrentTime();
2585 this.player.destroy();
2586 this.player = null;
2587 this.el = this.slide.querySelector('[data-youtube]');
2588 this.ready = false;
2589 }
2590
2591 /**
2592 * Creates the player.
2593 */
2594
2595 }, {
2596 key: 'create',
2597 value: function create() {
2598 this.player = new YT.Player(this.el, this.options);
2599 this.el = this.player.getIframe();
2600 }
2601
2602 /**
2603 * Player ready callback. Will play the video if it was intended to be played
2604 * and will also call any pending callbacks.
2605 */
2606
2607 }, {
2608 key: 'onPlayerReady',
2609 value: function onPlayerReady() {
2610 this.ready = true;
2611
2612 // Restoring the current time if saved
2613 if (this.currentTime) {
2614 this.player.seekTo(this.currentTime, true);
2615 this.player.pauseVideo();
2616 this.currentTime = null;
2617 }
2618
2619 if (this.timeout && this.player.getPlayerState() !== 1) {
2620 this.play();
2621 }
2622
2623 if (this.onReadyCb) {
2624 this.onReadyCb();
2625 this.onReadyCb = null;
2626 }
2627 }
2628
2629 /**
2630 * Plays the video.
2631 */
2632
2633 }, {
2634 key: 'play',
2635 value: function play() {
2636 var _this = this;
2637
2638 if (this.ready) {
2639 this.timeout = setTimeout(function () {
2640 _this.timeout = null;
2641 }, 1000);
2642
2643 if (this.isMuted) {
2644 this.player.mute();
2645 } else {
2646 this.player.unMute();
2647 }
2648
2649 this.player.playVideo();
2650 } else {
2651 this.onReadyCb = this.play;
2652 }
2653 }
2654
2655 /**
2656 * Pause playing the video if it's already playing.
2657 */
2658
2659 }, {
2660 key: 'pause',
2661 value: function pause() {
2662 if (this.player && this.player.pauseVideo && this.player.getPlayerState() === 1) {
2663 this.player.pauseVideo();
2664 }
2665 }
2666
2667 /**
2668 * Parses the element to have the proper variables.
2669 * @param {Element} element
2670 * @return {Object} Player variables.
2671 */
2672
2673 }, {
2674 key: 'getPlayerVars',
2675 value: function getPlayerVars(element) {
2676 var vars = {
2677 modestbranding: 1,
2678 rel: 0,
2679 origin: window.location.origin
2680 };
2681
2682 if (this.slide.classList.contains('fullscreen')) {
2683 // Disabling keyboard interaction for fullscreenvideos
2684 vars.disablekb = 1;
2685 }
2686
2687 if (typeof element.dataset.noControls !== 'undefined') {
2688 vars.controls = 0;
2689 vars.showinfo = 0;
2690 }
2691
2692 if (typeof element.dataset.loop !== 'undefined') {
2693 vars.loop = 1;
2694 vars.playlist = element.dataset.youtubeId;
2695 }
2696
2697 return vars;
2698 }
2699 }]);
2700
2701 return Player;
2702 }();
2703
2704 /**
2705 * Video plugin.
2706 */
2707
2708
2709 var YouTube = function () {
2710 /**
2711 * Grid plugin that shows a grid on top of the WebSlides for easy prototyping.
2712 * @param {WebSlides} wsInstance The WebSlides instance
2713 */
2714 function YouTube(wsInstance) {
2715 _classCallCheck(this, YouTube);
2716
2717 /**
2718 * @type {WebSlides}
2719 * @private
2720 */
2721 this.ws_ = wsInstance;
2722
2723 this.videos = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].toArray(this.ws_.el.querySelectorAll('[data-youtube]'));
2724
2725 if (this.videos.length) {
2726 this.inject();
2727 }
2728 }
2729
2730 /**
2731 * Once the YouTube API is ready this gets called so we can start the videos.
2732 */
2733
2734
2735 _createClass(YouTube, [{
2736 key: 'onYTReady',
2737 value: function onYTReady() {
2738 var _this2 = this;
2739
2740 this.videos.forEach(function (video) {
2741 var player = new Player(video);
2742
2743 if (typeof video.dataset.autoplay !== 'undefined') {
2744 var _Slide$getSectionFrom = __WEBPACK_IMPORTED_MODULE_1__modules_slide__["b" /* default */].getSectionFromEl(player.el),
2745 i = _Slide$getSectionFrom.i;
2746
2747 var slide = _this2.ws_.slides[i - 1];
2748
2749 slide.player = player;
2750
2751 slide.el.addEventListener(__WEBPACK_IMPORTED_MODULE_1__modules_slide__["a" /* Events */].ENABLE, YouTube.onSlideEvent);
2752 slide.el.addEventListener(__WEBPACK_IMPORTED_MODULE_1__modules_slide__["a" /* Events */].DISABLE, YouTube.onSlideEvent);
2753 slide.el.addEventListener(__WEBPACK_IMPORTED_MODULE_1__modules_slide__["a" /* Events */].ENTER, YouTube.onSlideEvent);
2754 slide.el.addEventListener(__WEBPACK_IMPORTED_MODULE_1__modules_slide__["a" /* Events */].LEAVE, YouTube.onSlideEvent);
2755
2756 if (_this2.ws_.currentSlide_ === slide) {
2757 YouTube.onSectionEnabled(slide);
2758 }
2759 }
2760 });
2761 }
2762
2763 /**
2764 * Injects the YouTube iFrame API into the page.
2765 */
2766
2767 }, {
2768 key: 'inject',
2769 value: function inject() {
2770 window.onYouTubeIframeAPIReady = this.onYTReady.bind(this);
2771 var tag = document.createElement('script');
2772 tag.src = 'https://www.youtube.com/iframe_api';
2773 var firstScriptTag = document.getElementsByTagName('script')[0];
2774 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
2775 }
2776
2777 /**
2778 * Reacts to any event on the slide.
2779 * @param {CustomEvent} event
2780 */
2781
2782 }], [{
2783 key: 'onSlideEvent',
2784 value: function onSlideEvent(event) {
2785 var slide = event.detail.slide;
2786
2787 switch (event.type) {
2788 case __WEBPACK_IMPORTED_MODULE_1__modules_slide__["a" /* Events */].ENABLE:
2789 YouTube.onSectionEnabled(slide);
2790 break;
2791 case __WEBPACK_IMPORTED_MODULE_1__modules_slide__["a" /* Events */].DISABLE:
2792 YouTube.onSectionDisabled(slide);
2793 break;
2794 case __WEBPACK_IMPORTED_MODULE_1__modules_slide__["a" /* Events */].LEAVE:
2795 slide.player.destroy();
2796 break;
2797 case __WEBPACK_IMPORTED_MODULE_1__modules_slide__["a" /* Events */].ENTER:
2798 slide.player.create();
2799 break;
2800 }
2801 }
2802
2803 /**
2804 * On Section enable hook. Will play the video.
2805 * @param {Slide} slide
2806 */
2807
2808 }, {
2809 key: 'onSectionEnabled',
2810 value: function onSectionEnabled(slide) {
2811 if (slide.player.autoplay) {
2812 slide.player.play();
2813 }
2814 }
2815
2816 /**
2817 * On Section enable hook. Will pause the video.
2818 * @param {Slide} slide
2819 */
2820
2821 }, {
2822 key: 'onSectionDisabled',
2823 value: function onSectionDisabled(slide) {
2824 slide.player.pause();
2825 }
2826 }]);
2827
2828 return YouTube;
2829 }();
2830
2831 /* harmony default export */ __webpack_exports__["a"] = (YouTube);
2832
2833 /***/ }),
2834 /* 19 */
2835 /***/ (function(module, __webpack_exports__, __webpack_require__) {
2836
2837 "use strict";
2838 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_dom__ = __webpack_require__(0);
2839 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__utils_keys__ = __webpack_require__(2);
2840 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__utils_scroll_to__ = __webpack_require__(4);
2841 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__modules_slide__ = __webpack_require__(1);
2842 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
2843
2844 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
2845
2846
2847
2848
2849
2850
2851 var CLASSES = {
2852 ZOOM: 'grid',
2853 DIV: 'column',
2854 WRAP: 'wrap-zoom',
2855 WRAP_CONTAINER: 'wrap',
2856 CURRENT: 'current',
2857 SLIDE: 'slide',
2858 ZOOM_ENABLED: 'ws-ready-zoom'
2859 };
2860
2861 var ID = 'webslides-zoomed';
2862
2863 /**
2864 * Zoom plugin.
2865 */
2866
2867 var Zoom = function () {
2868 /**
2869 * @param {WebSlides} wsInstance The WebSlides instance
2870 * @constructor
2871 */
2872 function Zoom(wsInstance) {
2873 _classCallCheck(this, Zoom);
2874
2875 /**
2876 * @type {WebSlides}
2877 * @private
2878 */
2879 this.ws_ = wsInstance;
2880
2881 /**
2882 * @type {WebSlides}
2883 * @private
2884 */
2885 this.zws_ = {};
2886
2887 /**
2888 * @type {boolean}
2889 * @private
2890 */
2891 this.isZoomed_ = false;
2892
2893 this.preBuildZoom_();
2894 document.body.addEventListener('keydown', this.onKeyDown.bind(this));
2895 }
2896
2897 /**
2898 * On key down handler. Will decide if Zoom in or out
2899 * @param {Event} event Key down event.
2900 */
2901
2902
2903 _createClass(Zoom, [{
2904 key: 'onKeyDown',
2905 value: function onKeyDown(event) {
2906 if (!this.isZoomed_ && __WEBPACK_IMPORTED_MODULE_1__utils_keys__["a" /* default */].MINUS.some(function (key) {
2907 return key === event.which;
2908 })) {
2909 this.zoomIn();
2910 } else if (this.isZoomed_ && (__WEBPACK_IMPORTED_MODULE_1__utils_keys__["a" /* default */].PLUS.some(function (key) {
2911 return key === event.which;
2912 }) || event.which === __WEBPACK_IMPORTED_MODULE_1__utils_keys__["a" /* default */].ESCAPE)) {
2913 this.zoomOut();
2914 }
2915 }
2916
2917 /**
2918 * Prepare zoom structure, scales the slides and uses a grid layout
2919 * to show them.
2920 */
2921
2922 }, {
2923 key: 'preBuildZoom_',
2924 value: function preBuildZoom_() {
2925 var _this = this;
2926
2927 // Clone #webslides element
2928 this.zws_.el = this.ws_.el.cloneNode();
2929 this.zws_.el.id = ID;
2930 this.zws_.wrap = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].createNode('div');
2931 this.zws_.wrap.className = CLASSES.WRAP_CONTAINER;
2932 this.zws_.el.appendChild(this.zws_.wrap);
2933 this.zws_.grid = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].createNode('div');
2934 this.zws_.grid.className = CLASSES.ZOOM;
2935 this.zws_.wrap.appendChild(this.zws_.grid);
2936
2937 this.zws_.el.addEventListener('click', function () {
2938 return _this.toggleZoom();
2939 });
2940
2941 // Clone the slides
2942 this.zws_.slides = [].map.call(this.ws_.slides, function (slide, i) {
2943 var s_ = slide.el.cloneNode(true);
2944 _this.zws_.grid.appendChild(s_);
2945 return new __WEBPACK_IMPORTED_MODULE_3__modules_slide__["b" /* default */](s_, i);
2946 });
2947
2948 this.disable();
2949 __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].after(this.zws_.el, this.ws_.el);
2950
2951 // Creates the container for each slide
2952 this.zws_.slides.forEach(function (elem) {
2953 return _this.createSlideBlock_(elem);
2954 });
2955 }
2956
2957 /**
2958 * Creates a block structure around the slide.
2959 * @param {Element} elem slide element.
2960 */
2961
2962 }, {
2963 key: 'createSlideBlock_',
2964 value: function createSlideBlock_(elem) {
2965 var _this2 = this;
2966
2967 // Wraps the slide around a container
2968 var wrap = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].wrap(elem.el, 'div');
2969 wrap.className = CLASSES.WRAP;
2970 wrap.setAttribute('id', 'zoomed-' + elem.el.getAttribute('id'));
2971
2972 // Slide container, need due to flexbox styles
2973 var div = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].wrap(wrap, 'div');
2974 div.className = CLASSES.DIV;
2975
2976 // Adding some layer for controlling click events
2977 var divLayer = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].createNode('div');
2978 divLayer.className = 'zoom-layer';
2979 divLayer.addEventListener('click', function (e) {
2980 e.stopPropagation();
2981 _this2.zoomOut();
2982 _this2.ws_.goToSlide(elem.i);
2983 });
2984 wrap.appendChild(divLayer);
2985
2986 // Slide number
2987 var slideNumber = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].createNode('p', '', '' + (elem.i + 1));
2988 slideNumber.className = 'text-slide-number';
2989 div.appendChild(slideNumber);
2990 }
2991
2992 /**
2993 * Toggles zoom.
2994 */
2995
2996 }, {
2997 key: 'toggleZoom',
2998 value: function toggleZoom() {
2999 if (this.isZoomed_) {
3000 this.zoomOut();
3001 } else {
3002 this.zoomIn();
3003 }
3004 }
3005
3006 /**
3007 * Zoom In the slider, scales the slides and uses a grid layout to show them.
3008 */
3009
3010 }, {
3011 key: 'zoomIn',
3012 value: function zoomIn() {
3013 var _this3 = this;
3014
3015 if (!this.ws_.options.showIndex) return;
3016 this.enable();
3017 var currentId = this.ws_.currentSlide_.el.id;
3018 var zoomedCurrent = this.zws_.el.querySelector('.' + CLASSES.WRAP + '.' + CLASSES.CURRENT);
3019
3020 if (zoomedCurrent) {
3021 zoomedCurrent.classList.remove(CLASSES.CURRENT);
3022 }
3023
3024 var actualCurrent = this.zws_.el.querySelector('#zoomed-' + currentId);
3025 actualCurrent.classList.add(CLASSES.CURRENT);
3026
3027 this.isZoomed_ = true;
3028 document.documentElement.classList.add(CLASSES.ZOOM_ENABLED);
3029
3030 setTimeout(function () {
3031 _this3.ws_.disable();
3032 _this3.zws_.el.classList.add('in');
3033 var wrapCSS = window.getComputedStyle(_this3.zws_.grid);
3034 var scrollingElement = document.body;
3035
3036 Object(__WEBPACK_IMPORTED_MODULE_2__utils_scroll_to__["a" /* default */])(actualCurrent.parentNode.offsetTop + __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(wrapCSS.paddingTop), 50, function () {}, scrollingElement);
3037 }, 50);
3038 }
3039
3040 /**
3041 * Zoom Out the slider, remove scale from the slides.
3042 */
3043
3044 }, {
3045 key: 'zoomOut',
3046 value: function zoomOut() {
3047 var _this4 = this;
3048
3049 if (!this.ws_.options.showIndex) return;
3050 this.zws_.el.classList.remove('in');
3051
3052 setTimeout(function () {
3053 _this4.ws_.enable();
3054 _this4.disable();
3055 _this4.isZoomed_ = false;
3056 document.documentElement.classList.remove(CLASSES.ZOOM_ENABLED);
3057 }, 400);
3058 }
3059
3060 /**
3061 * Hides the zoom container
3062 */
3063
3064 }, {
3065 key: 'disable',
3066 value: function disable() {
3067 this.zws_.el.classList.add('disabled');
3068 }
3069
3070 /**
3071 * Shows the zoom container
3072 */
3073
3074 }, {
3075 key: 'enable',
3076 value: function enable() {
3077 this.zws_.el.classList.remove('disabled');
3078 }
3079 }]);
3080
3081 return Zoom;
3082 }();
3083
3084 /* harmony default export */ __webpack_exports__["a"] = (Zoom);
3085
3086 /***/ }),
3087 /* 20 */
3088 /***/ (function(module, __webpack_exports__, __webpack_require__) {
3089
3090 "use strict";
3091 /**
3092 * Swing easing function.
3093 * @param {number} p The percentage of time that has passed.
3094 * @return {number}
3095 */
3096 function swing(p) {
3097 return 0.5 - Math.cos(p * Math.PI) / 2;
3098 }
3099
3100 /* harmony default export */ __webpack_exports__["a"] = ({ swing: swing });
3101
3102 /***/ }),
3103 /* 21 */
3104 /***/ (function(module, exports) {
3105
3106 // removed by extract-text-webpack-plugin
3107
3108 /***/ })
3109 /******/ ]);