wezm/wezm.net
1
0
Fork 1
mirror of https://github.com/wezm/wezm.net.git synced 2024-12-19 10:49:54 +00:00
Code Issues Projects Releases Packages Wiki Activity
wezm.net/output/technical/2017/09/rust-tools-talk/slides/static/js/webslides.js

3100 lines
89 KiB
JavaScript
Raw Permalink Normal View History

Add Rust Tools Talk notes and slides
2017-09-30 02:10:36 +00:00
/*!
* Name: WebSlides
* Version: 1.4.2
* Date: 2017-09-12
* Description: Making HTML presentations easy
* URL: https://github.com/webslides/webslides#readme
* Credits: @jlantunez, @LuisSacristan, @Belelros
*/
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "/static/js/";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 5);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__custom_event__ = __webpack_require__(9);
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; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var transitionEvent = '';
var animationEvent = '';
/**
* Static class for DOM helper.
*/
var DOM = function () {
function DOM() {
_classCallCheck(this, DOM);
}
_createClass(DOM, null, [{
key: 'createNode',
/**
* Creates a node with optional parameters.
* @param {string} tag The name of the tag of the needed element.
* @param {string} id The desired id for the element. It defaults to an
* empty string.
* @param {string} text The desired text to go inside of the element. It
* defaults to an empty string.
* @return {Element}
*/
value: function createNode(tag) {
var id = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
var text = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
var node = document.createElement(tag);
if (id) {
node.id = id;
}
if (text) {
node.textContent = text;
}
return node;
}
/**
* Listens for an event once.
* @param {Element} el Element to listen to.
* @param {string} event Event Type.
* @param {Function} callback Function to execute once the event fires.
*/
}, {
key: 'once',
value: function once(el, event, callback) {
var cb = function cb(e) {
if (e.target === el) {
el.removeEventListener(event, cb);
callback(e);
}
};
el.addEventListener(event, cb, false);
}
/**
* Gets the prefixed transitionend event.
* @param {?Element} optEl Element to check
* @return {string}
*/
}, {
key: 'getTransitionEvent',
value: function getTransitionEvent(optEl) {
if (transitionEvent && !optEl) {
return transitionEvent;
}
transitionEvent = '';
var el = optEl || document.createElement('ws');
var transitions = {
'transition': 'transitionend',
'OTransition': 'oTransitionEnd',
'MozTransition': 'transitionend',
'WebkitTransition': 'webkitTransitionEnd'
};
var transitionNames = Object.keys(transitions);
for (var i = 0, length = transitionNames.length; i < length && !transitionEvent; i++) {
var transitionName = transitionNames[i];
if (typeof el.style[transitionName] !== 'undefined') {
transitionEvent = transitions[transitionName];
}
}
return transitionEvent;
}
/**
* Gets the prefixed animation end event.
* @param {?Element} optEl Element to check
* @return {string}
*/
}, {
key: 'getAnimationEvent',
value: function getAnimationEvent(optEl) {
if (animationEvent && !optEl) {
return animationEvent;
}
animationEvent = 'animationend';
var el = optEl || document.createElement('ws');
var animations = {
'animation': 'animationend',
'OAnimation': 'oAnimationEnd',
'MozAnimation': 'animationend',
'WebkitAnimation': 'webkitAnimationEnd'
};
var animationNames = Object.keys(animations);
for (var i = 0, length = animationNames.length; i < length; i++) {
var animationName = animationNames[i];
if (typeof el.style[animationName] !== 'undefined') {
animationEvent = animations[animationName];
break;
}
}
return animationEvent;
}
/**
* Hides an element setting the display to none.
* @param {Element} el Element to be hidden.
*/
}, {
key: 'hide',
value: function hide(el) {
el.style.display = 'none';
}
/**
* Shows an element by removing the display property. This is only intended
* to be used in conjunction with DOM.hide.
* @param {Element} el Element to be shown.
*/
}, {
key: 'show',
value: function show(el) {
el.style.display = '';
}
/**
* Checks if the element is visible.
* @param {Element} el Element to check.
* @return {boolean}
*/
}, {
key: 'isVisible',
value: function isVisible(el) {
return el.offsetParent !== null;
}
/**
* Fires a custom event on the given target.
* @param {Element} target The target of the event.
* @param {string} eventType The event type.
* @param {Object} eventInfo Optional parameter to provide additional data
* to the event.
*/
}, {
key: 'fireEvent',
value: function fireEvent(target, eventType) {
var eventInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var event = new __WEBPACK_IMPORTED_MODULE_0__custom_event__["a" /* default */](eventType, {
detail: eventInfo
});
target.dispatchEvent(event);
}
/**
* Converts an iterable to an array.
* @param {*} iterable Element to convert to array
* @return {Array} the element casted to an array.
*/
}, {
key: 'toArray',
value: function toArray(iterable) {
return [].slice.call(iterable);
}
/**
* Checks whether the document has focus on an input or contenteditable
* element.
* @return {boolean} Whether the focused element is an input or content
* editable.
*/
}, {
key: 'isFocusableElement',
value: function isFocusableElement() {
var result = false;
if (document.activeElement) {
var isContentEditable = document.activeElement.contentEditable !== 'inherit' && document.activeElement.contentEditable !== undefined;
var isInput = ['INPUT', 'SELECT', 'OPTION', 'TEXTAREA'].indexOf(document.activeElement.tagName) > -1;
result = isInput || isContentEditable;
}
return result;
}
/**
* Gets the integer value of a style property.
* @param {string} prop CSS property value.
* @return {Number} The property without the units.
*/
}, {
key: 'parseSize',
value: function parseSize(prop) {
return Number(prop.replace(/[^\d\.]/g, ''));
}
/**
* Wraps a HTML structure around an element.
* @param {Element} elem the element to be wrapped.
* @param {string} tag the new element tag.
* @return {Element} the new element.
*/
}, {
key: 'wrap',
value: function wrap(elem, tag) {
var wrap = document.createElement(tag);
elem.parentElement.insertBefore(wrap, elem);
wrap.appendChild(elem);
return wrap;
}
/**
* Inserts and element after another element.
* @param {Element} elem the element to be inserted.
* @param {Element} target the element to be inserted after.
*/
}, {
key: 'after',
value: function after(elem, target) {
var parent = target.parentNode;
if (parent.lastChild === target) {
parent.appendChild(elem);
} else {
parent.insertBefore(elem, target.nextSibling);
}
}
}]);
return DOM;
}();
/* harmony default export */ __webpack_exports__["a"] = (DOM);
/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return Slide; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Events; });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_dom__ = __webpack_require__(0);
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; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var CLASSES = {
SLIDE: 'slide',
CURRENT: 'current'
};
var Events = {
ENTER: 'dom:enter',
LEAVE: 'dom:leave',
ENABLE: 'slide:enable',
DISABLE: 'slide:disable'
};
/**
* Wrapper for the Slide section.
*/
var Slide = function () {
/**
* Bootstraps the slide by saving some data, adding a class and hiding it.
* @param {Element} el Section element.
* @param {number} i Zero based index of the slide.
*/
function Slide(el, i) {
_classCallCheck(this, Slide);
/**
* @type {Element}
*/
this.el = el;
/**
* The section's parent.
* @type {Node}
*/
this.parent = el.parentNode;
/**
* @type {number}
*/
this.i = i;
this.el.id = 'section-' + (i + 1);
this.el.classList.add(CLASSES.SLIDE);
// Hide slides by default
this.hide();
}
/**
* Hides the node and removes the class that makes it "active".
*/
_createClass(Slide, [{
key: 'hide',
value: function hide() {
__WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].hide(this.el);
this.el.classList.remove(CLASSES.CURRENT);
}
/**
* Shows the node and adds the class that makes it "active".
*/
}, {
key: 'show',
value: function show() {
__WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].show(this.el);
this.el.classList.add(CLASSES.CURRENT);
}
/**
* Moves the section to the bottom of the section's list.
* @fires Slide#dom:leave
* @fires Slide#dom:enter
*/
}, {
key: 'moveAfterLast',
value: function moveAfterLast() {
var last = this.parent.childNodes[this.parent.childElementCount - 1];
this.fire_(Events.LEAVE);
this.parent.insertBefore(this.el, last.nextSibling);
this.fire_(Events.ENTER);
}
/**
* Moves the section to the top of the section's list.
* @fires Slide#dom:leave
* @fires Slide#dom:enter
*/
}, {
key: 'moveBeforeFirst',
value: function moveBeforeFirst() {
var first = this.parent.childNodes[0];
this.fire_(Events.LEAVE);
this.parent.insertBefore(this.el, first);
this.fire_(Events.ENTER);
}
/**
* Fires an enable event.
* @fires Slide#slide:enable
*/
}, {
key: 'enable',
value: function enable() {
this.fire_(Events.ENABLE);
}
/**
* Fires a disable event.
* @fires Slide#slide:disable
*/
}, {
key: 'disable',
value: function disable() {
this.fire_(Events.DISABLE);
}
/**
* Fires an event passing the slide instance on the detail.
* @param {String} name Name of the event to fire.
* @private
*/
}, {
key: 'fire_',
value: function fire_(name) {
__WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].fireEvent(this.el, name, {
slide: this
});
}
/**
* Checks whether an element is a valid candidate to be a slide by ensuring
* it's a "section" element.
* @param {Element} el Element to be checked.
* @return {boolean} Whether is candidate or not.
*/
}], [{
key: 'isCandidate',
value: function isCandidate(el) {
return el.nodeType === 1 && el.tagName === 'SECTION';
}
/**
* Gets the section element from an inner element.
* @param {Node} el
* @return {{section: ?Node, i: ?number}} A map with the section and the
* position of the section.
*/
}, {
key: 'getSectionFromEl',
value: function getSectionFromEl(el) {
var parent = el;
var section = null;
var i = null;
while (parent.parentElement && !parent.classList.contains(CLASSES.SLIDE)) {
parent = parent.parentElement;
}
if (parent.classList.contains(CLASSES.SLIDE)) {
section = parent;
i = parseInt(section.id.replace('section-', ''), 10);
}
return { section: section, i: i };
}
}]);
return Slide;
}();
/***/ }),
/* 2 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
var Keys = {
ENTER: 13,
SPACE: 32,
RE_PAGE: 33,
AV_PAGE: 34,
END: 35,
HOME: 36,
LEFT: 37,
UP: 38,
RIGHT: 39,
DOWN: 40,
PLUS: [107, 171, 187],
MINUS: [109, 173, 189],
ESCAPE: 27,
F: 70
};
/* harmony default export */ __webpack_exports__["a"] = (Keys);
/***/ }),
/* 3 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
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; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var UA = window.navigator.userAgent;
/**
* Mobile detector helper class. Tests the User Agent to see if we're, likely,
* on a mobile device.
*/
var MobileDetector = function () {
function MobileDetector() {
_classCallCheck(this, MobileDetector);
}
_createClass(MobileDetector, null, [{
key: "isAndroid",
/**
* Whether the device is Android or not.
* @return {Boolean}
*/
value: function isAndroid() {
return !!UA.match(/Android/i);
}
/**
* Whether the device is BlackBerry or not.
* @return {Boolean}
*/
}, {
key: "isBlackBerry",
value: function isBlackBerry() {
return !!UA.match(/BlackBerry/i);
}
/**
* Whether the device is iOS or not.
* @return {Boolean}
*/
}, {
key: "isiOS",
value: function isiOS() {
return !!UA.match(/iPad|iPhone|iPod/i);
}
/**
* Whether the device is Opera or not.
* @return {Boolean}
*/
}, {
key: "isOpera",
value: function isOpera() {
return !!UA.match(/Opera Mini/i);
}
/**
* Whether the device is Windows or not.
* @return {Boolean}
*/
}, {
key: "isWindows",
value: function isWindows() {
return !!UA.match(/IEMobile/i);
}
/**
* Whether the device is Windows Phone or not.
* @return {Boolean}
*/
}, {
key: "isWindowsPhone",
value: function isWindowsPhone() {
return !!UA.match(/Windows Phone/i);
}
/**
* Whether the device is any mobile device or not.
* @return {Boolean}
*/
}, {
key: "isAny",
value: function isAny() {
return MobileDetector.isAndroid() || MobileDetector.isBlackBerry() || MobileDetector.isiOS() || MobileDetector.isOpera() || MobileDetector.isWindows() || MobileDetector.isWindowsPhone();
}
}]);
return MobileDetector;
}();
/* harmony default export */ __webpack_exports__["a"] = (MobileDetector);
/***/ }),
/* 4 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony export (immutable) */ __webpack_exports__["a"] = scrollTo;
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__easing__ = __webpack_require__(20);
var SCROLLABLE_CONTAINER = document.getElementById('webslides');
/**
* Smoothly scrolls to a given Y position using Easing.Swing. It'll run a
* callback upon finishing.
* @param {number} y Offset of the page to scroll to.
* @param {number} duration Duration of the animation. 500ms by default.
* @param {function} cb Callback function to call upon completion.
* @param {HTMLElement} container The HTML element where to scroll
*/
function scrollTo(y) {
var duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 500;
var cb = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function () {};
var container = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
SCROLLABLE_CONTAINER = container ? container : document.getElementById('webslides');
var delta = y - SCROLLABLE_CONTAINER.scrollTop;
var startLocation = SCROLLABLE_CONTAINER.scrollTop;
var increment = 16;
if (!duration) {
SCROLLABLE_CONTAINER.scrollTop = y;
cb();
return;
}
var animateScroll = function animateScroll(elapsedTime) {
elapsedTime += increment;
var percent = Math.min(1, elapsedTime / duration);
var easingP = __WEBPACK_IMPORTED_MODULE_0__easing__["a" /* default */].swing(percent, elapsedTime * percent, y, delta, duration);
SCROLLABLE_CONTAINER.scrollTop = Math.floor(startLocation + easingP * delta);
if (elapsedTime < duration) {
setTimeout(function () {
return animateScroll(elapsedTime);
}, increment);
} else {
cb();
}
};
animateScroll(0);
}
/***/ }),
/* 5 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__modules_webslides__ = __webpack_require__(6);
__webpack_require__(21);
window.WebSlides = __WEBPACK_IMPORTED_MODULE_0__modules_webslides__["a" /* default */];
/***/ }),
/* 6 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__ = __webpack_require__(7);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__slide__ = __webpack_require__(1);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__utils_dom__ = __webpack_require__(0);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__utils_scroll_to__ = __webpack_require__(4);
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; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var CLASSES = {
VERTICAL: 'vertical',
READY: 'ws-ready',
DISABLED: 'disabled'
};
// Default plugins
var PLUGINS = {
'autoslide': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].AutoSlide,
'clickNav': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].ClickNav,
'grid': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].Grid,
'hash': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].Hash,
'keyboard': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].Keyboard,
'nav': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].Navigation,
'scroll': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].Scroll,
'touch': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].Touch,
'video': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].Video,
'youtube': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].YouTube,
'zoom': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].Zoom
};
/**
* WebSlides module.
*/
var WebSlides = function () {
/**
* Options for WebSlides
* @param {number|boolean} autoslide If a number is provided, it will allow
* autosliding by said amount of milliseconds.
* @param {boolean} changeOnClick If true, it will allow
* clicking on any place to change the slide.
* @param {boolean} loop Whether to go to first slide from last one or not.
* @param {number} minWheelDelta Controls the amount of needed scroll to
* trigger navigation.
* @param {boolean} navigateOnScroll Whether scroll can trigger navigation or
* not.
* @param {number} scrollWait Controls the amount of time to wait till
* navigation can occur again with scroll.
* @param {number} slideOffset Controls the amount of needed touch delta to
* trigger navigation.
* @param {boolean} showIndex Controls if the index can be shown.
*/
function WebSlides() {
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
_ref$autoslide = _ref.autoslide,
autoslide = _ref$autoslide === undefined ? false : _ref$autoslide,
_ref$changeOnClick = _ref.changeOnClick,
changeOnClick = _ref$changeOnClick === undefined ? false : _ref$changeOnClick,
_ref$loop = _ref.loop,
loop = _ref$loop === undefined ? true : _ref$loop,
_ref$minWheelDelta = _ref.minWheelDelta,
minWheelDelta = _ref$minWheelDelta === undefined ? 40 : _ref$minWheelDelta,
_ref$navigateOnScroll = _ref.navigateOnScroll,
navigateOnScroll = _ref$navigateOnScroll === undefined ? true : _ref$navigateOnScroll,
_ref$scrollWait = _ref.scrollWait,
scrollWait = _ref$scrollWait === undefined ? 450 : _ref$scrollWait,
_ref$slideOffset = _ref.slideOffset,
slideOffset = _ref$slideOffset === undefined ? 50 : _ref$slideOffset,
_ref$showIndex = _ref.showIndex,
showIndex = _ref$showIndex === undefined ? true : _ref$showIndex;
_classCallCheck(this, WebSlides);
/**
* WebSlide element.
* @type {Element}
*/
this.el = document.getElementById('webslides');
if (!this.el) {
throw new Error('Couldn\'t find the webslides container!');
}
/**
* Moving flag.
* @type {boolean}
*/
this.isMoving = false;
/**
* Slide's array.
* @type {?Array<Slide>}
*/
this.slides = null;
/**
* Current slide's index.
* @type {number}
* @private
*/
this.currentSlideI_ = -1;
/**
* Current slide reference.
* @type {?Slide}
* @private
*/
this.currentSlide_ = null;
/**
* Max slide index.
* @type {number}
* @private
*/
this.maxSlide_ = 0;
/**
* Whether the layout is going to be vertical or horizontal.
* @type {boolean}
*/
this.isVertical = this.el.classList.contains(CLASSES.VERTICAL);
/**
* Plugin's dictionary.
* @type {Object}
*/
this.plugins = {};
/**
* Options dictionary.
* @type {Object}
*/
this.options = {
autoslide: autoslide,
changeOnClick: changeOnClick,
loop: loop,
minWheelDelta: minWheelDelta,
navigateOnScroll: navigateOnScroll,
scrollWait: scrollWait,
slideOffset: slideOffset,
showIndex: showIndex
};
/**
* Initialisation flag.
* @type {boolean}
*/
this.initialised = false;
// Bootstrapping
this.removeChildren_();
this.grabSlides_();
this.createPlugins_();
this.initSlides_();
// Finished
this.onInit_();
}
/**
* Removes all children elements inside of the main container that are not
* eligible to be a Slide Element.
* @private
*/
_createClass(WebSlides, [{
key: 'removeChildren_',
value: function removeChildren_() {
var nodes = this.el.childNodes;
var i = nodes.length;
while (i--) {
var node = nodes[i];
if (!__WEBPACK_IMPORTED_MODULE_1__slide__["b" /* default */].isCandidate(node)) {
this.el.removeChild(node);
}
}
}
/**
* Creates all the registered plugins and store the instances inside of the
* the webslide instance.
* @private
*/
}, {
key: 'createPlugins_',
value: function createPlugins_() {
var _this = this;
Object.keys(PLUGINS).forEach(function (pluginName) {
var PluginCto = PLUGINS[pluginName];
_this.plugins[pluginName] = new PluginCto(_this);
});
}
/**
* Called once the WebSlide instance has finished initialising.
* @private
* @fires WebSlide#ws:init
*/
}, {
key: 'onInit_',
value: function onInit_() {
this.initialised = true;
__WEBPACK_IMPORTED_MODULE_2__utils_dom__["a" /* default */].fireEvent(this.el, 'ws:init');
document.documentElement.classList.add(CLASSES.READY);
}
/**
* Grabs the slides from the DOM and creates all the Slides modules.
* @private
*/
}, {
key: 'grabSlides_',
value: function grabSlides_() {
this.slides = __WEBPACK_IMPORTED_MODULE_2__utils_dom__["a" /* default */].toArray(this.el.childNodes).map(function (slide, i) {
return new __WEBPACK_IMPORTED_MODULE_1__slide__["b" /* default */](slide, i);
});
this.maxSlide_ = this.slides.length;
}
/**
* Goes to a given slide.
* @param {!number} slideI The slide index.
* @param {?boolean=} forward Whether we're forcing moving forward/backwards.
* This parameter is used only from the goNext, goPrev functions to adjust the
* scroll animations.
*/
}, {
key: 'goToSlide',
value: function goToSlide(slideI) {
var forward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
if (this.isValidIndexSlide_(slideI) && !this.isMoving && this.currentSlideI_ !== slideI) {
this.isMoving = true;
var isMovingForward = false;
if (forward !== null) {
isMovingForward = forward;
} else {
if (this.currentSlideI_ >= 0) {
isMovingForward = slideI > this.currentSlideI_;
}
}
var nextSlide = this.slides[slideI];
if (this.currentSlide_ !== null && this.isVertical && (!this.plugins.touch || !this.plugins.touch.isEnabled)) {
this.scrollTransitionToSlide_(isMovingForward, nextSlide, this.onSlideChange_);
} else {
this.transitionToSlide_(isMovingForward, nextSlide, this.onSlideChange_);
}
}
}
/**
* Transitions to a slide, doing the scroll animation.
* @param {boolean} isMovingForward Whether we're going forward or backwards.
* @param {Slide} nextSlide Next slide.
* @param {Function} callback Callback to be called upon finishing. This is an
* async function so it'll happen once the scroll animation finishes.
* @private
* @see scrollTo
*/
}, {
key: 'scrollTransitionToSlide_',
value: function scrollTransitionToSlide_(isMovingForward, nextSlide, callback) {
var _this2 = this;
this.el.style.overflow = 'hidden';
if (!isMovingForward) {
nextSlide.moveBeforeFirst();
nextSlide.show();
Object(__WEBPACK_IMPORTED_MODULE_3__utils_scroll_to__["a" /* default */])(this.currentSlide_.el.offsetTop, 0);
} else {
nextSlide.show();
}
Object(__WEBPACK_IMPORTED_MODULE_3__utils_scroll_to__["a" /* default */])(nextSlide.el.offsetTop, 500, function () {
_this2.currentSlide_.hide();
if (isMovingForward) {
_this2.currentSlide_.moveAfterLast();
}
_this2.el.style.overflow = 'auto';
setTimeout(function () {
callback.call(_this2, nextSlide);
}, 150);
});
}
/**
* Transitions to a slide, without doing the scroll animation. If the page is
* already initialised and on mobile device, it will do a slide animation.
* @param {boolean} isMovingForward Whether we're going forward or backwards.
* @param {Slide} nextSlide Next slide.
* @param {Function} callback Callback to be called upon finishing. This is a
* sync function so it'll happen on run time.
* @private
*/
}, {
key: 'transitionToSlide_',
value: function transitionToSlide_(isMovingForward, nextSlide, callback) {
var _this3 = this;
Object(__WEBPACK_IMPORTED_MODULE_3__utils_scroll_to__["a" /* default */])(0, 0);
var className = 'slideInRight';
if (!isMovingForward) {
nextSlide.moveBeforeFirst();
className = 'slideInLeft';
}
if (this.currentSlide_) {
if (isMovingForward) {
this.currentSlide_.moveAfterLast();
}
this.currentSlide_.hide();
}
nextSlide.show();
if (this.initialised && this.plugins.touch && this.plugins.touch.isEnabled) {
__WEBPACK_IMPORTED_MODULE_2__utils_dom__["a" /* default */].once(nextSlide.el, __WEBPACK_IMPORTED_MODULE_2__utils_dom__["a" /* default */].getAnimationEvent(), function () {
nextSlide.el.classList.remove(className);
callback.call(_this3, nextSlide);
});
nextSlide.el.classList.add(className);
} else {
callback.call(this, nextSlide);
}
}
/**
* Whenever a slide is changed, this function gets called. It updates the
* references to the current slide, disables the moving flag and fires
* a custom event.
* @param {Slide} slide The slide we're transitioning to.
* @fires WebSlide#ws:slide-change
* @private
*/
}, {
key: 'onSlideChange_',
value: function onSlideChange_(slide) {
if (this.currentSlide_) {
this.currentSlide_.disable();
}
this.currentSlide_ = slide;
this.currentSlideI_ = slide.i;
this.currentSlide_.enable();
this.isMoving = false;
__WEBPACK_IMPORTED_MODULE_2__utils_dom__["a" /* default */].fireEvent(this.el, 'ws:slide-change', {
slides: this.maxSlide_,
currentSlide0: this.currentSlideI_,
currentSlide: this.currentSlideI_ + 1
});
}
/**
* Goes to the next slide.
*/
}, {
key: 'goNext',
value: function goNext() {
var nextIndex = this.currentSlideI_ + 1;
if (nextIndex >= this.maxSlide_) {
if (!this.options.loop) {
return;
}
nextIndex = 0;
}
this.goToSlide(nextIndex, true);
}
/**
* Goes to the previous slide.
*/
}, {
key: 'goPrev',
value: function goPrev() {
var prevIndex = this.currentSlideI_ - 1;
if (prevIndex < 0) {
if (!this.options.loop) {
return;
}
prevIndex = this.maxSlide_ - 1;
}
this.goToSlide(prevIndex, false);
}
/**
* Check if the given number is a valid index to go to.
* @param {number} i The index to check.
* @return {boolean} Whether you can move to that slide or not.
* @private
*/
}, {
key: 'isValidIndexSlide_',
value: function isValidIndexSlide_(i) {
return typeof i === 'number' && i >= 0 && i < this.maxSlide_;
}
/**
* Init the shown slide on load. It'll fetch it from the Hash if present
* and, otherwise, it'll default to the first one.
* @private
* @see Hash.getSlideNumber
*/
}, {
key: 'initSlides_',
value: function initSlides_() {
var slideNumber = this.plugins.hash.constructor.getSlideNumber();
// Not valid
if (slideNumber === null || slideNumber >= this.maxSlide_) {
slideNumber = 0;
}
// Keeping the order
if (slideNumber !== 0) {
var i = 0;
while (i < slideNumber) {
this.slides[i].moveAfterLast();
i++;
}
}
this.goToSlide(slideNumber);
}
/**
* Toggles zoom
*/
}, {
key: 'toggleZoom',
value: function toggleZoom() {
if (this.options.showIndex) {
this.plugins.zoom.toggleZoom();
}
}
/**
* Disables the webslides element adding a class "disabled"
*/
}, {
key: 'disable',
value: function disable() {
this.el.classList.add(CLASSES.DISABLED);
if (this.plugins.autoslide && this.plugins.autoslide.time !== false) {
this.plugins.autoslide.stop();
}
}
/**
* Enables the webslides element removing a class "disabled"
*/
}, {
key: 'enable',
value: function enable() {
this.el.classList.remove(CLASSES.DISABLED);
if (this.plugins.autoslide && this.plugins.autoslide.time !== false) {
this.plugins.autoslide.play();
}
}
/**
* Checks if it is disabled
* @return {boolean}
*/
}, {
key: 'isDisabled',
value: function isDisabled() {
return this.el.classList.contains(CLASSES.DISABLED);
}
/**
* Puts the browser into fullscreen
*/
}, {
key: 'fullscreen',
value: function fullscreen() {
var el = document.documentElement;
var isFullscreen = document.fullscreen || document.webkitIsFullScreen || document.mozFullScreen || document.msFullScreenElement;
if (!isFullscreen) {
/* istanbul ignore next hard to test prefixes */
var requestFullscreen = el.requestFullscreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;
requestFullscreen.call(el);
} else {
/* istanbul ignore next hard to test prefixes */
var cancelFullscreen = document.exitFullScreen || document.webkitCancelFullScreen || document.mozCancelFullScreen || document.msExitFullscreen;
cancelFullscreen.call(document);
}
}
/**
* Registers a plugin to be loaded when the instance is created. It allows
* (on purpose) to replace default plugins.
* @param {!string} key They key under which it'll be stored inside of the
* instance, inside the plugins dict.
* @param {!Function} cto Plugin constructor.
*/
}], [{
key: 'registerPlugin',
value: function registerPlugin(key, cto) {
PLUGINS[key] = cto;
}
}]);
return WebSlides;
}();
/* harmony default export */ __webpack_exports__["a"] = (WebSlides);
/***/ }),
/* 7 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__autoslide__ = __webpack_require__(8);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__click_nav__ = __webpack_require__(10);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__grid__ = __webpack_require__(11);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__hash__ = __webpack_require__(12);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__keyboard__ = __webpack_require__(13);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__navigation__ = __webpack_require__(14);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__scroll__ = __webpack_require__(15);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__touch__ = __webpack_require__(16);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__video__ = __webpack_require__(17);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__youtube__ = __webpack_require__(18);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_10__zoom__ = __webpack_require__(19);
/* harmony default export */ __webpack_exports__["a"] = ({
AutoSlide: __WEBPACK_IMPORTED_MODULE_0__autoslide__["a" /* default */],
ClickNav: __WEBPACK_IMPORTED_MODULE_1__click_nav__["a" /* default */],
Grid: __WEBPACK_IMPORTED_MODULE_2__grid__["a" /* default */],
Hash: __WEBPACK_IMPORTED_MODULE_3__hash__["a" /* default */],
Keyboard: __WEBPACK_IMPORTED_MODULE_4__keyboard__["a" /* default */],
Navigation: __WEBPACK_IMPORTED_MODULE_5__navigation__["a" /* default */],
Scroll: __WEBPACK_IMPORTED_MODULE_6__scroll__["a" /* default */],
Touch: __WEBPACK_IMPORTED_MODULE_7__touch__["a" /* default */],
Video: __WEBPACK_IMPORTED_MODULE_8__video__["a" /* default */],
YouTube: __WEBPACK_IMPORTED_MODULE_9__youtube__["a" /* default */],
Zoom: __WEBPACK_IMPORTED_MODULE_10__zoom__["a" /* default */]
});
/***/ }),
/* 8 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_dom__ = __webpack_require__(0);
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; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
/**
* Autoslide plugin.
*/
var AutoSlide = function () {
/**
* @param {WebSlides} wsInstance The WebSlides instance
* @constructor
*/
function AutoSlide(wsInstance) {
_classCallCheck(this, AutoSlide);
/**
* @type {WebSlides}
* @private
*/
this.ws_ = wsInstance;
/**
* Interval ID reference for the autoslide.
* @type {?number}
* @private
*/
this.interval_ = null;
/**
* Internal stored time.
* @type {?number}
*/
this.time = this.ws_.options.autoslide;
if (this.time) {
__WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].once(wsInstance.el, 'ws:init', this.play.bind(this));
document.body.addEventListener('focus', this.onFocus.bind(this));
}
}
/**
* On focus handler. Will decide if stops/play depending on the focused
* element if autoslide is active.
*/
_createClass(AutoSlide, [{
key: 'onFocus',
value: function onFocus() {
if (__WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].isFocusableElement()) {
this.stop();
} else if (this.interval_ === null) {
this.play();
}
}
/**
* Starts autosliding all the slides if it's not currently doing it and the
* autoslide option was a number greater than 0.
* @param {?number=} time Amount of milliseconds to wait to go to next slide
* automatically.
*/
}, {
key: 'play',
value: function play(time) {
if (typeof time !== 'number') {
time = this.time;
}
this.time = time;
if (!this.interval_ && typeof time === 'number' && time > 0) {
this.interval_ = setInterval(this.ws_.goNext.bind(this.ws_), time);
}
}
/**
* Stops autosliding all the slides.
*/
}, {
key: 'stop',
value: function stop() {
if (this.interval_) {
clearInterval(this.interval_);
this.interval_ = null;
}
}
}]);
return AutoSlide;
}();
/* harmony default export */ __webpack_exports__["a"] = (AutoSlide);
/***/ }),
/* 9 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
var NativeCustomEvent = window.CustomEvent;
/**
* Check for the usage of native support for CustomEvents which is lacking
* completely on IE.
* @return {boolean} Whether it can be used or not.
*/
function canIuseNativeCustom() {
try {
var p = new NativeCustomEvent('t', {
detail: {
a: 'b'
}
});
return 't' === p.type && 'b' === p.detail.a;
} catch (e) {}
/* istanbul ignore next: hard to reproduce on test environment */
return false;
}
/**
* Lousy polyfill for the Custom Event constructor for IE.
* @param {!string} type The type of the event.
* @param {?Object} params Additional information for the event.
* @return {Event}
* @constructor
*/
/* istanbul ignore next: hard to reproduce on test environment */
var IECustomEvent = function CustomEvent(type, params) {
var e = document.createEvent('CustomEvent');
if (params) {
e.initCustomEvent(type, params.bubbles, params.cancelable, params.detail);
} else {
e.initCustomEvent(type, false, false, undefined);
}
return e;
};
/* istanbul ignore next: hard to reproduce on test environment */
var WSCustomEvent = canIuseNativeCustom() ? NativeCustomEvent : IECustomEvent;
/* harmony default export */ __webpack_exports__["a"] = (WSCustomEvent);
/***/ }),
/* 10 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
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; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var CLICKABLE_ELS = ['INPUT', 'SELECT', 'OPTION', 'BUTTON', 'A', 'TEXTAREA'];
/**
* ClickNav plugin that allows to click on the page to get to the next slide.
*/
var ClickNav = function () {
/**
* @param {WebSlides} wsInstance The WebSlides instance
* @constructor
*/
function ClickNav(wsInstance) {
_classCallCheck(this, ClickNav);
/**
* @type {WebSlides}
* @private
*/
this.ws_ = wsInstance;
if (wsInstance.options.changeOnClick) {
this.ws_.el.addEventListener('click', this.onClick_.bind(this));
}
}
/**
* Reacts to the click event. It will go to the next slide unless the element
* has a data-prevent-nav attribute or is on the list of CLICKABLE_ELS.
* @param {MouseEvent} event The click event.
* @private
*/
_createClass(ClickNav, [{
key: 'onClick_',
value: function onClick_(event) {
if (CLICKABLE_ELS.indexOf(event.target.tagName) < 0 && typeof event.target.dataset.preventNav === 'undefined') {
this.ws_.goNext();
}
}
}]);
return ClickNav;
}();
/* harmony default export */ __webpack_exports__["a"] = (ClickNav);
/***/ }),
/* 11 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_keys__ = __webpack_require__(2);
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; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var GRID_IMAGE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYAg' + 'MAAACdGdVrAAAACVBMVEUAAAAtXsUtXcPDDPUWAAAAA3RSTlMAZmHzZFkxAAAAFklEQVQI12M' + 'AA9bBR3ExhAJB1iooBQBGwgVEs/QtuAAAAABJRU5ErkJggg==';
/**
* Grid plugin that shows a grid on top of the WebSlides for easy prototyping.
*/
var Grid = function () {
/**
* @param {WebSlides} wsInstance The WebSlides instance
* @constructor
*/
function Grid(wsInstance) {
_classCallCheck(this, Grid);
/**
* @type {WebSlides}
* @private
*/
this.ws_ = wsInstance;
var CSS = 'body.baseline {\n background: url(' + GRID_IMAGE + ') left top .8rem/.8rem;\n }';
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) {
style.styleSheet.cssText = CSS;
} else {
style.appendChild(document.createTextNode(CSS));
}
head.appendChild(style);
document.addEventListener('keydown', this.onKeyPress_.bind(this), false);
}
/**
* Reacts to the keydown event. It reacts to ENTER key to toggle the class.
* @param {KeyboardEvent} event The key event.
* @private
*/
_createClass(Grid, [{
key: 'onKeyPress_',
value: function onKeyPress_(event) {
if (event.which === __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].ENTER) {
document.body.classList.toggle('baseline');
}
}
}]);
return Grid;
}();
/* harmony default export */ __webpack_exports__["a"] = (Grid);
/***/ }),
/* 12 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
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; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var HASH = '#slide';
var slideRegex = /#slide=(\d+)/;
/**
* Static class with methods to manipulate and extract info from the hash of
* the URL.
*/
var Hash = function () {
/**
* @param {WebSlides} wsInstance
* @constructor
*/
function Hash(wsInstance) {
_classCallCheck(this, Hash);
this.ws_ = wsInstance;
wsInstance.el.addEventListener('ws:slide-change', Hash.onSlideChange_);
window.addEventListener('hashchange', this.onHashChange_.bind(this), false);
}
/**
* hashchange event handler, makes the WebSlide instance navigate to the
* needed slide.
*/
_createClass(Hash, [{
key: 'onHashChange_',
value: function onHashChange_() {
var newSlideIndex = Hash.getSlideNumber();
if (newSlideIndex !== null) {
this.ws_.goToSlide(newSlideIndex);
}
}
/**
* Handler for the slide change event which updates the slide on the hash.
* @param {Event} event
* @private
*/
}], [{
key: 'onSlideChange_',
value: function onSlideChange_(event) {
Hash.setSlideNumber(event.detail.currentSlide);
}
/**
* Gets the slide number from the hash by a regex matching `#slide=` and gets
* the number after it. If the number is invalid or less than 0, it will
* return null as an invalid value.
* @return {?number}
*/
}, {
key: 'getSlideNumber',
value: function getSlideNumber() {
var results = document.location.hash.match(slideRegex);
var slide = 0;
if (Array.isArray(results)) {
slide = parseInt(results[1], 10);
}
if (typeof slide !== 'number' || slide < 0 || !Array.isArray(results)) {
slide = null;
} else {
slide--; // Convert to 0 index
}
return slide;
}
/**
* It will update the hash (if it's different) so it reflects the slide
* number being visible.
* @param {number} number The number of the slide we're transitioning to.
*/
}, {
key: 'setSlideNumber',
value: function setSlideNumber(number) {
if (Hash.getSlideNumber() !== number - 1) {
history.pushState({
slideI: number - 1
}, 'Slide ' + number, HASH + '=' + number);
}
}
}]);
return Hash;
}();
/* harmony default export */ __webpack_exports__["a"] = (Hash);
/***/ }),
/* 13 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_keys__ = __webpack_require__(2);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__utils_dom__ = __webpack_require__(0);
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; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
/**
* Keyboard interaction plugin.
*/
var Keyboard = function () {
/**
* @param {WebSlides} wsInstance The WebSlides instance
* @constructor
*/
function Keyboard(wsInstance) {
_classCallCheck(this, Keyboard);
/**
* @type {WebSlides}
* @private
*/
this.ws_ = wsInstance;
document.addEventListener('keydown', this.onKeyPress_.bind(this), false);
}
/**
* Reacts to the keydown event. It reacts to the arrows and space key
* depending on the layout of the page.
* @param {KeyboardEvent} event The key event.
* @private
*/
_createClass(Keyboard, [{
key: 'onKeyPress_',
value: function onKeyPress_(event) {
var method = void 0;
var argument = void 0;
if (__WEBPACK_IMPORTED_MODULE_1__utils_dom__["a" /* default */].isFocusableElement() || this.ws_.isDisabled()) {
return;
}
switch (event.which) {
case __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].AV_PAGE:
case __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].SPACE:
method = this.ws_.goNext;
break;
case __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].RE_PAGE:
method = this.ws_.goPrev;
break;
case __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].HOME:
method = this.ws_.goToSlide;
argument = 0;
break;
case __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].END:
method = this.ws_.goToSlide;
argument = this.ws_.maxSlide_ - 1;
break;
case __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].DOWN:
method = this.ws_.isVertical ? this.ws_.goNext : null;
break;
case __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].UP:
method = this.ws_.isVertical ? this.ws_.goPrev : null;
break;
case __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].LEFT:
method = !this.ws_.isVertical ? this.ws_.goPrev : null;
break;
case __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].RIGHT:
method = !this.ws_.isVertical ? this.ws_.goNext : null;
break;
case __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].F:
method = this.ws_.fullscreen;
break;
}
if (method) {
method.call(this.ws_, argument);
// Prevents Firefox key events.
event.preventDefault();
}
}
}]);
return Keyboard;
}();
/* harmony default export */ __webpack_exports__["a"] = (Keyboard);
/***/ }),
/* 14 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_dom__ = __webpack_require__(0);
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; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var ELEMENT_ID = {
NAV: 'navigation',
NEXT: 'next',
PREV: 'previous',
COUNTER: 'counter'
};
var LABELS = {
VERTICAL: {
NEXT: '↓',
PREV: '↑'
},
HORIZONTAL: {
NEXT: '→',
PREV: '←'
}
};
/**
* Navigation plugin.
*/
var Navigation = function () {
/**
* @param {WebSlides} wsInstance The WebSlides instance
* @constructor
*/
function Navigation(wsInstance) {
_classCallCheck(this, Navigation);
var arrowLabels = wsInstance.isVertical ? LABELS.VERTICAL : LABELS.HORIZONTAL;
/**
* Navigation element.
* @type {Element}
*/
this.el = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].createNode('div', 'navigation');
/**
* Next button.
* @type {Element}
*/
this.next = Navigation.createArrow(ELEMENT_ID.NEXT, arrowLabels.NEXT);
/**
* Prev button.
* @type {Element}
*/
this.prev = Navigation.createArrow(ELEMENT_ID.PREV, arrowLabels.PREV);
/**
* Counter Element.
* @type {Element}
*/
this.counter = Navigation.createCounter(ELEMENT_ID.COUNTER, wsInstance);
/**
* @type {WebSlides}
* @private
*/
this.ws_ = wsInstance;
this.el.appendChild(this.next);
this.el.appendChild(this.prev);
this.el.appendChild(this.counter);
this.ws_.el.appendChild(this.el);
this.bindEvents_();
}
/**
* Bind all events for the navigation.
* @private
*/
_createClass(Navigation, [{
key: 'bindEvents_',
value: function bindEvents_() {
this.ws_.el.addEventListener('ws:slide-change', this.onSlideChanged_.bind(this));
this.next.addEventListener('click', this.onButtonClicked_.bind(this));
this.prev.addEventListener('click', this.onButtonClicked_.bind(this));
this.counter.addEventListener('click', this.onButtonClicked_.bind(this));
}
/**
* Updates the counter inside the navigation.
* @param {string|number} current Current slide number.
* @param {string|number} max Max slide number.
*/
}, {
key: 'updateCounter',
value: function updateCounter(current, max) {
if (this.ws_.options.showIndex) {
this.counter.childNodes[0].textContent = current + ' / ' + max;
} else {
this.counter.textContent = current + ' / ' + max;
}
}
/**
* Creates an arrow to navigate.
* @param {!String} id Desired ID for the arrow.
* @param {!String} text Desired text for the arrow.
* @return {Element} The arrow element.
*/
}, {
key: 'onSlideChanged_',
/**
* Slide Change event handler. Will update the text on the navigation.
* @param {CustomEvent} event
* @private
*/
value: function onSlideChanged_(event) {
this.updateCounter(event.detail.currentSlide, event.detail.slides);
}
/**
* Handles clicks on the next/prev buttons.
* @param {MouseEvent} event
* @private
*/
}, {
key: 'onButtonClicked_',
value: function onButtonClicked_(event) {
event.preventDefault();
if (event.target === this.next) {
this.ws_.goNext();
} else if (event.target === this.prev) {
this.ws_.goPrev();
} else {
this.ws_.toggleZoom();
}
}
}], [{
key: 'createArrow',
value: function createArrow(id, text) {
var arrow = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].createNode('a', id, text);
arrow.href = '#';
arrow.title = 'Arrow Keys';
return arrow;
}
/**
* Creates the navigation counter.
* @param {!String} id Desired ID for the counter.
* @param {WebSlides} ws_ WebSlides object.
* @return {Element} The arrow element.
*/
}, {
key: 'createCounter',
value: function createCounter(id, ws_) {
var counter = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].createNode('span', id);
if (ws_.options.showIndex) {
var link = document.createElement('a');
link.href = '#';
link.title = 'View all slides';
counter.appendChild(link);
}
return counter;
}
}]);
return Navigation;
}();
/* harmony default export */ __webpack_exports__["a"] = (Navigation);
/***/ }),
/* 15 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_mobile_detector__ = __webpack_require__(3);
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; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
/**
* Scroll plugin.
*/
var Scroll = function () {
/**
* @param {WebSlides} wsInstance The WebSlides instance
* @constructor
*/
function Scroll(wsInstance) {
_classCallCheck(this, Scroll);
/**
* @type {WebSlides}
* @private
*/
this.ws_ = wsInstance;
/**
* Where the scroll is going to happen. The WebSlides element.
* @type {Element}
* @private
*/
this.scrollContainer_ = wsInstance.el;
/**
* Whether movement is happening up or down.
* @type {boolean}
* @private
*/
this.isGoingUp_ = false;
/**
* Whether movement is happening left or right.
* @type {boolean}
* @private
*/
this.isGoingLeft_ = false;
/**
* Timeout id holder.
* @type {?number}
* @private
*/
this.timeout_ = null;
// Disabling from option
if (!this.ws_.options.navigateOnScroll) {
return;
}
if (!__WEBPACK_IMPORTED_MODULE_0__utils_mobile_detector__["a" /* default */].isAny()) {
this.scrollContainer_.addEventListener('wheel', this.onMouseWheel_.bind(this));
if (!wsInstance.isVertical) {
wsInstance.el.addEventListener('ws:slide-change', this.onSlideChange_.bind(this));
}
}
}
/**
* When the slides change, set an inner timeout to avoid prematurely
* changing to the next slide again.
* @private
*/
_createClass(Scroll, [{
key: 'onSlideChange_',
value: function onSlideChange_() {
var _this = this;
this.timeout_ = setTimeout(function () {
_this.timeout_ = null;
}, this.ws_.options.scrollWait);
}
/**
* Reacts to the wheel event. Detects whether is going up or down and decides
* if it needs to move the slide based on the amount of delta.
* @param {WheelEvent} event The Wheel Event.
* @private
*/
}, {
key: 'onMouseWheel_',
value: function onMouseWheel_(event) {
if (this.ws_.isDisabled()) {
return;
}
if (this.ws_.isMoving || this.timeout_) {
event.preventDefault();
return;
}
// Firefox uses lines instead of pixels for delta
var linesToPx = event.deltaMode * this.ws_.options.minWheelDelta;
var wheelDeltaY = event.deltaY,
wheelDeltaX = event.deltaX;
var isVertical = this.ws_.isVertical;
var isHorizontalMovement = Math.abs(wheelDeltaX) > Math.abs(wheelDeltaY);
this.isGoingUp_ = wheelDeltaY < 0;
this.isGoingLeft_ = wheelDeltaX < 0;
// If we're mainly moving horizontally, prevent default
if (isHorizontalMovement) {
if (!isVertical) {
event.preventDefault();
} else {
// If we're moving horizontally but this is vertical, return to avoid
// unwanted navigation.
return;
}
}
if (Math.abs(wheelDeltaY + linesToPx) >= this.ws_.options.minWheelDelta || Math.abs(wheelDeltaX + linesToPx) >= this.ws_.options.minWheelDelta) {
if (isHorizontalMovement && this.isGoingLeft_ || !isHorizontalMovement && this.isGoingUp_) {
this.ws_.goPrev();
} else {
this.ws_.goNext();
}
event.preventDefault();
}
}
}]);
return Scroll;
}();
/* harmony default export */ __webpack_exports__["a"] = (Scroll);
/***/ }),
/* 16 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_mobile_detector__ = __webpack_require__(3);
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; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var EVENTS = {
touch: {
START: 'touchstart',
MOVE: 'touchmove',
END: 'touchend'
},
pointer: {
START: 'pointerdown',
MOVE: 'pointermove',
END: 'pointerup'
}
};
/**
* Touch plugin.
*/
var Touch = function () {
/**
* @param {WebSlides} wsInstance The WebSlides instance
* @constructor
*/
function Touch(wsInstance) {
_classCallCheck(this, Touch);
/**
* @type {WebSlides}
* @private
*/
this.ws_ = wsInstance;
/**
* Start position for the X coordinate.
* @type {number}
* @private
*/
this.startX_ = 0;
/**
* Start position for the Y coordinate.
* @type {number}
* @private
*/
this.startY_ = 0;
/**
* Start position for the X coord.
* @type {number}
* @private
*/
this.endX_ = 0;
/**
* Start position for the Y coord.
* @type {number}
* @private
*/
this.endY_ = 0;
/**
* Whether is enabled or not. Only enabled for touch devices.
* @type {boolean}
* @private
*/
this.isEnabled = false;
/**
* Whether is a gesture or not.
* @type {boolean}
* @private
*/
this.isGesture = false;
/**
* Stores start touch event (x, y).
* @type {array}
* @private
*/
this.startTouches = [];
/**
* Stores end touch event (x, y).
* @type {array}
* @private
*/
this.endTouches = [];
var events = void 0;
if (__WEBPACK_IMPORTED_MODULE_0__utils_mobile_detector__["a" /* default */].isAny()) {
// Likely IE
if (window.PointerEvent && (__WEBPACK_IMPORTED_MODULE_0__utils_mobile_detector__["a" /* default */].isWindows() || __WEBPACK_IMPORTED_MODULE_0__utils_mobile_detector__["a" /* default */].isWindowsPhone())) {
events = EVENTS.pointer;
} else {
events = EVENTS.touch;
}
this.isEnabled = true;
document.addEventListener(events.START, this.onStart_.bind(this), false);
document.addEventListener(events.MOVE, this.onMove_.bind(this), false);
document.addEventListener(events.END, this.onStop_.bind(this), false);
}
}
/**
* Start touch handler. Saves starting points.
* @param {Event} event The Touch event.
* @private
*/
_createClass(Touch, [{
key: 'onStart_',
value: function onStart_(event) {
if (this.ws_.isDisabled()) {
return;
}
var info = Touch.normalizeEventInfo(event);
if (event.touches.length === 1) {
this.startX_ = info.x;
this.startY_ = info.y;
this.endX_ = info.x;
this.endY_ = info.y;
} else if (event.touches.length > 1) {
this.startTouches = Touch.getTouchCoordinates(event);
this.endTouches = this.startTouches;
this.isGesture = true;
}
}
/**
* Move touch handler. Saves end points.
* @param {Event} event The Touch event.
* @private
*/
}, {
key: 'onMove_',
value: function onMove_(event) {
if (this.ws_.isDisabled()) {
return;
}
var info = Touch.normalizeEventInfo(event);
if (this.isGesture) {
this.endTouches = Touch.getTouchCoordinates(event);
} else {
this.endX_ = info.x;
this.endY_ = info.y;
}
}
/**
* Stop touch handler. Checks if it needs to make any actions.
* @private
*/
}, {
key: 'onStop_',
value: function onStop_() {
if (this.ws_.isDisabled()) {
return;
}
if (this.isGesture) {
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));
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));
if (startDistance > endDistance) {
// Pinch gesture
this.ws_.toggleZoom();
}
this.isGesture = false;
} else {
var diffX = this.startX_ - this.endX_;
var diffY = this.startY_ - this.endY_;
// It's an horizontal drag
if (Math.abs(diffX) > Math.abs(diffY)) {
if (diffX < -this.ws_.options.slideOffset) {
this.ws_.goPrev();
} else if (diffX > this.ws_.options.slideOffset) {
this.ws_.goNext();
}
}
}
}
/**
* Get X,Y coordinates from touch pointers.
* @param {Event} event
* @return {Object}
*/
}], [{
key: 'getTouchCoordinates',
value: function getTouchCoordinates(event) {
return [{
x: event.touches[0].clientX,
y: event.touches[0].clientY
}, {
x: event.touches[1].clientX,
y: event.touches[1].clientY
}];
}
/**
* Normalizes an event to deal with differences between PointerEvent and
* TouchEvent.
* @param {Event} event
* @return {Object} Normalised touch points.
*/
}, {
key: 'normalizeEventInfo',
value: function normalizeEventInfo(event) {
var touchEvent = { pageX: 0, pageY: 0 };
if (typeof event.changedTouches !== 'undefined') {
touchEvent = event.changedTouches[0];
} else if (typeof event.originalEvent !== 'undefined' && typeof event.originalEvent.changedTouches !== 'undefined') {
touchEvent = event.originalEvent.changedTouches[0];
}
var x = event.offsetX || event.layerX || touchEvent.pageX;
var y = event.offsetY || event.layerY || touchEvent.pageY;
return { x: x, y: y };
}
}]);
return Touch;
}();
/* harmony default export */ __webpack_exports__["a"] = (Touch);
/***/ }),
/* 17 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_dom__ = __webpack_require__(0);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__modules_slide__ = __webpack_require__(1);
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; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
/**
* Video plugin. Video plugin that allows to autoplay videos once the slide gets
* active.
*/
var Video = function () {
/**
* @param {WebSlides} wsInstance The WebSlides instance.
* @constructor
*/
function Video(wsInstance) {
_classCallCheck(this, Video);
/**
* @type {WebSlides}
* @private
*/
this.ws_ = wsInstance;
var videos = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].toArray(this.ws_.el.querySelectorAll('video'));
if (videos.length) {
videos.forEach(function (video) {
if (!video.hasAttribute('autoplay')) {
return;
}
video.removeAttribute('autoplay');
video.pause();
video.currentTime = 0;
var _Slide$getSectionFrom = __WEBPACK_IMPORTED_MODULE_1__modules_slide__["b" /* default */].getSectionFromEl(video),
i = _Slide$getSectionFrom.i;
var slide = wsInstance.slides[i - 1];
slide.video = video;
slide.el.addEventListener(__WEBPACK_IMPORTED_MODULE_1__modules_slide__["a" /* Events */].ENABLE, Video.onSectionEnabled);
slide.el.addEventListener(__WEBPACK_IMPORTED_MODULE_1__modules_slide__["a" /* Events */].DISABLE, Video.onSectionDisabled);
});
}
}
/**
* On Section enable hook. Will play the video.
* @param {CustomEvent} event
*/
_createClass(Video, null, [{
key: 'onSectionEnabled',
value: function onSectionEnabled(event) {
event.detail.slide.video.play();
}
/**
* On Section enable hook. Will pause the video.
* @param {CustomEvent} event
*/
}, {
key: 'onSectionDisabled',
value: function onSectionDisabled(event) {
event.detail.slide.video.pause();
}
}]);
return Video;
}();
/* harmony default export */ __webpack_exports__["a"] = (Video);
/***/ }),
/* 18 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_dom__ = __webpack_require__(0);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__modules_slide__ = __webpack_require__(1);
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; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
/* global YT */
/**
* Player wrapper around the YT player. This is mostly to get around the event
* in which we need to play a video which player isn't ready yet.
*/
var Player = function () {
/**
* @param {Element} el
*/
function Player(el) {
_classCallCheck(this, Player);
/**
* Whether the Player is ready or not.
* @type {boolean}
*/
this.ready = false;
/**
* Ready callback.
* @type {?function}
*/
this.onReadyCb = null;
/**
* Slide element in which the video is located.
* @type {Node}
*/
this.slide = __WEBPACK_IMPORTED_MODULE_1__modules_slide__["b" /* default */].getSectionFromEl(el).section;
/**
* Whether it should autoplay on load or not.
* @type {boolean}
*/
this.autoplay = typeof el.dataset.autoplay !== 'undefined';
/**
* Whether the video should be muted or not.
* @type {boolean}
*/
this.isMuted = typeof el.dataset.mute !== 'undefined';
/**
* Options with which the player is created.
* @type {Object}
*/
this.options = {
videoId: el.dataset.youtubeId,
playerVars: this.getPlayerVars(el),
events: {
onReady: this.onPlayerReady.bind(this)
}
};
/**
* The iframe in which the video is loaded.
* @type {Element}
*/
this.el = el;
/**
* Timeout id.
* @type {?number}
*/
this.timeout = null;
this.create();
}
/**
* Destroys the iframe. Saves the current time in case it gets restored.
*/
_createClass(Player, [{
key: 'destroy',
value: function destroy() {
this.currentTime = this.player.getCurrentTime();
this.player.destroy();
this.player = null;
this.el = this.slide.querySelector('[data-youtube]');
this.ready = false;
}
/**
* Creates the player.
*/
}, {
key: 'create',
value: function create() {
this.player = new YT.Player(this.el, this.options);
this.el = this.player.getIframe();
}
/**
* Player ready callback. Will play the video if it was intended to be played
* and will also call any pending callbacks.
*/
}, {
key: 'onPlayerReady',
value: function onPlayerReady() {
this.ready = true;
// Restoring the current time if saved
if (this.currentTime) {
this.player.seekTo(this.currentTime, true);
this.player.pauseVideo();
this.currentTime = null;
}
if (this.timeout && this.player.getPlayerState() !== 1) {
this.play();
}
if (this.onReadyCb) {
this.onReadyCb();
this.onReadyCb = null;
}
}
/**
* Plays the video.
*/
}, {
key: 'play',
value: function play() {
var _this = this;
if (this.ready) {
this.timeout = setTimeout(function () {
_this.timeout = null;
}, 1000);
if (this.isMuted) {
this.player.mute();
} else {
this.player.unMute();
}
this.player.playVideo();
} else {
this.onReadyCb = this.play;
}
}
/**
* Pause playing the video if it's already playing.
*/
}, {
key: 'pause',
value: function pause() {
if (this.player && this.player.pauseVideo && this.player.getPlayerState() === 1) {
this.player.pauseVideo();
}
}
/**
* Parses the element to have the proper variables.
* @param {Element} element
* @return {Object} Player variables.
*/
}, {
key: 'getPlayerVars',
value: function getPlayerVars(element) {
var vars = {
modestbranding: 1,
rel: 0,
origin: window.location.origin
};
if (this.slide.classList.contains('fullscreen')) {
// Disabling keyboard interaction for fullscreenvideos
vars.disablekb = 1;
}
if (typeof element.dataset.noControls !== 'undefined') {
vars.controls = 0;
vars.showinfo = 0;
}
if (typeof element.dataset.loop !== 'undefined') {
vars.loop = 1;
vars.playlist = element.dataset.youtubeId;
}
return vars;
}
}]);
return Player;
}();
/**
* Video plugin.
*/
var YouTube = function () {
/**
* Grid plugin that shows a grid on top of the WebSlides for easy prototyping.
* @param {WebSlides} wsInstance The WebSlides instance
*/
function YouTube(wsInstance) {
_classCallCheck(this, YouTube);
/**
* @type {WebSlides}
* @private
*/
this.ws_ = wsInstance;
this.videos = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].toArray(this.ws_.el.querySelectorAll('[data-youtube]'));
if (this.videos.length) {
this.inject();
}
}
/**
* Once the YouTube API is ready this gets called so we can start the videos.
*/
_createClass(YouTube, [{
key: 'onYTReady',
value: function onYTReady() {
var _this2 = this;
this.videos.forEach(function (video) {
var player = new Player(video);
if (typeof video.dataset.autoplay !== 'undefined') {
var _Slide$getSectionFrom = __WEBPACK_IMPORTED_MODULE_1__modules_slide__["b" /* default */].getSectionFromEl(player.el),
i = _Slide$getSectionFrom.i;
var slide = _this2.ws_.slides[i - 1];
slide.player = player;
slide.el.addEventListener(__WEBPACK_IMPORTED_MODULE_1__modules_slide__["a" /* Events */].ENABLE, YouTube.onSlideEvent);
slide.el.addEventListener(__WEBPACK_IMPORTED_MODULE_1__modules_slide__["a" /* Events */].DISABLE, YouTube.onSlideEvent);
slide.el.addEventListener(__WEBPACK_IMPORTED_MODULE_1__modules_slide__["a" /* Events */].ENTER, YouTube.onSlideEvent);
slide.el.addEventListener(__WEBPACK_IMPORTED_MODULE_1__modules_slide__["a" /* Events */].LEAVE, YouTube.onSlideEvent);
if (_this2.ws_.currentSlide_ === slide) {
YouTube.onSectionEnabled(slide);
}
}
});
}
/**
* Injects the YouTube iFrame API into the page.
*/
}, {
key: 'inject',
value: function inject() {
window.onYouTubeIframeAPIReady = this.onYTReady.bind(this);
var tag = document.createElement('script');
tag.src = 'https://www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}
/**
* Reacts to any event on the slide.
* @param {CustomEvent} event
*/
}], [{
key: 'onSlideEvent',
value: function onSlideEvent(event) {
var slide = event.detail.slide;
switch (event.type) {
case __WEBPACK_IMPORTED_MODULE_1__modules_slide__["a" /* Events */].ENABLE:
YouTube.onSectionEnabled(slide);
break;
case __WEBPACK_IMPORTED_MODULE_1__modules_slide__["a" /* Events */].DISABLE:
YouTube.onSectionDisabled(slide);
break;
case __WEBPACK_IMPORTED_MODULE_1__modules_slide__["a" /* Events */].LEAVE:
slide.player.destroy();
break;
case __WEBPACK_IMPORTED_MODULE_1__modules_slide__["a" /* Events */].ENTER:
slide.player.create();
break;
}
}
/**
* On Section enable hook. Will play the video.
* @param {Slide} slide
*/
}, {
key: 'onSectionEnabled',
value: function onSectionEnabled(slide) {
if (slide.player.autoplay) {
slide.player.play();
}
}
/**
* On Section enable hook. Will pause the video.
* @param {Slide} slide
*/
}, {
key: 'onSectionDisabled',
value: function onSectionDisabled(slide) {
slide.player.pause();
}
}]);
return YouTube;
}();
/* harmony default export */ __webpack_exports__["a"] = (YouTube);
/***/ }),
/* 19 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_dom__ = __webpack_require__(0);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__utils_keys__ = __webpack_require__(2);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__utils_scroll_to__ = __webpack_require__(4);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__modules_slide__ = __webpack_require__(1);
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; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var CLASSES = {
ZOOM: 'grid',
DIV: 'column',
WRAP: 'wrap-zoom',
WRAP_CONTAINER: 'wrap',
CURRENT: 'current',
SLIDE: 'slide',
ZOOM_ENABLED: 'ws-ready-zoom'
};
var ID = 'webslides-zoomed';
/**
* Zoom plugin.
*/
var Zoom = function () {
/**
* @param {WebSlides} wsInstance The WebSlides instance
* @constructor
*/
function Zoom(wsInstance) {
_classCallCheck(this, Zoom);
/**
* @type {WebSlides}
* @private
*/
this.ws_ = wsInstance;
/**
* @type {WebSlides}
* @private
*/
this.zws_ = {};
/**
* @type {boolean}
* @private
*/
this.isZoomed_ = false;
this.preBuildZoom_();
document.body.addEventListener('keydown', this.onKeyDown.bind(this));
}
/**
* On key down handler. Will decide if Zoom in or out
* @param {Event} event Key down event.
*/
_createClass(Zoom, [{
key: 'onKeyDown',
value: function onKeyDown(event) {
if (!this.isZoomed_ && __WEBPACK_IMPORTED_MODULE_1__utils_keys__["a" /* default */].MINUS.some(function (key) {
return key === event.which;
})) {
this.zoomIn();
} else if (this.isZoomed_ && (__WEBPACK_IMPORTED_MODULE_1__utils_keys__["a" /* default */].PLUS.some(function (key) {
return key === event.which;
}) || event.which === __WEBPACK_IMPORTED_MODULE_1__utils_keys__["a" /* default */].ESCAPE)) {
this.zoomOut();
}
}
/**
* Prepare zoom structure, scales the slides and uses a grid layout
* to show them.
*/
}, {
key: 'preBuildZoom_',
value: function preBuildZoom_() {
var _this = this;
// Clone #webslides element
this.zws_.el = this.ws_.el.cloneNode();
this.zws_.el.id = ID;
this.zws_.wrap = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].createNode('div');
this.zws_.wrap.className = CLASSES.WRAP_CONTAINER;
this.zws_.el.appendChild(this.zws_.wrap);
this.zws_.grid = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].createNode('div');
this.zws_.grid.className = CLASSES.ZOOM;
this.zws_.wrap.appendChild(this.zws_.grid);
this.zws_.el.addEventListener('click', function () {
return _this.toggleZoom();
});
// Clone the slides
this.zws_.slides = [].map.call(this.ws_.slides, function (slide, i) {
var s_ = slide.el.cloneNode(true);
_this.zws_.grid.appendChild(s_);
return new __WEBPACK_IMPORTED_MODULE_3__modules_slide__["b" /* default */](s_, i);
});
this.disable();
__WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].after(this.zws_.el, this.ws_.el);
// Creates the container for each slide
this.zws_.slides.forEach(function (elem) {
return _this.createSlideBlock_(elem);
});
}
/**
* Creates a block structure around the slide.
* @param {Element} elem slide element.
*/
}, {
key: 'createSlideBlock_',
value: function createSlideBlock_(elem) {
var _this2 = this;
// Wraps the slide around a container
var wrap = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].wrap(elem.el, 'div');
wrap.className = CLASSES.WRAP;
wrap.setAttribute('id', 'zoomed-' + elem.el.getAttribute('id'));
// Slide container, need due to flexbox styles
var div = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].wrap(wrap, 'div');
div.className = CLASSES.DIV;
// Adding some layer for controlling click events
var divLayer = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].createNode('div');
divLayer.className = 'zoom-layer';
divLayer.addEventListener('click', function (e) {
e.stopPropagation();
_this2.zoomOut();
_this2.ws_.goToSlide(elem.i);
});
wrap.appendChild(divLayer);
// Slide number
var slideNumber = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].createNode('p', '', '' + (elem.i + 1));
slideNumber.className = 'text-slide-number';
div.appendChild(slideNumber);
}
/**
* Toggles zoom.
*/
}, {
key: 'toggleZoom',
value: function toggleZoom() {
if (this.isZoomed_) {
this.zoomOut();
} else {
this.zoomIn();
}
}
/**
* Zoom In the slider, scales the slides and uses a grid layout to show them.
*/
}, {
key: 'zoomIn',
value: function zoomIn() {
var _this3 = this;
if (!this.ws_.options.showIndex) return;
this.enable();
var currentId = this.ws_.currentSlide_.el.id;
var zoomedCurrent = this.zws_.el.querySelector('.' + CLASSES.WRAP + '.' + CLASSES.CURRENT);
if (zoomedCurrent) {
zoomedCurrent.classList.remove(CLASSES.CURRENT);
}
var actualCurrent = this.zws_.el.querySelector('#zoomed-' + currentId);
actualCurrent.classList.add(CLASSES.CURRENT);
this.isZoomed_ = true;
document.documentElement.classList.add(CLASSES.ZOOM_ENABLED);
setTimeout(function () {
_this3.ws_.disable();
_this3.zws_.el.classList.add('in');
var wrapCSS = window.getComputedStyle(_this3.zws_.grid);
var scrollingElement = document.body;
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);
}, 50);
}
/**
* Zoom Out the slider, remove scale from the slides.
*/
}, {
key: 'zoomOut',
value: function zoomOut() {
var _this4 = this;
if (!this.ws_.options.showIndex) return;
this.zws_.el.classList.remove('in');
setTimeout(function () {
_this4.ws_.enable();
_this4.disable();
_this4.isZoomed_ = false;
document.documentElement.classList.remove(CLASSES.ZOOM_ENABLED);
}, 400);
}
/**
* Hides the zoom container
*/
}, {
key: 'disable',
value: function disable() {
this.zws_.el.classList.add('disabled');
}
/**
* Shows the zoom container
*/
}, {
key: 'enable',
value: function enable() {
this.zws_.el.classList.remove('disabled');
}
}]);
return Zoom;
}();
/* harmony default export */ __webpack_exports__["a"] = (Zoom);
/***/ }),
/* 20 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/**
* Swing easing function.
* @param {number} p The percentage of time that has passed.
* @return {number}
*/
function swing(p) {
return 0.5 - Math.cos(p * Math.PI) / 2;
}
/* harmony default export */ __webpack_exports__["a"] = ({ swing: swing });
/***/ }),
/* 21 */
/***/ (function(module, exports) {
// removed by extract-text-webpack-plugin
/***/ })
/******/ ]);
Reference in a new issue Copy permalink