CSS: Make the feel more bootstrap-y.

1 files changed, 90 insertions, 33 deletions

diff --git a/main.js b/main.js
index ff4bd7e..d59adbf 100644
--- a/main.js
+++ b/main.js
@@ -94,28 +94,7 @@ const baseMapSource = new WMTS({
 
 
 const map = new Map({
-  controls: [
-    new Zoom({
-      zoomInTipLabel: 'Zooma in',
-      zoomInLabel: (function() {
-        const label = document.createElement('i');
-        label.classList.add('bi', 'bi-plus');
-        return label;
-      })(),
-      zoomOutTipLabel: 'Zooma ut',
-      zoomOutLabel: (function() {
-        const label = document.createElement('i');
-        label.classList.add('bi', 'bi-dash');
-        return label;
-      })(),
-    }),
-    new ZoomSlider({
-    }),
-    new ScaleLine({
-      units: 'metric',
-      minWidth: 150,
-    }),
-  ],
+  controls: [],
   view: new View({
     projection: projection,
     extent: extent,
@@ -135,16 +114,62 @@ const map = new Map({
   target: document.getElementById('map'),
 });
 
-/* add the menu to the viewport */
-const menu = document.createElement('div');
-menu.ariaHidden = 'true';
-menu.id = 'map-menu';
-map.getViewport().appendChild(menu);
+/* move the control container to the viewport */
+const container = document.getElementById('map-control-container');
+map.getViewport().appendChild(container);
+
+/* zoom in/out */
+(function() {
+  const zoomInLabel = document.createElement('i');
+  zoomInLabel.classList.add('bi', 'bi-plus');
+
+  const zoomOutLabel = document.createElement('i');
+  zoomOutLabel.classList.add('bi', 'bi-dash');
+
+  const control = new Zoom({
+    zoomInTipLabel: 'Zooma in',
+    zoomInLabel: zoomInLabel,
+    zoomOutTipLabel: 'Zooma ut',
+    zoomOutLabel: zoomOutLabel,
+    target: document.getElementById('zoom-control'),
+  });
+
+  control.element.classList.add('btn-group-vertical');
+  for (const btn of control.element.getElementsByTagName('button')) {
+    btn.classList.add('btn', 'btn-light');
+  }
+  map.addControl(control);
+})();
+
+/* zoom slider */
+(function() {
+  const control = new ZoomSlider({
+    target: document.getElementById('zoom-control'),
+  });
+  control.element.classList.add('modal');
+  for (const btn of control.element.getElementsByTagName('button')) {
+    btn.classList.add('btn', 'btn-light');
+  }
+  map.addControl(control);
+})();
+
+/* scale line */
+(function() {
+  const control = new ScaleLine({
+    units: 'metric',
+    minWidth: 150,
+    target: container,
+  });
+  control.element.classList.add('modal', 'modal-content');
+  map.addControl(control);
+})();
 
 /* layer selection button */
+const menu = document.getElementById('map-menu');
 (function() {
   const div = document.createElement('div');
-  menu.append(div);
+  menu.appendChild(div);
+  div.id = 'layer-selection-button';
   div.classList.add('ol-unselectable', 'ol-control');
 
   const btn = document.createElement('button');
@@ -152,6 +177,7 @@ map.getViewport().appendChild(menu);
   btn.type = 'button';
   btn.ariaExpanded = 'false';
   btn.title = 'Byt kartlager';
+  btn.classList.add('btn', 'btn-light');
 
   const i = document.createElement('i');
   btn.appendChild(i);
@@ -162,9 +188,13 @@ map.getViewport().appendChild(menu);
     if (btn.ariaExpanded === 'true') {
       panel.ariaHidden = 'true';
       btn.ariaExpanded = 'false';
+      btn.classList.add('btn-light');
+      btn.classList.remove('btn-dark');
     } else {
       panel.ariaHidden = 'false';
       btn.ariaExpanded = 'true';
+      btn.classList.add('btn-dark');
+      btn.classList.remove('btn-light');
     }
   };
 })();
@@ -177,19 +207,40 @@ map.getViewport().appendChild(menu);
   const labelActive = document.createElement('i');
   labelActive.classList.add('bi', 'bi-fullscreen-exit');
 
-  map.addControl(new FullScreen({
+  const titleInactive = 'Helskärmsläge';
+  const titleActive = 'Lämna helskärmsläge';
+  const classInactive = 'btn-light';
+  const classActive = 'btn-dark';
+
+  const control = new FullScreen({
     label: label,
     labelActive: labelActive,
-    tipLabel: 'Växla helskärmsläge',
+    tipLabel: titleInactive,
     keys: true,
     target: menu,
-  }));
+  })
+  control.element.getElementsByTagName('button')[0].classList.add('btn', classInactive);
+  map.addControl(control);
+
+  control.addEventListener('enterfullscreen', function() {
+    const btn = control.element.getElementsByTagName('button')[0];
+    btn.classList.add(classActive);
+    btn.classList.remove(classInactive);
+    btn.title = titleActive;
+  })
+  control.addEventListener('leavefullscreen', function() {
+    const btn = control.element.getElementsByTagName('button')[0];
+    btn.classList.add(classInactive);
+    btn.classList.remove(classActive);
+    btn.title = titleInactive;
+  })
 })();
 
 /* info button */
 (function() {
   const div = document.createElement('div');
-  menu.append(div);
+  menu.appendChild(div);
+  div.id = 'info-button';
   div.classList.add('ol-unselectable', 'ol-control');
 
   const btn = document.createElement('button');
@@ -197,6 +248,7 @@ map.getViewport().appendChild(menu);
   btn.type = 'button';
   btn.ariaExpanded = 'false';
   btn.title = 'Visa information';
+  btn.classList.add('btn', 'btn-light');
 
   const i = document.createElement('i');
   btn.appendChild(i);
@@ -206,9 +258,13 @@ map.getViewport().appendChild(menu);
   const modal = new Modal(panel, {});
   panel.addEventListener('show.bs.modal', function() {
     btn.ariaExpanded = 'true';
+    btn.classList.add('btn-dark');
+    btn.classList.remove('btn-light');
   });
   panel.addEventListener('hidden.bs.modal', function() {
     btn.ariaExpanded = 'false';
+    btn.classList.add('btn-light');
+    btn.classList.remove('btn-dark');
   });
 
   btn.onclick = function() {
@@ -216,7 +272,8 @@ map.getViewport().appendChild(menu);
   };
 })();
 
-menu.ariaHidden = 'false';
+/* we're all set, show the control container now */
+container.ariaHidden = 'false';
 
 document.getElementById('layer-topowebb_nedtonad').onchange = function(event) {
   const layer = event.target.checked ? 'topowebb_nedtonad' : 'topowebb';