JS: Add hoverable previous/next to image viewer.

Adds previous/next hoverable panes, right above the image, to the text
viever. These previous/next buttons have the same behavior as the
current previous/next, but are easier to click than the small text,
making it useful for large images, large screens, or on mobile.

Change the JS behavior around the image to only delete the image instead
of the entire div, so that the buttons could be positionned absolutely
on top, in the same div as the image.

2 files changed, 48 insertions, 2 deletions

diff --git a/data/style.css b/data/style.css
index 08cee73d..5e1301c4 100644
--- a/data/style.css
+++ b/data/style.css
@@ -1016,6 +1016,34 @@ div#iv_view {
 .ivview     { position: fixed; background: $boxbg$; border: 2px solid $border$; padding: 5px; text-align: center }
 .ivview img { cursor: pointer }
 .ivview > div:nth-child(1) { position: absolute; left: 48%; top: 48%; width: 30px; height: 30px }
+.ivview > div:nth-child(2) { position: relative }
+.ivview > div:nth-child(2) .left-pane { 
+  position: absolute;
+  border: none;
+  height: 100%;
+  width: 25%;
+  top: 0;
+  transition: opacity 0.25s ease-in-out;
+  opacity: 0;
+  background: linear-gradient(90deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
+}
+.ivview > div:nth-child(2) .left-pane:hover {
+  opacity: 1;
+}
+.ivview > div:nth-child(2) .right-pane { 
+  position: absolute;
+  border: none;
+  height: 100%;
+  width: 25%;
+  top: 0;
+  right: 0;
+  transition: opacity 0.25s ease-in-out;
+  opacity: 0;
+  background: linear-gradient(270deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
+}
+.ivview > div:nth-child(2) .right-pane:hover {
+  opacity: 1;
+}
 .ivview > div:nth-child(3) { width: 100%; display: flex }
 .ivview > div:nth-child(3) > a { flex: 1; text-align: left; border: 0; font-weight: bold; font-size: 14px; white-space: nowrap }
 .ivview > div:nth-child(3) > a:nth-child(2) { text-align: right; padding-right: 5px }
diff --git a/elm/iv.js b/elm/iv.js
index 167b0c93..06bb6f5a 100644
--- a/elm/iv.js
+++ b/elm/iv.js
@@ -24,6 +24,8 @@ var ivimg;
 var ivfull;
 var ivnext;
 var ivprev;
+var ivhovernext;
+var ivhoverprev;
 var ivload;
 var ivflag;
 
@@ -62,6 +64,16 @@ function create_div() {
     ivnext.textContent = 'next »';
     ivlinks.appendChild(ivnext);
 
+    ivhoverprev = document.createElement('a');
+    ivhoverprev.onclick = show;
+    ivhoverprev.className = "left-pane";
+    ivimg.appendChild(ivhoverprev);
+
+    ivhovernext = document.createElement('a');
+    ivhovernext.onclick = show;
+    ivhovernext.className = "right-pane";
+    ivimg.appendChild(ivhovernext);
+
     ivflag = document.createElement('a');
     ivlinks.appendChild(ivflag);
 
@@ -137,13 +149,15 @@ function show(ev) {
     imgh = Math.floor(opt[0].split('x')[1]);
 
     create_div();
+    var imgs = ivimg.getElementsByTagName("img")
+    if (imgs.length !== 0)
+        ivimg.getElementsByTagName("img")[0].remove()
 
     var img = document.createElement('img');
     img.src = u;
     ivfull.href = u;
     img.onclick = ivClose;
     img.onload = function() { ivload.style.display = 'none' };
-    ivimg.textContent = '';
     ivimg.appendChild(img);
 
     var flag = opt[2] ? opt[2].match(/^([0-2])([0-2])([0-9]+)$/) : null;
@@ -161,6 +175,8 @@ function show(ev) {
     ivload.style.display = 'block';
     fixnav(ivprev, opt[1], idx, -1);
     fixnav(ivnext, opt[1], idx, 1);
+    fixnav(ivhoverprev, opt[1], idx, -1);
+    fixnav(ivhovernext, opt[1], idx, 1);
     resize();
 
     document.addEventListener('click', ivClose);
@@ -180,7 +196,9 @@ window.ivClose = function(ev) {
     document.removeEventListener('keydown', keydown);
     window.removeEventListener('resize', resize);
     ivparent.style.display = 'none';
-    ivimg.textContent = '';
+    var imgs = ivimg.getElementsByTagName("img")
+    if (imgs.length !== 0)
+        ivimg.getElementsByTagName("img")[0].remove()
     return false;
 };