Add hover overlays to picture navigation zones

js/picture_navigation.js

@@ -4,6 +4,15 @@
   var SIDE_RATIO = 0.18;
   var PREVIEW_RATIO = 0.18;
   var resizeTimer = null;
+  var overlayContainer = null;
+  var overlays = {};
+
+  var zoneIcons = {
+    previous: 'fas fa-chevron-left',
+    thumbnails: 'fas fa-chevron-up',
+    photoswipe: 'fas fa-expand-arrows-alt',
+    next: 'fas fa-chevron-right'
+  };
 
   function absoluteUrl(url) {
     if (!url) {
@@ -69,6 +78,80 @@
     return area;
   }
 
+  function ensureOverlayContainer(image) {
+    if (overlayContainer && document.body.contains(overlayContainer)) {
+      return overlayContainer;
+    }
+
+    var parent = image.parentElement;
+    if (!parent) {
+      return null;
+    }
+
+    if (window.getComputedStyle(parent).position === 'static') {
+      parent.style.position = 'relative';
+    }
+
+    overlayContainer = document.createElement('div');
+    overlayContainer.className = 'bratonien-picture-zones';
+    overlayContainer.setAttribute('aria-hidden', 'true');
+    parent.appendChild(overlayContainer);
+
+    Object.keys(zoneIcons).forEach(function (role) {
+      var zone = document.createElement('div');
+      zone.className = 'bratonien-picture-zone bratonien-picture-zone-' + role;
+      zone.setAttribute('data-bratonien-zone-overlay', role);
+
+      var icon = document.createElement('i');
+      icon.className = zoneIcons[role];
+      zone.appendChild(icon);
+
+      overlayContainer.appendChild(zone);
+      overlays[role] = zone;
+    });
+
+    return overlayContainer;
+  }
+
+  function setOverlayRect(role, left, top, width, height) {
+    var overlay = overlays[role];
+    if (!overlay) {
+      return;
+    }
+
+    overlay.style.left = left + 'px';
+    overlay.style.top = top + 'px';
+    overlay.style.width = width + 'px';
+    overlay.style.height = height + 'px';
+  }
+
+  function hideAllOverlays() {
+    Object.keys(overlays).forEach(function (role) {
+      overlays[role].classList.remove('is-active');
+    });
+  }
+
+  function bindAreaHover(area, role) {
+    if (!area || area.getAttribute('data-bratonien-hover-bound') === '1') {
+      return;
+    }
+
+    area.setAttribute('data-bratonien-hover-bound', '1');
+
+    area.addEventListener('mouseenter', function () {
+      hideAllOverlays();
+      if (overlays[role]) {
+        overlays[role].classList.add('is-active');
+      }
+    });
+
+    area.addEventListener('mouseleave', function () {
+      if (overlays[role]) {
+        overlays[role].classList.remove('is-active');
+      }
+    });
+  }
+
   function setZone(area, role, coords) {
     if (!area) {
       return;
@@ -77,6 +160,7 @@
     area.setAttribute('shape', 'rect');
     area.setAttribute('coords', coords.join(','));
     area.setAttribute('data-bratonien-zone', role);
+    bindAreaHover(area, role);
   }
 
   function updateMap() {
@@ -102,6 +186,8 @@
       return;
     }
 
+    ensureOverlayContainer(image);
+
     var leftEdge = Math.round(width * SIDE_RATIO);
     var rightEdge = Math.round(width * (1 - SIDE_RATIO));
     var previewBottom = Math.round(height * PREVIEW_RATIO);
@@ -115,6 +201,14 @@
     setZone(nextArea, 'next', [rightEdge, 0, width, height]);
     setZone(upArea, 'thumbnails', [leftEdge, 0, rightEdge, previewBottom]);
     setZone(photoSwipeArea, 'photoswipe', [leftEdge, previewBottom, rightEdge, height]);
+
+    var imageLeft = image.offsetLeft;
+    var imageTop = image.offsetTop;
+
+    setOverlayRect('previous', imageLeft, imageTop, leftEdge, height);
+    setOverlayRect('next', imageLeft + rightEdge, imageTop, width - rightEdge, height);
+    setOverlayRect('thumbnails', imageLeft + leftEdge, imageTop, rightEdge - leftEdge, previewBottom);
+    setOverlayRect('photoswipe', imageLeft + leftEdge, imageTop + previewBottom, rightEdge - leftEdge, height - previewBottom);
   }
 
   function scheduleUpdate() {