Merge pull request #4 from mojavelinux/by-id

use id attribute as alternative to data-bespoke-hash
bespokejs · Mar 29, 2017 · 56ef274 · 56ef274
2 parents 1859435 + 6696633
commit 56ef274
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -50,6 +50,20 @@ If you'd like to use named hash routes instead, add `data-bespoke-hash` attribut
 </article>
 ```
 
+Alternatively, you can specify the value using `id` attributes in your slide markup.
+
+```html
+<article>
+  <section id="catchy-title"></section>
+  <section id="shameless-plug"></section>
+  <section id="controversial-statement"></section>
+  <section id="explanation-of-controversial-statement"></section>
+  <section id="shameless-self-promotion"></section>
+</article>
+```
+
+If both the `data-bespoke-hash` and `id` attributes are used, `data-bespoke-hash` wins. When looking for a match, the plugin consults the `data-bespoke-hash` attribute on a slide first, then the `id` attribute.
+
 ## Package managers
 
 ### npm

diff --git a/demo/index.html b/demo/index.html
@@ -22,7 +22,7 @@ <h1>Slide 3</h1>
       <section data-bespoke-hash="slide-4">
         <h1>Slide 4</h1>
       </section>
-      <section>
+      <section id="slide-5">
         <h1>Slide 5</h1>
       </section>
       <section>

diff --git a/dist/bespoke-hash.js b/dist/bespoke-hash.js
@@ -25,7 +25,7 @@ module.exports = function() {
           activateSlide(slideNumberOrName - 1);
         } else {
           deck.slides.forEach(function(slide, i) {
-            if (slide.getAttribute('data-bespoke-hash') === hash) {
+            if (slide.getAttribute('data-bespoke-hash') === hash || slide.id === hash) {
               activateSlide(i);
             }
           });
@@ -37,7 +37,7 @@ module.exports = function() {
       parseHash();
 
       deck.on('activate', function(e) {
-        var slideName = e.slide.getAttribute('data-bespoke-hash');
+        var slideName = e.slide.getAttribute('data-bespoke-hash') || e.slide.id;
         window.location.hash = slideName || e.index + 1;
       });
 

diff --git a/dist/bespoke-hash.min.js b/dist/bespoke-hash.min.js
diff --git a/lib/bespoke-hash.js b/lib/bespoke-hash.js
@@ -16,7 +16,7 @@ module.exports = function() {
           activateSlide(slideNumberOrName - 1);
         } else {
           deck.slides.forEach(function(slide, i) {
-            if (slide.getAttribute('data-bespoke-hash') === hash) {
+            if (slide.getAttribute('data-bespoke-hash') === hash || slide.id === hash) {
               activateSlide(i);
             }
           });
@@ -28,7 +28,7 @@ module.exports = function() {
       parseHash();
 
       deck.on('activate', function(e) {
-        var slideName = e.slide.getAttribute('data-bespoke-hash');
+        var slideName = e.slide.getAttribute('data-bespoke-hash') || e.slide.id;
         window.location.hash = slideName || e.index + 1;
       });
 

diff --git a/test/spec/bespoke-hashSpec.js b/test/spec/bespoke-hashSpec.js
@@ -8,6 +8,8 @@ describe("bespoke-hash", function() {
   var PARENT_TAG = 'article',
     SLIDE_TAG = 'section',
     NO_OF_SLIDES = 10,
+    FIRST_SLIDE_WITH_ID_VALUE = 'first-slide-with-id',
+    FIRST_SLIDE_WITH_ID_INDEX = 4,
     FIRST_NAMED_SLIDE_NAME = 'first-named-slide',
     FIRST_NAMED_SLIDE_INDEX = 6,
     SECOND_NAMED_SLIDE_NAME = 'second-named-slide',
@@ -22,6 +24,9 @@ describe("bespoke-hash", function() {
       article = document.createElement(PARENT_TAG);
       for (var i = 0; i < NO_OF_SLIDES; i++) {
         slides.push(document.createElement(SLIDE_TAG));
+        if (i === FIRST_SLIDE_WITH_ID_INDEX) {
+          slides[i].id = FIRST_SLIDE_WITH_ID_VALUE;
+        }
         if (i === FIRST_NAMED_SLIDE_INDEX) {
           slides[i].setAttribute('data-bespoke-hash', FIRST_NAMED_SLIDE_NAME);
         }
@@ -107,6 +112,25 @@ describe("bespoke-hash", function() {
 
   });
 
+  describe("given valid id hash is present on page load", function() {
+
+    beforeEach(function() {
+      window.location.hash = FIRST_SLIDE_WITH_ID_VALUE;
+    });
+
+    describe("when the deck is created", function() {
+
+      beforeEach(createDeck);
+      afterEach(destroyDeck);
+
+      it("should activate the slide referenced in the hash", function() {
+        expect(deck.slide()).toBe(FIRST_SLIDE_WITH_ID_INDEX);
+      });
+
+    });
+
+  });
+
   describe("given an invalid name hash is present on page load", function() {
 
     beforeEach(function() {