From 873b700e6b684cce4ab4ea3e126abf6e94d903f2 Mon Sep 17 00:00:00 2001
From: Henrik Uggla <henrik.uggla@kristianstad.se>
Date: Tue, 19 Nov 2024 14:28:48 +0100
Subject: [PATCH] Add minimize button to infowindow (#2030)

* Update _infowindow.scss

Added .minimizebutton-svg-container

* Update infowindow.js

Added minimize button

* Update infowindow.js

Fix so that infowindow doesn't remain minimized after clicking the close button.

* Update infowindow.js

* Update _infowindow.scss
---
 scss/_infowindow.scss | 15 ++++++++++++
 src/infowindow.js     | 54 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 69 insertions(+)

diff --git a/scss/_infowindow.scss b/scss/_infowindow.scss
index 3325a9ec3..12ddf3474 100644
--- a/scss/_infowindow.scss
+++ b/scss/_infowindow.scss
@@ -97,6 +97,10 @@
   font-weight: normal;
 }
 
+.minimizedurvalelement {
+  padding: 0.5rem calc(38px + 2rem) 0 0.5rem;
+}
+
 .closebutton-svg-container {
   cursor: pointer;
   position: absolute;
@@ -104,6 +108,13 @@
   top: 0;
 }
 
+.minimizebutton-svg-container {
+  cursor: pointer;
+  position: absolute;
+  right: 30px;
+  top: 0;
+}
+
 
 /**
    * ============ List ==============
@@ -271,6 +282,10 @@
   display: none;
 }
 
+.fit-width {
+  width: fit-content;
+}
+
 ::-webkit-scrollbar {
   width: 4px;
 }
diff --git a/src/infowindow.js b/src/infowindow.js
index 8b3210841..6cd5d5e9c 100644
--- a/src/infowindow.js
+++ b/src/infowindow.js
@@ -18,6 +18,9 @@ let activeSelectionGroup;
 let selectionManager;
 let viewer;
 let infowindowOptions;
+let initialMinimizeButtonIcon;
+let hiddenMinimizeButtonIcon;
+let minimizeButton;
 
 function createSvgElement(id, className) {
   const svgContainer = document.createElement('div');
@@ -109,6 +112,46 @@ function createCloseButton() {
   });
 }
 
+function createMinimizeButton() {
+  return Button({
+    cls: 'minimizebutton-svg-container small round small icon-smaller grey-lightest margin-top-small margin-right-small z-index-ontop-low ',
+    icon: initialMinimizeButtonIcon,
+    state: 'initial',
+    validStates: ['initial', 'hidden'],
+    ariaLabel: 'Minimera'
+  });
+}
+
+function resetInfowindow() {
+  urvalListContainer.classList.remove('hidden');
+  listContainer.classList.remove('hidden');
+  exportContainer.classList.remove('hidden');
+  groupFooterContainer.classList.remove('hidden');
+  mainContainer.classList.remove('fit-width');
+  urvalContainer.classList.remove('minimizedurvalelement');
+  minimizeButton.setIcon(initialMinimizeButtonIcon);
+  minimizeButton.setState('initial');
+}
+
+function minimizeInfowindow() {
+  urvalListContainer.classList.add('hidden');
+  listContainer.classList.add('hidden');
+  exportContainer.classList.add('hidden');
+  groupFooterContainer.classList.add('hidden');
+  mainContainer.classList.add('fit-width');
+  urvalContainer.classList.add('minimizedurvalelement');
+  minimizeButton.setIcon(hiddenMinimizeButtonIcon);
+  minimizeButton.setState('hidden');
+}
+
+function toggleInfowindow() {
+  if (urvalListContainer.classList.contains('hidden')) {
+    resetInfowindow();
+  } else {
+    minimizeInfowindow();
+  }
+}
+
 function render(viewerId) {
   mainContainer = document.createElement('div');
   setInfowindowStyle();
@@ -126,6 +169,8 @@ function render(viewerId) {
   urvalTextNodeContainer.appendChild(urvalTextNode);
   urvalContainer.appendChild(urvalTextNodeContainer);
   const closeButton = createCloseButton();
+  minimizeButton = createMinimizeButton();
+  urvalContainer.appendChild(dom.html(minimizeButton.render()));
   urvalContainer.appendChild(dom.html(closeButton.render()));
   urvalContainer.appendChild(urvalListContainer);
   listContainer = document.createElement('div');
@@ -157,6 +202,13 @@ function render(viewerId) {
     viewer.dispatch('toggleClickInteraction', detail);
     selectionManager.clearSelection();
     hideInfowindow();
+    if (urvalListContainer.classList.contains('hidden')) {
+      resetInfowindow();
+    }
+  });
+
+  document.getElementById(minimizeButton.getId()).addEventListener('click', () => {
+    toggleInfowindow();
   });
 
   // Make the DIV element draggagle:
@@ -430,6 +482,8 @@ function init(options) {
   urvalElements = new Map();
   expandableContents = new Map();
   footerContainers = new Map();
+  initialMinimizeButtonIcon = '#ic_close_fullscreen_24px';
+  hiddenMinimizeButtonIcon = '#ic_open_in_full_24px';
 
   render(options.viewer.getId());