fix url updating + viewer loader

mlibrary · Feb 7, 2024 · 808788d · 808788d
1 parent 0562b24
commit 808788d
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 14 deletions.
diff --git a/src/js/text/viewers/viewer-mirador.js b/src/js/text/viewers/viewer-mirador.js
@@ -118,14 +118,36 @@ window.addEventListener('message', (event) => {
     if ( self_href.substring(0, 1) == '/' ) {
       self_href = `${location.protocol}//${location.host}${self_href}`;
     }
+    let pageview_href = location.href.replace(/\;/g, "&");
     let url = new URL(self_href);
-    if ( url.pathname.indexOf('pageviewer-idx' ) ) {
+    let pageviewUrl = new URL(pageview_href);
+    let re1 = new RegExp(`/(${idno})/(\\d+):(\\d+)`, 'i');
+    let re2 = new RegExp(`/(${idno})/(\\d+)`, 'i');
+    let match;
+    if ( url.pathname.indexOf('pageviewer-idx' ) > -1 ) {
       url.searchParams.set('seq', newSeq);
-    } else if ( url.pathname.indexOf('/' + idno + '/') > -1 ) {
+    }
+
+    if ( pageviewUrl.pathname.indexOf('pageviewer-idx') > -1 ) {
+      pageviewUrl.searchParams.set('seq', newSeq);
+    } else if ( match = pageviewUrl.pathname.match(re1) ) {
+      // console.log("-- match d:d", match);
+      match[2] = newSeq.replace(/^0+/, '');;
+      pageviewUrl.pathname = pageviewUrl.pathname.replace(re1, `/${match[1]}/${match[2]}:${match[3]}`);
+    } else if ( match = pageviewUrl.pathname.match(re2) ) {
+      // console.log("-- match d", match);
+      match[2] = newSeq.replace(/^0+/, '');
+      pageviewUrl.pathname = pageviewUrl.pathname.replace(re2, `/${match[1]}/${match[2]}`);
+    } else if ( pageviewUrl.pathname.indexOf('/' + idno + '/') > -1 ) {
+      // console.log("-- match null", pageviewUrl.pathname);
       let re = new RegExp(`/${idno}/\\d+`);
-      url.pathname = url.pathname.replace(re, `/${idno}/${newSeq}`);
+      pageviewUrl.pathname = pageviewUrl.pathname.replace(re, `/${idno}/${newSeq.replace(/^0+/, '')}`);
+    } else {
+      console.log("-- match FAIL", pageviewUrl.pathname, idno);
     }
     let newHref = url.toString();
+    let newPageviewHref = pageviewUrl.toString();
+    // console.log("-- match new href", newHref, newPageviewHref);
 
     alert.innerHTML = `<p>Loading metadata for: ${identifier}</p>`;
 
@@ -161,21 +183,22 @@ window.addEventListener('message', (event) => {
     slDropdownEl.style.opacity = 1.0;
 
 
-    history.pushState({}, document.title, newHref);
-    document.querySelector('.breadcrumb li:last-child').setAttribute('href', newHref);
+    history.pushState({}, document.title, newPageviewHref);
+    document.querySelector('.breadcrumb li:last-child').setAttribute('href', newPageviewHref);
 
     const bookmarkItem = document.querySelector('dt[data-key="bookmark-item"] + dd span.url');
     if ( bookmarkItem ) {
       let itemHref = bookmarkItem.innerText.trim();
-      if ( itemHref.indexOf('/cgi/') > -1 ) {
-        // just use newHref
-        bookmarkItem.innerText = newHref;
-      } else {
-        // just pop on the new seq?
-        let tmp = itemHref.split('/');
-        tmp[tmp.length - 1] = newSeq.replace(/^0+/, '');
-        bookmarkItem.innerText = tmp.join('/');
-      }
+      bookmarkItem.innerText = newPageviewHref;
+      // if ( itemHref.indexOf('/cgi/') > -1 ) {
+      //   // just use newHref
+      //   bookmarkItem.innerText = newHref;
+      // } else {
+      //   // just pop on the new seq?
+      //   let tmp = itemHref.split('/');
+      //   tmp[tmp.length - 1] = newSeq.replace(/^0+/, '');
+      //   bookmarkItem.innerText = tmp.join('/');
+      // }
     }
 
     tocbot.refresh();

diff --git a/src/scss/embed.scss b/src/scss/embed.scss
@@ -61,3 +61,40 @@ li.MuiListItem-root {
     min-width: calc(100dvw - 50px) !important;
   }
 }
+
+.loader {
+  position: relative;
+  display: block;
+  height: 8rem;
+  width: 8rem;
+  transition: all .3s;
+  transition-timing-function: ease-in;
+  // animation: spinHourglas 1000ms infinite;
+  animation: spinHourglas 1750ms infinite;
+}
+.loader::after{
+  content: '';
+  box-sizing: border-box;
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  background: 0 0;
+  // border-width: 0.585em;
+  border-width: 2em;
+  border-color: #9b9b9b transparent;
+  border-radius: 50%;
+  border-style: solid;
+}
+@keyframes spinHourglas {
+  0% {
+    transform: rotate(0);
+    animation-timing-function: cubic-bezier(.55,.055,.675,.19);
+  }
+  50% {
+    transform: rotate(180deg);
+    animation-timing-function: cubic-bezier(.215,.61,.355,1);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}