add JavaScript for page version selector

diff --git a/src/js/03-page-versions.js b/src/js/03-page-versions.js
new file mode 100644 (file)
index 0000000..672bda1
--- /dev/null
+++ b/src/js/03-page-versions.js
@@ -0,0 +1,18 @@
+;(function () {
+  'use strict'
+
+  var toggle = document.querySelector('.page-versions .versions-menu-toggle')
+  if (!toggle) return
+
+  var selector = document.querySelector('.page-versions')
+
+  toggle.addEventListener('click', function (e) {
+    selector.classList.toggle('is-active')
+    // don't let this event get smothered
+    e.stopPropagation()
+  })
+
+  window.addEventListener('click', function () {
+    selector.classList.remove('is-active')
+  })
+})()

diff --git a/src/partials/page-versions.hbs b/src/partials/page-versions.hbs
index de57d1b..ef46f1c 100644 (file)
--- a/src/partials/page-versions.hbs
+++ b/src/partials/page-versions.hbs
@@ -1,6 +1,6 @@
 {{#if (has-versions domain)}}
 <div class="page-versions">
-  <button class="versions-menu-toggle" title="Other versions of page">{{domain.version.string}}</button>
+  <button class="versions-menu-toggle" title="Show other versions of page">{{domain.version.string}}</button>
   <div class="versions-menu">
     {{#each (page-versions site.domains domain.name versions)}}
     <a class="version{{#if (eq ./string ../domain.version.string)}} is-current{{/if}}{{#if ./missing}} is-missing{{/if}}" href="{{{./url}}}">{{./string}}</a>