Making video plugin a tad more generic

Fixes #122

.gitignore

@@ -17,3 +17,4 @@ coverage
 .Trashes
 ehthumbs.db
 Thumbs.db
+webslides.zip

.npmignore

@@ -0,0 +1 @@
+.babelrc

.travis.yml

@@ -1,4 +1,3 @@
 language: node_js
 node_js:
-  - "6"
-  - "7"
+  - "10"

CHANGELOG.md

@@ -1,3 +1,9 @@
+# 1.5.0 (2017-09-16)
+
+- [[#96]((https://github.com/webslides/webslides/issues/96))] Using Shift Space now allows to go to previous slide.
+- [[#97]((https://github.com/webslides/webslides/issues/97))] Fixing CTRL/CMD + F not allowing to search.
+- Dependencies updated.
+
 # 1.4.2 (2017-09-12)
 
 - Fixed `.toc` class. (Regression from Sass)

README.md

@@ -89,11 +89,10 @@ You can add:
 - [Animate on scroll](http://michalsnik.github.io/aos/) (Useful for longform articles)
 - [pt](http://williamngan.github.io/pt/)
 
-
 ### Dive In!
 
 - Do not miss [our demos](https://webslides.tv/). 
-- Want to get techie? Read [our wiki](wiki):
+- Want to get techie? Read [our wiki](https://github.com/webslides/WebSlides/wiki):
   - [FAQ](https://github.com/webslides/WebSlides/wiki)
   - [Core API](https://github.com/webslides/WebSlides/wiki/Core-API)
   - [Plugin Docs](https://github.com/webslides/WebSlides/wiki/Plugin-docs)

index.html

@@ -294,11 +294,11 @@
                   </svg>
                   <strong>Guides</strong>
                 </h4>
-                <p>If you need help, here's just three tutorials. Just a basic knowledge of HTML is required:</p>
+                <p>If you need help, here's just some tutorials. Just a basic knowledge of HTML is required:</p>
                 <ul class="description">
-                  <li><a href="demos/components.html" title="WebSlides Components">WebSlides Components</a>.</li>
-                  <li><a href="demos/classes.html" title="WebSlides Classes">WebSlides Classes</a>.</li>
-                  <li><a href="demos/media.html" title="WebSlides Media">WebSlides Media: images, videos...</a></li>
+                  <li><a href="/demos/components.html" title="WebSlides Components">Components</a> &middot; <a href="/demos/classes.html" title="WebSlides Classes">Classes</a>.</li>
+                  <li><a href="https://codepen.io/webslides" title="WebSlides on Codepen">WebSlides on Codepen</a>.</li>
+                  <li><a href="/demos/media.html" title="WebSlides Media">WebSlides Media: images, videos...</a></li>
                 </ul>
               </div>
               <div class="column">
@@ -357,7 +357,7 @@
                   </svg>
                 </a>
               </h2>
-              <p>People share content that makes them feel inspired. WebSlides is a very effective way to engage young audiences, customers, and teams.</p> 
+              <p>People share content that makes them feel inspired. WebSlides is a very effective way to engage young audiences, customers, and teams.</p>
               <p>Best,<br> <a href="https://twitter.com/jlantunez">@jlantunez</a>, <a href="https://twitter.com/belelros">@belelros</a>, and <a href="https://twitter.com/luissacristan">@luissacristan</a>.</p>
             </div>
             <!-- .end .content-right -->

package.json

@@ -1,6 +1,6 @@
 {
   "name": "webslides",
-  "version": "1.4.2",
+  "version": "1.5.0",
   "description": "Making HTML presentations easy",
   "main": "static/js/webslides.js",
   "repository": {
@@ -19,7 +19,7 @@
     },
     {
       "name": "Antonio Laguna",
-      "email": "a.laguna@funcion13.com"
+      "email": "anlagmat@gmail.com"
     }
   ],
   "license": "MIT",
@@ -28,32 +28,33 @@
   },
   "homepage": "https://github.com/webslides/webslides#readme",
   "devDependencies": {
-    "autoprefixer": "^7.1.2",
-    "babel-cli": "^6.24.1",
-    "babel-core": "^6.25.0",
-    "babel-jest": "^20.0.3",
-    "babel-loader": "^7.1.1",
+    "archiver": "^2.0.3",
+    "autoprefixer": "^7.1.4",
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
+    "babel-jest": "^22.0.4",
+    "babel-loader": "^7.1.2",
     "babel-preset-env": "^1.6.0",
     "babel-preset-es2015": "^6.24.1",
-    "codecov": "^2.3.0",
-    "css-loader": "^0.28.4",
-    "eslint": "^4.4.1",
+    "codecov": "^3.0.0",
+    "css-loader": "^0.28.7",
+    "eslint": "^4.7.0",
     "eslint-loader": "^1.9.0",
-    "eslint-plugin-jest": "^20.0.3",
+    "eslint-plugin-jest": "^21.1.0",
     "extract-text-webpack-plugin": "^3.0.0",
-    "jest": "^20.0.4",
-    "node-sass": "^4.5.3",
-    "npm-run-all": "^4.0.2",
+    "jest": "^22.0.4",
+    "node-sass": "4.9.4",
+    "npm-run-all": "^4.1.1",
     "postcss-loader": "^2.0.6",
     "pre-commit": "^1.2.2",
-    "rimraf": "^2.6.1",
-    "sass-lint": "^1.10.2",
+    "rimraf": "^2.6.2",
+    "sass-lint": "^1.11.1",
     "sass-loader": "^6.0.6",
     "simulant": "^0.2.2",
     "smart-banner-webpack-plugin": "^3.0.1",
-    "style-loader": "^0.18.2",
-    "webpack": "^3.5.4",
-    "webpack-dev-server": "^2.7.1"
+    "style-loader": "^0.19.1",
+    "webpack": "^3.6.0",
+    "webpack-dev-server": "^2.8.2"
   },
   "scripts": {
     "prebuild": "rimraf static/js/webslide*",
@@ -65,22 +66,27 @@
     "lint:tests": "eslint ./test --cache --ignore-pattern .gitignore",
     "lint:css": "sass-lint -v -f stylish",
     "dev": "webpack-dev-server",
-    "test": "jest && codecov"
+    "test": "jest && codecov",
+    "preversion": "npm jest",
+    "postversion": "npm run build && git add -A static && node ./zip-release.js && git push && git push --tags"
+  },
+  "release": {
+    "files": [
+      "demos/**/**",
+      "static/**/**",
+      "*.html",
+      "LICENSE",
+      "README.md"
+    ]
   },
   "jest": {
-    "collectCoverage": true
+    "collectCoverage": true,
+    "testURL": "http://localhost/"
   },
   "pre-commit": [
     "lint"
   ],
-  "babel": {
-    "presets": [
-      [
-        "es2015",
-        {
-          "modules": false
-        }
-      ]
-    ]
+  "dependencies": {
+    "request": "^2.83.0"
   }
 }

src/js/modules/slide.js

@@ -8,8 +8,9 @@ const CLASSES = {
 const Events = {
   ENTER: 'dom:enter',
   LEAVE: 'dom:leave',
+  DISABLE: 'slide:disable',
   ENABLE: 'slide:enable',
-  DISABLE: 'slide:disable'
+  SHOW: 'slide:show'
 };
 
 /**
@@ -36,7 +37,7 @@ class Slide {
      */
     this.i = i;
 
-    this.el.id = `section-${(i + 1)}`;
+    this.el.id = this.el.id ? this.el.id : `section-${(i + 1)}`;
     this.el.classList.add(CLASSES.SLIDE);
 
     // Hide slides by default
@@ -57,6 +58,7 @@ class Slide {
   show() {
     DOM.show(this.el);
     this.el.classList.add(CLASSES.CURRENT);
+    this.fire_(Events.SHOW);
   }
 
   /**

src/js/modules/webslides.js

@@ -19,7 +19,7 @@ const PLUGINS = {
   'nav': Plugins.Navigation,
   'scroll': Plugins.Scroll,
   'touch': Plugins.Touch,
-  'video': Plugins.Video,
+  'media': Plugins.Media,
   'youtube': Plugins.YouTube,
   'zoom': Plugins.Zoom
 };
@@ -315,6 +315,7 @@ export default class WebSlides {
 
     DOM.fireEvent(this.el, 'ws:slide-change', {
       slides: this.maxSlide_,
+      slideEl: slide.el,
       currentSlide0: this.currentSlideI_,
       currentSlide: this.currentSlideI_ + 1
     });

src/js/plugins/keyboard.js

@@ -35,9 +35,15 @@ export default class Keyboard {
 
     switch (event.which) {
       case Keys.AV_PAGE:
-      case Keys.SPACE:
         method = this.ws_.goNext;
         break;
+      case Keys.SPACE:
+        if (event.shiftKey) {
+          method = this.ws_.goPrev;
+        } else {
+          method = this.ws_.goNext;
+        }
+        break;
       case Keys.RE_PAGE:
         method = this.ws_.goPrev;
         break;
@@ -62,7 +68,10 @@ export default class Keyboard {
         method = !this.ws_.isVertical ? this.ws_.goNext : null;
         break;
       case Keys.F:
-        method = this.ws_.fullscreen;
+        if (!event.metaKey && ! event.ctrlKey) {
+          method = this.ws_.fullscreen;
+        }
+
         break;
     }
 

src/js/plugins/media.js

@@ -5,7 +5,7 @@ import {default as Slide, Events as SlideEvents} from '../modules/slide';
  * Video plugin. Video plugin that allows to autoplay videos once the slide gets
  * active.
  */
-export default class Video {
+export default class Media {
   /**
    * @param {WebSlides} wsInstance The WebSlides instance.
    * @constructor
@@ -17,24 +17,24 @@ export default class Video {
      */
     this.ws_ = wsInstance;
 
-    const videos = DOM.toArray(this.ws_.el.querySelectorAll('video'));
+    const medias = DOM.toArray(this.ws_.el.querySelectorAll('video,audio'));
 
-    if (videos.length) {
-      videos.forEach(video => {
-        if (!video.hasAttribute('autoplay')) {
+    if (medias.length) {
+      medias.forEach(media => {
+        if (!media.hasAttribute('autoplay')) {
           return;
         }
 
-        video.removeAttribute('autoplay');
-        video.pause();
-        video.currentTime = 0;
-        const {i} = Slide.getSectionFromEl(video);
+        media.removeAttribute('autoplay');
+        media.pause();
+        media.currentTime = 0;
+        const {i} = Slide.getSectionFromEl(media);
         const slide = wsInstance.slides[i - 1];
 
-        slide.video = video;
+        slide.media = media;
 
-        slide.el.addEventListener(SlideEvents.ENABLE, Video.onSectionEnabled);
-        slide.el.addEventListener(SlideEvents.DISABLE, Video.onSectionDisabled);
+        slide.el.addEventListener(SlideEvents.ENABLE, Media.onSectionEnabled);
+        slide.el.addEventListener(SlideEvents.DISABLE, Media.onSectionDisabled);
       });
     }
   }
@@ -44,7 +44,7 @@ export default class Video {
    * @param {CustomEvent} event
    */
   static onSectionEnabled(event) {
-    event.detail.slide.video.play();
+    event.detail.slide.media.play();
   }
 
   /**
@@ -52,6 +52,6 @@ export default class Video {
    * @param {CustomEvent} event
    */
   static onSectionDisabled(event) {
-    event.detail.slide.video.pause();
+    event.detail.slide.media.pause();
   }
 }

src/js/plugins/navigation.js

@@ -60,6 +60,9 @@ export default class Navigation {
     this.el.appendChild(this.counter);
 
     this.ws_.el.appendChild(this.el);
+    this.slides = Array.prototype.slice.call(
+      document.querySelectorAll('#webslides section')).map(s => s.id);
+
     this.bindEvents_();
   }
 
@@ -73,6 +76,29 @@ export default class Navigation {
     this.next.addEventListener('click', this.onButtonClicked_.bind(this));
     this.prev.addEventListener('click', this.onButtonClicked_.bind(this));
     this.counter.addEventListener('click', this.onButtonClicked_.bind(this));
+    document.body.addEventListener('click', this.onBodyClicked_.bind(this));
+  }
+
+  /**
+   * Whenever the body is clicked, check if the element has [data-slide] attr
+   * and if so, navigate to it.
+   * @param {MouseEvent} event Click event
+   */
+  onBodyClicked_(event) {
+    const matches = document.body.matches || document.body.msMatchesSelector;
+    let el;
+
+    if (matches.call(event.target, '[data-slide]')) {
+      el = event.target;
+    } else if (matches.call(event.target, '[data-slide] *')) {
+      el = event.target.querySelector('[data-slide]');
+    }
+
+    if (el) {
+      event.preventDefault();
+      const i = this.slides.indexOf(el.dataset.slide);
+      this.ws_.goToSlide(i);
+    }
   }
 
   /**

src/js/plugins/plugins.js

@@ -6,7 +6,7 @@ import Keyboard from './keyboard';
 import Navigation from './navigation';
 import Scroll from './scroll';
 import Touch from './touch';
-import Video from './video';
+import Media from './media';
 import YouTube from './youtube';
 import Zoom from './zoom';
 
@@ -19,7 +19,7 @@ export default {
   Navigation,
   Scroll,
   Touch,
-  Video,
+  Media,
   YouTube,
   Zoom
 };

src/js/utils/dom.js

@@ -148,7 +148,8 @@ export default class DOM {
    */
   static fireEvent(target, eventType, eventInfo = {}) {
     const event = new WSCustomEvent(eventType, {
-      detail: eventInfo
+      detail: eventInfo,
+      bubbles: true
     });
 
     target.dispatchEvent(event);

src/scss/_base.scss

@@ -30,6 +30,7 @@ webslides.js will add .ws-ready automatically. Don't worry :) -- */
   height: 100vh;
   overflow-x: hidden;
   overflow-y: scroll;
+  scrollbar-width: none; // sass-lint:disable-line no-misspelled-properties
 
   &::-webkit-scrollbar {
     display: none;

static/css/webslides.css

@@ -1,7 +1,7 @@
 /*!
  * Name: WebSlides
- * Version: 1.4.2
- * Date: 2017-09-12
+ * Version: 1.5.0
+ * Date: 2018-01-01
  * Description: Making HTML presentations easy
  * URL: https://github.com/webslides/webslides#readme
  * Credits: @jlantunez, @LuisSacristan, @Belelros

static/js/webslides.js

@@ -1,7 +1,7 @@
 /*!
  * Name: WebSlides
- * Version: 1.4.2
- * Date: 2017-09-12
+ * Version: 1.5.0
+ * Date: 2018-01-01
  * Description: Making HTML presentations easy
  * URL: https://github.com/webslides/webslides#readme
  * Credits: @jlantunez, @LuisSacristan, @Belelros
@@ -263,7 +263,8 @@ var DOM = function () {
       var eventInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
 
       var event = new __WEBPACK_IMPORTED_MODULE_0__custom_event__["a" /* default */](eventType, {
-        detail: eventInfo
+        detail: eventInfo,
+        bubbles: true
       });
 
       target.dispatchEvent(event);
@@ -377,8 +378,9 @@ var CLASSES = {
 var Events = {
   ENTER: 'dom:enter',
   LEAVE: 'dom:leave',
+  DISABLE: 'slide:disable',
   ENABLE: 'slide:enable',
-  DISABLE: 'slide:disable'
+  SHOW: 'slide:show'
 };
 
 /**
@@ -408,7 +410,7 @@ var Slide = function () {
      */
     this.i = i;
 
-    this.el.id = 'section-' + (i + 1);
+    this.el.id = this.el.id ? this.el.id : 'section-' + (i + 1);
     this.el.classList.add(CLASSES.SLIDE);
 
     // Hide slides by default
@@ -436,6 +438,7 @@ var Slide = function () {
     value: function show() {
       __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].show(this.el);
       this.el.classList.add(CLASSES.CURRENT);
+      this.fire_(Events.SHOW);
     }
 
     /**
@@ -1779,9 +1782,15 @@ var Keyboard = function () {
 
       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 */].SPACE:
+          if (event.shiftKey) {
+            method = this.ws_.goPrev;
+          } else {
+            method = this.ws_.goNext;
+          }
+          break;
         case __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].RE_PAGE:
           method = this.ws_.goPrev;
           break;
@@ -1806,7 +1815,10 @@ var Keyboard = function () {
           method = !this.ws_.isVertical ? this.ws_.goNext : null;
           break;
         case __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].F:
-          method = this.ws_.fullscreen;
+          if (!event.metaKey && !event.ctrlKey) {
+            method = this.ws_.fullscreen;
+          }
+
           break;
       }
 
@@ -1897,6 +1909,10 @@ var Navigation = function () {
     this.el.appendChild(this.counter);
 
     this.ws_.el.appendChild(this.el);
+    this.slides = Array.prototype.slice.call(document.querySelectorAll('#webslides section')).map(function (s) {
+      return s.id;
+    });
+
     this.bindEvents_();
   }
 
@@ -1913,6 +1929,32 @@ var Navigation = function () {
       this.next.addEventListener('click', this.onButtonClicked_.bind(this));
       this.prev.addEventListener('click', this.onButtonClicked_.bind(this));
       this.counter.addEventListener('click', this.onButtonClicked_.bind(this));
+      document.body.addEventListener('click', this.onBodyClicked_.bind(this));
+    }
+
+    /**
+     * Whenever the body is clicked, check if the element has [data-slide] attr
+     * and if so, navigate to it.
+     * @param {MouseEvent} event Click event
+     */
+
+  }, {
+    key: 'onBodyClicked_',
+    value: function onBodyClicked_(event) {
+      var matches = document.body.matches || document.body.msMatchesSelector;
+      var el = void 0;
+
+      if (matches.call(event.target, '[data-slide]')) {
+        el = event.target;
+      } else if (matches.call(event.target, '[data-slide] *')) {
+        el = event.target.querySelector('[data-slide]');
+      }
+
+      if (el) {
+        event.preventDefault();
+        var i = this.slides.indexOf(el.dataset.slide);
+        this.ws_.goToSlide(i);
+      }
     }
 
     /**

test/modules/slide.test.js

@@ -71,22 +71,26 @@ describe('Slide module', () => {
       const enter = jest.fn();
       const enable = jest.fn();
       const disable = jest.fn();
+      const show = jest.fn();
 
       slide.el.addEventListener('dom:leave', leave);
       slide.el.addEventListener('dom:enter', enter);
       slide.el.addEventListener('slide:enable', enable);
       slide.el.addEventListener('slide:disable', disable);
+      slide.el.addEventListener('slide:show', show);
 
       expect(enter).not.toHaveBeenCalled();
       expect(leave).not.toHaveBeenCalled();
       expect(enable).not.toHaveBeenCalled();
       expect(disable).not.toHaveBeenCalled();
+      expect(show).not.toHaveBeenCalled();
 
       slide.enable();
       expect(enter).not.toHaveBeenCalled();
       expect(leave).not.toHaveBeenCalled();
       expect(enable).toHaveBeenCalledTimes(1);
       expect(disable).not.toHaveBeenCalled();
+      expect(show).not.toHaveBeenCalled();
       enable.mockClear();
 
       slide.disable();
@@ -94,6 +98,7 @@ describe('Slide module', () => {
       expect(leave).not.toHaveBeenCalled();
       expect(enable).not.toHaveBeenCalled();
       expect(disable).toHaveBeenCalledTimes(1);
+      expect(show).not.toHaveBeenCalled();
       disable.mockClear();
 
       slide.moveAfterLast();
@@ -101,6 +106,7 @@ describe('Slide module', () => {
       expect(leave).toHaveBeenCalledTimes(1);
       expect(enable).not.toHaveBeenCalled();
       expect(disable).not.toHaveBeenCalled();
+      expect(show).not.toHaveBeenCalled();
       enter.mockClear();
       leave.mockClear();
 
@@ -109,8 +115,12 @@ describe('Slide module', () => {
       expect(leave).toHaveBeenCalledTimes(1);
       expect(enable).not.toHaveBeenCalled();
       expect(disable).not.toHaveBeenCalled();
+      expect(show).not.toHaveBeenCalled();
       enter.mockClear();
       leave.mockClear();
+
+      slide.show();
+      expect(show).toHaveBeenCalled();
     });
 
     test('Move', () => {

test/modules/webslides.test.js

@@ -51,7 +51,7 @@ test('Should have correct properties', () => {
   expect(webslides.plugins.nav).toBeDefined();
   expect(webslides.plugins.scroll).toBeDefined();
   expect(webslides.plugins.touch).toBeDefined();
-  expect(webslides.plugins.video).toBeDefined();
+  expect(webslides.plugins.media).toBeDefined();
   expect(webslides.plugins.youtube).toBeDefined();
   expect(webslides.plugins.zoom).toBeDefined();
 

test/plugins/click-nav.test.js

@@ -9,8 +9,7 @@ beforeAll(() => {
 test('Click nav plugin', () => {
   const next = jest.fn();
   const ws = document.getElementById('webslides');
-  // Simulates dataset
-  ws.dataset = {};
+
   const webslides = {
     options: {
       changeOnClick: true

test/plugins/keyboard.test.js

@@ -2,12 +2,14 @@ import Keyboard from '../../src/js/plugins/keyboard';
 import Keys from '../../src/js/utils/keys';
 
 // @TODO: Check to do this with simulant
-const simulateKeyEvent = (el, code) => {
-  const evt = new KeyboardEvent('keydown', {
+const simulateKeyEvent = (el, code, extra) => {
+  const config = Object.assign({
     bubbles: true,
     cancelableCode: true,
     which: code,
-    shiftKey: true});
+    shiftKey: false}, extra);
+
+  const evt = new KeyboardEvent('keydown', config);
   el.dispatchEvent(evt);
 };
 
@@ -37,7 +39,7 @@ test('Keyboard plugin', () => {
     el: ws
   };
 
-  new Keyboard(webslides);
+  const key = new Keyboard(webslides);
 
   expect(goto).not.toBeCalled();
   expect(next).not.toBeCalled();
@@ -51,18 +53,39 @@ test('Keyboard plugin', () => {
   expect(next.mock.calls.length).toBe(1);
   simulateKeyEvent(document, Keys.SPACE);
   expect(next.mock.calls.length).toBe(2);
-  simulateKeyEvent(document, Keys.RE_PAGE);
+  // Shift + Space
+  simulateKeyEvent(document, Keys.SPACE, {shiftKey: true});
+  expect(next.mock.calls.length).toBe(2);
   expect(prev.mock.calls.length).toBe(1);
+  simulateKeyEvent(document, Keys.RE_PAGE);
+  expect(prev.mock.calls.length).toBe(2);
+
+  // Home - End
   simulateKeyEvent(document, Keys.HOME);
   expect(goto.mock.calls.length).toBe(1);
+  simulateKeyEvent(document, Keys.END);
+  expect(goto.mock.calls.length).toBe(2);
+
+  // Arrow keys, only left right should increase
   simulateKeyEvent(document, Keys.DOWN);
-  expect(next.mock.calls.length).toBe(2);
   simulateKeyEvent(document, Keys.UP);
-  expect(prev.mock.calls.length).toBe(1);
   simulateKeyEvent(document, Keys.LEFT);
-  expect(prev.mock.calls.length).toBe(2);
   simulateKeyEvent(document, Keys.RIGHT);
+  expect(prev.mock.calls.length).toBe(3);
   expect(next.mock.calls.length).toBe(3);
+
+  // Arrow keys, only up down should increase
+  key.ws_.isVertical = true;
+  simulateKeyEvent(document, Keys.DOWN);
+  simulateKeyEvent(document, Keys.UP);
+  simulateKeyEvent(document, Keys.LEFT);
+  simulateKeyEvent(document, Keys.RIGHT);
+  expect(prev.mock.calls.length).toBe(4);
+  expect(next.mock.calls.length).toBe(4);
+
+  // F, only trigger on when alone
   simulateKeyEvent(document, Keys.F);
+  simulateKeyEvent(document, Keys.F, {ctrlKey: true});
+  simulateKeyEvent(document, Keys.F, {metaKey: true});
   expect(fullscreen.mock.calls.length).toBe(1);
 });

test/plugins/media.test.js

@@ -1,4 +1,4 @@
-import Video from '../../src/js/plugins/video';
+import Video from '../../src/js/plugins/media';
 import DOM from '../../src/js/utils/dom';
 
 beforeAll(() => {

test/plugins/navigation.test.js

@@ -29,7 +29,7 @@ test('Navigation plugin', () => {
   expect(fakeCounter.tagName).toBe('SPAN');
   expect(fakeCounter.childNodes.length).toBe(1);
   expect(fakeCounter.childNodes[0].tagName).toBe('A');
-  expect(fakeCounter.childNodes[0].href).toBe('about:blank#');
+  expect(fakeCounter.childNodes[0].href).toBe('http://localhost/#');
   expect(fakeCounter.childNodes[0].title).toBe('View all slides');
 
   new Navigation(webslides);

test/plugins/youtube.test.js

@@ -44,10 +44,10 @@ test('YouTube utility', () => {
   new YouTube(webslides);
 
   expect(typeof window.onYouTubeIframeAPIReady).toBe('function');
-  webslides.el.querySelector('[data-youtube]').dataset = {
-    autoplay: true,
-    youtubeId: 'CQY3KUR3VzM'
-  };
+  const el = webslides.el.querySelector('[data-youtube]');
+
+  el.dataset.autoplay = true;
+  el.dataset.youtubeId = 'CQY3KUR3VzM';
 
   window.onYouTubeIframeAPIReady();
 

test/utils/hash.test.js

@@ -8,8 +8,8 @@ describe('Hash utility', () => {
   document.location.hash = '#slide=1';
   const goto = jest.fn();
   const ws = document.getElementById('webslides');
-  // Simulates dataset
-  ws.dataset = {};
+
+
   const webslides = {
     options: {
       changeOnClick: true

zip-release.js

@@ -0,0 +1,21 @@
+/* eslint-disable no-console */
+const fs = require('fs');
+const archiver = require('archiver');
+const pck = require('./package.json');
+
+const output = fs.createWriteStream(`${__dirname}/${pck.name}.zip`);
+const archive = archiver('zip', { zlib: { level: 9 } });
+
+output.on('close', () => {
+  console.log(`${archive.pointer()} total bytes`);
+});
+
+archive.on('error', err => {
+  throw err;
+});
+
+archive.pipe(output);
+
+pck.release.files.forEach(f => archive.glob(f));
+
+archive.finalize();