fix history jumps

src/script.js

@@ -15,7 +15,6 @@ const barDiv = document.getElementById('progress')
 const upGrid = document.getElementById('drop-grid')
 const pics = document.getElementById('pics')
 const picsHolder = document.getElementById('picsHolder')
-const picsLabel = document.getElementById('picsLabel')
 
 // helpers
 let allA
@@ -58,7 +57,7 @@ window.onClickLink = e => {
 }
 
 const refresh = () => browseTo(location.href)
-const prevPage = () => browseTo(location.href + '../')
+const prevPage = () => picsOff() || browseTo(location.href + '../')
 window.onpopstate = prevPage
 
 // RPC
@@ -314,12 +313,16 @@ const isPic = src => src && picTypes.find(type => src.toLocaleLowerCase().includ
 const isPicMode = () => pics.style.display === 'flex'
 window.picsNav = () => picsNav(true)
 
-function setImage () {
+function setImage (first) {
   const src = allImgs[imgsIndex]
   picsHolder.src = src
-  picsLabel.innerText = src.split('/').pop()
   storeLastArrowSrc(src)
   restoreCursorPos()
+  if (first) {
+    history.pushState({}, '', encodeURI(src.split('/').pop()))
+  } else {
+    history.replaceState({}, '', encodeURI(src.split('/').pop()))
+  }
 }
 
 function picsOn (ifImgSelected, href) {
@@ -333,12 +336,18 @@ function picsOn (ifImgSelected, href) {
     imgsIndex = allImgs.findIndex(el => el.includes(href))
   }
 
-  setImage()
+  setImage(true)
   pics.style.display = 'flex'
   return true
 }
 
-const picsOff = () => { pics.style.display = 'none' }
+function picsOff (skip) {
+  if (!isPicMode()) { return }
+
+  history.replaceState({}, '', encodeURI(location.href.split('/').slice(0, -1).join('/') + '/'))
+  pics.style.display = 'none'
+  return true
+}
 
 window.picsToggle = () => isPicMode() ? picsOff() : picsOn()
 

src/style.css

@@ -133,24 +133,13 @@ h1 {
   position: fixed;
   background-color: #000;
   top: 0px;
-  bottom: 25px;
+  bottom: 0px;
   left: 0px;
   right: 0px;
   overflow: hidden;
   z-index: 99;
 }
 
-#picsLabel {
-  font-size: 25px;
-  color: darkgray;
-  position: fixed;
-  bottom: 0px;
-  left: 0px;
-  right: 0px;
-  background-color: black;
-  font-family: helvetica;
-}
-
 #picsHolder {
   height: 100%;
   width: 100%;

src/template.go

@@ -29,7 +29,6 @@
 
     <div id="pics" style="display:none;">
         <div onclick="window.picsToggle()" id="picsToggleCinema"></div> <img onclick="window.picsNav()" id="picsHolder" />
-        <span id="picsLabel"></span>
     </div>
 
     <table>