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
origo-map · Nov 19, 2024 · 873b700 · 873b700
1 parent 857c527
commit 873b700
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 0 deletions.
diff --git a/scss/_infowindow.scss b/scss/_infowindow.scss
@@ -97,13 +97,24 @@
   font-weight: normal;
 }
 
+.minimizedurvalelement {
+  padding: 0.5rem calc(38px + 2rem) 0 0.5rem;
+}
+
 .closebutton-svg-container {
   cursor: pointer;
   position: absolute;
   right: 0;
   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
@@ -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());