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());