Merge branch 'master' into dev

CHANGELOG.md

@@ -1,3 +1,18 @@
+# 1.2.1 (2017-03-02)
+
+## Bugfixes
+
+- Scrollbar showing in Firefox
+
+# 1.2.0 (2017-03-02)
+
+## New Features
+
+- [[#48](https://github.com/jlantunez/webslides/issues/48)] Allows to navigate with AvPag & RePag to allow presentation devices to work.
+- [[#49](https://github.com/jlantunez/webslides/issues/49)] Allowing to go to first and last slides by using home and end keys respectively.
+- [[#50](https://github.com/jlantunez/webslides/issues/50)] Using the keyboard on inputs and editable content won't trigger any events that might cause navigation.
+- [[#47](https://github.com/jlantunez/webslides/issues/47)] Allowing options to be configured. [Read More](/docs/technical.md#options).
+
 # 1.1.0 (2017-02-28)
 
 ## Bugfixes
@@ -20,19 +35,19 @@ It's also possible to scroll horizontally on horizontal presentations to move fo
 # 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. 
+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 
+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. 
+bug.
 
 **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.
 
-We hope this leads to a better environment in which WebSlides can grow better. 
+We hope this leads to a better environment in which WebSlides can grow better.
 
 All the technical specs live now in [this document](docs/technical.md).
 

README.md

@@ -14,9 +14,9 @@ Simply choose a demo and customize it in minutes. Latest version: [webslides.tv/
 ### 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.
 
-### Features
+## Features
 
-- Navigation (horizontal and vertical sliding): touchpad, keyboard shortcuts, and swipe.
+- Navigation (horizontal and vertical sliding): remote presenters, touchpad, keyboard shortcuts, and swipe.
 - Slide counter.
 - Permalinks: go to a specific slide.
 - Autoslide.
@@ -27,6 +27,20 @@ Good karma and productivity. Just a basic knowledge of HTML and CSS is required.
 - Fonts: Roboto, Maitree (Serif), and San Francisco.
 - Vertical rhythm (use multiples of 8).
 
+### Key Navigation
+
+There's a handful of keys that can be used to achieve navigation within WebSlides. Here's the list:
+
+* `←`: If WebSlides is not vertical, it will go to the previous slide.
+* `→`: If WebSlides is not vertical, it will go to the next slide.
+* `↑`: If WebSlides is vertical, it will go to the previous slide.
+* `↓`: If WebSlides is vertical, it will go to the next slide.
+* `Page Up`: Go to the previous slide.
+* `Page Down`: Go to the next slide.
+* `Space`: Go to the next slide.
+* `Home`: Go to the first slide.
+* `End`: Go to the last slide.
+
 ## Markup
 
 - Code is clean and scalable. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting.

demos/classes.html

@@ -1910,7 +1910,7 @@
             <h2><strong>Start in seconds</strong> </h2>
             <p class="text-intro">Create your own presentation instantly. <br>120+ prebuilt slides ready to use.</p>
             <p>
-              <a href="https://github.com/jlantunez/webslides/archive/master.zip" class="button" title="Download WebSlides">
+              <a href="https://webslides.tv/webslides-latest.zip" class="button" title="Download WebSlides">
                 <svg class="fa-cloud-download">
                   <use xlink:href="#fa-cloud-download"></use>
                 </svg>

demos/components.html

@@ -1733,7 +1733,7 @@
             <div class="cta-cover">
               <h1><strong>HTML Presentations</strong> Made Easy</h1>
               <p class="alignright">
-                <a class="button" href="https://github.com/jlantunez/webslides/archive/master.zip" title="Download WebSlides">
+                <a class="button" href="https://webslides.tv/webslides-latest.zip" title="Download WebSlides">
                   <svg class="fa-cloud-download">
                     <use xlink:href="#fa-cloud-download"></use>
                   </svg>
@@ -3103,7 +3103,7 @@
             <h2><strong>Start in Seconds</strong> </h2>
             <p class="text-intro">Create your own presentation instantly. <br>120+ prebuilt slides ready to use.</p>
             <p>
-              <a href="https://github.com/jlantunez/webslides/archive/master.zip" class="button" title="Download WebSlides">
+              <a href="https://webslides.tv/webslides-latest.zip" class="button" title="Download WebSlides">
                 <svg class="fa-cloud-download">
                   <use xlink:href="#fa-cloud-download"></use>
                 </svg>

demos/index.html

@@ -199,7 +199,7 @@
             <h2><strong>Start in seconds</strong> </h2>
             <p class="text-intro">Create your own presentation instantly. <br>120+ premium slides ready to use.</p>
             <p>
-              <a href="https://github.com/jlantunez/webslides/archive/master.zip" class="button" title="Download WebSlides">
+              <a href="https://webslides.tv/webslides-latest.zip" class="button" title="Download WebSlides">
                 <svg class="fa-cloud-download">
                   <use xlink:href="#fa-cloud-download"></use>
                 </svg>

demos/keynote.html

@@ -815,7 +815,7 @@
             <h2><strong>Start in seconds</strong></h2>
             <p class="text-intro">120+ prebuilt slides ready to use.</p>
             <p>
-              <a href="https://github.com/jlantunez/webslides/archive/master.zip" class="button" title="Download WebSlides">
+              <a href="https://webslides.tv/webslides-latest.zip" class="button" title="Download WebSlides">
                 <svg class="fa-cloud-download">
                   <use xlink:href="#fa-cloud-download"></use>
                 </svg>

demos/landings.html

@@ -236,7 +236,7 @@
             <div class="cta-cover">
               <h1><strong>HTML Presentations</strong> Made Easy</h1>
               <p class="alignright">
-                <a class="button" href="https://github.com/jlantunez/webslides/archive/master.zip" title="Download WebSlides">
+                <a class="button" href="https://webslides.tv/webslides-latest.zip" title="Download WebSlides">
                   <svg class="fa-cloud-download">
                     <use xlink:href="#fa-cloud-download"></use>
                   </svg>

demos/portfolios.html

@@ -105,7 +105,7 @@
           <div class="wrap aligncenter">
             <h1 class="text-landing">Portfolios</h1>
             <p class="text-symbols">* * * </p>
-            <p><a class="button ghost" href="https://github.com/jlantunez/webslides/archive/master.zip" title="Download WebSlides for free"><svg class="fa-cloud-download">
+            <p><a class="button ghost" href="https://webslides.tv/webslides-latest.zip" title="Download WebSlides for free"><svg class="fa-cloud-download">
                 <use xlink:href="#fa-cloud-download"></use>
               </svg> WebSlides</a>
             </p>
@@ -333,7 +333,7 @@
           </div>
         </section>
         <section class="bg-black-blue">
-          <span class="background dark" style="background-image:url('https://source.unsplash.com/nw6xREmkXkg/')"></span>
+          <span class="background dark" style="background-image:url('https://source.unsplash.com/LW3FskrgQ9M/')"></span>
           <div class="wrap size-50">
             <p class="text-subtitle">Mercedes-Benz</p>
             <h2>Defining a new platform for the connected car</h2>

docs/technical.md

@@ -25,11 +25,18 @@ WebSlides constructor accepts an object with options.
 |-----------|----------------|-----------|-------------------------------------------------------------------------------|
 | `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. |
+| `minWheelDelta` | `number` | `40` | Controls the amount of scroll needed to trigger a navigation. Lower this number to decrease the scroll resistance. |
+| `scrollWait` | `number` | `450` | Controls the amount of time needed to wait for a scroll transition to happen again. |
+| `slideOffset` | `number` | `50` | Amount of sliding needed to trigger a new navigation. |
 
 
 ```javascript
 const ws = new WebSlides({
-  autoslide: false
+  autoslide = false,
+  changeOnClick = false,
+  minWheelDelta = 40,
+  scrollWait = 450,
+  slideOffset = 50
 });
 ```
 
@@ -103,9 +110,13 @@ Registers a plugin to be loaded when the instance is created. It allows
 
 Those being:
 
- - Navigation
+- ClickNav
- - Hash
+- Grid
- - Keyboard
+- Hash
+- Keyboard
+- Navigation
+- Scroll
+- Touch
 
 | Param | Type | Description |
 | --- | --- | --- |

index.html

@@ -109,7 +109,7 @@
               Just the essentials and using lovely CSS.
             </p>
             <p>
-              <a href="https://github.com/jlantunez/webslides/archive/master.zip" class="button zoomIn" title="Download WebSlides for free">
+              <a href="https://webslides.tv/webslides-latest.zip" class="button zoomIn" title="Download WebSlides for free">
                 <svg class="fa-cloud-download">
                   <use xlink:href="#fa-cloud-download"></use>
                 </svg>
@@ -329,7 +329,7 @@
             <h2><strong>Ready to Start?</strong> </h2>
             <p class="text-intro">Create your own presentation instantly. <br>120+ premium slides ready to use.</p>
             <p>
-              <a href="https://github.com/jlantunez/webslides/archive/master.zip" class="button" title="Download WebSlides">
+              <a href="https://webslides.tv/webslides-latest.zip" class="button" title="Download WebSlides">
                 <svg class="fa-cloud-download">
                   <use xlink:href="#fa-cloud-download"></use>
                 </svg>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "webslides",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "description": "Making HTML presentations easy",
   "main": "index.js",
   "repository": {
@@ -31,9 +31,11 @@
     "babel-cli": "^6.23.0",
     "babel-core": "^6.23.1",
     "babel-loader": "^6.3.2",
+    "babel-preset-env": "^1.1.11",
     "babel-preset-es2015": "^6.22.0",
     "npm-run-all": "^4.0.2",
     "rimraf": "^2.6.0",
+    "smart-banner-webpack-plugin": "^3.0.1",
     "webpack": "^2.2.1",
     "webpack-dev-server": "^2.4.1"
   },

src/js/modules/webslides.js

@@ -208,7 +208,7 @@ export default class WebSlides {
    * @see scrollTo
    */
   scrollTransitionToSlide_(isMovingForward, nextSlide, callback) {
-    this.el.style.overflow = 'none';
+    this.el.style.overflow = 'hidden';
 
     if (!isMovingForward) {
       nextSlide.moveBeforeFirst();

static/js/webslides.js

@@ -1,3 +1,11 @@
+/*!
+ * Name: WebSlides
+ * Version: 1.2.1
+ * Date: 2017-03-02
+ * Description: Making HTML presentations easy
+ * URL: https://github.com/jlantunez/webslides#readme
+ * Credits: @jlantunez, @LuisSacristan, @Belelros
+ */
 /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
@@ -182,6 +190,10 @@ var DOM = function () {
 var Keys = {
   ENTER: 13,
   SPACE: 32,
+  RE_PAGE: 33,
+  AV_PAGE: 34,
+  END: 35,
+  HOME: 36,
   LEFT: 37,
   UP: 38,
   RIGHT: 39,
@@ -325,16 +337,29 @@ var PLUGINS = {
 var WebSlides = function () {
   /**
    * Options for WebSlides
-   * @param {number|boolean} autoslide Is false by default. If a number is
+   * @param {number|boolean} autoslide If a number is provided, it will allow
-   * @param {boolean} changeOnClick Is false by default. If true, it will allow
+   * autosliding by said amount of miliseconds.
+   * @param {boolean} changeOnClick If true, it will allow
    * clicking on any place to change the slide.
+   * @param {number} minWheelDelta Controls the amount of needed scroll to
+   * trigger navigation.
+   * @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.
    */
   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;
+        changeOnClick = _ref$changeOnClick === undefined ? false : _ref$changeOnClick,
+        _ref$minWheelDelta = _ref.minWheelDelta,
+        minWheelDelta = _ref$minWheelDelta === undefined ? 40 : _ref$minWheelDelta,
+        _ref$scrollWait = _ref.scrollWait,
+        scrollWait = _ref$scrollWait === undefined ? 450 : _ref$scrollWait,
+        _ref$slideOffset = _ref.slideOffset,
+        slideOffset = _ref$slideOffset === undefined ? 50 : _ref$slideOffset;
 
     _classCallCheck(this, WebSlides);
 
@@ -388,18 +413,16 @@ var WebSlides = function () {
      */
     this.interval_ = null;
     /**
-     * Amount of time to wait to go to next slide automatically or false to
+     * Options dictionary.
-     * disable the feature.
+     * @type {Object}
-     * @type {boolean|number}
-     * @private
      */
-    this.autoslide_ = autoslide;
+    this.options = {
-    /**
+      autoslide: autoslide,
-     * Whether navigation should initiate on click or not.
+      changeOnClick: changeOnClick,
-     * @type {boolean}
+      minWheelDelta: minWheelDelta,
-     * @private
+      scrollWait: scrollWait,
-     */
+      slideOffset: slideOffset
-    this.changeOnClick_ = changeOnClick;
+    };
 
     if (!this.el) {
       throw new Error('Couldn\'t find the webslides container!');
@@ -494,7 +517,7 @@ var WebSlides = function () {
     value: function goToSlide(slideI) {
       var forward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
 
-      if (this.isValidIndexSlide_(slideI) && !this.isMoving) {
+      if (this.isValidIndexSlide_(slideI) && !this.isMoving && this.currentSlideI_ !== slideI) {
         this.isMoving = true;
         var isMovingForward = false;
 
@@ -530,7 +553,7 @@ var WebSlides = function () {
     value: function scrollTransitionToSlide_(isMovingForward, nextSlide, callback) {
       var _this2 = this;
 
-      this.el.style.overflow = 'none';
+      this.el.style.overflow = 'hidden';
 
       if (!isMovingForward) {
         nextSlide.moveBeforeFirst();
@@ -704,7 +727,7 @@ var WebSlides = function () {
      * automatically.
      */
     value: function play(time) {
-      time = time || this.autoslide_;
+      time = time || this.options.autoslide;
 
       if (!this.interval_ && typeof time === 'number' && time > 0) {
         this.interval_ = setInterval(this.goNext.bind(this), time);
@@ -877,7 +900,7 @@ var ClickNav = function () {
      */
     this.ws_ = wsInstance;
 
-    if (wsInstance.changeOnClick_) {
+    if (wsInstance.options.changeOnClick) {
       this.ws_.el.addEventListener('click', this.onClick_.bind(this));
     }
   }
@@ -1109,27 +1132,50 @@ var Keyboard = function () {
     key: 'onKeyPress_',
     value: function onKeyPress_(event) {
       var method = void 0;
+      var argument = void 0;
 
-      if (event.which === __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].SPACE) {
+      // Check if there's a focused element that might use the keyboard.
-        method = this.ws_.goNext;
+      if (document.activeElement) {
-      } else {
+        var isContentEditable = document.activeElement.contentEditable !== 'inherit';
-        if (this.ws_.isVertical) {
+        var isInput = ['INPUT', 'SELECT', 'OPTION', 'TEXTAREA'].indexOf(document.activeElement.tagName) > -1;
-          if (event.which === __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].DOWN) {
+
-            method = this.ws_.goNext;
+        if (isInput || isContentEditable) {
-          } else if (event.which === __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].UP) {
+          return;
-            method = this.ws_.goPrev;
-          }
-        } else {
-          if (event.which === __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].RIGHT) {
-            method = this.ws_.goNext;
-          } else if (event.which === __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].LEFT) {
-            method = this.ws_.goPrev;
-          }
         }
       }
 
+      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;
+      }
+
       if (method) {
-        method.call(this.ws_);
+        method.call(this.ws_, argument);
       }
     }
   }]);
@@ -1333,8 +1379,6 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 
 
 
-var MIN_WHEEL_DELTA = 40;
-
 var Scroll = function () {
   /**
    * Scroll handler for the WebSlides.
@@ -1396,7 +1440,7 @@ var Scroll = function () {
 
       this.timeout_ = setTimeout(function () {
         _this.timeout_ = null;
-      }, 450);
+      }, this.ws_.options.scrollWait);
     }
 
     /**
@@ -1433,7 +1477,7 @@ var Scroll = function () {
         }
       }
 
-      if (Math.abs(wheelDeltaY) >= MIN_WHEEL_DELTA || Math.abs(wheelDeltaX) >= MIN_WHEEL_DELTA) {
+      if (Math.abs(wheelDeltaY) >= this.ws_.options.minWheelDelta || Math.abs(wheelDeltaX) >= this.ws_.options.minWheelDelta) {
         if (isHorizontalMovement && this.isGoingLeft_ || !isHorizontalMovement && this.isGoingUp_) {
           this.ws_.goPrev();
         } else {
@@ -1476,8 +1520,6 @@ var EVENTS = {
   }
 };
 
-var SLIDE_OFFSET = 50;
-
 var Touch = function () {
   /**
    * @param {WebSlides} wsInstance The WebSlides instance
@@ -1590,9 +1632,9 @@ var Touch = function () {
 
       // It's an horizontal drag
       if (Math.abs(diffX) > Math.abs(diffY)) {
-        if (diffX < -SLIDE_OFFSET) {
+        if (diffX < -this.ws_.options.slideOffset) {
           this.ws_.goPrev();
-        } else if (diffX > SLIDE_OFFSET) {
+        } else if (diffX > this.ws_.options.slideOffset) {
           this.ws_.goNext();
         }
       }

webpack.config.babel.js

@@ -1,6 +1,8 @@
+const SmartBannerPlugin = require('smart-banner-webpack-plugin');
 const path = require('path');
 
 const src = path.join(__dirname, 'src');
+const pkg = require('./package.json');
 
 module.exports = {
   context: src,
@@ -24,5 +26,12 @@ module.exports = {
         include: src
       }
     ]
-  }
+  },
+  plugins: [
+    new SmartBannerPlugin({
+      banner: `Name: WebSlides\nVersion: ${pkg.version}\nDate: ${new Date().toISOString().slice(0,10)}\nDescription: ${pkg.description}\nURL: ${pkg.homepage}\nCredits: @jlantunez, @LuisSacristan, @Belelros`,
+      raw: false,
+      entryOnly: true
+    })
+  ],
 };