From 4b3e1aefcc1faa2a0e85cc3cb0111125303c09f5 Mon Sep 17 00:00:00 2001
From: Guilhem Moulin <guilhem@fripost.org>
Date: Thu, 30 May 2024 18:41:39 +0200
Subject: Add ability to maximize popovers.

---
 main.js | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

(limited to 'main.js')

diff --git a/main.js b/main.js
index d86651e..a711f2c 100644
--- a/main.js
+++ b/main.js
@@ -1946,6 +1946,9 @@ map.addLayer(vectorLayer2);
       return;
     }
     const popoverTip = Popover.getInstance(popup).tip;
+    if (popoverTip.classList.contains('popover-maximized')) {
+      return;
+    }
     pageNode.classList.add('grabbing-area-grabbed');
 
     if (!popoverTip.classList.contains('popover-detached')) {
@@ -2045,6 +2048,30 @@ map.addLayer(vectorLayer2);
     return onClickPageChange(event, +1);
   };
 
+  const btnExpand = document.createElement('button');
+  btnExpand.classList.add('popover-button', 'popover-button-expand');
+  btnExpand.setAttribute('type', 'button');
+  const btnExpandTitle = 'Förstora';
+  const btnExpandTitle2 = 'Förminska';
+  btnExpand.setAttribute('aria-label', btnExpand.title);
+  btnExpand.onclick = function(event) {
+    if (popover === null || popover.tip === null) {
+      return;
+    }
+    if (!popover.tip.classList.contains('popover-maximized')) {
+      popover.tip.classList.add('popover-maximized');
+      btnExpand.classList.replace('popover-button-expand', 'popover-button-reduce');
+      btnExpand.title = btnExpandTitle2;
+      btnExpand.setAttribute('aria-label', btnExpand.title);
+    } else {
+      popover.tip.classList.remove('popover-maximized');
+      btnExpand.classList.replace('popover-button-reduce', 'popover-button-expand');
+      btnExpand.title = btnExpandTitle;
+      btnExpand.setAttribute('aria-label', btnExpand.title);
+    }
+    setTimeout(function() { btnExpand.blur() }, 100);
+  };
+
   const btnClose = document.createElement('button');
   btnClose.classList.add('popover-button', 'popover-button-close');
   btnClose.setAttribute('type', 'button');
@@ -2059,6 +2086,7 @@ map.addLayer(vectorLayer2);
 
   header.appendChild(btnPrev);
   header.appendChild(btnNext);
+  header.appendChild(btnExpand);
   header.appendChild(btnClose);
 
   const container0 = map.getViewport().getElementsByClassName('ol-overlaycontainer-stopevent')[0];
@@ -2087,6 +2115,14 @@ map.addLayer(vectorLayer2);
     btnPrev.classList.add('d-none', 'disabled');
     btnNext.classList.add('d-none', 'disabled');
 
+    /* never start in maximized mode */
+    if (popover !== null && popover.tip !== null) {
+      popover.tip.classList.remove('popover-maximized');
+    }
+    btnExpand.classList.replace('popover-button-reduce', 'popover-button-expand');
+    btnExpand.title = btnExpandTitle;
+    btnExpand.setAttribute('aria-label', btnExpand.title);
+
     map.forEachFeatureAtPixel(event.pixel, function(feature, layer) {
       const properties = feature.getProperties();
       const def = layers[properties.layer];
-- 
cgit v1.2.3