5 * Description: Making HTML presentations easy
6 * URL: https://github.com/webslides/webslides#readme
7 * Credits: @jlantunez, @LuisSacristan, @Belelros
9 /******/ (function(modules
) { // webpackBootstrap
10 /******/ // The module cache
11 /******/ var installedModules
= {};
13 /******/ // The require function
14 /******/ function __webpack_require__(moduleId
) {
16 /******/ // Check if module is in cache
17 /******/ if(installedModules
[moduleId
]) {
18 /******/ return installedModules
[moduleId
].exports
;
20 /******/ // Create a new module (and put it into the cache)
21 /******/ var module
= installedModules
[moduleId
] = {
27 /******/ // Execute the module function
28 /******/ modules
[moduleId
].call(module
.exports
, module
, module
.exports
, __webpack_require__
);
30 /******/ // Flag the module as loaded
31 /******/ module
.l
= true;
33 /******/ // Return the exports of the module
34 /******/ return module
.exports
;
38 /******/ // expose the modules object (__webpack_modules__)
39 /******/ __webpack_require__
.m
= modules
;
41 /******/ // expose the module cache
42 /******/ __webpack_require__
.c
= installedModules
;
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,
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
;
64 /******/ // Object.prototype.hasOwnProperty.call
65 /******/ __webpack_require__
.o = function(object
, property
) { return Object
.prototype.hasOwnProperty
.call(object
, property
); };
67 /******/ // __webpack_public_path__
68 /******/ __webpack_require__
.p
= "/static/js/";
70 /******/ // Load entry module and return exports
71 /******/ return __webpack_require__(__webpack_require__
.s
= 5);
73 /************************************************************************/
76 /***/ (function(module
, __webpack_exports__
, __webpack_require__
) {
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
; }; }();
82 function _classCallCheck(instance
, Constructor
) { if (!(instance
instanceof Constructor
)) { throw new TypeError("Cannot call a class as a function"); } }
86 var transitionEvent
= '';
87 var animationEvent
= '';
90 * Static class for DOM helper.
93 var DOM = function () {
95 _classCallCheck(this, DOM
);
98 _createClass(DOM
, null, [{
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
106 * @param {string} text The desired text to go inside of the element. It
107 * defaults to an empty string.
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] : '';
114 var node
= document
.createElement(tag
);
120 node
.textContent
= text
;
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.
135 value: function once(el
, event
, callback
) {
136 var cb
= function cb(e
) {
137 if (e
.target
=== el
) {
138 el
.removeEventListener(event
, cb
);
143 el
.addEventListener(event
, cb
, false);
147 * Gets the prefixed transitionend event.
148 * @param {?Element} optEl Element to check
153 key: 'getTransitionEvent',
154 value: function getTransitionEvent(optEl
) {
155 if (transitionEvent
&& !optEl
) {
156 return transitionEvent
;
159 transitionEvent
= '';
161 var el
= optEl
|| document
.createElement('ws');
163 'transition': 'transitionend',
164 'OTransition': 'oTransitionEnd',
165 'MozTransition': 'transitionend',
166 'WebkitTransition': 'webkitTransitionEnd'
168 var transitionNames
= Object
.keys(transitions
);
170 for (var i
= 0, length
= transitionNames
.length
; i
< length
&& !transitionEvent
; i
++) {
171 var transitionName
= transitionNames
[i
];
173 if (typeof el
.style
[transitionName
] !== 'undefined') {
174 transitionEvent
= transitions
[transitionName
];
178 return transitionEvent
;
182 * Gets the prefixed animation end event.
183 * @param {?Element} optEl Element to check
188 key: 'getAnimationEvent',
189 value: function getAnimationEvent(optEl
) {
190 if (animationEvent
&& !optEl
) {
191 return animationEvent
;
194 animationEvent
= 'animationend';
196 var el
= optEl
|| document
.createElement('ws');
198 'animation': 'animationend',
199 'OAnimation': 'oAnimationEnd',
200 'MozAnimation': 'animationend',
201 'WebkitAnimation': 'webkitAnimationEnd'
203 var animationNames
= Object
.keys(animations
);
205 for (var i
= 0, length
= animationNames
.length
; i
< length
; i
++) {
206 var animationName
= animationNames
[i
];
208 if (typeof el
.style
[animationName
] !== 'undefined') {
209 animationEvent
= animations
[animationName
];
214 return animationEvent
;
218 * Hides an element setting the display to none.
219 * @param {Element} el Element to be hidden.
224 value: function hide(el
) {
225 el
.style
.display
= 'none';
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.
236 value: function show(el
) {
237 el
.style
.display
= '';
241 * Checks if the element is visible.
242 * @param {Element} el Element to check.
248 value: function isVisible(el
) {
249 return el
.offsetParent
!== null;
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
262 value: function fireEvent(target
, eventType
) {
263 var eventInfo
= arguments
.length
> 2 && arguments
[2] !== undefined ? arguments
[2] : {};
265 var event
= new __WEBPACK_IMPORTED_MODULE_0__custom_event__
["a" /* default */](eventType
, {
269 target
.dispatchEvent(event
);
273 * Converts an iterable to an array.
274 * @param {*} iterable Element to convert to array
275 * @return {Array} the element casted to an array.
280 value: function toArray(iterable
) {
281 return [].slice
.call(iterable
);
285 * Checks whether the document has focus on an input or contenteditable
287 * @return {boolean} Whether the focused element is an input or content
292 key: 'isFocusableElement',
293 value: function isFocusableElement() {
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
;
306 * Gets the integer value of a style property.
307 * @param {string} prop CSS property value.
308 * @return {Number} The property without the units.
313 value: function parseSize(prop
) {
314 return Number(prop
.replace(/[^\d\.]/g, ''));
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.
326 value: function wrap(elem
, tag
) {
327 var wrap
= document
.createElement(tag
);
328 elem
.parentElement
.insertBefore(wrap
, elem
);
329 wrap
.appendChild(elem
);
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.
342 value: function after(elem
, target
) {
343 var parent
= target
.parentNode
;
345 if (parent
.lastChild
=== target
) {
346 parent
.appendChild(elem
);
348 parent
.insertBefore(elem
, target
.nextSibling
);
356 /* harmony default export */ __webpack_exports__
["a"] = (DOM
);
360 /***/ (function(module
, __webpack_exports__
, __webpack_require__
) {
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
; }; }();
368 function _classCallCheck(instance
, Constructor
) { if (!(instance
instanceof Constructor
)) { throw new TypeError("Cannot call a class as a function"); } }
380 ENABLE: 'slide:enable',
381 DISABLE: 'slide:disable'
385 * Wrapper for the Slide section.
388 var Slide = function () {
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.
394 function Slide(el
, i
) {
395 _classCallCheck(this, Slide
);
402 * The section's parent.
405 this.parent
= el
.parentNode
;
411 this.el
.id
= 'section-' + (i
+ 1);
412 this.el
.classList
.add(CLASSES
.SLIDE
);
414 // Hide slides by default
419 * Hides the node and removes the class that makes it "active".
423 _createClass(Slide
, [{
425 value: function hide() {
426 __WEBPACK_IMPORTED_MODULE_0__utils_dom__
["a" /* default */].hide(this.el
);
427 this.el
.classList
.remove(CLASSES
.CURRENT
);
431 * Shows the node and adds the class that makes it "active".
436 value: function show() {
437 __WEBPACK_IMPORTED_MODULE_0__utils_dom__
["a" /* default */].show(this.el
);
438 this.el
.classList
.add(CLASSES
.CURRENT
);
442 * Moves the section to the bottom of the section's list.
443 * @fires Slide#dom:leave
444 * @fires Slide#dom:enter
448 key: 'moveAfterLast',
449 value: function moveAfterLast() {
450 var last
= this.parent
.childNodes
[this.parent
.childElementCount
- 1];
452 this.fire_(Events
.LEAVE
);
453 this.parent
.insertBefore(this.el
, last
.nextSibling
);
454 this.fire_(Events
.ENTER
);
458 * Moves the section to the top of the section's list.
459 * @fires Slide#dom:leave
460 * @fires Slide#dom:enter
464 key: 'moveBeforeFirst',
465 value: function moveBeforeFirst() {
466 var first
= this.parent
.childNodes
[0];
468 this.fire_(Events
.LEAVE
);
469 this.parent
.insertBefore(this.el
, first
);
470 this.fire_(Events
.ENTER
);
474 * Fires an enable event.
475 * @fires Slide#slide:enable
480 value: function enable() {
481 this.fire_(Events
.ENABLE
);
485 * Fires a disable event.
486 * @fires Slide#slide:disable
491 value: function disable() {
492 this.fire_(Events
.DISABLE
);
496 * Fires an event passing the slide instance on the detail.
497 * @param {String} name Name of the event to fire.
503 value: function fire_(name
) {
504 __WEBPACK_IMPORTED_MODULE_0__utils_dom__
["a" /* default */].fireEvent(this.el
, name
, {
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.
518 value: function isCandidate(el
) {
519 return el
.nodeType
=== 1 && el
.tagName
=== 'SECTION';
523 * Gets the section element from an inner element.
525 * @return {{section: ?Node, i: ?number}} A map with the section and the
526 * position of the section.
530 key: 'getSectionFromEl',
531 value: function getSectionFromEl(el
) {
536 while (parent
.parentElement
&& !parent
.classList
.contains(CLASSES
.SLIDE
)) {
537 parent
= parent
.parentElement
;
540 if (parent
.classList
.contains(CLASSES
.SLIDE
)) {
542 i
= parseInt(section
.id
.replace('section-', ''), 10);
545 return { section: section
, i: i
};
556 /***/ (function(module
, __webpack_exports__
, __webpack_require__
) {
570 PLUS: [107, 171, 187],
571 MINUS: [109, 173, 189],
576 /* harmony default export */ __webpack_exports__
["a"] = (Keys
);
580 /***/ (function(module
, __webpack_exports__
, __webpack_require__
) {
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
; }; }();
585 function _classCallCheck(instance
, Constructor
) { if (!(instance
instanceof Constructor
)) { throw new TypeError("Cannot call a class as a function"); } }
587 var UA
= window
.navigator
.userAgent
;
590 * Mobile detector helper class. Tests the User Agent to see if we're, likely,
591 * on a mobile device.
594 var MobileDetector = function () {
595 function MobileDetector() {
596 _classCallCheck(this, MobileDetector
);
599 _createClass(MobileDetector
, null, [{
603 * Whether the device is Android or not.
606 value: function isAndroid() {
607 return !!UA
.match(/Android/i);
611 * Whether the device is BlackBerry or not.
617 value: function isBlackBerry() {
618 return !!UA
.match(/BlackBerry/i);
622 * Whether the device is iOS or not.
628 value: function isiOS() {
629 return !!UA
.match(/iPad|iPhone|iPod/i);
633 * Whether the device is Opera or not.
639 value: function isOpera() {
640 return !!UA
.match(/Opera Mini
/i
);
644 * Whether the device is Windows or not.
650 value: function isWindows() {
651 return !!UA
.match(/IEMobile/i);
655 * Whether the device is Windows Phone or not.
660 key: "isWindowsPhone",
661 value: function isWindowsPhone() {
662 return !!UA
.match(/Windows Phone
/i
);
666 * Whether the device is any mobile device or not.
672 value: function isAny() {
673 return MobileDetector
.isAndroid() || MobileDetector
.isBlackBerry() || MobileDetector
.isiOS() || MobileDetector
.isOpera() || MobileDetector
.isWindows() || MobileDetector
.isWindowsPhone();
677 return MobileDetector
;
680 /* harmony default export */ __webpack_exports__
["a"] = (MobileDetector
);
684 /***/ (function(module
, __webpack_exports__
, __webpack_require__
) {
687 /* harmony export (immutable) */ __webpack_exports__
["a"] = scrollTo
;
688 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__easing__
= __webpack_require__(20);
691 var SCROLLABLE_CONTAINER
= document
.getElementById('webslides');
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
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;
706 SCROLLABLE_CONTAINER
= container
? container : document
.getElementById('webslides');
708 var delta
= y
- SCROLLABLE_CONTAINER
.scrollTop
;
709 var startLocation
= SCROLLABLE_CONTAINER
.scrollTop
;
713 SCROLLABLE_CONTAINER
.scrollTop
= y
;
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
);
723 SCROLLABLE_CONTAINER
.scrollTop
= Math
.floor(startLocation
+ easingP
* delta
);
725 if (elapsedTime
< duration
) {
726 setTimeout(function () {
727 return animateScroll(elapsedTime
);
739 /***/ (function(module
, __webpack_exports__
, __webpack_require__
) {
742 Object
.defineProperty(__webpack_exports__
, "__esModule", { value: true });
743 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__modules_webslides__
= __webpack_require__(6);
745 __webpack_require__(21);
747 window
.WebSlides
= __WEBPACK_IMPORTED_MODULE_0__modules_webslides__
["a" /* default */];
751 /***/ (function(module
, __webpack_exports__
, __webpack_require__
) {
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
; }; }();
760 function _classCallCheck(instance
, Constructor
) { if (!(instance
instanceof Constructor
)) { throw new TypeError("Cannot call a class as a function"); } }
768 VERTICAL: 'vertical',
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
792 var WebSlides = function () {
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
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.
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
;
829 _classCallCheck(this, WebSlides
);
835 this.el
= document
.getElementById('webslides');
838 throw new Error('Couldn\'t find the webslides container!');
845 this.isMoving
= false;
848 * @type {?Array<Slide>}
852 * Current slide's index.
856 this.currentSlideI_
= -1;
858 * Current slide reference.
862 this.currentSlide_
= null;
870 * Whether the layout is going to be vertical or horizontal.
873 this.isVertical
= this.el
.classList
.contains(CLASSES
.VERTICAL
);
875 * Plugin's dictionary.
880 * Options dictionary.
884 autoslide: autoslide
,
885 changeOnClick: changeOnClick
,
887 minWheelDelta: minWheelDelta
,
888 navigateOnScroll: navigateOnScroll
,
889 scrollWait: scrollWait
,
890 slideOffset: slideOffset
,
894 * Initialisation flag.
897 this.initialised
= false;
900 this.removeChildren_();
902 this.createPlugins_();
909 * Removes all children elements inside of the main container that are not
910 * eligible to be a Slide Element.
915 _createClass(WebSlides
, [{
916 key: 'removeChildren_',
917 value: function removeChildren_() {
918 var nodes
= this.el
.childNodes
;
919 var i
= nodes
.length
;
924 if (!__WEBPACK_IMPORTED_MODULE_1__slide__
["b" /* default */].isCandidate(node
)) {
925 this.el
.removeChild(node
);
931 * Creates all the registered plugins and store the instances inside of the
932 * the webslide instance.
937 key: 'createPlugins_',
938 value: function createPlugins_() {
941 Object
.keys(PLUGINS
).forEach(function (pluginName
) {
942 var PluginCto
= PLUGINS
[pluginName
];
943 _this
.plugins
[pluginName
] = new PluginCto(_this
);
948 * Called once the WebSlide instance has finished initialising.
950 * @fires WebSlide#ws:init
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
);
962 * Grabs the slides from the DOM and creates all the Slides modules.
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
);
973 this.maxSlide_
= this.slides
.length
;
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
986 value: function goToSlide(slideI
) {
987 var forward
= arguments
.length
> 1 && arguments
[1] !== undefined ? arguments
[1] : null;
989 if (this.isValidIndexSlide_(slideI
) && !this.isMoving
&& this.currentSlideI_
!== slideI
) {
990 this.isMoving
= true;
991 var isMovingForward
= false;
993 if (forward
!== null) {
994 isMovingForward
= forward
;
996 if (this.currentSlideI_
>= 0) {
997 isMovingForward
= slideI
> this.currentSlideI_
;
1000 var nextSlide
= this.slides
[slideI
];
1002 if (this.currentSlide_
!== null && this.isVertical
&& (!this.plugins
.touch
|| !this.plugins
.touch
.isEnabled
)) {
1003 this.scrollTransitionToSlide_(isMovingForward
, nextSlide
, this.onSlideChange_
);
1005 this.transitionToSlide_(isMovingForward
, nextSlide
, this.onSlideChange_
);
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.
1021 key: 'scrollTransitionToSlide_',
1022 value: function scrollTransitionToSlide_(isMovingForward
, nextSlide
, callback
) {
1025 this.el
.style
.overflow
= 'hidden';
1027 if (!isMovingForward
) {
1028 nextSlide
.moveBeforeFirst();
1030 Object(__WEBPACK_IMPORTED_MODULE_3__utils_scroll_to__
["a" /* default */])(this.currentSlide_
.el
.offsetTop
, 0);
1035 Object(__WEBPACK_IMPORTED_MODULE_3__utils_scroll_to__
["a" /* default */])(nextSlide
.el
.offsetTop
, 500, function () {
1036 _this2
.currentSlide_
.hide();
1038 if (isMovingForward
) {
1039 _this2
.currentSlide_
.moveAfterLast();
1042 _this2
.el
.style
.overflow
= 'auto';
1043 setTimeout(function () {
1044 callback
.call(_this2
, nextSlide
);
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.
1060 key: 'transitionToSlide_',
1061 value: function transitionToSlide_(isMovingForward
, nextSlide
, callback
) {
1064 Object(__WEBPACK_IMPORTED_MODULE_3__utils_scroll_to__
["a" /* default */])(0, 0);
1065 var className
= 'slideInRight';
1067 if (!isMovingForward
) {
1068 nextSlide
.moveBeforeFirst();
1069 className
= 'slideInLeft';
1072 if (this.currentSlide_
) {
1073 if (isMovingForward
) {
1074 this.currentSlide_
.moveAfterLast();
1077 this.currentSlide_
.hide();
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
);
1088 nextSlide
.el
.classList
.add(className
);
1090 callback
.call(this, nextSlide
);
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
1098 * @param {Slide} slide The slide we're transitioning to.
1099 * @fires WebSlide#ws:slide-change
1104 key: 'onSlideChange_',
1105 value: function onSlideChange_(slide
) {
1106 if (this.currentSlide_
) {
1107 this.currentSlide_
.disable();
1110 this.currentSlide_
= slide
;
1111 this.currentSlideI_
= slide
.i
;
1112 this.currentSlide_
.enable();
1113 this.isMoving
= false;
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
1123 * Goes to the next slide.
1128 value: function goNext() {
1129 var nextIndex
= this.currentSlideI_
+ 1;
1131 if (nextIndex
>= this.maxSlide_
) {
1132 if (!this.options
.loop
) {
1139 this.goToSlide(nextIndex
, true);
1143 * Goes to the previous slide.
1148 value: function goPrev() {
1149 var prevIndex
= this.currentSlideI_
- 1;
1151 if (prevIndex
< 0) {
1152 if (!this.options
.loop
) {
1156 prevIndex
= this.maxSlide_
- 1;
1159 this.goToSlide(prevIndex
, false);
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.
1170 key: 'isValidIndexSlide_',
1171 value: function isValidIndexSlide_(i
) {
1172 return typeof i
=== 'number' && i
>= 0 && i
< this.maxSlide_
;
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.
1179 * @see Hash.getSlideNumber
1184 value: function initSlides_() {
1185 var slideNumber
= this.plugins
.hash
.constructor.getSlideNumber();
1188 if (slideNumber
=== null || slideNumber
>= this.maxSlide_
) {
1192 // Keeping the order
1193 if (slideNumber
!== 0) {
1196 while (i
< slideNumber
) {
1197 this.slides
[i
].moveAfterLast();
1202 this.goToSlide(slideNumber
);
1211 value: function toggleZoom() {
1212 if (this.options
.showIndex
) {
1213 this.plugins
.zoom
.toggleZoom();
1218 * Disables the webslides element adding a class "disabled"
1223 value: function disable() {
1224 this.el
.classList
.add(CLASSES
.DISABLED
);
1226 if (this.plugins
.autoslide
&& this.plugins
.autoslide
.time
!== false) {
1227 this.plugins
.autoslide
.stop();
1232 * Enables the webslides element removing a class "disabled"
1237 value: function enable() {
1238 this.el
.classList
.remove(CLASSES
.DISABLED
);
1240 if (this.plugins
.autoslide
&& this.plugins
.autoslide
.time
!== false) {
1241 this.plugins
.autoslide
.play();
1246 * Checks if it is disabled
1252 value: function isDisabled() {
1253 return this.el
.classList
.contains(CLASSES
.DISABLED
);
1257 * Puts the browser into fullscreen
1262 value: function fullscreen() {
1263 var el
= document
.documentElement
;
1264 var isFullscreen
= document
.fullscreen
|| document
.webkitIsFullScreen
|| document
.mozFullScreen
|| document
.msFullScreenElement
;
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
);
1271 /* istanbul ignore next hard to test prefixes */
1272 var cancelFullscreen
= document
.exitFullScreen
|| document
.webkitCancelFullScreen
|| document
.mozCancelFullScreen
|| document
.msExitFullscreen
;
1274 cancelFullscreen
.call(document
);
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.
1287 key: 'registerPlugin',
1288 value: function registerPlugin(key
, cto
) {
1296 /* harmony default export */ __webpack_exports__
["a"] = (WebSlides
);
1300 /***/ (function(module
, __webpack_exports__
, __webpack_require__
) {
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);
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 */]
1342 /***/ (function(module
, __webpack_exports__
, __webpack_require__
) {
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
; }; }();
1348 function _classCallCheck(instance
, Constructor
) { if (!(instance
instanceof Constructor
)) { throw new TypeError("Cannot call a class as a function"); } }
1356 var AutoSlide = function () {
1358 * @param {WebSlides} wsInstance The WebSlides instance
1361 function AutoSlide(wsInstance
) {
1362 _classCallCheck(this, AutoSlide
);
1368 this.ws_
= wsInstance
;
1370 * Interval ID reference for the autoslide.
1374 this.interval_
= null;
1376 * Internal stored time.
1379 this.time
= this.ws_
.options
.autoslide
;
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));
1388 * On focus handler. Will decide if stops/play depending on the focused
1389 * element if autoslide is active.
1393 _createClass(AutoSlide
, [{
1395 value: function onFocus() {
1396 if (__WEBPACK_IMPORTED_MODULE_0__utils_dom__
["a" /* default */].isFocusableElement()) {
1398 } else if (this.interval_
=== null) {
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
1412 value: function play(time
) {
1413 if (typeof time
!== 'number') {
1419 if (!this.interval_
&& typeof time
=== 'number' && time
> 0) {
1420 this.interval_
= setInterval(this.ws_
.goNext
.bind(this.ws_
), time
);
1425 * Stops autosliding all the slides.
1430 value: function stop() {
1431 if (this.interval_
) {
1432 clearInterval(this.interval_
);
1433 this.interval_
= null;
1441 /* harmony default export */ __webpack_exports__
["a"] = (AutoSlide
);
1445 /***/ (function(module
, __webpack_exports__
, __webpack_require__
) {
1448 var NativeCustomEvent
= window
.CustomEvent
;
1451 * Check for the usage of native support for CustomEvents which is lacking
1453 * @return {boolean} Whether it can be used or not.
1455 function canIuseNativeCustom() {
1457 var p
= new NativeCustomEvent('t', {
1462 return 't' === p
.type
&& 'b' === p
.detail
.a
;
1465 /* istanbul ignore next: hard to reproduce on test environment */
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.
1476 /* istanbul ignore next: hard to reproduce on test environment */
1477 var IECustomEvent
= function CustomEvent(type
, params
) {
1478 var e
= document
.createEvent('CustomEvent');
1481 e
.initCustomEvent(type
, params
.bubbles
, params
.cancelable
, params
.detail
);
1483 e
.initCustomEvent(type
, false, false, undefined);
1489 /* istanbul ignore next: hard to reproduce on test environment */
1490 var WSCustomEvent
= canIuseNativeCustom() ? NativeCustomEvent : IECustomEvent
;
1492 /* harmony default export */ __webpack_exports__
["a"] = (WSCustomEvent
);
1496 /***/ (function(module
, __webpack_exports__
, __webpack_require__
) {
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
; }; }();
1501 function _classCallCheck(instance
, Constructor
) { if (!(instance
instanceof Constructor
)) { throw new TypeError("Cannot call a class as a function"); } }
1503 var CLICKABLE_ELS
= ['INPUT', 'SELECT', 'OPTION', 'BUTTON', 'A', 'TEXTAREA'];
1506 * ClickNav plugin that allows to click on the page to get to the next slide.
1509 var ClickNav = function () {
1511 * @param {WebSlides} wsInstance The WebSlides instance
1514 function ClickNav(wsInstance
) {
1515 _classCallCheck(this, ClickNav
);
1521 this.ws_
= wsInstance
;
1523 if (wsInstance
.options
.changeOnClick
) {
1524 this.ws_
.el
.addEventListener('click', this.onClick_
.bind(this));
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.
1536 _createClass(ClickNav
, [{
1538 value: function onClick_(event
) {
1539 if (CLICKABLE_ELS
.indexOf(event
.target
.tagName
) < 0 && typeof event
.target
.dataset
.preventNav
=== 'undefined') {
1548 /* harmony default export */ __webpack_exports__
["a"] = (ClickNav
);
1552 /***/ (function(module
, __webpack_exports__
, __webpack_require__
) {
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
; }; }();
1558 function _classCallCheck(instance
, Constructor
) { if (!(instance
instanceof Constructor
)) { throw new TypeError("Cannot call a class as a function"); } }
1562 var GRID_IMAGE
= 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYAg' + 'MAAACdGdVrAAAACVBMVEUAAAAtXsUtXcPDDPUWAAAAA3RSTlMAZmHzZFkxAAAAFklEQVQI12M' + 'AA9bBR3ExhAJB1iooBQBGwgVEs/QtuAAAAABJRU5ErkJggg==';
1565 * Grid plugin that shows a grid on top of the WebSlides for easy prototyping.
1568 var Grid = function () {
1570 * @param {WebSlides} wsInstance The WebSlides instance
1573 function Grid(wsInstance
) {
1574 _classCallCheck(this, Grid
);
1580 this.ws_
= wsInstance
;
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');
1586 style
.type
= 'text/css';
1588 if (style
.styleSheet
) {
1589 style
.styleSheet
.cssText
= CSS
;
1591 style
.appendChild(document
.createTextNode(CSS
));
1594 head
.appendChild(style
);
1596 document
.addEventListener('keydown', this.onKeyPress_
.bind(this), false);
1600 * Reacts to the keydown event. It reacts to ENTER key to toggle the class.
1601 * @param {KeyboardEvent} event The key event.
1606 _createClass(Grid
, [{
1608 value: function onKeyPress_(event
) {
1609 if (event
.which
=== __WEBPACK_IMPORTED_MODULE_0__utils_keys__
["a" /* default */].ENTER
) {
1610 document
.body
.classList
.toggle('baseline');
1618 /* harmony default export */ __webpack_exports__
["a"] = (Grid
);
1622 /***/ (function(module
, __webpack_exports__
, __webpack_require__
) {
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
; }; }();
1627 function _classCallCheck(instance
, Constructor
) { if (!(instance
instanceof Constructor
)) { throw new TypeError("Cannot call a class as a function"); } }
1629 var HASH
= '#slide';
1630 var slideRegex
= /#slide=(\d+)/;
1633 * Static class with methods to manipulate and extract info from the hash of
1637 var Hash = function () {
1639 * @param {WebSlides} wsInstance
1642 function Hash(wsInstance
) {
1643 _classCallCheck(this, Hash
);
1645 this.ws_
= wsInstance
;
1647 wsInstance
.el
.addEventListener('ws:slide-change', Hash
.onSlideChange_
);
1648 window
.addEventListener('hashchange', this.onHashChange_
.bind(this), false);
1652 * hashchange event handler, makes the WebSlide instance navigate to the
1657 _createClass(Hash
, [{
1658 key: 'onHashChange_',
1659 value: function onHashChange_() {
1660 var newSlideIndex
= Hash
.getSlideNumber();
1662 if (newSlideIndex
!== null) {
1663 this.ws_
.goToSlide(newSlideIndex
);
1668 * Handler for the slide change event which updates the slide on the hash.
1669 * @param {Event} event
1674 key: 'onSlideChange_',
1675 value: function onSlideChange_(event
) {
1676 Hash
.setSlideNumber(event
.detail
.currentSlide
);
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.
1687 key: 'getSlideNumber',
1688 value: function getSlideNumber() {
1689 var results
= document
.location
.hash
.match(slideRegex
);
1692 if (Array
.isArray(results
)) {
1693 slide
= parseInt(results
[1], 10);
1696 if (typeof slide
!== 'number' || slide
< 0 || !Array
.isArray(results
)) {
1699 slide
--; // Convert to 0 index
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.
1712 key: 'setSlideNumber',
1713 value: function setSlideNumber(number
) {
1714 if (Hash
.getSlideNumber() !== number
- 1) {
1717 }, 'Slide ' + number
, HASH
+ '=' + number
);
1725 /* harmony default export */ __webpack_exports__
["a"] = (Hash
);
1729 /***/ (function(module
, __webpack_exports__
, __webpack_require__
) {
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
; }; }();
1736 function _classCallCheck(instance
, Constructor
) { if (!(instance
instanceof Constructor
)) { throw new TypeError("Cannot call a class as a function"); } }
1742 * Keyboard interaction plugin.
1745 var Keyboard = function () {
1747 * @param {WebSlides} wsInstance The WebSlides instance
1750 function Keyboard(wsInstance
) {
1751 _classCallCheck(this, Keyboard
);
1757 this.ws_
= wsInstance
;
1759 document
.addEventListener('keydown', this.onKeyPress_
.bind(this), false);
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.
1770 _createClass(Keyboard
, [{
1772 value: function onKeyPress_(event
) {
1773 var method
= void 0;
1774 var argument
= void 0;
1776 if (__WEBPACK_IMPORTED_MODULE_1__utils_dom__
["a" /* default */].isFocusableElement() || this.ws_
.isDisabled()) {
1780 switch (event
.which
) {
1781 case __WEBPACK_IMPORTED_MODULE_0__utils_keys__
["a" /* default */].AV_PAGE:
1782 method
= this.ws_
.goNext
;
1784 case __WEBPACK_IMPORTED_MODULE_0__utils_keys__
["a" /* default */].SPACE:
1785 if (event
.shiftKey
) {
1786 method
= this.ws_
.goPrev
;
1788 method
= this.ws_
.goNext
;
1791 case __WEBPACK_IMPORTED_MODULE_0__utils_keys__
["a" /* default */].RE_PAGE:
1792 method
= this.ws_
.goPrev
;
1794 case __WEBPACK_IMPORTED_MODULE_0__utils_keys__
["a" /* default */].HOME:
1795 method
= this.ws_
.goToSlide
;
1798 case __WEBPACK_IMPORTED_MODULE_0__utils_keys__
["a" /* default */].END:
1799 method
= this.ws_
.goToSlide
;
1800 argument
= this.ws_
.maxSlide_
- 1;
1802 case __WEBPACK_IMPORTED_MODULE_0__utils_keys__
["a" /* default */].DOWN:
1803 method
= this.ws_
.isVertical
? this.ws_
.goNext : null;
1805 case __WEBPACK_IMPORTED_MODULE_0__utils_keys__
["a" /* default */].UP:
1806 method
= this.ws_
.isVertical
? this.ws_
.goPrev : null;
1808 case __WEBPACK_IMPORTED_MODULE_0__utils_keys__
["a" /* default */].LEFT:
1809 method
= !this.ws_
.isVertical
? this.ws_
.goPrev : null;
1811 case __WEBPACK_IMPORTED_MODULE_0__utils_keys__
["a" /* default */].RIGHT:
1812 method
= !this.ws_
.isVertical
? this.ws_
.goNext : null;
1814 case __WEBPACK_IMPORTED_MODULE_0__utils_keys__
["a" /* default */].F:
1815 if (!event
.metaKey
&& !event
.ctrlKey
) {
1816 method
= this.ws_
.fullscreen
;
1823 method
.call(this.ws_
, argument
);
1824 // Prevents Firefox key events.
1825 event
.preventDefault();
1833 /* harmony default export */ __webpack_exports__
["a"] = (Keyboard
);
1837 /***/ (function(module
, __webpack_exports__
, __webpack_require__
) {
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
; }; }();
1843 function _classCallCheck(instance
, Constructor
) { if (!(instance
instanceof Constructor
)) { throw new TypeError("Cannot call a class as a function"); } }
1866 * Navigation plugin.
1869 var Navigation = function () {
1871 * @param {WebSlides} wsInstance The WebSlides instance
1874 function Navigation(wsInstance
) {
1875 _classCallCheck(this, Navigation
);
1877 var arrowLabels
= wsInstance
.isVertical
? LABELS
.VERTICAL : LABELS
.HORIZONTAL
;
1879 * Navigation element.
1882 this.el
= __WEBPACK_IMPORTED_MODULE_0__utils_dom__
["a" /* default */].createNode('div', 'navigation');
1887 this.next
= Navigation
.createArrow(ELEMENT_ID
.NEXT
, arrowLabels
.NEXT
);
1892 this.prev
= Navigation
.createArrow(ELEMENT_ID
.PREV
, arrowLabels
.PREV
);
1897 this.counter
= Navigation
.createCounter(ELEMENT_ID
.COUNTER
, wsInstance
);
1902 this.ws_
= wsInstance
;
1904 this.el
.appendChild(this.next
);
1905 this.el
.appendChild(this.prev
);
1906 this.el
.appendChild(this.counter
);
1908 this.ws_
.el
.appendChild(this.el
);
1913 * Bind all events for the navigation.
1918 _createClass(Navigation
, [{
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));
1928 * Updates the counter inside the navigation.
1929 * @param {string|number} current Current slide number.
1930 * @param {string|number} max Max slide number.
1934 key: 'updateCounter',
1935 value: function updateCounter(current
, max
) {
1936 if (this.ws_
.options
.showIndex
) {
1937 this.counter
.childNodes
[0].textContent
= current
+ ' / ' + max
;
1939 this.counter
.textContent
= current
+ ' / ' + max
;
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.
1951 key: 'onSlideChanged_',
1955 * Slide Change event handler. Will update the text on the navigation.
1956 * @param {CustomEvent} event
1959 value: function onSlideChanged_(event
) {
1960 this.updateCounter(event
.detail
.currentSlide
, event
.detail
.slides
);
1964 * Handles clicks on the next/prev buttons.
1965 * @param {MouseEvent} event
1970 key: 'onButtonClicked_',
1971 value: function onButtonClicked_(event
) {
1972 event
.preventDefault();
1973 if (event
.target
=== this.next
) {
1975 } else if (event
.target
=== this.prev
) {
1978 this.ws_
.toggleZoom();
1983 value: function createArrow(id
, text
) {
1984 var arrow
= __WEBPACK_IMPORTED_MODULE_0__utils_dom__
["a" /* default */].createNode('a', id
, text
);
1986 arrow
.title
= 'Arrow Keys';
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.
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');
2005 link
.title
= 'View all slides';
2006 counter
.appendChild(link
);
2016 /* harmony default export */ __webpack_exports__
["a"] = (Navigation
);
2020 /***/ (function(module
, __webpack_exports__
, __webpack_require__
) {
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
; }; }();
2026 function _classCallCheck(instance
, Constructor
) { if (!(instance
instanceof Constructor
)) { throw new TypeError("Cannot call a class as a function"); } }
2034 var Scroll = function () {
2036 * @param {WebSlides} wsInstance The WebSlides instance
2039 function Scroll(wsInstance
) {
2040 _classCallCheck(this, Scroll
);
2046 this.ws_
= wsInstance
;
2048 * Where the scroll is going to happen. The WebSlides element.
2052 this.scrollContainer_
= wsInstance
.el
;
2054 * Whether movement is happening up or down.
2058 this.isGoingUp_
= false;
2060 * Whether movement is happening left or right.
2064 this.isGoingLeft_
= false;
2066 * Timeout id holder.
2070 this.timeout_
= null;
2072 // Disabling from option
2073 if (!this.ws_
.options
.navigateOnScroll
) {
2077 if (!__WEBPACK_IMPORTED_MODULE_0__utils_mobile_detector__
["a" /* default */].isAny()) {
2078 this.scrollContainer_
.addEventListener('wheel', this.onMouseWheel_
.bind(this));
2080 if (!wsInstance
.isVertical
) {
2081 wsInstance
.el
.addEventListener('ws:slide-change', this.onSlideChange_
.bind(this));
2087 * When the slides change, set an inner timeout to avoid prematurely
2088 * changing to the next slide again.
2093 _createClass(Scroll
, [{
2094 key: 'onSlideChange_',
2095 value: function onSlideChange_() {
2098 this.timeout_
= setTimeout(function () {
2099 _this
.timeout_
= null;
2100 }, this.ws_
.options
.scrollWait
);
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.
2111 key: 'onMouseWheel_',
2112 value: function onMouseWheel_(event
) {
2113 if (this.ws_
.isDisabled()) {
2117 if (this.ws_
.isMoving
|| this.timeout_
) {
2118 event
.preventDefault();
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
;
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;
2132 // If we're mainly moving horizontally, prevent default
2133 if (isHorizontalMovement
) {
2135 event
.preventDefault();
2137 // If we're moving horizontally but this is vertical, return to avoid
2138 // unwanted navigation.
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_
) {
2150 event
.preventDefault();
2158 /* harmony default export */ __webpack_exports__
["a"] = (Scroll
);
2162 /***/ (function(module
, __webpack_exports__
, __webpack_require__
) {
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
; }; }();
2168 function _classCallCheck(instance
, Constructor
) { if (!(instance
instanceof Constructor
)) { throw new TypeError("Cannot call a class as a function"); } }
2174 START: 'touchstart',
2179 START: 'pointerdown',
2180 MOVE: 'pointermove',
2189 var Touch = function () {
2191 * @param {WebSlides} wsInstance The WebSlides instance
2194 function Touch(wsInstance
) {
2195 _classCallCheck(this, Touch
);
2201 this.ws_
= wsInstance
;
2204 * Start position for the X coordinate.
2211 * Start position for the Y coordinate.
2218 * Start position for the X coord.
2225 * Start position for the Y coord.
2232 * Whether is enabled or not. Only enabled for touch devices.
2236 this.isEnabled
= false;
2239 * Whether is a gesture or not.
2243 this.isGesture
= false;
2246 * Stores start touch event (x, y).
2250 this.startTouches
= [];
2253 * Stores end touch event (x, y).
2257 this.endTouches
= [];
2259 var events
= void 0;
2261 if (__WEBPACK_IMPORTED_MODULE_0__utils_mobile_detector__
["a" /* default */].isAny()) {
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
;
2266 events
= EVENTS
.touch
;
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);
2277 * Start touch handler. Saves starting points.
2278 * @param {Event} event The Touch event.
2283 _createClass(Touch
, [{
2285 value: function onStart_(event
) {
2286 if (this.ws_
.isDisabled()) {
2290 var info
= Touch
.normalizeEventInfo(event
);
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;
2305 * Move touch handler. Saves end points.
2306 * @param {Event} event The Touch event.
2312 value: function onMove_(event
) {
2313 if (this.ws_
.isDisabled()) {
2317 var info
= Touch
.normalizeEventInfo(event
);
2319 if (this.isGesture
) {
2320 this.endTouches
= Touch
.getTouchCoordinates(event
);
2322 this.endX_
= info
.x
;
2323 this.endY_
= info
.y
;
2328 * Stop touch handler. Checks if it needs to make any actions.
2334 value: function onStop_() {
2335 if (this.ws_
.isDisabled()) {
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
) {
2344 this.ws_
.toggleZoom();
2346 this.isGesture
= false;
2348 var diffX
= this.startX_
- this.endX_
;
2349 var diffY
= this.startY_
- this.endY_
;
2351 // It's an horizontal drag
2352 if (Math
.abs(diffX
) > Math
.abs(diffY
)) {
2353 if (diffX
< -this.ws_
.options
.slideOffset
) {
2355 } else if (diffX
> this.ws_
.options
.slideOffset
) {
2363 * Get X,Y coordinates from touch pointers.
2364 * @param {Event} event
2369 key: 'getTouchCoordinates',
2370 value: function getTouchCoordinates(event
) {
2372 x: event
.touches
[0].clientX
,
2373 y: event
.touches
[0].clientY
2375 x: event
.touches
[1].clientX
,
2376 y: event
.touches
[1].clientY
2381 * Normalizes an event to deal with differences between PointerEvent and
2383 * @param {Event} event
2384 * @return {Object} Normalised touch points.
2388 key: 'normalizeEventInfo',
2389 value: function normalizeEventInfo(event
) {
2390 var touchEvent
= { pageX: 0, pageY: 0 };
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];
2398 var x
= event
.offsetX
|| event
.layerX
|| touchEvent
.pageX
;
2399 var y
= event
.offsetY
|| event
.layerY
|| touchEvent
.pageY
;
2401 return { x: x
, y: y
};
2408 /* harmony default export */ __webpack_exports__
["a"] = (Touch
);
2412 /***/ (function(module
, __webpack_exports__
, __webpack_require__
) {
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
; }; }();
2419 function _classCallCheck(instance
, Constructor
) { if (!(instance
instanceof Constructor
)) { throw new TypeError("Cannot call a class as a function"); } }
2425 * Video plugin. Video plugin that allows to autoplay videos once the slide gets
2429 var Video = function () {
2431 * @param {WebSlides} wsInstance The WebSlides instance.
2434 function Video(wsInstance
) {
2435 _classCallCheck(this, Video
);
2441 this.ws_
= wsInstance
;
2443 var videos
= __WEBPACK_IMPORTED_MODULE_0__utils_dom__
["a" /* default */].toArray(this.ws_
.el
.querySelectorAll('video'));
2445 if (videos
.length
) {
2446 videos
.forEach(function (video
) {
2447 if (!video
.hasAttribute('autoplay')) {
2451 video
.removeAttribute('autoplay');
2453 video
.currentTime
= 0;
2455 var _Slide
$getSectionFrom
= __WEBPACK_IMPORTED_MODULE_1__modules_slide__
["b" /* default */].getSectionFromEl(video
),
2456 i
= _Slide
$getSectionFrom
.i
;
2458 var slide
= wsInstance
.slides
[i
- 1];
2460 slide
.video
= video
;
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
);
2469 * On Section enable hook. Will play the video.
2470 * @param {CustomEvent} event
2474 _createClass(Video
, null, [{
2475 key: 'onSectionEnabled',
2476 value: function onSectionEnabled(event
) {
2477 event
.detail
.slide
.video
.play();
2481 * On Section enable hook. Will pause the video.
2482 * @param {CustomEvent} event
2486 key: 'onSectionDisabled',
2487 value: function onSectionDisabled(event
) {
2488 event
.detail
.slide
.video
.pause();
2495 /* harmony default export */ __webpack_exports__
["a"] = (Video
);
2499 /***/ (function(module
, __webpack_exports__
, __webpack_require__
) {
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
; }; }();
2506 function _classCallCheck(instance
, Constructor
) { if (!(instance
instanceof Constructor
)) { throw new TypeError("Cannot call a class as a function"); } }
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.
2517 var Player = function () {
2519 * @param {Element} el
2521 function Player(el
) {
2522 _classCallCheck(this, Player
);
2525 * Whether the Player is ready or not.
2533 this.onReadyCb
= null;
2535 * Slide element in which the video is located.
2538 this.slide
= __WEBPACK_IMPORTED_MODULE_1__modules_slide__
["b" /* default */].getSectionFromEl(el
).section
;
2540 * Whether it should autoplay on load or not.
2543 this.autoplay
= typeof el
.dataset
.autoplay
!== 'undefined';
2545 * Whether the video should be muted or not.
2548 this.isMuted
= typeof el
.dataset
.mute
!== 'undefined';
2551 * Options with which the player is created.
2555 videoId: el
.dataset
.youtubeId
,
2556 playerVars: this.getPlayerVars(el
),
2558 onReady: this.onPlayerReady
.bind(this)
2563 * The iframe in which the video is loaded.
2571 this.timeout
= null;
2577 * Destroys the iframe. Saves the current time in case it gets restored.
2581 _createClass(Player
, [{
2583 value: function destroy() {
2584 this.currentTime
= this.player
.getCurrentTime();
2585 this.player
.destroy();
2587 this.el
= this.slide
.querySelector('[data-youtube]');
2592 * Creates the player.
2597 value: function create() {
2598 this.player
= new YT
.Player(this.el
, this.options
);
2599 this.el
= this.player
.getIframe();
2603 * Player ready callback. Will play the video if it was intended to be played
2604 * and will also call any pending callbacks.
2608 key: 'onPlayerReady',
2609 value: function onPlayerReady() {
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;
2619 if (this.timeout
&& this.player
.getPlayerState() !== 1) {
2623 if (this.onReadyCb
) {
2625 this.onReadyCb
= null;
2635 value: function play() {
2639 this.timeout
= setTimeout(function () {
2640 _this
.timeout
= null;
2646 this.player
.unMute();
2649 this.player
.playVideo();
2651 this.onReadyCb
= this.play
;
2656 * Pause playing the video if it's already playing.
2661 value: function pause() {
2662 if (this.player
&& this.player
.pauseVideo
&& this.player
.getPlayerState() === 1) {
2663 this.player
.pauseVideo();
2668 * Parses the element to have the proper variables.
2669 * @param {Element} element
2670 * @return {Object} Player variables.
2674 key: 'getPlayerVars',
2675 value: function getPlayerVars(element
) {
2679 origin: window
.location
.origin
2682 if (this.slide
.classList
.contains('fullscreen')) {
2683 // Disabling keyboard interaction for fullscreenvideos
2687 if (typeof element
.dataset
.noControls
!== 'undefined') {
2692 if (typeof element
.dataset
.loop
!== 'undefined') {
2694 vars
.playlist
= element
.dataset
.youtubeId
;
2709 var YouTube = function () {
2711 * Grid plugin that shows a grid on top of the WebSlides for easy prototyping.
2712 * @param {WebSlides} wsInstance The WebSlides instance
2714 function YouTube(wsInstance
) {
2715 _classCallCheck(this, YouTube
);
2721 this.ws_
= wsInstance
;
2723 this.videos
= __WEBPACK_IMPORTED_MODULE_0__utils_dom__
["a" /* default */].toArray(this.ws_
.el
.querySelectorAll('[data-youtube]'));
2725 if (this.videos
.length
) {
2731 * Once the YouTube API is ready this gets called so we can start the videos.
2735 _createClass(YouTube
, [{
2737 value: function onYTReady() {
2740 this.videos
.forEach(function (video
) {
2741 var player
= new Player(video
);
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
;
2747 var slide
= _this2
.ws_
.slides
[i
- 1];
2749 slide
.player
= player
;
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
);
2756 if (_this2
.ws_
.currentSlide_
=== slide
) {
2757 YouTube
.onSectionEnabled(slide
);
2764 * Injects the YouTube iFrame API into the page.
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
);
2778 * Reacts to any event on the slide.
2779 * @param {CustomEvent} event
2783 key: 'onSlideEvent',
2784 value: function onSlideEvent(event
) {
2785 var slide
= event
.detail
.slide
;
2787 switch (event
.type
) {
2788 case __WEBPACK_IMPORTED_MODULE_1__modules_slide__
["a" /* Events */].ENABLE:
2789 YouTube
.onSectionEnabled(slide
);
2791 case __WEBPACK_IMPORTED_MODULE_1__modules_slide__
["a" /* Events */].DISABLE:
2792 YouTube
.onSectionDisabled(slide
);
2794 case __WEBPACK_IMPORTED_MODULE_1__modules_slide__
["a" /* Events */].LEAVE:
2795 slide
.player
.destroy();
2797 case __WEBPACK_IMPORTED_MODULE_1__modules_slide__
["a" /* Events */].ENTER:
2798 slide
.player
.create();
2804 * On Section enable hook. Will play the video.
2805 * @param {Slide} slide
2809 key: 'onSectionEnabled',
2810 value: function onSectionEnabled(slide
) {
2811 if (slide
.player
.autoplay
) {
2812 slide
.player
.play();
2817 * On Section enable hook. Will pause the video.
2818 * @param {Slide} slide
2822 key: 'onSectionDisabled',
2823 value: function onSectionDisabled(slide
) {
2824 slide
.player
.pause();
2831 /* harmony default export */ __webpack_exports__
["a"] = (YouTube
);
2835 /***/ (function(module
, __webpack_exports__
, __webpack_require__
) {
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
; }; }();
2844 function _classCallCheck(instance
, Constructor
) { if (!(instance
instanceof Constructor
)) { throw new TypeError("Cannot call a class as a function"); } }
2855 WRAP_CONTAINER: 'wrap',
2858 ZOOM_ENABLED: 'ws-ready-zoom'
2861 var ID
= 'webslides-zoomed';
2867 var Zoom = function () {
2869 * @param {WebSlides} wsInstance The WebSlides instance
2872 function Zoom(wsInstance
) {
2873 _classCallCheck(this, Zoom
);
2879 this.ws_
= wsInstance
;
2891 this.isZoomed_
= false;
2893 this.preBuildZoom_();
2894 document
.body
.addEventListener('keydown', this.onKeyDown
.bind(this));
2898 * On key down handler. Will decide if Zoom in or out
2899 * @param {Event} event Key down event.
2903 _createClass(Zoom
, [{
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
;
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
)) {
2918 * Prepare zoom structure, scales the slides and uses a grid layout
2923 key: 'preBuildZoom_',
2924 value: function preBuildZoom_() {
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
);
2937 this.zws_
.el
.addEventListener('click', function () {
2938 return _this
.toggleZoom();
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
);
2949 __WEBPACK_IMPORTED_MODULE_0__utils_dom__
["a" /* default */].after(this.zws_
.el
, this.ws_
.el
);
2951 // Creates the container for each slide
2952 this.zws_
.slides
.forEach(function (elem
) {
2953 return _this
.createSlideBlock_(elem
);
2958 * Creates a block structure around the slide.
2959 * @param {Element} elem slide element.
2963 key: 'createSlideBlock_',
2964 value: function createSlideBlock_(elem
) {
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'));
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
;
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();
2982 _this2
.ws_
.goToSlide(elem
.i
);
2984 wrap
.appendChild(divLayer
);
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
);
2998 value: function toggleZoom() {
2999 if (this.isZoomed_
) {
3007 * Zoom In the slider, scales the slides and uses a grid layout to show them.
3012 value: function zoomIn() {
3015 if (!this.ws_
.options
.showIndex
) return;
3017 var currentId
= this.ws_
.currentSlide_
.el
.id
;
3018 var zoomedCurrent
= this.zws_
.el
.querySelector('.' + CLASSES
.WRAP
+ '.' + CLASSES
.CURRENT
);
3020 if (zoomedCurrent
) {
3021 zoomedCurrent
.classList
.remove(CLASSES
.CURRENT
);
3024 var actualCurrent
= this.zws_
.el
.querySelector('#zoomed-' + currentId
);
3025 actualCurrent
.classList
.add(CLASSES
.CURRENT
);
3027 this.isZoomed_
= true;
3028 document
.documentElement
.classList
.add(CLASSES
.ZOOM_ENABLED
);
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
;
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
);
3041 * Zoom Out the slider, remove scale from the slides.
3046 value: function zoomOut() {
3049 if (!this.ws_
.options
.showIndex
) return;
3050 this.zws_
.el
.classList
.remove('in');
3052 setTimeout(function () {
3053 _this4
.ws_
.enable();
3055 _this4
.isZoomed_
= false;
3056 document
.documentElement
.classList
.remove(CLASSES
.ZOOM_ENABLED
);
3061 * Hides the zoom container
3066 value: function disable() {
3067 this.zws_
.el
.classList
.add('disabled');
3071 * Shows the zoom container
3076 value: function enable() {
3077 this.zws_
.el
.classList
.remove('disabled');
3084 /* harmony default export */ __webpack_exports__
["a"] = (Zoom
);
3088 /***/ (function(module
, __webpack_exports__
, __webpack_require__
) {
3092 * Swing easing function.
3093 * @param {number} p The percentage of time that has passed.
3097 return 0.5 - Math
.cos(p
* Math
.PI
) / 2;
3100 /* harmony default export */ __webpack_exports__
["a"] = ({ swing: swing
});
3104 /***/ (function(module
, exports
) {
3106 // removed by extract-text-webpack-plugin