Updating README

Adding a few changes

.gitignore

@@ -15,4 +15,3 @@ node_modules/
 .Trashes
 ehthumbs.db
 Thumbs.db
-static/js/webslides*

CHANGELOG.md

@@ -1,14 +1,33 @@
+# 1.1.0 (2017-02-28)
+
+## 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
 perfect, it's a solid beginning. 
 
-All the code has been migrated from jQuery with ES5 to vanilla JavaScript with ES2015 (or ES6) and is fully modular. 
+All the code has been migrated from **jQuery** with ES5 to **vanilla JavaScript with ES2015 (or ES6) and is fully modular**. 
 This means that WebSlides is a (base module)[src/js/modules/webslides.js] with a solid API (few public methods) and 
 it's extended by (plugins)[src/js/plugins]. This leads to more granularity and less code to dive through while fixing a
 bug. 
 
-The benefit from this approach is that now it's really easy to extend WebSlides to achieve what you need. You can also
+**The benefit from this approach is that now it's really easy to extend WebSlides** to achieve what you need. You can also
 overwrite current plugins. Say you don't like the current navigation with arrows and want to create a menu instead, you
 can just write that for yourself with your custom needs and register it as `nav` and it will overwrite our nav with
 your code.

README.md

@@ -3,9 +3,13 @@
 [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](http://opensource.org/licenses/MIT)
 [![Twitter](https://img.shields.io/twitter/url/https/github.com/jlantunez/webslides.svg?style=social)](https://twitter.com/webslides)
 
-Finally, everything you need to make HTML presentations in a beautiful way. Just the essentials. You can create your own presentation instantly. Simply choose a demo and customize it in minutes — https://webslides.tv/demos.
+Finally, everything you need to make HTML presentations in a beautiful way. Just the essentials. You can create your own presentation instantly. A new release (at least) every 8th day of the month — [https://webslides.tv/demos](https://webslides.tv/demos).
+
+* * *
+### Download
+Simply choose a demo and customize it in minutes. Latest version: [webslides.tv/webslides-latest.zip](https://webslides.tv/webslides-latest.zip).
+* * *
 
-A new release (at least) every 8th day of the month.
 
 ### Why WebSlides?
 Good karma and productivity. Just a basic knowledge of HTML and CSS is required. Designers, marketers, and journalists can now focus on the content.
@@ -15,7 +19,8 @@ Good karma and productivity. Just a basic knowledge of HTML and CSS is required.
 - Navigation (horizontal and vertical sliding): touchpad, keyboard shortcuts, and swipe.
 - Slide counter.
 - Permalinks: go to a specific slide.
-- Autoslide
+- Autoslide.
+- Click to nav. [Read more](docs/click-to-nav.md)!
 - Simple CSS alignments. Put content wherever you want (vertical centering...)
 - 40+ components: background images/videos, quotes, cards, covers...
 - Flexible blocks with auto-fill and equal height.
@@ -99,5 +104,5 @@ Please check out:
 ### Credits
 
 - WebSlides was created by [@jlantunez](https://twitter.com/jlantunez) using [Cactus](https://github.com/eudicots/Cactus).
-- Thanks [@LuisSacristan](https://twitter.com/luissacristan) for the javascript code :)
+- Javascript: [@Belelros](https://twitter.com/Belelros) and [@LuisSacristan](https://twitter.com/luissacristan).
 - Based on [SimpleSlides](https://github.com/jennschiffer/SimpleSlides), by [@JennSchiffer](https://twitter.com/jennschiffer).

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

@@ -1,6 +1,6 @@
 {
   "name": "webslides",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Making HTML presentations easy",
   "main": "index.js",
   "repository": {
@@ -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!');
@@ -141,7 +150,7 @@ export default class WebSlides {
    * @private
    */
   grabSlides_() {
-    this.slides = Array.from(this.el.childNodes)
+    this.slides = DOM.toArray(this.el.childNodes)
         .map((slide, i) => new Slide(slide, i));
 
     this.maxSlide_ = this.slides.length;
@@ -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 DOM.unlockScroll
-   * @see ScrollHelper.scrollTo
+   * @see 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();
@@ -347,7 +354,7 @@ export default class WebSlides {
   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);
     }
   }

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/hash.js

@@ -47,7 +47,7 @@ export default class Hash {
       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

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,15 +13,50 @@ 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
@@ -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;
-    this.isGoingUp_ = wheelDelta < 0;
+    const { deltaY: wheelDeltaY, deltaX: wheelDeltaX } = event;
+    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.
@@ -72,4 +56,13 @@ export default class DOM {
 
     target.dispatchEvent(event);
   }
+
+  /**
+   * Converts an iterable to an array.
+   * @param {*} iterable Element to convert to array
+   * @return {Array} the element casted to an array.
+   */
+  static toArray(iterable) {
+    return [].slice.call(iterable);
+  }
 }

src/js/utils/scroll-to.js

@@ -1,33 +1,6 @@
 import Easings from './easing';
 
-let SCROLLABLE_CONTAINER = getScrollableContainer();
-
-/**
- * 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;
-}
+let SCROLLABLE_CONTAINER = document.getElementById('webslides');
 
 /**
  * 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 = () => {}) {
-  const scrollableContainer = getScrollableContainer();
-  const delta = y - scrollableContainer.scrollTop;
-  const startLocation = scrollableContainer.scrollTop;
+export default function scrollTo(y, duration = 500, cb = () => {}) {
+  const delta = y - SCROLLABLE_CONTAINER.scrollTop;
+  const startLocation = SCROLLABLE_CONTAINER.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;

webpack.config.babel.js

@@ -14,6 +14,7 @@ module.exports = {
   },
   devServer: {
     contentBase: __dirname,
+    host: '0.0.0.0'
   },
   module: {
     rules: [