summaryrefslogtreecommitdiff
path: root/elm
diff options
context:
space:
mode:
authorxy2_ <me@xy2.dev>2020-09-13 17:21:57 +0200
committerYorhel <git@yorhel.nl>2020-09-14 09:01:26 +0200
commitb107098a6bed6e8fd7e2328d2f5245c94c8ffada (patch)
tree91ea4176688047f2400a21f442a17469d8bd1b62 /elm
parent6689a7cfeaefa41d8a9435403b6f4a59c9b8f0ef (diff)
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.
Diffstat (limited to 'elm')
-rw-r--r--elm/iv.js22
1 files changed, 20 insertions, 2 deletions
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;
};