diff options
-rw-r--r-- | index.html | 1 | ||||
-rw-r--r-- | main.js | 91 | ||||
-rw-r--r-- | style.css | 13 |
3 files changed, 87 insertions, 18 deletions
@@ -10,6 +10,7 @@ <div id="map-control-container" aria-hidden="true"> <div id="zoom-control"></div> <div id="layer-selection-panel"></div> + <div id="map-legend-panel"></div> <div id="map-menu"></div> </div> <div class="modal" id="modal-info" tabindex="-1" aria-hidden="true"> @@ -190,24 +190,49 @@ const container = document.getElementById('map-control-container'); map.addControl(control); })(); -/* layer selection button */ +/* layer selection button and legend */ const menu = document.getElementById('map-menu'); (function() { - const div = document.createElement('div'); - menu.appendChild(div); - div.id = 'layer-selection-button'; - div.classList.add('ol-unselectable', 'ol-control'); + const btn = (function() { + const div = document.createElement('div'); + menu.appendChild(div); + div.id = 'layer-selection-button'; + div.classList.add('ol-unselectable', 'ol-control'); - const btn = document.createElement('button'); - div.appendChild(btn); - btn.type = 'button'; - btn.setAttribute('aria-expanded', 'false'); - btn.title = 'Byt kartlager'; - btn.classList.add('btn', 'btn-light'); + const btn = document.createElement('button'); + div.appendChild(btn); + btn.type = 'button'; + btn.setAttribute('aria-expanded', 'false'); + btn.title = 'Lagerval'; + btn.classList.add('btn', 'btn-light'); - const i = document.createElement('i'); - btn.appendChild(i); - i.classList.add('bi', 'bi-stack'); + const i = document.createElement('i'); + btn.appendChild(i); + i.classList.add('bi', 'bi-stack'); + + return btn; + })(); + + const btn2 = (function() { + const div = document.createElement('div'); + menu.appendChild(div); + div.id = 'map-legend-button'; + div.classList.add('ol-unselectable', 'ol-control'); + + const btn = document.createElement('button'); + div.appendChild(btn); + btn.type = 'button'; + btn.setAttribute('aria-expanded', 'false'); + btn.title = 'Byt kartlager'; + btn.title = 'Teckenförklaring'; + btn.classList.add('btn', 'btn-light'); + + const i = document.createElement('i'); + btn.appendChild(i); + i.classList.add('bi', 'bi-list-task'); + + return btn; + })(); const panel = document.getElementById('layer-selection-panel'); btn.onclick = function(event) { @@ -217,12 +242,33 @@ const menu = document.getElementById('map-menu'); btn.classList.add('btn-light'); btn.classList.remove('btn-dark'); } else { + if (btn2.getAttribute('aria-expanded') === 'true') { + btn2.click(); + } panel.setAttribute('aria-hidden', 'false'); btn.setAttribute('aria-expanded', 'true'); btn.classList.add('btn-dark'); btn.classList.remove('btn-light'); } }; + + const panel2 = document.getElementById('map-legend-panel'); + btn2.onclick = function(event) { + if (btn2.getAttribute('aria-expanded') === 'true') { + panel2.setAttribute('aria-hidden', 'true'); + btn2.setAttribute('aria-expanded', 'false'); + btn2.classList.add('btn-light'); + btn2.classList.remove('btn-dark'); + } else { + if (btn.getAttribute('aria-expanded') === 'true') { + btn.click(); + } + panel2.setAttribute('aria-hidden', 'false'); + btn2.setAttribute('aria-expanded', 'true'); + btn2.classList.add('btn-dark'); + btn2.classList.remove('btn-light'); + } + }; })(); /* fullscreen control */ @@ -425,3 +471,20 @@ view.on('change', function(event) { }; })(); })(); + +/* legend panel */ +(function() { + const modal = document.getElementById('map-legend-panel'); + modal.classList.add('modal'); + modal.setAttribute('role', 'dialog'); + modal.setAttribute('aria-hidden', 'true'); + + const content = document.createElement('div'); + modal.appendChild(content); + content.classList.add('modal-content'); + + const body = document.createElement('div'); + content.appendChild(body); + body.classList.add('modal-body'); + body.innerHTML = 'legend TODO'; +})(); @@ -179,10 +179,12 @@ html, body { } #map-control-container[aria-hidden="true"], -#layer-selection-panel[aria-hidden="true"] { +#layer-selection-panel[aria-hidden="true"], +#map-legend-panel[aria-hidden="true"] { display: none; } -#layer-selection-panel { +#layer-selection-panel, +#map-legend-panel { position: relative; display: block; min-width: min-content; @@ -195,14 +197,17 @@ html, body { --bs-modal-padding: .75rem; } @media screen and (max-width: 576px) { - #layer-selection-panel { + #layer-selection-panel, + #map-legend-panel { max-width: 100%; margin-right: .5rem; display: none; } #layer-selection-button, + #map-legend-button, #export-to-image, #map-menu #layer-selection-panel, + #map-menu #map-legend-panel, #map-menu .ol-full-screen { display: none; } @@ -220,7 +225,7 @@ html, body { } } @media screen and (max-width: 768px) { - #layer-selection-panel { + #map-legend-panel, #layer-selection-panel { max-width: 60%; } } |