From 808788db359b7fbe82da9e302a5759fb91c9198c Mon Sep 17 00:00:00 2001 From: Roger Espinosa Date: Wed, 7 Feb 2024 18:05:18 -0500 Subject: [PATCH] fix url updating + viewer loader --- src/js/text/viewers/viewer-mirador.js | 51 +++++++++++++++++++-------- src/scss/embed.scss | 37 +++++++++++++++++++ 2 files changed, 74 insertions(+), 14 deletions(-) diff --git a/src/js/text/viewers/viewer-mirador.js b/src/js/text/viewers/viewer-mirador.js index 4bb441e..348c89d 100644 --- 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 = `

Loading metadata for: ${identifier}

`; @@ -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 index 8ca4ce6..a5ce72a 100644 --- 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); + } +} \ No newline at end of file