Add FullScreen mode support.

1 files changed, 51 insertions, 19 deletions

diff --git a/main.js b/main.js
index f2f3890..e1956fb 100644
--- a/main.js
+++ b/main.js
@@ -23,10 +23,10 @@ import WMTS from 'ol/source/WMTS.js';
 import WMTSTileGrid from 'ol/tilegrid/WMTS.js';
 
 import Attribution from 'ol/control/Attribution.js';
+import FullScreen from 'ol/control/FullScreen.js';
 import ScaleLine from 'ol/control/ScaleLine.js';
 import Zoom from 'ol/control/Zoom.js';
 import ZoomSlider from 'ol/control/ZoomSlider.js';
-import Control from 'ol/control/Control.js';
 
 import proj4 from 'proj4';
 import {get as getProjection} from 'ol/proj.js';
@@ -142,31 +142,63 @@ const map = new Map({
       source: baseMapSource
     }),
   ],
+  target: document.getElementById('map'),
 });
 
-map.setTarget(document.getElementById('map'));
+/* add the menu to the viewport */
+const menu = document.createElement('div');
+menu.classList.add('d-none');
+menu.id = 'map-menu';
+map.getViewport().appendChild(menu);
+
+/* layer selection button */
 (function() {
-  const menu = document.getElementById('map-menu');
-  map.getViewport().append(menu);
-  map.addControl(new Control({
-    element: menu,
+  const div = document.createElement('div');
+  menu.append(div);
+  div.classList.add('ol-unselectable', 'ol-control');
+
+  const btn = document.createElement('button');
+  div.appendChild(btn);
+  btn.type = 'button';
+  btn.ariaExpanded = 'false';
+  btn.title = 'Byt kartlager';
+
+  const i = document.createElement('i');
+  btn.appendChild(i);
+  i.classList.add('bi', 'bi-stack');
+
+  btn.onclick = function(event) {
+    const panel = document.getElementById('layer-selection-panel');
+    if (btn.ariaExpanded === 'true') {
+      panel.classList.add('d-none');
+      btn.ariaExpanded = 'false';
+    } else {
+      panel.classList.remove('d-none');
+      btn.ariaExpanded = 'true';
+    }
+  };
+})();
+
+/* fullscreen control */
+(function() {
+  const label = document.createElement('i');
+  label.classList.add('bi', 'bi-fullscreen');
+
+  const labelActive = document.createElement('i');
+  labelActive.classList.add('bi', 'bi-fullscreen-exit');
+
+  map.addControl(new FullScreen({
+    label: label,
+    labelActive: labelActive,
+    tipLabel: 'Växla helskärmsläge',
+    keys: true,
+    target: menu,
   }));
-  menu.classList.remove('d-none');
 })();
 
-document.getElementById('layer-selection-btn').onclick = function(event) {
-  const btn = document.getElementById('layer-selection-btn');
-  const panel = document.getElementById('layer-selection-panel');
-  if (btn.ariaExpanded === 'true') {
-    panel.classList.add('d-none');
-    btn.ariaExpanded = 'false';
-  } else {
-    panel.classList.remove('d-none');
-    btn.ariaExpanded = 'true';
-  }
-};
+menu.classList.remove('d-none');
 
 document.getElementById('layer-topowebb_nedtonad').onchange = function(event) {
   const layer = event.target.checked ? 'topowebb_nedtonad' : 'topowebb';
   baseMapSource.setUrl('https://minkarta.lantmateriet.se/map/topowebbcache?LAYER=' + layer);
-}
+};