Add page URLs

resources/navigation.js

@@ -10,6 +10,8 @@ function goBack() {
 
   wrapper.removeChild(lastSlide);
   wrapper.insertBefore(lastSlide, wrapper.firstChild);
+
+  updateURL();
 }
 
 /**
@@ -24,10 +26,72 @@ function goForward() {
 
   wrapper.removeChild(firstSlide);
   wrapper.appendChild(firstSlide);
+
+  updateURL();
+}
+
+/**
+ * Updates the current URL to include a hashtag of the current page number.
+ */
+function updateURL() {
+  window.history.replaceState( {} , null, '#' + currentPage() );
+}
+
+/**
+ * Returns the current page number of the presentation.
+ */
+function currentPage() {
+  return document.querySelector('#wrapper .slide').dataset.page;
+}
+
+/**
+ * Returns a NodeList of each .slide element.
+ */
+function allSlides() {
+  return document.querySelectorAll('#wrapper .slide');
+}
+
+/**
+ * Give each slide a "page" data attribute.
+ */
+function setPageNumbers() {
+  var wrapper = document.querySelector('#wrapper');
+  var pages   = wrapper.querySelectorAll('section');
+
+  for (var i = 0; i < pages.length; ++i) {
+    var page = pages[i];
+    page.dataset.page = i;
+  }
+}
+
+/**
+ * Go to the specified page of content.
+ */
+function goToPage(page) {
+  // Try to find the target slide.
+  var targetSlide = document.querySelector('#wrapper .slide[data-page="' + page + '"]');
+
+  // If it actually exists, go forward until we find it.
+  if (targetSlide) {
+    var numSlides = allSlides().length;
+
+    for (var i = 0; currentPage() != page && i < numSlides; i++) {
+      goForward();
+    }
+  }
 }
 
 window.onload = function () {
 
+  // Give each slide a "page" data attribute.
+  setPageNumbers();
+
+  // If the location hash specifies a page number, go to it.
+  var page = window.location.hash.slice(1);
+  if (page) {
+    goToPage(page);
+  }
+
   document.onkeydown = function (e) {
     var kc = e.keyCode;