Refactor JS to use modules

index.html

@@ -67,12 +67,9 @@ <h1 style="display:flex;"><span style="flex-basis: 100%;"><span class="swatch"><
       <div id="sidebar"></div>
     </div>
     <script type="application/javascript" src="dist/turf-buffer.js"></script>
-    <script type="application/javascript" src="js/utils.js"></script>
-    <script type="application/javascript" src="js/styleGenerator.js"></script>
-    <script type="application/javascript" src="js/mapController.js"></script>
-    <script type="application/javascript" src="js/sidebarController.js"></script>
-    <script type="application/javascript" src="js/dataController.js"></script>
-    <script type="application/javascript" src="js/hashController.js"></script>
-    <script type="application/javascript" src="js/index.js"></script>
+    <script type="module" src="js/mapController.js"></script>
+    <script type="module" src="js/sidebarController.js"></script>
+    <script type="module" src="js/controlsController.js"></script>
+    <script type="module" src="js/hashController.js"></script>
   </body>
 </html>

js/controlsController.js

@@ -0,0 +1,46 @@
+import { state } from "./stateController.js";
+import { lensOptionsByMode, lensStrings } from "./optionsData.js";
+
+function updateLensControl() {
+  let html = "";
+  let items = lensOptionsByMode[state.travelMode];
+
+  html += '<option value="">General</option>';
+  items.forEach(function(item) {
+    if (item.subitems) {
+      html += '<optgroup label="' + item.label + '">';
+      item.subitems.forEach(function(item) {
+        let label = item.label ? item.label : lensStrings[item].label;
+        html += '<option value="' + item + '">' + label + '</option>';
+      })
+      html += '</optgroup>';
+    }
+  });
+  let lensElement =  document.getElementById("lens");
+  lensElement.innerHTML = html;
+  lensElement.value = state.lens;
+}
+
+window.addEventListener('load', function() {
+
+  updateLensControl();
+
+  document.getElementById("travel-mode").addEventListener('change', function(e) {
+    state.setTravelMode(e.target.value);
+  });
+  document.getElementById("lens").addEventListener('change', function(e) {
+    state.setLens(e.target.value);
+  });
+  document.getElementById("clear-focus").addEventListener('click', function(e) {
+    e.preventDefault();
+    state.focusEntity();
+  });
+
+  state.addEventListener('travelModeChange', function() {
+    updateLensControl();
+    document.getElementById("travel-mode").value = state.travelMode;
+  });
+  state.addEventListener('lensChange', function() {
+    document.getElementById("lens").value = state.lens;
+  });
+});

js/hashController.js

@@ -1,3 +1,5 @@
+import { state } from "./stateController.js";
+
 function setHashParameters(params) {
   let searchParams = new URLSearchParams(window.location.hash.slice(1));
   for (let key in params) {
@@ -45,10 +47,47 @@ function selectedEntityInfoFromHash() {
   return null;
 }
 
-function updateForHash(skipMapUpdate) { 
-  setTravelMode(hashValue("mode"), skipMapUpdate);
-  setLens(hashValue("lens"), skipMapUpdate);
-  selectEntity(selectedEntityInfoFromHash(), skipMapUpdate);
-  focusEntity(focusedEntityInfoFromHash(), skipMapUpdate);
-  hashValue("inspect") ? openSidebar() : closeSidebar();
-}
+function updateForHash() {
+  state.setInspectorOpen(hashValue("inspect"));
+  state.setTravelMode(hashValue("mode"));
+  state.setLens(hashValue("lens"));
+  state.selectEntity(selectedEntityInfoFromHash());
+  state.focusEntity(focusedEntityInfoFromHash());
+}
+
+window.addEventListener('load', function() {
+
+  updateForHash();
+
+  window.addEventListener("hashchange", function() {
+    updateForHash();
+  });
+
+  state.addEventListener('inspectorOpenChange', function() {
+    setHashParameters({ inspect: state.inspectorOpen ? '1' : null });
+  });
+  state.addEventListener('lensChange', function() {
+    setHashParameters({ lens: state.lens === state.defaultLens ? null : state.lens });
+  });
+  state.addEventListener('travelModeChange', function() {
+    setHashParameters({ mode: state.travelMode === state.defaultTravelMode ? null : state.travelMode });
+  });
+  state.addEventListener('selectedEntityChange', function() {
+    let selectedEntityInfo = state.selectedEntityInfo;
+    let type = selectedEntityInfo?.type;
+    let entityId = selectedEntityInfo?.id;
+    setHashParameters({
+      selected: selectedEntityInfo ? type + "/" + entityId : null
+    });
+  });
+  state.addEventListener('focusedEntityChange', function() {
+    let focusedEntityInfo = state.focusedEntityInfo;
+    let type = focusedEntityInfo?.type;
+    let entityId = focusedEntityInfo?.id;
+    setHashParameters({
+      focus: focusedEntityInfo ? type + "/" + entityId : null
+    });
+  });
+
+});
+