Adding a way to go to sections by id

#71

Author: Antonio-Laguna

index.html

@@ -357,7 +357,7 @@ <h2>
                   </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 -->

src/js/modules/slide.js

@@ -37,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

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);
+    }
   }
 
   /**

static/css/webslides.css

@@ -1,7 +1,7 @@
 /*!
  * Name: WebSlides
  * Version: 1.5.0
- * Date: 2017-09-16
+ * 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.5.0
- * Date: 2017-09-16
+ * 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);
     }
 
     /**
@@ -1906,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_();
   }
 
@@ -1922,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);
+      }
     }
 
     /**