Merge pull request #45 from jlantunez/scroll-fix

Adding a few changes

CHANGELOG.md

@@ -1,3 +1,22 @@
+# 1.1.0 
+
+## Bugfixes
+
+- Fixed a bug which caused Chrome on OSX to stutter a lot on vertical transitioning due to elastic scroll bounce.
+- [[#28](https://github.com/jlantunez/webslides/issues/28)] Fixed scroll on Firefox.
+- [[#38](https://github.com/jlantunez/webslides/issues/38)] Fixed a bug in Safari which lead to unexpected behaviour using any form of movements.
+- [[#10](https://github.com/jlantunez/webslides/issues/10)] Fixed animation flash on Safari.
+
+## New Features
+
+- [[#1](https://github.com/jlantunez/webslides/issues/1)] Adding option to click to go to the next slide. Read more [here](https://github.com/jlantunez/webslides/blob/master/docs/click-to-nav.md).
+- [[#1](https://github.com/jlantunez/webslides/issues/1)] Improved sliding with mouse scroll and touchpad. It's now possible to use scroll to move an horizontal presentation.
+It's also possible to scroll horizontally on horizontal presentations to move forward/backwards the presentation.
+
+## Regression
+
+- Introduced a minor bug on iOS Safari which leads to the bottom part of the page not being visible on the first scroll. This is likely a browser bug but it has been unearthed in this version due to a much needed improvement on scrolling behaviour bugs. We're trying to investigate a bit more and will provide a fix ASAP.
+
 # 1.0.0 (2017-02-23)
 
 This release is a special one since it sets up in the path of a better development environment. Although it's far from

docs/click-to-nav.md

@@ -0,0 +1,16 @@
+## Click To Nav plugin
+
+This plugin is included by default but disabled. In order to enable it, the option `changeOnClick` must be passed as
+`true`.
+
+```javascript
+const ws = new WebSlides({ changeOnClick: true });
+```
+
+This will make every click to navigate to the next slide except for clicks that happens on the following elements:
+
+* `input`.
+* `select` or `option`.
+* `button`.
+* `a`.
+* Any element with the attribute `data-prevent-nav`.

docs/technical.md

@@ -24,6 +24,7 @@ WebSlides constructor accepts an object with options.
 | Param | Type | Default | Description |
 |-----------|----------------|-----------|-------------------------------------------------------------------------------|
 | `autoslide` | `number` or `boolean` | `false` | Amount of milliseconds to wait to go to next slide automatically. |
+| `changeOnClick` | `boolean` | `false` | If true, clicking on the page will go to the next slide unless it's a clickable element. See [ClickToNav docs](./click-to-nav.md) for more info. |
 
 
 ```javascript

package.json

@@ -12,7 +12,16 @@
     "presentation",
     "css"
   ],
-  "author": "Jose Luís Antúnez",
+  "author": "Jose Luís Antúnez <jlantunez@gmail.com>",
+  "contributors": [
+    {
+      "name": "Luís Sacristán"
+    },
+    {
+      "name": "Antonio Laguna",
+      "email": "a.laguna@funcion13.com"
+    }
+  ],
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/jlantunez/webslides/issues"

src/js/modules/webslides.js

@@ -1,7 +1,7 @@
 import Plugins from '../plugins/plugins';
 import Slide from './slide';
 import DOM from '../utils/dom';
-import ScrollHelper from '../utils/scroll-to';
+import scrollTo from '../utils/scroll-to';
 
 const CLASSES = {
   VERTICAL: 'vertical'
@@ -9,6 +9,7 @@ const CLASSES = {
 
 // Default plugins
 const PLUGINS = {
+  'clickNav': Plugins.ClickNav,
   'grid': Plugins.Grid,
   'hash': Plugins.Hash,
   'keyboard': Plugins.Keyboard,
@@ -21,10 +22,12 @@ export default class WebSlides {
   /**
    * Options for WebSlides
    * @param {number|boolean} autoslide Is false by default. If a number is
-   * provided, it will autoslide every given milliseconds.
+   * @param {boolean} changeOnClick Is false by default. If true, it will allow
+   * clicking on any place to change the slide.
    */
   constructor({
-    autoslide = false
+    autoslide = false,
+    changeOnClick = false
   } = {}) {
     /**
      * WebSlide element.
@@ -82,6 +85,12 @@ export default class WebSlides {
      * @private
      */
     this.autoslide_ = autoslide;
+    /**
+     * Whether navigation should initiate on click or not.
+     * @type {boolean}
+     * @private
+     */
+    this.changeOnClick_ = changeOnClick;
 
     if (!this.el) {
       throw new Error('Couldn\'t find the webslides container!');
@@ -186,29 +195,27 @@ export default class WebSlides {
    * @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 DOM.lockScroll
+   * @see scrollTo
-   * @see DOM.unlockScroll
-   * @see ScrollHelper.scrollTo
    */
   scrollTransitionToSlide_(isMovingForward, nextSlide, callback) {
-    DOM.lockScroll();
+    this.el.style.overflow = 'none';
 
     if (!isMovingForward) {
       nextSlide.moveBeforeFirst();
       nextSlide.show();
-      ScrollHelper.scrollTo(this.currentSlide_.el.offsetTop, 0);
+      scrollTo(this.currentSlide_.el.offsetTop, 0);
     } else {
       nextSlide.show();
     }
 
-    ScrollHelper.scrollTo(nextSlide.el.offsetTop, 500, () => {
+    scrollTo(nextSlide.el.offsetTop, 500, () => {
       this.currentSlide_.hide();
 
       if (isMovingForward) {
         this.currentSlide_.moveAfterLast();
       }
 
-      DOM.unlockScroll();
+      this.el.style.overflow = 'auto';
       setTimeout(() => { callback.call(this, nextSlide); }, 150);
     });
   }
@@ -222,7 +229,7 @@ export default class WebSlides {
    * @private
    */
   transitionToSlide_(isMovingForward, nextSlide, callback) {
-    ScrollHelper.scrollTo(0, 0);
+    scrollTo(0, 0);
 
     if (!isMovingForward) {
       nextSlide.moveBeforeFirst();

src/js/plugins/click-nav.js

@@ -0,0 +1,39 @@
+const CLICKABLE_ELS = [
+  'INPUT',
+  'SELECT',
+  'OPTION',
+  'BUTTON',
+  'A',
+  'TEXTAREA'
+];
+
+export default class ClickNav {
+  /**
+   * ClickNav plugin that allows to click on the page to get to the next slide.
+   * @param {WebSlides} wsInstance The WebSlides instance
+   */
+  constructor(wsInstance) {
+    /**
+     * @type {WebSlides}
+     * @private
+     */
+    this.ws_ = wsInstance;
+
+    if (wsInstance.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
+   */
+  onClick_(event) {
+    if (CLICKABLE_ELS.indexOf(event.target.tagName) < 0 &&
+      typeof event.target.dataset.preventNav === 'undefined') {
+      this.ws_.goNext();
+    }
+  }
+}

src/js/plugins/plugins.js

@@ -1,3 +1,4 @@
+import ClickNav from './click-nav';
 import Grid from './grid';
 import Hash from './hash';
 import Keyboard from './keyboard';
@@ -6,6 +7,7 @@ import Scroll from './scroll';
 import Touch from './touch';
 
 export default {
+  ClickNav,
   Grid,
   Hash,
   Keyboard,

src/js/plugins/scroll.js

@@ -1,4 +1,4 @@
-import ScrollHelper from '../utils/scroll-to';
+import MobileDetector from '../utils/mobile-detector';
 
 const MIN_WHEEL_DELTA = 40;
 
@@ -13,16 +13,51 @@ export default class Scroll {
      * @private
      */
     this.ws_ = wsInstance;
-
+    /**
-    this.scrollContainer_ = ScrollHelper.getScrollableContainer();
+     * 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;
 
-    if (this.ws_.isVertical) {
+    if (!MobileDetector.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
+   */
+  onSlideChange_() {
+    this.timeout_ = setTimeout(() => { this.timeout_ = null; }, 450);
+  }
+
   /**
    * 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.
@@ -30,15 +65,33 @@ export default class Scroll {
    * @private
    */
   onMouseWheel_(event) {
-    if (this.ws_.isMoving) {
+    if (this.ws_.isMoving || this.timeout_) {
+      event.preventDefault();
       return;
     }
 
-    const { deltaY: wheelDelta } = event;
+    const { deltaY: wheelDeltaY, deltaX: wheelDeltaX } = event;
-    this.isGoingUp_ = wheelDelta < 0;
+    const isVertical = this.ws_.isVertical;
+    const isHorizontalMovement = Math.abs(wheelDeltaX) > Math.abs(wheelDeltaY);
+    this.isGoingUp_ = wheelDeltaY < 0;
+    this.isGoingLeft_ = wheelDeltaX < 0;
 
-    if (Math.abs(wheelDelta) >= MIN_WHEEL_DELTA) {
+
-      if (this.isGoingUp_) {
+    // 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) >= MIN_WHEEL_DELTA ||
+        Math.abs(wheelDeltaX) >= MIN_WHEEL_DELTA) {
+      if ((isHorizontalMovement && this.isGoingLeft_) ||
+          (!isHorizontalMovement && this.isGoingUp_)) {
         this.ws_.goPrev();
       } else {
         this.ws_.goNext();

src/js/utils/dom.js

@@ -42,22 +42,6 @@ export default class DOM {
     el.style.display = '';
   }
 
-  /**
-   * Locks the scroll on the document by setting the HTML to have a hidden
-   * overflow.
-   */
-  static lockScroll() {
-    document.documentElement.style.overflow = 'hidden';
-  }
-
-  /**
-   * Unlocks the scroll on the document by setting the HTML to have an auto
-   * overflow.
-   */
-  static unlockScroll() {
-    document.documentElement.style.overflow = 'auto';
-  }
-
   /**
    * Fires a custom event on the given target.
    * @param {Element} target The target of the event.

src/js/utils/scroll-to.js

@@ -1,33 +1,6 @@
 import Easings from './easing';
 
-let SCROLLABLE_CONTAINER = getScrollableContainer();
+let SCROLLABLE_CONTAINER = document.getElementById('webslides');
-
-/**
- * Returns the correct DOM element to be used for scrolling the
- * page, due to Firefox not scrolling on document.body.
- * @return {Element} Scrollable Element.
- */
-function getScrollableContainer() {
-  if (SCROLLABLE_CONTAINER) {
-    return SCROLLABLE_CONTAINER;
-  }
-
-  const documentElement = window.document.documentElement;
-  let scrollableContainer;
-
-  documentElement.scrollTop = 1;
-
-  if (documentElement.scrollTop === 1) {
-    documentElement.scrollTop = 0;
-    scrollableContainer = documentElement;
-  } else {
-    scrollableContainer = document.body;
-  }
-
-  SCROLLABLE_CONTAINER = scrollableContainer;
-
-  return scrollableContainer;
-}
 
 /**
  * Smoothly scrolls to a given Y position using Easing.Swing. It'll run a
@@ -36,14 +9,13 @@ function getScrollableContainer() {
  * @param {number} duration Duration of the animation. 500ms by default.
  * @param {function} cb Callback function to call upon completion.
  */
-function scrollTo(y, duration = 500, cb = () => {}) {
+export default function scrollTo(y, duration = 500, cb = () => {}) {
-  const scrollableContainer = getScrollableContainer();
+  const delta = y - SCROLLABLE_CONTAINER.scrollTop;
-  const delta = y - scrollableContainer.scrollTop;
+  const startLocation = SCROLLABLE_CONTAINER.scrollTop;
-  const startLocation = scrollableContainer.scrollTop;
   const increment = 16;
 
   if (!duration) {
-    scrollableContainer.scrollTop = y;
+    SCROLLABLE_CONTAINER.scrollTop = y;
     cb();
     return;
   }
@@ -58,7 +30,7 @@ function scrollTo(y, duration = 500, cb = () => {}) {
       delta,
       duration);
 
-    scrollableContainer.scrollTop = Math.floor(startLocation +
+    SCROLLABLE_CONTAINER.scrollTop = Math.floor(startLocation +
         (easingP * delta));
 
     if (elapsedTime < duration) {
@@ -70,5 +42,3 @@ function scrollTo(y, duration = 500, cb = () => {}) {
 
   animateScroll(0);
 }
-
-export default { getScrollableContainer, scrollTo };

static/css/base.css

@@ -56,7 +56,7 @@
 0. CSS Reset & Normalize
 =========================================== */
 
-html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, bbbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { border: 0; font-size: 100%; font: inherit; vertical-align: baseline; margin: 0; padding: 0 }
+html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { border: 0; font-size: 100%; font: inherit; vertical-align: baseline; margin: 0; padding: 0 }
 
 article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
   display: block;
@@ -181,9 +181,14 @@ hr {
   text-align: center;
   margin: 3.2rem auto;
 }
-h2 + hr, h3 + hr {margin-bottom: 4.8rem;
+
+h2 + hr,
+h3 + hr {
+  margin-bottom: 4.8rem;
 }
-p + hr {margin-bottom: 4rem;
+
+p + hr {
+  margin-bottom: 4rem;
 }
 
 /*
@@ -205,7 +210,7 @@ i {
   font-style: italic;
 }
 
-bbbr,
+abbr,
 acronym {
   cursor: help;
 }
@@ -238,7 +243,6 @@ img {
 }
 
 img:hover {
-  filter: alpha(opacity=9000);
   opacity: 0.90;
   filter: alpha(opacity=90);
 }
@@ -298,11 +302,31 @@ dd {
 1. Base --> Baseline: 8px = .8rem
 =========================================== */
 
+/* -- Disable elastic scrolling/bounce  -- */
+
+html,
 body {
-  overflow-x: hidden;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
 }
 
-/* == Prototype faster - Vertical rhythm  == */
+#webslides {
+  height: 100vh;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+}
+/* -- Hide scrollbar, but still being able to scroll -- */
+
+#webslides {
+    -ms-overflow-style: none;  /* IE 10+ */
+}
+#webslides::-webkit-scrollbar {
+    display: none;  /* Safari and Chrome */
+}
+
+/* -- Prototype faster - Vertical rhythm  -- */
 
 body.baseline {
   background: url(../images/baseline.png) left top .8rem/.8rem;

static/js/webslides.js

@@ -63,7 +63,7 @@
 /******/ 	__webpack_require__.p = "/static/js/";
 
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 15);
+/******/ 	return __webpack_require__(__webpack_require__.s = 16);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -71,7 +71,7 @@
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__custom_event__ = __webpack_require__(12);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__custom_event__ = __webpack_require__(13);
 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"); } }
@@ -136,28 +136,6 @@ var DOM = function () {
       el.style.display = '';
     }
 
-    /**
-     * Locks the scroll on the document by setting the HTML to have a hidden
-     * overflow.
-     */
-
-  }, {
-    key: 'lockScroll',
-    value: function lockScroll() {
-      document.documentElement.style.overflow = 'hidden';
-    }
-
-    /**
-     * Unlocks the scroll on the document by setting the HTML to have an auto
-     * overflow.
-     */
-
-  }, {
-    key: 'unlockScroll',
-    value: function unlockScroll() {
-      document.documentElement.style.overflow = 'auto';
-    }
-
     /**
      * Fires a custom event on the given target.
      * @param {Element} target The target of the event.
@@ -177,6 +155,18 @@ var DOM = function () {
 
       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);
+    }
   }]);
 
   return DOM;
@@ -205,90 +195,109 @@ var Keys = {
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__easing__ = __webpack_require__(13);
+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 SCROLLABLE_CONTAINER = getScrollableContainer();
+var UA = window.navigator.userAgent;
 
-/**
+var MobileDetector = function () {
- * Returns the correct DOM element to be used for scrolling the
+  function MobileDetector() {
- * page, due to Firefox not scrolling on document.body.
+    _classCallCheck(this, MobileDetector);
- * @return {Element} Scrollable Element.
- */
-function getScrollableContainer() {
-  if (SCROLLABLE_CONTAINER) {
-    return SCROLLABLE_CONTAINER;
   }
 
-  var documentElement = window.document.documentElement;
+  _createClass(MobileDetector, null, [{
-  var scrollableContainer = void 0;
+    key: "isAndroid",
 
-  documentElement.scrollTop = 1;
+    /**
-
+     * Whether the device is Android or not.
-  if (documentElement.scrollTop === 1) {
+     * @return {Boolean}
-    documentElement.scrollTop = 0;
+     */
-    scrollableContainer = documentElement;
+    value: function isAndroid() {
-  } else {
+      return !!UA.match(/Android/i);
-    scrollableContainer = document.body;
-  }
-
-  SCROLLABLE_CONTAINER = scrollableContainer;
-
-  return scrollableContainer;
-}
-
-/**
- * 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.
- */
-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 scrollableContainer = getScrollableContainer();
-  var delta = y - scrollableContainer.scrollTop;
-  var startLocation = scrollableContainer.scrollTop;
-  var increment = 16;
-
-  if (!duration) {
-    scrollableContainer.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);
-
-    scrollableContainer.scrollTop = Math.floor(startLocation + easingP * delta);
-
-    if (elapsedTime < duration) {
-      setTimeout(function () {
-        return animateScroll(elapsedTime);
-      }, increment);
-    } else {
-      cb();
     }
-  };
 
-  animateScroll(0);
+    /**
-}
+     * Whether the device is BlackBerry or not.
+     * @return {Boolean}
+     */
 
-/* harmony default export */ __webpack_exports__["a"] = { getScrollableContainer: getScrollableContainer, scrollTo: scrollTo };
+  }, {
+    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(/iPhone/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;
 
 /***/ }),
 /* 3 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__ = __webpack_require__(9);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__ = __webpack_require__(10);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__slide__ = __webpack_require__(4);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__utils_dom__ = __webpack_require__(0);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__utils_scroll_to__ = __webpack_require__(2);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__utils_scroll_to__ = __webpack_require__(15);
 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"); } }
@@ -304,6 +313,7 @@ var CLASSES = {
 
 // Default plugins
 var PLUGINS = {
+  '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,
@@ -316,12 +326,15 @@ var WebSlides = function () {
   /**
    * Options for WebSlides
    * @param {number|boolean} autoslide Is false by default. If a number is
-   * provided, it will autoslide every given milliseconds.
+   * @param {boolean} changeOnClick Is false by default. If true, it will allow
+   * clicking on any place to change the slide.
    */
   function WebSlides() {
     var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
         _ref$autoslide = _ref.autoslide,
-        autoslide = _ref$autoslide === undefined ? false : _ref$autoslide;
+        autoslide = _ref$autoslide === undefined ? false : _ref$autoslide,
+        _ref$changeOnClick = _ref.changeOnClick,
+        changeOnClick = _ref$changeOnClick === undefined ? false : _ref$changeOnClick;
 
     _classCallCheck(this, WebSlides);
 
@@ -381,6 +394,12 @@ var WebSlides = function () {
      * @private
      */
     this.autoslide_ = autoslide;
+    /**
+     * Whether navigation should initiate on click or not.
+     * @type {boolean}
+     * @private
+     */
+    this.changeOnClick_ = changeOnClick;
 
     if (!this.el) {
       throw new Error('Couldn\'t find the webslides container!');
@@ -455,7 +474,7 @@ var WebSlides = function () {
   }, {
     key: 'grabSlides_',
     value: function grabSlides_() {
-      this.slides = Array.from(this.el.childNodes).map(function (slide, i) {
+      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__["a" /* default */](slide, i);
       });
 
@@ -503,9 +522,7 @@ var WebSlides = function () {
      * @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 DOM.lockScroll
+     * @see scrollTo
-     * @see DOM.unlockScroll
-     * @see ScrollHelper.scrollTo
      */
 
   }, {
@@ -513,24 +530,24 @@ var WebSlides = function () {
     value: function scrollTransitionToSlide_(isMovingForward, nextSlide, callback) {
       var _this2 = this;
 
-      __WEBPACK_IMPORTED_MODULE_2__utils_dom__["a" /* default */].lockScroll();
+      this.el.style.overflow = 'none';
 
       if (!isMovingForward) {
         nextSlide.moveBeforeFirst();
         nextSlide.show();
-        __WEBPACK_IMPORTED_MODULE_3__utils_scroll_to__["a" /* default */].scrollTo(this.currentSlide_.el.offsetTop, 0);
+        __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__utils_scroll_to__["a" /* default */])(this.currentSlide_.el.offsetTop, 0);
       } else {
         nextSlide.show();
       }
 
-      __WEBPACK_IMPORTED_MODULE_3__utils_scroll_to__["a" /* default */].scrollTo(nextSlide.el.offsetTop, 500, function () {
+      __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__utils_scroll_to__["a" /* default */])(nextSlide.el.offsetTop, 500, function () {
         _this2.currentSlide_.hide();
 
         if (isMovingForward) {
           _this2.currentSlide_.moveAfterLast();
         }
 
-        __WEBPACK_IMPORTED_MODULE_2__utils_dom__["a" /* default */].unlockScroll();
+        _this2.el.style.overflow = 'auto';
         setTimeout(function () {
           callback.call(_this2, nextSlide);
         }, 150);
@@ -549,7 +566,7 @@ var WebSlides = function () {
   }, {
     key: 'transitionToSlide_',
     value: function transitionToSlide_(isMovingForward, nextSlide, callback) {
-      __WEBPACK_IMPORTED_MODULE_3__utils_scroll_to__["a" /* default */].scrollTo(0, 0);
+      __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__utils_scroll_to__["a" /* default */])(0, 0);
 
       if (!isMovingForward) {
         nextSlide.moveBeforeFirst();
@@ -689,7 +706,7 @@ var WebSlides = function () {
     value: function play(time) {
       time = time || this.autoslide_;
 
-      if (!this.interval_ && Number.isInteger(time) && time > 0) {
+      if (!this.interval_ && typeof time === 'number' && time > 0) {
         this.interval_ = setInterval(this.goNext.bind(this), time);
       }
     }
@@ -839,6 +856,58 @@ var Slide = function () {
 /* 5 */
 /***/ (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'];
+
+var ClickNav = function () {
+  /**
+   * ClickNav plugin that allows to click on the page to get to the next slide.
+   * @param {WebSlides} wsInstance The WebSlides instance
+   */
+  function ClickNav(wsInstance) {
+    _classCallCheck(this, ClickNav);
+
+    /**
+     * @type {WebSlides}
+     * @private
+     */
+    this.ws_ = wsInstance;
+
+    if (wsInstance.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;
+
+/***/ }),
+/* 6 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
 "use strict";
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_keys__ = __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; }; }();
@@ -900,7 +969,7 @@ var Grid = function () {
 /* harmony default export */ __webpack_exports__["a"] = Grid;
 
 /***/ }),
-/* 6 */
+/* 7 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -968,7 +1037,7 @@ var Hash = function () {
         slide = parseInt(results[1], 10);
       }
 
-      if (!Number.isInteger(slide) || slide < 0 || !Array.isArray(results)) {
+      if (typeof slide !== 'number' || slide < 0 || !Array.isArray(results)) {
         slide = null;
       } else {
         slide--; // Convert to 0 index
@@ -1000,7 +1069,7 @@ var Hash = function () {
 /* harmony default export */ __webpack_exports__["a"] = Hash;
 
 /***/ }),
-/* 7 */
+/* 8 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -1071,7 +1140,7 @@ var Keyboard = function () {
 /* harmony default export */ __webpack_exports__["a"] = Keyboard;
 
 /***/ }),
-/* 8 */
+/* 9 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -1223,16 +1292,18 @@ var Navigation = function () {
 /* harmony default export */ __webpack_exports__["a"] = Navigation;
 
 /***/ }),
-/* 9 */
+/* 10 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__grid__ = __webpack_require__(5);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__click_nav__ = __webpack_require__(5);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__hash__ = __webpack_require__(6);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__grid__ = __webpack_require__(6);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__keyboard__ = __webpack_require__(7);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__hash__ = __webpack_require__(7);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__navigation__ = __webpack_require__(8);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__keyboard__ = __webpack_require__(8);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__scroll__ = __webpack_require__(10);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__navigation__ = __webpack_require__(9);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__touch__ = __webpack_require__(11);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__scroll__ = __webpack_require__(11);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__touch__ = __webpack_require__(12);
+
 
 
 
@@ -1241,20 +1312,21 @@ var Navigation = function () {
 
 
 /* harmony default export */ __webpack_exports__["a"] = {
-  Grid: __WEBPACK_IMPORTED_MODULE_0__grid__["a" /* default */],
+  ClickNav: __WEBPACK_IMPORTED_MODULE_0__click_nav__["a" /* default */],
-  Hash: __WEBPACK_IMPORTED_MODULE_1__hash__["a" /* default */],
+  Grid: __WEBPACK_IMPORTED_MODULE_1__grid__["a" /* default */],
-  Keyboard: __WEBPACK_IMPORTED_MODULE_2__keyboard__["a" /* default */],
+  Hash: __WEBPACK_IMPORTED_MODULE_2__hash__["a" /* default */],
-  Navigation: __WEBPACK_IMPORTED_MODULE_3__navigation__["a" /* default */],
+  Keyboard: __WEBPACK_IMPORTED_MODULE_3__keyboard__["a" /* default */],
-  Scroll: __WEBPACK_IMPORTED_MODULE_4__scroll__["a" /* default */],
+  Navigation: __WEBPACK_IMPORTED_MODULE_4__navigation__["a" /* default */],
-  Touch: __WEBPACK_IMPORTED_MODULE_5__touch__["a" /* default */]
+  Scroll: __WEBPACK_IMPORTED_MODULE_5__scroll__["a" /* default */],
+  Touch: __WEBPACK_IMPORTED_MODULE_6__touch__["a" /* default */]
 };
 
 /***/ }),
-/* 10 */
+/* 11 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_scroll_to__ = __webpack_require__(2);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_mobile_detector__ = __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"); } }
@@ -1276,36 +1348,92 @@ var Scroll = function () {
      * @private
      */
     this.ws_ = wsInstance;
-
+    /**
-    this.scrollContainer_ = __WEBPACK_IMPORTED_MODULE_0__utils_scroll_to__["a" /* default */].getScrollableContainer();
+     * 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;
 
-    if (this.ws_.isVertical) {
+    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));
+      }
     }
   }
 
   /**
-   * Reacts to the wheel event. Detects whether is going up or down and decides
+   * When the slides change, set an inner timeout to avoid prematurely
-   * if it needs to move the slide based on the amount of delta.
+   * changing to the next slide again.
-   * @param {WheelEvent} event The Wheel Event.
    * @private
    */
 
 
   _createClass(Scroll, [{
+    key: 'onSlideChange_',
+    value: function onSlideChange_() {
+      var _this = this;
+
+      this.timeout_ = setTimeout(function () {
+        _this.timeout_ = null;
+      }, 450);
+    }
+
+    /**
+     * 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_.isMoving) {
+      if (this.ws_.isMoving || this.timeout_) {
+        event.preventDefault();
         return;
       }
 
-      var wheelDelta = event.deltaY;
+      var wheelDeltaY = event.deltaY,
+          wheelDeltaX = event.deltaX;
 
-      this.isGoingUp_ = wheelDelta < 0;
+      var isVertical = this.ws_.isVertical;
+      this.isGoingUp_ = wheelDeltaY < 0;
+      this.isGoingLeft_ = wheelDeltaX < 0;
 
-      if (Math.abs(wheelDelta) >= MIN_WHEEL_DELTA) {
+      // If we're mainly moving horizontally, prevent default
-        if (this.isGoingUp_) {
+      if (Math.abs(wheelDeltaX) > Math.abs(wheelDeltaY)) {
+        if (!isVertical) {
+          event.preventDefault();
+        } else {
+          // If we're moving horizontally but this is vertical, return to avoid
+          // unwanted navigation.
+          return;
+        }
+      }
+
+      if (Math.abs(wheelDeltaY) >= MIN_WHEEL_DELTA || Math.abs(wheelDeltaX) >= MIN_WHEEL_DELTA) {
+        if (isVertical && this.isGoingUp_ || !isVertical && this.isGoingLeft_) {
           this.ws_.goPrev();
         } else {
           this.ws_.goNext();
@@ -1323,11 +1451,11 @@ var Scroll = function () {
 ;
 
 /***/ }),
-/* 11 */
+/* 12 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_mobile_detector__ = __webpack_require__(14);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_mobile_detector__ = __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"); } }
@@ -1503,7 +1631,7 @@ var Touch = function () {
 ;
 
 /***/ }),
-/* 12 */
+/* 13 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -1546,7 +1674,7 @@ var WSCustomEvent = canIuseNativeCustom() ? NativeCustomEvent : IECustomEvent;
 /* harmony default export */ __webpack_exports__["a"] = WSCustomEvent;
 
 /***/ }),
-/* 13 */
+/* 14 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -1571,106 +1699,58 @@ function linear(p) {
 /* harmony default export */ __webpack_exports__["a"] = { swing: swing, linear: linear };
 
 /***/ }),
-/* 14 */
+/* 15 */
 /***/ (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; }; }();
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__easing__ = __webpack_require__(14);
+/* harmony export (immutable) */ __webpack_exports__["a"] = scrollTo;
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-var UA = window.navigator.userAgent;
+var SCROLLABLE_CONTAINER = document.getElementById('webslides');
 
-var MobileDetector = function () {
+/**
-  function MobileDetector() {
+ * Smoothly scrolls to a given Y position using Easing.Swing. It'll run a
-    _classCallCheck(this, MobileDetector);
+ * 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.
+ */
+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 delta = y - SCROLLABLE_CONTAINER.scrollTop;
+  var startLocation = SCROLLABLE_CONTAINER.scrollTop;
+  var increment = 16;
+
+  if (!duration) {
+    SCROLLABLE_CONTAINER.scrollTop = y;
+    cb();
+    return;
   }
 
-  _createClass(MobileDetector, null, [{
+  var animateScroll = function animateScroll(elapsedTime) {
-    key: "isAndroid",
+    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);
-     * Whether the device is Android or not.
+
-     * @return {Boolean}
+    if (elapsedTime < duration) {
-     */
+      setTimeout(function () {
-    value: function isAndroid() {
+        return animateScroll(elapsedTime);
-      return !!UA.match(/Android/i);
+      }, increment);
+    } else {
+      cb();
     }
+  };
 
-    /**
+  animateScroll(0);
-     * 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(/iPhone/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;
 
 /***/ }),
-/* 15 */
+/* 16 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";