Merge pull request #279 from machawk1/issue-181

Add nav links when viewing a memento

Author: machawk1

mink-plugin/css/minkui.css

@@ -33,3 +33,5 @@ h1 {font-size: 14px; font-family: 'Futura', 'Century Gothic', AppleGothic, sans-
 #drilldownBox ul li span.memCount {float: right;  font-family: Monaco, Courier, sans-serif; padding: 0px 3px; margin-right: 5px; border-radius: 2px; line-height: 10px;}
 
 .disabled {color: #999;}
+button.viewingMemento {text-decoration: underline;}
+button#memento_first {margin-left: 2.0em;}

mink-plugin/js/displayMinkUI.js

@@ -48,7 +48,39 @@ function appendHTMLToShadowDOM () {
           $('#title_dropdown').addClass('hidden')
           $('#archiveNow').addClass('hidden')
           $('#viewingMementoInterface').removeClass('hidden')
+
           $('#mementosAvailable').html('Viewing memento at ' + (new Date(items.timemaps[document.URL].datetime)))
+
+          const firstButton = $('#memento_first')
+          const lastButton = $('#memento_last')
+          const prevButton = $('#memento_prev')
+          const nextButton = $('#memento_next')
+
+          items.timemaps[document.URL].mementos.forEach(function (mem) {
+            let targetButton
+            if (mem.first === true) {
+              targetButton = firstButton
+            }
+            if (mem.last === true) {
+              targetButton = lastButton
+            }
+            if (mem.next === true) {
+              targetButton = nextButton
+            }
+            if (mem.prev === true) {
+              targetButton = prevButton
+            }
+
+            if (typeof targetButton !== 'undefined') {
+              if (mem.uri === window.document.URL) {
+                targetButton.addClass('viewingMemento')
+              }
+
+              targetButton.removeAttr('disabled')
+              targetButton.attr('data-uri', mem.uri)
+            }
+          })
+
           cb = createShadowDOM
         } else if (mCount > MAX_MEMENTOS_IN_DROPDOWN) {
           $('.dropdown').addClass('hidden')
@@ -520,6 +552,7 @@ function setupUI () {
   bindGoBackToMainInterfaceButton()
   bindArchiveLogos()
   bindGoBackToLiveWebButton()
+  bindNavigationButtons()
 
   $('#viewMementoButton').click(function () {
     window.location = $(this).attr('alt')
@@ -748,6 +781,14 @@ function bindGoBackToLiveWebButton () {
   })
 }
 
+function bindNavigationButtons () {
+  ['first', 'last', 'next', 'prev'].forEach(function attachURI (rel) {
+    document.getElementById('memento_' + rel).addEventListener('click', event => {
+      window.location = event.target.getAttribute('data-uri')
+    })
+  })
+}
+
 if ($('#minkWrapper').length === 0) {
   appendHTMLToShadowDOM()
 } else {

mink-plugin/minkui.html

@@ -13,14 +13,17 @@ <h1 id="mementosAvailable"><span id="mementoCount"></span> <span id="mementoPlur
  <span class="archiveNowInterface">Archive Page To...</span>
  <img src="images/iaLogo.png" alt="Internet Archive" id="archivelogo_ia" class="archiveNowInterface archiveLogo" />
  <img src="images/archiveisLogo.png" alt="Archive.is" id="archivelogo_ais" class="archiveNowInterface archiveLogo" />
-<img src="images/webcitelogo.png" alt="WebCite" id="archivelogo_webcite" class="archiveNowInterface archiveLogo"/>
+ <img src="images/webcitelogo.png" alt="WebCite" id="archivelogo_webcite" class="archiveNowInterface archiveLogo"/>
  <img src="images/allListedArchives.png" alt="All Listed Archives" id="archivelogo_ala" class="archiveNowInterface archiveLogo" />
  <button class="archiveNowInterface hideInNoMementosInterface" id="goBackButton">&lt; Go Back</button>
 </span>
 <span id="viewingMementoInterface" class="hidden">
-  <button id="backToLiveWeb">Back to Live Web</button><!--
-  <button>Temporally previous memento</button>
-  <button>Temporally next memento</button>-->
+  <button id="backToLiveWeb">Back to Live Web</button>
+  <button id="memento_first" >First</button>
+  <button id="memento_prev" disabled>Previous</button>
+  &nbsp;&bull;&nbsp;
+  <button id="memento_next" disabled>Next</button>
+  <button id="memento_last" disabled>Last</button>
 </span>
 <!--<input type="button" value="?" id="helpButton" />-->
 

mink-plugin/style.css

@@ -80,7 +80,6 @@
 /* Do not display UI elements for non-selected view of list of mementos */
 .hiddenUI {display: none;}
 
-
 /* This isn't working, the image ought to be pulled from the extension, not the current page */
 /* option.ia {background-image: url('images/archives/ia.png');}*/
 

mink-plugin/timemap.js

@@ -42,7 +42,7 @@ function Timemap (fromString) {
   const mementoregex = new RegExp(mementoRelMementoExpression) // Regex to get a memento
 
   const mementoRelSelfExpression = /rel=.*self.*/gi
-  const mselfregex = new RegExp(mementoRelSelfExpression) // Regex to get a memento
+  const mselfregex = new RegExp(mementoRelSelfExpression) // Regex to get self
 
   this.mementos = []
 
@@ -105,6 +105,31 @@ function Memento (fromStr) {
   this.uri = this.str.substring(this.str.indexOf('<') + 1, this.str.indexOf('>'))
   this.datetime = this.str.substr(this.str.indexOf('datetime')) // Abbreviation to just include datetime string and on
   this.datetime = this.datetime.substr(this.datetime.indexOf('"')).replace(/"/g, '').trim()
+
+  const mementoRelFirstExpression = /rel=.*first.*/gi
+  const mfirstregex = new RegExp(mementoRelFirstExpression) // Regex to get first
+
+  const mementoRelLastExpression = /rel=.*last.*/gi
+  const mlastregex = new RegExp(mementoRelLastExpression) // Regex to get last
+
+  const mementoRelNextExpression = /rel=.*next.*/gi
+  const mnextregex = new RegExp(mementoRelNextExpression) // Regex to get next
+
+  const mementoRelPrevExpression = /rel=.*prev.*/gi
+  const mprevregex = new RegExp(mementoRelPrevExpression) // Regex to get next
+
+  if (fromStr.match(mfirstregex)) {
+    this.first = true
+  }
+  if (fromStr.match(mlastregex)) {
+    this.last = true
+  }
+  if (fromStr.match(mnextregex)) {
+    this.next = true
+  }
+  if (fromStr.match(mprevregex)) {
+    this.prev = true
+  }
 }
 
 /* ***************************