Completed
Push — master ( 8beccd...205b41 )
by Megh
03:38
created

webslides.js ➔ ... ➔ WebSlides   C

Complexity

Conditions 12
Paths 1

Size

Total Lines 97

Duplication

Lines 0
Ratio 0 %

Importance

Changes 1
Bugs 0 Features 0
Metric Value
cc 12
c 1
b 0
f 0
nc 1
nop 0
dl 0
loc 97
rs 5.034

How to fix   Long Method    Complexity   

Long Method

Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.

For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.

Commonly applied refactorings include:

Complexity

Complex classes like webslides.js ➔ ... ➔ WebSlides often do a lot of different things. To break such a class down, we need to identify a cohesive component within that class. A common approach to find such a component is to look for fields/methods that share the same prefixes, or suffixes.

Once you have determined the fields that belong together, you can apply the Extract Class refactoring. If the component makes sense as a sub-class, Extract Subclass is also a candidate, and is often faster.

1
/*!
2
 * Name: WebSlides
3
 * Version: 1.4.1
4
 * Date: 2017-08-18
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; }; }();
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
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
0 ignored issues
show
Documentation introduced by
The parameter id does not exist. Did you maybe forget to remove this comment?
Loading history...
105
     * empty string.
106
     * @param {string} text The desired text to go inside of the element. It
0 ignored issues
show
Documentation introduced by
The parameter text does not exist. Did you maybe forget to remove this comment?
Loading history...
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) {
0 ignored issues
show
Comprehensibility Naming Best Practice introduced by
The variable cb already seems to be declared on line 136. Consider using another variable name or omitting the var keyword.

This check looks for variables that are declared in multiple lines. There may be several reasons for this.

In the simplest case the variable name was reused by mistake. This may lead to very hard to locate bugs.

If you want to reuse a variable for another purpose, consider declaring it at or near the top of your function and just assigning to it subsequently so it is always declared.

Loading history...
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++) {
0 ignored issues
show
Bug introduced by
The variable transitionEvent is changed as part of the for loop for example by transitions.transitionName on line 174. Only the value of the last iteration will be visible in this function if it is called after the loop.
Loading history...
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; }; }();
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
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__) {
0 ignored issues
show
Unused Code introduced by
The parameter __webpack_require__ is not used and could be removed.

This check looks for parameters in functions that are not used in the function body and are not followed by other parameters which are used inside the function.

Loading history...
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__) {
0 ignored issues
show
Unused Code introduced by
The parameter __webpack_require__ is not used and could be removed.

This check looks for parameters in functions that are not used in the function body and are not followed by other parameters which are used inside the function.

Loading history...
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; }; }();
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
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.
0 ignored issues
show
Documentation introduced by
The parameter duration does not exist. Did you maybe forget to remove this comment?
Loading history...
698
 * @param {function} cb Callback function to call upon completion.
0 ignored issues
show
Documentation introduced by
The parameter cb does not exist. Did you maybe forget to remove this comment?
Loading history...
699
 * @param {HTMLElement} container The HTML element where to scroll
0 ignored issues
show
Documentation introduced by
The parameter container does not exist. Did you maybe forget to remove this comment?
Loading history...
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) {
0 ignored issues
show
Comprehensibility Naming Best Practice introduced by
The variable animateScroll already seems to be declared on line 718. Consider using another variable name or omitting the var keyword.

This check looks for variables that are declared in multiple lines. There may be several reasons for this.

In the simplest case the variable name was reused by mistake. This may lead to very hard to locate bugs.

If you want to reuse a variable for another purpose, consider declaring it at or near the top of your function and just assigning to it subsequently so it is always declared.

Loading history...
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; }; }();
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
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
0 ignored issues
show
Documentation introduced by
The parameter autoslide does not exist. Did you maybe forget to remove this comment?
Loading history...
796
   * autosliding by said amount of milliseconds.
797
   * @param {boolean} changeOnClick If true, it will allow
0 ignored issues
show
Documentation introduced by
The parameter changeOnClick does not exist. Did you maybe forget to remove this comment?
Loading history...
798
   * clicking on any place to change the slide.
799
   * @param {boolean} loop Whether to go to first slide from last one or not.
0 ignored issues
show
Documentation introduced by
The parameter loop does not exist. Did you maybe forget to remove this comment?
Loading history...
800
   * @param {number} minWheelDelta Controls the amount of needed scroll to
0 ignored issues
show
Documentation introduced by
The parameter minWheelDelta does not exist. Did you maybe forget to remove this comment?
Loading history...
801
   * trigger navigation.
802
   * @param {boolean} navigateOnScroll Whether scroll can trigger navigation or
0 ignored issues
show
Documentation introduced by
The parameter navigateOnScroll does not exist. Did you maybe forget to remove this comment?
Loading history...
803
   * not.
804
   * @param {number} scrollWait Controls the amount of time to wait till
0 ignored issues
show
Documentation introduced by
The parameter scrollWait does not exist. Did you maybe forget to remove this comment?
Loading history...
805
   * navigation can occur again with scroll.
806
   * @param {number} slideOffset Controls the amount of needed touch delta to
0 ignored issues
show
Documentation introduced by
The parameter slideOffset does not exist. Did you maybe forget to remove this comment?
Loading history...
807
   * trigger navigation.
808
   * @param {boolean} showIndex Controls if the index can be shown.
0 ignored issues
show
Documentation introduced by
The parameter showIndex does not exist. Did you maybe forget to remove this comment?
Loading history...
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; }; }();
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
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__) {
0 ignored issues
show
Unused Code introduced by
The parameter __webpack_require__ is not used and could be removed.

This check looks for parameters in functions that are not used in the function body and are not followed by other parameters which are used inside the function.

Loading history...
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) {}
0 ignored issues
show
Coding Style Comprehensibility Best Practice introduced by
Empty catch clauses should be used with caution; consider adding a comment why this is needed.
Loading history...
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__) {
0 ignored issues
show
Unused Code introduced by
The parameter __webpack_require__ is not used and could be removed.

This check looks for parameters in functions that are not used in the function body and are not followed by other parameters which are used inside the function.

Loading history...
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; }; }();
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
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; }; }();
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
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__) {
0 ignored issues
show
Unused Code introduced by
The parameter __webpack_require__ is not used and could be removed.

This check looks for parameters in functions that are not used in the function body and are not followed by other parameters which are used inside the function.

Loading history...
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; }; }();
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
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({
0 ignored issues
show
Bug introduced by
The variable history seems to be never declared. If this is a global, consider adding a /** global: history */ comment.

This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.

To learn more about declaring variables in Javascript, see the MDN.

Loading history...
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);
0 ignored issues
show
Unused Code introduced by
The variable __WEBPACK_IMPORTED_MODULE_0__utils_keys__ seems to be never used. Consider removing it.
Loading history...
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; }; }();
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
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;
0 ignored issues
show
Coding Style introduced by
Consider using undefined instead of void(0). It is equivalent and more straightforward to read.
Loading history...
1774
      var argument = void 0;
0 ignored issues
show
Coding Style introduced by
Consider using undefined instead of void(0). It is equivalent and more straightforward to read.
Loading history...
1775
1776
      if (__WEBPACK_IMPORTED_MODULE_1__utils_dom__["a" /* default */].isFocusableElement() || this.ws_.isDisabled()) {
1777
        return;
1778
      }
1779
1780
      switch (event.which) {
0 ignored issues
show
Coding Style introduced by
As per coding-style, switch statements should have a default case.
Loading history...
1781
        case __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].AV_PAGE:
0 ignored issues
show
Bug introduced by
The variable __WEBPACK_IMPORTED_MODULE_0__utils_keys__ seems to be never declared. If this is a global, consider adding a /** global: __WEBPACK_IM...DULE_0__utils_keys__ */ comment.

This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.

To learn more about declaring variables in Javascript, see the MDN.

Loading history...
1782
        case __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].SPACE:
1783
          method = this.ws_.goNext;
1784
          break;
1785
        case __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].RE_PAGE:
1786
          method = this.ws_.goPrev;
1787
          break;
1788
        case __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].HOME:
1789
          method = this.ws_.goToSlide;
1790
          argument = 0;
1791
          break;
1792
        case __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].END:
1793
          method = this.ws_.goToSlide;
1794
          argument = this.ws_.maxSlide_ - 1;
1795
          break;
1796
        case __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].DOWN:
1797
          method = this.ws_.isVertical ? this.ws_.goNext : null;
1798
          break;
1799
        case __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].UP:
1800
          method = this.ws_.isVertical ? this.ws_.goPrev : null;
1801
          break;
1802
        case __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].LEFT:
1803
          method = !this.ws_.isVertical ? this.ws_.goPrev : null;
1804
          break;
1805
        case __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].RIGHT:
1806
          method = !this.ws_.isVertical ? this.ws_.goNext : null;
1807
          break;
1808
        case __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].F:
1809
          method = this.ws_.fullscreen;
1810
          break;
1811
      }
1812
1813
      if (method) {
1814
        method.call(this.ws_, argument);
1815
        // Prevents Firefox key events.
1816
        event.preventDefault();
1817
      }
1818
    }
1819
  }]);
1820
1821
  return Keyboard;
1822
}();
1823
1824
/* harmony default export */ __webpack_exports__["a"] = (Keyboard);
1825
1826
/***/ }),
1827
/* 14 */
1828
/***/ (function(module, __webpack_exports__, __webpack_require__) {
1829
1830
"use strict";
1831
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_dom__ = __webpack_require__(0);
1832
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; }; }();
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
1833
1834
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
1835
1836
1837
1838
var ELEMENT_ID = {
1839
  NAV: 'navigation',
1840
  NEXT: 'next',
1841
  PREV: 'previous',
1842
  COUNTER: 'counter'
1843
};
1844
1845
var LABELS = {
1846
  VERTICAL: {
1847
    NEXT: '↓',
1848
    PREV: '↑'
1849
  },
1850
  HORIZONTAL: {
1851
    NEXT: '→',
1852
    PREV: '←'
1853
  }
1854
};
1855
1856
/**
1857
 * Navigation plugin.
1858
 */
1859
1860
var Navigation = function () {
1861
  /**
1862
   * @param {WebSlides} wsInstance The WebSlides instance
1863
   * @constructor
1864
   */
1865
  function Navigation(wsInstance) {
1866
    _classCallCheck(this, Navigation);
1867
1868
    var arrowLabels = wsInstance.isVertical ? LABELS.VERTICAL : LABELS.HORIZONTAL;
1869
    /**
1870
     * Navigation element.
1871
     * @type {Element}
1872
     */
1873
    this.el = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].createNode('div', 'navigation');
1874
    /**
1875
     * Next button.
1876
     * @type {Element}
1877
     */
1878
    this.next = Navigation.createArrow(ELEMENT_ID.NEXT, arrowLabels.NEXT);
1879
    /**
1880
     * Prev button.
1881
     * @type {Element}
1882
     */
1883
    this.prev = Navigation.createArrow(ELEMENT_ID.PREV, arrowLabels.PREV);
1884
    /**
1885
     * Counter Element.
1886
     * @type {Element}
1887
     */
1888
    this.counter = Navigation.createCounter(ELEMENT_ID.COUNTER, wsInstance);
1889
    /**
1890
     * @type {WebSlides}
1891
     * @private
1892
     */
1893
    this.ws_ = wsInstance;
1894
1895
    this.el.appendChild(this.next);
1896
    this.el.appendChild(this.prev);
1897
    this.el.appendChild(this.counter);
1898
1899
    this.ws_.el.appendChild(this.el);
1900
    this.bindEvents_();
1901
  }
1902
1903
  /**
1904
   * Bind all events for the navigation.
1905
   * @private
1906
   */
1907
1908
1909
  _createClass(Navigation, [{
1910
    key: 'bindEvents_',
1911
    value: function bindEvents_() {
1912
      this.ws_.el.addEventListener('ws:slide-change', this.onSlideChanged_.bind(this));
1913
      this.next.addEventListener('click', this.onButtonClicked_.bind(this));
1914
      this.prev.addEventListener('click', this.onButtonClicked_.bind(this));
1915
      this.counter.addEventListener('click', this.onButtonClicked_.bind(this));
1916
    }
1917
1918
    /**
1919
     * Updates the counter inside the navigation.
1920
     * @param {string|number} current Current slide number.
1921
     * @param {string|number} max Max slide number.
1922
     */
1923
1924
  }, {
1925
    key: 'updateCounter',
1926
    value: function updateCounter(current, max) {
1927
      if (this.ws_.options.showIndex) {
1928
        this.counter.childNodes[0].textContent = current + ' / ' + max;
1929
      } else {
1930
        this.counter.textContent = current + ' / ' + max;
1931
      }
1932
    }
1933
1934
    /**
1935
     * Creates an arrow to navigate.
1936
     * @param {!String} id Desired ID for the arrow.
1937
     * @param {!String} text Desired text for the arrow.
1938
     * @return {Element} The arrow element.
1939
     */
1940
1941
  }, {
1942
    key: 'onSlideChanged_',
1943
1944
1945
    /**
1946
     * Slide Change event handler. Will update the text on the navigation.
1947
     * @param {CustomEvent} event
1948
     * @private
1949
     */
1950
    value: function onSlideChanged_(event) {
1951
      this.updateCounter(event.detail.currentSlide, event.detail.slides);
1952
    }
1953
1954
    /**
1955
     * Handles clicks on the next/prev buttons.
1956
     * @param {MouseEvent} event
1957
     * @private
1958
     */
1959
1960
  }, {
1961
    key: 'onButtonClicked_',
1962
    value: function onButtonClicked_(event) {
1963
      event.preventDefault();
1964
      if (event.target === this.next) {
1965
        this.ws_.goNext();
1966
      } else if (event.target === this.prev) {
1967
        this.ws_.goPrev();
1968
      } else {
1969
        this.ws_.toggleZoom();
1970
      }
1971
    }
1972
  }], [{
1973
    key: 'createArrow',
1974
    value: function createArrow(id, text) {
1975
      var arrow = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].createNode('a', id, text);
1976
      arrow.href = '#';
1977
      arrow.title = 'Arrow Keys';
1978
1979
      return arrow;
1980
    }
1981
1982
    /**
1983
     * Creates the navigation counter.
1984
     * @param {!String} id Desired ID for the counter.
1985
     * @param {WebSlides} ws_ WebSlides object.
1986
     * @return {Element} The arrow element.
1987
     */
1988
1989
  }, {
1990
    key: 'createCounter',
1991
    value: function createCounter(id, ws_) {
1992
      var counter = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].createNode('span', id);
1993
      if (ws_.options.showIndex) {
1994
        var link = document.createElement('a');
1995
        link.href = '#';
1996
        link.title = 'View all slides';
1997
        counter.appendChild(link);
1998
      }
1999
2000
      return counter;
2001
    }
2002
  }]);
2003
2004
  return Navigation;
2005
}();
2006
2007
/* harmony default export */ __webpack_exports__["a"] = (Navigation);
2008
2009
/***/ }),
2010
/* 15 */
2011
/***/ (function(module, __webpack_exports__, __webpack_require__) {
2012
2013
"use strict";
2014
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_mobile_detector__ = __webpack_require__(3);
2015
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; }; }();
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
2016
2017
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
2018
2019
2020
2021
/**
2022
 * Scroll plugin.
2023
 */
2024
2025
var Scroll = function () {
2026
  /**
2027
   * @param {WebSlides} wsInstance The WebSlides instance
2028
   * @constructor
2029
   */
2030
  function Scroll(wsInstance) {
2031
    _classCallCheck(this, Scroll);
2032
2033
    /**
2034
     * @type {WebSlides}
2035
     * @private
2036
     */
2037
    this.ws_ = wsInstance;
2038
    /**
2039
     * Where the scroll is going to happen. The WebSlides element.
2040
     * @type {Element}
2041
     * @private
2042
     */
2043
    this.scrollContainer_ = wsInstance.el;
2044
    /**
2045
     * Whether movement is happening up or down.
2046
     * @type {boolean}
2047
     * @private
2048
     */
2049
    this.isGoingUp_ = false;
2050
    /**
2051
     * Whether movement is happening left or right.
2052
     * @type {boolean}
2053
     * @private
2054
     */
2055
    this.isGoingLeft_ = false;
2056
    /**
2057
     * Timeout id holder.
2058
     * @type {?number}
2059
     * @private
2060
     */
2061
    this.timeout_ = null;
2062
2063
    // Disabling from option
2064
    if (!this.ws_.options.navigateOnScroll) {
2065
      return;
2066
    }
2067
2068
    if (!__WEBPACK_IMPORTED_MODULE_0__utils_mobile_detector__["a" /* default */].isAny()) {
2069
      this.scrollContainer_.addEventListener('wheel', this.onMouseWheel_.bind(this));
2070
2071
      if (!wsInstance.isVertical) {
2072
        wsInstance.el.addEventListener('ws:slide-change', this.onSlideChange_.bind(this));
2073
      }
2074
    }
2075
  }
2076
2077
  /**
2078
   * When the slides change, set an inner timeout to avoid prematurely
2079
   * changing to the next slide again.
2080
   * @private
2081
   */
2082
2083
2084
  _createClass(Scroll, [{
2085
    key: 'onSlideChange_',
2086
    value: function onSlideChange_() {
2087
      var _this = this;
2088
2089
      this.timeout_ = setTimeout(function () {
2090
        _this.timeout_ = null;
2091
      }, this.ws_.options.scrollWait);
2092
    }
2093
2094
    /**
2095
     * Reacts to the wheel event. Detects whether is going up or down and decides
2096
     * if it needs to move the slide based on the amount of delta.
2097
     * @param {WheelEvent} event The Wheel Event.
2098
     * @private
2099
     */
2100
2101
  }, {
2102
    key: 'onMouseWheel_',
2103
    value: function onMouseWheel_(event) {
2104
      if (this.ws_.isDisabled()) {
2105
        return;
2106
      }
2107
2108
      if (this.ws_.isMoving || this.timeout_) {
2109
        event.preventDefault();
2110
        return;
2111
      }
2112
2113
      // Firefox uses lines instead of pixels for delta
2114
      var linesToPx = event.deltaMode * this.ws_.options.minWheelDelta;
2115
      var wheelDeltaY = event.deltaY,
2116
          wheelDeltaX = event.deltaX;
2117
2118
      var isVertical = this.ws_.isVertical;
2119
      var isHorizontalMovement = Math.abs(wheelDeltaX) > Math.abs(wheelDeltaY);
2120
      this.isGoingUp_ = wheelDeltaY < 0;
2121
      this.isGoingLeft_ = wheelDeltaX < 0;
2122
2123
      // If we're mainly moving horizontally, prevent default
2124
      if (isHorizontalMovement) {
2125
        if (!isVertical) {
2126
          event.preventDefault();
2127
        } else {
2128
          // If we're moving horizontally but this is vertical, return to avoid
2129
          // unwanted navigation.
2130
          return;
2131
        }
2132
      }
2133
2134
      if (Math.abs(wheelDeltaY + linesToPx) >= this.ws_.options.minWheelDelta || Math.abs(wheelDeltaX + linesToPx) >= this.ws_.options.minWheelDelta) {
2135
        if (isHorizontalMovement && this.isGoingLeft_ || !isHorizontalMovement && this.isGoingUp_) {
2136
          this.ws_.goPrev();
2137
        } else {
2138
          this.ws_.goNext();
2139
        }
2140
2141
        event.preventDefault();
2142
      }
2143
    }
2144
  }]);
2145
2146
  return Scroll;
2147
}();
2148
2149
/* harmony default export */ __webpack_exports__["a"] = (Scroll);
2150
2151
/***/ }),
2152
/* 16 */
2153
/***/ (function(module, __webpack_exports__, __webpack_require__) {
2154
2155
"use strict";
2156
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_mobile_detector__ = __webpack_require__(3);
2157
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; }; }();
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
2158
2159
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
2160
2161
2162
2163
var EVENTS = {
2164
  touch: {
2165
    START: 'touchstart',
2166
    MOVE: 'touchmove',
2167
    END: 'touchend'
2168
  },
2169
  pointer: {
2170
    START: 'pointerdown',
2171
    MOVE: 'pointermove',
2172
    END: 'pointerup'
2173
  }
2174
};
2175
2176
/**
2177
 * Touch plugin.
2178
 */
2179
2180
var Touch = function () {
2181
  /**
2182
   * @param {WebSlides} wsInstance The WebSlides instance
2183
   * @constructor
2184
   */
2185
  function Touch(wsInstance) {
2186
    _classCallCheck(this, Touch);
2187
2188
    /**
2189
     * @type {WebSlides}
2190
     * @private
2191
     */
2192
    this.ws_ = wsInstance;
2193
2194
    /**
2195
     * Start position for the X coordinate.
2196
     * @type {number}
2197
     * @private
2198
     */
2199
    this.startX_ = 0;
2200
2201
    /**
2202
     * Start position for the Y coordinate.
2203
     * @type {number}
2204
     * @private
2205
     */
2206
    this.startY_ = 0;
2207
2208
    /**
2209
     * Start position for the X coord.
2210
     * @type {number}
2211
     * @private
2212
     */
2213
    this.endX_ = 0;
2214
2215
    /**
2216
     * Start position for the Y coord.
2217
     * @type {number}
2218
     * @private
2219
     */
2220
    this.endY_ = 0;
2221
2222
    /**
2223
     * Whether is enabled or not. Only enabled for touch devices.
2224
     * @type {boolean}
2225
     * @private
2226
     */
2227
    this.isEnabled = false;
2228
2229
    /**
2230
     * Whether is a gesture or not.
2231
     * @type {boolean}
2232
     * @private
2233
     */
2234
    this.isGesture = false;
2235
2236
    /**
2237
     * Stores start touch event (x, y).
2238
     * @type {array}
2239
     * @private
2240
     */
2241
    this.startTouches = [];
2242
2243
    /**
2244
     * Stores end touch event (x, y).
2245
     * @type {array}
2246
     * @private
2247
     */
2248
    this.endTouches = [];
2249
2250
    var events = void 0;
0 ignored issues
show
Coding Style introduced by
Consider using undefined instead of void(0). It is equivalent and more straightforward to read.
Loading history...
Unused Code introduced by
The assignment to variable events seems to be never used. Consider removing it.
Loading history...
2251
2252
    if (__WEBPACK_IMPORTED_MODULE_0__utils_mobile_detector__["a" /* default */].isAny()) {
2253
      // Likely IE
2254
      if (window.PointerEvent && (__WEBPACK_IMPORTED_MODULE_0__utils_mobile_detector__["a" /* default */].isWindows() || __WEBPACK_IMPORTED_MODULE_0__utils_mobile_detector__["a" /* default */].isWindowsPhone())) {
2255
        events = EVENTS.pointer;
2256
      } else {
2257
        events = EVENTS.touch;
2258
      }
2259
2260
      this.isEnabled = true;
2261
      document.addEventListener(events.START, this.onStart_.bind(this), false);
2262
      document.addEventListener(events.MOVE, this.onMove_.bind(this), false);
2263
      document.addEventListener(events.END, this.onStop_.bind(this), false);
2264
    }
2265
  }
2266
2267
  /**
2268
   * Start touch handler. Saves starting points.
2269
   * @param {Event} event The Touch event.
2270
   * @private
2271
   */
2272
2273
2274
  _createClass(Touch, [{
2275
    key: 'onStart_',
2276
    value: function onStart_(event) {
2277
      if (this.ws_.isDisabled()) {
2278
        return;
2279
      }
2280
2281
      var info = Touch.normalizeEventInfo(event);
2282
2283
      if (event.touches.length === 1) {
2284
        this.startX_ = info.x;
2285
        this.startY_ = info.y;
2286
        this.endX_ = info.x;
2287
        this.endY_ = info.y;
2288
      } else if (event.touches.length > 1) {
2289
        this.startTouches = Touch.getTouchCoordinates(event);
2290
        this.endTouches = this.startTouches;
2291
        this.isGesture = true;
2292
      }
2293
    }
2294
2295
    /**
2296
     * Move touch handler. Saves end points.
2297
     * @param {Event} event The Touch event.
2298
     * @private
2299
     */
2300
2301
  }, {
2302
    key: 'onMove_',
2303
    value: function onMove_(event) {
2304
      if (this.ws_.isDisabled()) {
2305
        return;
2306
      }
2307
2308
      var info = Touch.normalizeEventInfo(event);
2309
2310
      if (this.isGesture) {
2311
        this.endTouches = Touch.getTouchCoordinates(event);
2312
      } else {
2313
        this.endX_ = info.x;
2314
        this.endY_ = info.y;
2315
      }
2316
    }
2317
2318
    /**
2319
     * Stop touch handler. Checks if it needs to make any actions.
2320
     * @private
2321
     */
2322
2323
  }, {
2324
    key: 'onStop_',
2325
    value: function onStop_() {
2326
      if (this.ws_.isDisabled()) {
2327
        return;
2328
      }
2329
2330
      if (this.isGesture) {
2331
        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));
2332
        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));
2333
        if (startDistance > endDistance) {
2334
          // Pinch gesture
2335
          this.ws_.toggleZoom();
2336
        }
2337
        this.isGesture = false;
2338
      } else {
2339
        var diffX = this.startX_ - this.endX_;
2340
        var diffY = this.startY_ - this.endY_;
2341
2342
        // It's an horizontal drag
2343
        if (Math.abs(diffX) > Math.abs(diffY)) {
2344
          if (diffX < -this.ws_.options.slideOffset) {
2345
            this.ws_.goPrev();
2346
          } else if (diffX > this.ws_.options.slideOffset) {
2347
            this.ws_.goNext();
2348
          }
2349
        }
2350
      }
2351
    }
2352
2353
    /**
2354
     * Get X,Y coordinates from touch pointers.
2355
     * @param {Event} event
2356
     * @return {Object}
2357
     */
2358
2359
  }], [{
2360
    key: 'getTouchCoordinates',
2361
    value: function getTouchCoordinates(event) {
2362
      return [{
2363
        x: event.touches[0].clientX,
2364
        y: event.touches[0].clientY
2365
      }, {
2366
        x: event.touches[1].clientX,
2367
        y: event.touches[1].clientY
2368
      }];
2369
    }
2370
2371
    /**
2372
     * Normalizes an event to deal with differences between PointerEvent and
2373
     * TouchEvent.
2374
     * @param {Event} event
2375
     * @return {Object} Normalised touch points.
2376
     */
2377
2378
  }, {
2379
    key: 'normalizeEventInfo',
2380
    value: function normalizeEventInfo(event) {
2381
      var touchEvent = { pageX: 0, pageY: 0 };
2382
2383
      if (typeof event.changedTouches !== 'undefined') {
2384
        touchEvent = event.changedTouches[0];
2385
      } else if (typeof event.originalEvent !== 'undefined' && typeof event.originalEvent.changedTouches !== 'undefined') {
2386
        touchEvent = event.originalEvent.changedTouches[0];
2387
      }
2388
2389
      var x = event.offsetX || event.layerX || touchEvent.pageX;
2390
      var y = event.offsetY || event.layerY || touchEvent.pageY;
2391
2392
      return { x: x, y: y };
2393
    }
2394
  }]);
2395
2396
  return Touch;
2397
}();
2398
2399
/* harmony default export */ __webpack_exports__["a"] = (Touch);
2400
2401
/***/ }),
2402
/* 17 */
2403
/***/ (function(module, __webpack_exports__, __webpack_require__) {
2404
2405
"use strict";
2406
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_dom__ = __webpack_require__(0);
2407
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__modules_slide__ = __webpack_require__(1);
2408
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; }; }();
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
2409
2410
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
2411
2412
2413
2414
2415
/**
2416
 * Video plugin. Video plugin that allows to autoplay videos once the slide gets
2417
 * active.
2418
 */
2419
2420
var Video = function () {
2421
  /**
2422
   * @param {WebSlides} wsInstance The WebSlides instance.
2423
   * @constructor
2424
   */
2425
  function Video(wsInstance) {
2426
    _classCallCheck(this, Video);
2427
2428
    /**
2429
     * @type {WebSlides}
2430
     * @private
2431
     */
2432
    this.ws_ = wsInstance;
2433
2434
    var videos = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].toArray(this.ws_.el.querySelectorAll('video'));
2435
2436
    if (videos.length) {
2437
      videos.forEach(function (video) {
2438
        if (!video.hasAttribute('autoplay')) {
2439
          return;
2440
        }
2441
2442
        video.removeAttribute('autoplay');
2443
        video.pause();
2444
        video.currentTime = 0;
2445
2446
        var _Slide$getSectionFrom = __WEBPACK_IMPORTED_MODULE_1__modules_slide__["b" /* default */].getSectionFromEl(video),
2447
            i = _Slide$getSectionFrom.i;
2448
2449
        var slide = wsInstance.slides[i - 1];
2450
2451
        slide.video = video;
2452
2453
        slide.el.addEventListener(__WEBPACK_IMPORTED_MODULE_1__modules_slide__["a" /* Events */].ENABLE, Video.onSectionEnabled);
2454
        slide.el.addEventListener(__WEBPACK_IMPORTED_MODULE_1__modules_slide__["a" /* Events */].DISABLE, Video.onSectionDisabled);
2455
      });
2456
    }
2457
  }
2458
2459
  /**
2460
   * On Section enable hook. Will play the video.
2461
   * @param {CustomEvent} event
2462
   */
2463
2464
2465
  _createClass(Video, null, [{
2466
    key: 'onSectionEnabled',
2467
    value: function onSectionEnabled(event) {
2468
      event.detail.slide.video.play();
2469
    }
2470
2471
    /**
2472
     * On Section enable hook. Will pause the video.
2473
     * @param {CustomEvent} event
2474
     */
2475
2476
  }, {
2477
    key: 'onSectionDisabled',
2478
    value: function onSectionDisabled(event) {
2479
      event.detail.slide.video.pause();
2480
    }
2481
  }]);
2482
2483
  return Video;
2484
}();
2485
2486
/* harmony default export */ __webpack_exports__["a"] = (Video);
2487
2488
/***/ }),
2489
/* 18 */
2490
/***/ (function(module, __webpack_exports__, __webpack_require__) {
2491
2492
"use strict";
2493
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_dom__ = __webpack_require__(0);
2494
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__modules_slide__ = __webpack_require__(1);
2495
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; }; }();
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
2496
2497
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
2498
2499
/* global YT */
2500
2501
2502
2503
/**
2504
 * Player wrapper around the YT player. This is mostly to get around the event
2505
 * in which we need to play a video which player isn't ready yet.
2506
 */
2507
2508
var Player = function () {
2509
  /**
2510
   * @param {Element} el
2511
   */
2512
  function Player(el) {
2513
    _classCallCheck(this, Player);
2514
2515
    /**
2516
     * Whether the Player is ready or not.
2517
     * @type {boolean}
2518
     */
2519
    this.ready = false;
2520
    /**
2521
     * Ready callback.
2522
     * @type {?function}
2523
     */
2524
    this.onReadyCb = null;
2525
    /**
2526
     * Slide element in which the video is located.
2527
     * @type {Node}
2528
     */
2529
    this.slide = __WEBPACK_IMPORTED_MODULE_1__modules_slide__["b" /* default */].getSectionFromEl(el).section;
2530
    /**
2531
     * Whether it should autoplay on load or not.
2532
     * @type {boolean}
2533
     */
2534
    this.autoplay = typeof el.dataset.autoplay !== 'undefined';
2535
    /**
2536
     * Whether the video should be muted or not.
2537
     * @type {boolean}
2538
     */
2539
    this.isMuted = typeof el.dataset.mute !== 'undefined';
2540
2541
    /**
2542
     * Options with which the player is created.
2543
     * @type {Object}
2544
     */
2545
    this.options = {
2546
      videoId: el.dataset.youtubeId,
2547
      playerVars: this.getPlayerVars(el),
2548
      events: {
2549
        onReady: this.onPlayerReady.bind(this)
2550
      }
2551
    };
2552
2553
    /**
2554
     * The iframe in which the video is loaded.
2555
     * @type {Element}
2556
     */
2557
    this.el = el;
2558
    /**
2559
     * Timeout id.
2560
     * @type {?number}
2561
     */
2562
    this.timeout = null;
2563
2564
    this.create();
2565
  }
2566
2567
  /**
2568
   * Destroys the iframe. Saves the current time in case it gets restored.
2569
   */
2570
2571
2572
  _createClass(Player, [{
2573
    key: 'destroy',
2574
    value: function destroy() {
2575
      this.currentTime = this.player.getCurrentTime();
2576
      this.player.destroy();
2577
      this.player = null;
2578
      this.el = this.slide.querySelector('[data-youtube]');
2579
      this.ready = false;
2580
    }
2581
2582
    /**
2583
     * Creates the player.
2584
     */
2585
2586
  }, {
2587
    key: 'create',
2588
    value: function create() {
2589
      this.player = new YT.Player(this.el, this.options);
2590
      this.el = this.player.getIframe();
2591
    }
2592
2593
    /**
2594
     * Player ready callback. Will play the video if it was intended to be played
2595
     * and will also call any pending callbacks.
2596
     */
2597
2598
  }, {
2599
    key: 'onPlayerReady',
2600
    value: function onPlayerReady() {
2601
      this.ready = true;
2602
2603
      // Restoring the current time if saved
2604
      if (this.currentTime) {
2605
        this.player.seekTo(this.currentTime, true);
2606
        this.player.pauseVideo();
2607
        this.currentTime = null;
2608
      }
2609
2610
      if (this.timeout && this.player.getPlayerState() !== 1) {
2611
        this.play();
2612
      }
2613
2614
      if (this.onReadyCb) {
2615
        this.onReadyCb();
2616
        this.onReadyCb = null;
2617
      }
2618
    }
2619
2620
    /**
2621
     * Plays the video.
2622
     */
2623
2624
  }, {
2625
    key: 'play',
2626
    value: function play() {
2627
      var _this = this;
2628
2629
      if (this.ready) {
2630
        this.timeout = setTimeout(function () {
2631
          _this.timeout = null;
2632
        }, 1000);
2633
2634
        if (this.isMuted) {
2635
          this.player.mute();
2636
        } else {
2637
          this.player.unMute();
2638
        }
2639
2640
        this.player.playVideo();
2641
      } else {
2642
        this.onReadyCb = this.play;
2643
      }
2644
    }
2645
2646
    /**
2647
     * Pause playing the video if it's already playing.
2648
     */
2649
2650
  }, {
2651
    key: 'pause',
2652
    value: function pause() {
2653
      if (this.player && this.player.pauseVideo && this.player.getPlayerState() === 1) {
2654
        this.player.pauseVideo();
2655
      }
2656
    }
2657
2658
    /**
2659
     * Parses the element to have the proper variables.
2660
     * @param {Element} element
2661
     * @return {Object} Player variables.
2662
     */
2663
2664
  }, {
2665
    key: 'getPlayerVars',
2666
    value: function getPlayerVars(element) {
2667
      var vars = {
2668
        modestbranding: 1,
2669
        rel: 0,
2670
        origin: window.location.origin
2671
      };
2672
2673
      if (this.slide.classList.contains('fullscreen')) {
2674
        // Disabling keyboard interaction for fullscreenvideos
2675
        vars.disablekb = 1;
2676
      }
2677
2678
      if (typeof element.dataset.noControls !== 'undefined') {
2679
        vars.controls = 0;
2680
        vars.showinfo = 0;
2681
      }
2682
2683
      if (typeof element.dataset.loop !== 'undefined') {
2684
        vars.loop = 1;
2685
        vars.playlist = element.dataset.youtubeId;
2686
      }
2687
2688
      return vars;
2689
    }
2690
  }]);
2691
2692
  return Player;
2693
}();
2694
2695
/**
2696
 * Video plugin.
2697
 */
2698
2699
2700
var YouTube = function () {
2701
  /**
2702
   * Grid plugin that shows a grid on top of the WebSlides for easy prototyping.
2703
   * @param {WebSlides} wsInstance The WebSlides instance
2704
   */
2705
  function YouTube(wsInstance) {
2706
    _classCallCheck(this, YouTube);
2707
2708
    /**
2709
     * @type {WebSlides}
2710
     * @private
2711
     */
2712
    this.ws_ = wsInstance;
2713
2714
    this.videos = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].toArray(this.ws_.el.querySelectorAll('[data-youtube]'));
2715
2716
    if (this.videos.length) {
2717
      this.inject();
2718
    }
2719
  }
2720
2721
  /**
2722
   * Once the YouTube API is ready this gets called so we can start the videos.
2723
   */
2724
2725
2726
  _createClass(YouTube, [{
2727
    key: 'onYTReady',
2728
    value: function onYTReady() {
2729
      var _this2 = this;
2730
2731
      this.videos.forEach(function (video) {
2732
        var player = new Player(video);
2733
2734
        if (typeof video.dataset.autoplay !== 'undefined') {
2735
          var _Slide$getSectionFrom = __WEBPACK_IMPORTED_MODULE_1__modules_slide__["b" /* default */].getSectionFromEl(player.el),
2736
              i = _Slide$getSectionFrom.i;
2737
2738
          var slide = _this2.ws_.slides[i - 1];
2739
2740
          slide.player = player;
2741
2742
          slide.el.addEventListener(__WEBPACK_IMPORTED_MODULE_1__modules_slide__["a" /* Events */].ENABLE, YouTube.onSlideEvent);
2743
          slide.el.addEventListener(__WEBPACK_IMPORTED_MODULE_1__modules_slide__["a" /* Events */].DISABLE, YouTube.onSlideEvent);
2744
          slide.el.addEventListener(__WEBPACK_IMPORTED_MODULE_1__modules_slide__["a" /* Events */].ENTER, YouTube.onSlideEvent);
2745
          slide.el.addEventListener(__WEBPACK_IMPORTED_MODULE_1__modules_slide__["a" /* Events */].LEAVE, YouTube.onSlideEvent);
2746
2747
          if (_this2.ws_.currentSlide_ === slide) {
2748
            YouTube.onSectionEnabled(slide);
2749
          }
2750
        }
2751
      });
2752
    }
2753
2754
    /**
2755
     * Injects the YouTube iFrame API into the page.
2756
     */
2757
2758
  }, {
2759
    key: 'inject',
2760
    value: function inject() {
2761
      window.onYouTubeIframeAPIReady = this.onYTReady.bind(this);
2762
      var tag = document.createElement('script');
2763
      tag.src = 'https://www.youtube.com/iframe_api';
2764
      var firstScriptTag = document.getElementsByTagName('script')[0];
2765
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
2766
    }
2767
2768
    /**
2769
     * Reacts to any event on the slide.
2770
     * @param {CustomEvent} event
2771
     */
2772
2773
  }], [{
2774
    key: 'onSlideEvent',
2775
    value: function onSlideEvent(event) {
2776
      var slide = event.detail.slide;
2777
2778
      switch (event.type) {
0 ignored issues
show
Coding Style introduced by
As per coding-style, switch statements should have a default case.
Loading history...
2779
        case __WEBPACK_IMPORTED_MODULE_1__modules_slide__["a" /* Events */].ENABLE:
0 ignored issues
show
Bug introduced by
The variable __WEBPACK_IMPORTED_MODULE_1__modules_slide__ seems to be never declared. If this is a global, consider adding a /** global: __WEBPACK_IM...E_1__modules_slide__ */ comment.

This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.

To learn more about declaring variables in Javascript, see the MDN.

Loading history...
2780
          YouTube.onSectionEnabled(slide);
2781
          break;
2782
        case __WEBPACK_IMPORTED_MODULE_1__modules_slide__["a" /* Events */].DISABLE:
2783
          YouTube.onSectionDisabled(slide);
2784
          break;
2785
        case __WEBPACK_IMPORTED_MODULE_1__modules_slide__["a" /* Events */].LEAVE:
2786
          slide.player.destroy();
2787
          break;
2788
        case __WEBPACK_IMPORTED_MODULE_1__modules_slide__["a" /* Events */].ENTER:
2789
          slide.player.create();
2790
          break;
2791
      }
2792
    }
2793
2794
    /**
2795
     * On Section enable hook. Will play the video.
2796
     * @param {Slide} slide
2797
     */
2798
2799
  }, {
2800
    key: 'onSectionEnabled',
2801
    value: function onSectionEnabled(slide) {
2802
      if (slide.player.autoplay) {
2803
        slide.player.play();
2804
      }
2805
    }
2806
2807
    /**
2808
     * On Section enable hook. Will pause the video.
2809
     * @param {Slide} slide
2810
     */
2811
2812
  }, {
2813
    key: 'onSectionDisabled',
2814
    value: function onSectionDisabled(slide) {
2815
      slide.player.pause();
2816
    }
2817
  }]);
2818
2819
  return YouTube;
2820
}();
2821
2822
/* harmony default export */ __webpack_exports__["a"] = (YouTube);
2823
2824
/***/ }),
2825
/* 19 */
2826
/***/ (function(module, __webpack_exports__, __webpack_require__) {
2827
2828
"use strict";
2829
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_dom__ = __webpack_require__(0);
2830
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__utils_keys__ = __webpack_require__(2);
2831
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__utils_scroll_to__ = __webpack_require__(4);
2832
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__modules_slide__ = __webpack_require__(1);
2833
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; }; }();
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
2834
2835
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
2836
2837
2838
2839
2840
2841
2842
var CLASSES = {
2843
  ZOOM: 'grid',
2844
  DIV: 'column',
2845
  WRAP: 'wrap-zoom',
2846
  WRAP_CONTAINER: 'wrap',
2847
  CURRENT: 'current',
2848
  SLIDE: 'slide',
2849
  ZOOM_ENABLED: 'ws-ready-zoom'
2850
};
2851
2852
var ID = 'webslides-zoomed';
2853
2854
/**
2855
 * Zoom plugin.
2856
 */
2857
2858
var Zoom = function () {
2859
  /**
2860
   * @param {WebSlides} wsInstance The WebSlides instance
2861
   * @constructor
2862
   */
2863
  function Zoom(wsInstance) {
2864
    _classCallCheck(this, Zoom);
2865
2866
    /**
2867
     * @type {WebSlides}
2868
     * @private
2869
     */
2870
    this.ws_ = wsInstance;
2871
2872
    /**
2873
     * @type {WebSlides}
2874
     * @private
2875
     */
2876
    this.zws_ = {};
2877
2878
    /**
2879
     * @type {boolean}
2880
     * @private
2881
     */
2882
    this.isZoomed_ = false;
2883
2884
    this.preBuildZoom_();
2885
    document.body.addEventListener('keydown', this.onKeyDown.bind(this));
2886
  }
2887
2888
  /**
2889
   * On key down handler. Will decide if Zoom in or out
2890
   * @param {Event} event Key down event.
2891
   */
2892
2893
2894
  _createClass(Zoom, [{
2895
    key: 'onKeyDown',
2896
    value: function onKeyDown(event) {
2897
      if (!this.isZoomed_ && __WEBPACK_IMPORTED_MODULE_1__utils_keys__["a" /* default */].MINUS.some(function (key) {
2898
        return key === event.which;
2899
      })) {
2900
        this.zoomIn();
2901
      } else if (this.isZoomed_ && (__WEBPACK_IMPORTED_MODULE_1__utils_keys__["a" /* default */].PLUS.some(function (key) {
2902
        return key === event.which;
2903
      }) || event.which === __WEBPACK_IMPORTED_MODULE_1__utils_keys__["a" /* default */].ESCAPE)) {
2904
        this.zoomOut();
2905
      }
2906
    }
2907
2908
    /**
2909
     * Prepare zoom structure, scales the slides and uses a grid layout
2910
     * to show them.
2911
     */
2912
2913
  }, {
2914
    key: 'preBuildZoom_',
2915
    value: function preBuildZoom_() {
2916
      var _this = this;
2917
2918
      // Clone #webslides element
2919
      this.zws_.el = this.ws_.el.cloneNode();
2920
      this.zws_.el.id = ID;
2921
      this.zws_.wrap = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].createNode('div');
2922
      this.zws_.wrap.className = CLASSES.WRAP_CONTAINER;
2923
      this.zws_.el.appendChild(this.zws_.wrap);
2924
      this.zws_.grid = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].createNode('div');
2925
      this.zws_.grid.className = CLASSES.ZOOM;
2926
      this.zws_.wrap.appendChild(this.zws_.grid);
2927
2928
      this.zws_.el.addEventListener('click', function () {
2929
        return _this.toggleZoom();
2930
      });
2931
2932
      // Clone the slides
2933
      this.zws_.slides = [].map.call(this.ws_.slides, function (slide, i) {
2934
        var s_ = slide.el.cloneNode(true);
2935
        _this.zws_.grid.appendChild(s_);
2936
        return new __WEBPACK_IMPORTED_MODULE_3__modules_slide__["b" /* default */](s_, i);
2937
      });
2938
2939
      this.disable();
2940
      __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].after(this.zws_.el, this.ws_.el);
2941
2942
      // Creates the container for each slide
2943
      this.zws_.slides.forEach(function (elem) {
2944
        return _this.createSlideBlock_(elem);
2945
      });
2946
    }
2947
2948
    /**
2949
     * Creates a block structure around the slide.
2950
     * @param {Element} elem slide element.
2951
     */
2952
2953
  }, {
2954
    key: 'createSlideBlock_',
2955
    value: function createSlideBlock_(elem) {
2956
      var _this2 = this;
2957
2958
      // Wraps the slide around a container
2959
      var wrap = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].wrap(elem.el, 'div');
2960
      wrap.className = CLASSES.WRAP;
2961
      wrap.setAttribute('id', 'zoomed-' + elem.el.getAttribute('id'));
2962
2963
      // Slide container, need due to flexbox styles
2964
      var div = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].wrap(wrap, 'div');
2965
      div.className = CLASSES.DIV;
2966
2967
      // Adding some layer for controlling click events
2968
      var divLayer = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].createNode('div');
2969
      divLayer.className = 'zoom-layer';
2970
      divLayer.addEventListener('click', function (e) {
2971
        e.stopPropagation();
2972
        _this2.zoomOut();
2973
        _this2.ws_.goToSlide(elem.i);
2974
      });
2975
      wrap.appendChild(divLayer);
2976
2977
      // Slide number
2978
      var slideNumber = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].createNode('p', '', '' + (elem.i + 1));
2979
      slideNumber.className = 'text-slide-number';
2980
      div.appendChild(slideNumber);
2981
    }
2982
2983
    /**
2984
     * Toggles zoom.
2985
     */
2986
2987
  }, {
2988
    key: 'toggleZoom',
2989
    value: function toggleZoom() {
2990
      if (this.isZoomed_) {
2991
        this.zoomOut();
2992
      } else {
2993
        this.zoomIn();
2994
      }
2995
    }
2996
2997
    /**
2998
     * Zoom In the slider, scales the slides and uses a grid layout to show them.
2999
     */
3000
3001
  }, {
3002
    key: 'zoomIn',
3003
    value: function zoomIn() {
3004
      var _this3 = this;
3005
3006
      if (!this.ws_.options.showIndex) return;
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
3007
      this.enable();
3008
      var currentId = this.ws_.currentSlide_.el.id;
3009
      var zoomedCurrent = this.zws_.el.querySelector('.' + CLASSES.WRAP + '.' + CLASSES.CURRENT);
3010
3011
      if (zoomedCurrent) {
3012
        zoomedCurrent.classList.remove(CLASSES.CURRENT);
3013
      }
3014
3015
      var actualCurrent = this.zws_.el.querySelector('#zoomed-' + currentId);
3016
      actualCurrent.classList.add(CLASSES.CURRENT);
3017
3018
      this.isZoomed_ = true;
3019
      document.documentElement.classList.add(CLASSES.ZOOM_ENABLED);
3020
3021
      setTimeout(function () {
3022
        _this3.ws_.disable();
3023
        _this3.zws_.el.classList.add('in');
3024
        var wrapCSS = window.getComputedStyle(_this3.zws_.grid);
3025
        var scrollingElement = document.body;
3026
3027
        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);
3028
      }, 50);
3029
    }
3030
3031
    /**
3032
     * Zoom Out the slider, remove scale from the slides.
3033
     */
3034
3035
  }, {
3036
    key: 'zoomOut',
3037
    value: function zoomOut() {
3038
      var _this4 = this;
3039
3040
      if (!this.ws_.options.showIndex) return;
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
3041
      this.zws_.el.classList.remove('in');
3042
3043
      setTimeout(function () {
3044
        _this4.ws_.enable();
3045
        _this4.disable();
3046
        _this4.isZoomed_ = false;
3047
        document.documentElement.classList.remove(CLASSES.ZOOM_ENABLED);
3048
      }, 400);
3049
    }
3050
3051
    /**
3052
     * Hides the zoom container
3053
     */
3054
3055
  }, {
3056
    key: 'disable',
3057
    value: function disable() {
3058
      this.zws_.el.classList.add('disabled');
3059
    }
3060
3061
    /**
3062
     * Shows the zoom container
3063
     */
3064
3065
  }, {
3066
    key: 'enable',
3067
    value: function enable() {
3068
      this.zws_.el.classList.remove('disabled');
3069
    }
3070
  }]);
3071
3072
  return Zoom;
3073
}();
3074
3075
/* harmony default export */ __webpack_exports__["a"] = (Zoom);
3076
3077
/***/ }),
3078
/* 20 */
3079
/***/ (function(module, __webpack_exports__, __webpack_require__) {
0 ignored issues
show
Unused Code introduced by
The parameter __webpack_require__ is not used and could be removed.

This check looks for parameters in functions that are not used in the function body and are not followed by other parameters which are used inside the function.

Loading history...
3080
3081
"use strict";
3082
/**
3083
 * Swing easing function.
3084
 * @param {number} p The percentage of time that has passed.
3085
 * @return {number}
3086
 */
3087
function swing(p) {
3088
  return 0.5 - Math.cos(p * Math.PI) / 2;
3089
}
3090
3091
/* harmony default export */ __webpack_exports__["a"] = ({ swing: swing });
3092
3093
/***/ }),
3094
/* 21 */
3095
/***/ (function(module, exports) {
0 ignored issues
show
Unused Code introduced by
The parameter module is not used and could be removed.

This check looks for parameters in functions that are not used in the function body and are not followed by other parameters which are used inside the function.

Loading history...
Unused Code introduced by
The parameter exports is not used and could be removed.

This check looks for parameters in functions that are not used in the function body and are not followed by other parameters which are used inside the function.

Loading history...
3096
3097
// removed by extract-text-webpack-plugin
3098
3099
/***/ })
3100
/******/ ]);