Adding/removing tabindex to links dynamically to prevent strange slide transitions

Author: jdan

examples/basic.md

@@ -23,6 +23,8 @@ This will be in a separate paragraph.
     ![markdown-logo](logo.gif)
     <img src="logo.gif" />
 
+[Here's a link](http://google.com).
+
 --
 
 ### A list of things
@@ -31,7 +33,7 @@ This will be in a separate paragraph.
 * Item B
 * Item gamma
 
-No need for multiple templates!
+No need for multiple templates! [Another link](http://google.com).
 
 --
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "cleaver",
   "preferGlobal": true,
-  "version": "0.4.1",
+  "version": "0.4.2",
   "author": "Jordan Scales <scalesjordan@gmail.com>",
   "description": "30-second slideshows for hackers",
   "keywords": [

resources/navigation.js

@@ -13,6 +13,7 @@ function goBack() {
 
   setCurrentProgress();
   updateURL();
+  updateTabIndex();
 }
 
 /**
@@ -30,6 +31,7 @@ function goForward() {
 
   setCurrentProgress();
   updateURL();
+  updateTabIndex();
 }
 
 /**
@@ -99,11 +101,33 @@ function goToPage(page) {
   }
 }
 
+/**
+ * Removes tabindex property from all links on the current slide, sets
+ * tabindex = -1 for all links on other slides. Prevents slides from appearing
+ * out of control.
+ */
+function updateTabIndex() {
+  var allLinks = document.querySelectorAll('.slide a');
+  var currentPageLinks = document.querySelector('.slide').querySelectorAll('a');
+  var i;
+
+  for (i = 0; i < allLinks.length; i++) {
+    allLinks[i].setAttribute('tabindex', -1);
+  }
+
+  for (i = 0; i < currentPageLinks.length; i++) {
+    allLinks[i].removeAttribute('tabindex');
+  }
+}
+
 window.onload = function () {
 
   // Give each slide a "page" data attribute.
   setPageNumbers();
 
+  // Update the tabindex to prevent weird slide transitioning
+  updateTabIndex();
+
   // If the location hash specifies a page number, go to it.
   var page = window.location.hash.slice(1);
   if (page) goToPage(page);

templates/author.mustache

@@ -2,17 +2,17 @@
   <h1 class="name">{{name}}</h1>
   {{#twitter}}
     <h3 class="twitter">
-      <a href="http://twitter.com/{{{twitter}}}" tabindex="-1">{{{twitter}}}</a>
+      <a href="http://twitter.com/{{{twitter}}}">{{{twitter}}}</a>
     </h3>
   {{/twitter}}
   {{#url}}
     <h3 class="url">
-      <a href="{{{url}}}" tabindex="-1">{{{url}}}</a>
+      <a href="{{{url}}}">{{{url}}}</a>
     </h3>
   {{/url}}
   {{#email}}
     <h3 class="email">
-      <a href="mailto:{{{email}}}" tabindex="-1">{{{email}}}</a>
+      <a href="mailto:{{{email}}}">{{{email}}}</a>
     </h3>
   {{/email}}
 </div>