Adding missing key

Fixes #47 #44

CHANGELOG.md

@@ -1,3 +1,12 @@
+# 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

README.md

@@ -14,7 +14,7 @@ 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.
 - Slide counter.
@@ -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.

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
- - Hash
- - Keyboard
+- ClickNav
+- Grid
+- Hash
+- Keyboard
+- Navigation
+- Scroll
+- Touch
 
 | Param | Type | Description |
 | --- | --- | --- |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "webslides",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Making HTML presentations easy",
   "main": "index.js",
   "repository": {
@@ -34,6 +34,7 @@
     "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

@@ -21,13 +21,23 @@ const PLUGINS = {
 export default class WebSlides {
   /**
    * Options for WebSlides
-   * @param {number|boolean} autoslide Is false by default. If a number is
-   * @param {boolean} changeOnClick Is false by default. If true, it will allow
+   * @param {number|boolean} autoslide If a number is provided, 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.
    */
   constructor({
     autoslide = false,
-    changeOnClick = false
+    changeOnClick = false,
+    minWheelDelta = 40,
+    scrollWait = 450,
+    slideOffset = 50
   } = {}) {
     /**
      * WebSlide element.
@@ -79,18 +89,16 @@ export default class WebSlides {
      */
     this.interval_ = null;
     /**
-     * Amount of time to wait to go to next slide automatically or false to
-     * disable the feature.
-     * @type {boolean|number}
-     * @private
+     * Options dictionary.
+     * @type {Object}
      */
-    this.autoslide_ = autoslide;
-    /**
-     * Whether navigation should initiate on click or not.
-     * @type {boolean}
-     * @private
-     */
-    this.changeOnClick_ = changeOnClick;
+    this.options = {
+      autoslide,
+      changeOnClick,
+      minWheelDelta,
+      scrollWait,
+      slideOffset
+    };
 
     if (!this.el) {
       throw new Error('Couldn\'t find the webslides container!');
@@ -164,7 +172,9 @@ export default class WebSlides {
    * scroll animations.
    */
   goToSlide(slideI, forward = null) {
-    if (this.isValidIndexSlide_(slideI) && !this.isMoving) {
+    if (this.isValidIndexSlide_(slideI) &&
+        !this.isMoving &&
+        this.currentSlideI_ !== slideI) {
       this.isMoving = true;
       let isMovingForward = false;
 
@@ -352,7 +362,7 @@ export default class WebSlides {
    * automatically.
    */
   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);

src/js/plugins/click-nav.js

@@ -19,7 +19,7 @@ export default class ClickNav {
      */
     this.ws_ = wsInstance;
 
-    if (wsInstance.changeOnClick_) {
+    if (wsInstance.options.changeOnClick) {
       this.ws_.el.addEventListener('click', this.onClick_.bind(this));
     }
   }

src/js/plugins/keyboard.js

@@ -23,27 +23,52 @@ export default class Keyboard {
    */
   onKeyPress_(event) {
     let method;
+    let argument;
 
-    if (event.which === Keys.SPACE) {
-      method = this.ws_.goNext;
-    } else {
-      if (this.ws_.isVertical) {
-        if (event.which === Keys.DOWN) {
-          method = this.ws_.goNext;
-        } else if (event.which === Keys.UP) {
-          method = this.ws_.goPrev;
-        }
-      } else {
-        if (event.which === Keys.RIGHT) {
-          method = this.ws_.goNext;
-        } else if (event.which === Keys.LEFT) {
-          method = this.ws_.goPrev;
-        }
+    // Check if there's a focused element that might use the keyboard.
+    if (document.activeElement) {
+      const isContentEditable = document.activeElement
+            .contentEditable !== 'inherit';
+      const isInput = ['INPUT', 'SELECT', 'OPTION', 'TEXTAREA']
+            .indexOf(document.activeElement.tagName) > -1;
+
+      if (isInput || isContentEditable) {
+        return;
       }
     }
 
+    switch (event.which) {
+      case Keys.AV_PAGE:
+      case Keys.SPACE:
+        method = this.ws_.goNext;
+        break;
+      case Keys.RE_PAGE:
+        method = this.ws_.goPrev;
+        break;
+      case Keys.HOME:
+        method = this.ws_.goToSlide;
+        argument = 0;
+        break;
+      case Keys.END:
+        method = this.ws_.goToSlide;
+        argument = this.ws_.maxSlide_ - 1;
+        break;
+      case Keys.DOWN:
+        method = this.ws_.isVertical ? this.ws_.goNext : null;
+        break;
+      case Keys.UP:
+        method = this.ws_.isVertical ? this.ws_.goPrev : null;
+        break;
+      case Keys.LEFT:
+        method = !this.ws_.isVertical ? this.ws_.goPrev : null;
+        break;
+      case Keys.RIGHT:
+        method = !this.ws_.isVertical ? this.ws_.goNext : null;
+        break;
+    }
+
     if (method) {
-      method.call(this.ws_);
+      method.call(this.ws_, argument);
     }
   }
 }

src/js/plugins/scroll.js

@@ -1,7 +1,5 @@
 import MobileDetector from '../utils/mobile-detector';
 
-const MIN_WHEEL_DELTA = 40;
-
 export default class Scroll {
   /**
    * Scroll handler for the WebSlides.
@@ -55,7 +53,9 @@ export default class Scroll {
    * @private
    */
   onSlideChange_() {
-    this.timeout_ = setTimeout(() => { this.timeout_ = null; }, 450);
+    this.timeout_ = setTimeout(
+        () => { this.timeout_ = null; },
+        this.ws_.options.scrollWait);
   }
 
   /**
@@ -88,8 +88,8 @@ export default class Scroll {
       }
     }
 
-    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();

src/js/plugins/touch.js

@@ -13,8 +13,6 @@ const EVENTS = {
   }
 };
 
-const SLIDE_OFFSET = 50;
-
 export default class Touch {
   /**
    * @param {WebSlides} wsInstance The WebSlides instance
@@ -116,9 +114,9 @@ export default class Touch {
 
     // 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();
       }
     }

src/js/utils/keys.js

@@ -1,6 +1,10 @@
 const Keys = {
   ENTER: 13,
   SPACE: 32,
+  RE_PAGE: 33,
+  AV_PAGE: 34,
+  END: 35,
+  HOME: 36,
   LEFT: 37,
   UP: 38,
   RIGHT: 39,

static/css/base.css

@@ -496,11 +496,13 @@ pre code {
   padding: 0;
 }
 
+
 /*=== 1.2 Animations ================
-Just 3 basic animations:
-.fadeIn, .fadeInUp, .zoomIn.
+Just 5 basic animations:
+.fadeIn, .fadeInUp, .zoomIn, .slideInLeft, slideInRight  
 https://github.com/daneden/animate.css*/
 
+/*-- fadeIn -- */
 @-webkit-keyframes fadeIn {
   from {
     opacity: 0;
@@ -532,6 +534,7 @@ https://github.com/daneden/animate.css*/
   animation: fadeIn 1s;
 }
 
+/*-- fadeInUp -- */
 @-webkit-keyframes fadeInUp {
   from {
     opacity: 0;
@@ -561,12 +564,11 @@ https://github.com/daneden/animate.css*/
 }
 
 .fadeInUp {
-  -webkit-animation-name: fadeInUp;
-  animation-name: fadeInUp;
-  -webkit-animation-duration: 1s;
-  animation-duration: 1s;
+  -webkit-animation: fadeInUp 1s;
+  animation: fadeInUp 1s;
 }
 
+/*-- zoomIn -- */
 @-webkit-keyframes zoomIn {
   from {
     opacity: 0;
@@ -596,6 +598,42 @@ https://github.com/daneden/animate.css*/
   animation: zoomIn 1s;
 }
 
+/*-- slideInLeft -- */
+
+@keyframes slideInLeft {
+  from {
+    transform: translate3d(-100%, 0, 0);
+    visibility: visible;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.slideInLeft {
+  -webkit-animation: slideInLeft 1s;
+  animation: slideInLeft 1s;
+}
+
+/*-- slideInRight -- */
+
+@keyframes slideInRight {
+  from {
+    transform: translate3d(100%, 0, 0);
+    visibility: visible;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.slideInRight {
+  -webkit-animation: slideInRight 1s;
+  animation: slideInRight 1s;
+}
+
 /* Animated Background (Matrix) */
 @-webkit-keyframes anim {
   0% {
@@ -628,7 +666,6 @@ https://github.com/daneden/animate.css*/
   animation-duration: 5s;
 }
 
-
 /* Transitions */
 
 header,

static/js/webslides.js

@@ -1,3 +1,11 @@
+/*!
+ * Name: WebSlides
+ * Version: 1.2.0
+ * 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 {boolean} changeOnClick Is false by default. If true, it will allow
+   * @param {number|boolean} autoslide If a number is provided, 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
-     * disable the feature.
-     * @type {boolean|number}
-     * @private
+     * Options dictionary.
+     * @type {Object}
      */
-    this.autoslide_ = autoslide;
-    /**
-     * Whether navigation should initiate on click or not.
-     * @type {boolean}
-     * @private
-     */
-    this.changeOnClick_ = changeOnClick;
+    this.options = {
+      autoslide: autoslide,
+      changeOnClick: changeOnClick,
+      minWheelDelta: minWheelDelta,
+      scrollWait: scrollWait,
+      slideOffset: slideOffset
+    };
 
     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;
 
@@ -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) {
-        method = this.ws_.goNext;
-      } else {
-        if (this.ws_.isVertical) {
-          if (event.which === __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].DOWN) {
-            method = this.ws_.goNext;
-          } else if (event.which === __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].UP) {
-            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;
-          }
+      // Check if there's a focused element that might use the keyboard.
+      if (document.activeElement) {
+        var isContentEditable = document.activeElement.contentEditable !== 'inherit';
+        var isInput = ['INPUT', 'SELECT', 'OPTION', 'TEXTAREA'].indexOf(document.activeElement.tagName) > -1;
+
+        if (isInput || isContentEditable) {
+          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;
+      }
+
       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
+    })
+  ],
 };