Add URL params parsing and concept of "embedded mode"

webassets/js/alerts.js

@@ -292,6 +292,11 @@ function loadOptions() {
         })));
         $("#alerts-to-fetch").val(options["web-ui-options"]["alert-count-default"]);
 
+        // Load URL params. These may select things from the various filter & display options, so the function needs
+        // to be called after these are set up, but if the URL params ask for "embedded mode", this will suppress
+        // loading settings, so this needs to be called before that.
+        loadURLParams();
+
         // Load filters from settings storage
         loadSettings();
 

webassets/js/bands.js

@@ -243,6 +243,11 @@ function loadOptions() {
         })));
         $("#max-spot-age").val(options["web-ui-options"]["max-spot-age-default"] * 60);
 
+        // Load URL params. These may select things from the various filter & display options, so the function needs
+        // to be called after these are set up, but if the URL params ask for "embedded mode", this will suppress
+        // loading settings, so this needs to be called before that.
+        loadURLParams();
+
         // Load settings from settings storage now all the controls are available
         loadSettings();
 

webassets/js/common.js

@@ -2,7 +2,32 @@
 var options = {};
 // Last time we updated the spots/alerts list on display.
 var lastUpdateTime;
+// Whether "embedded mode" is being used. This removes headers and footers, maximises the remaining content, and
+// uses URL params to configure the interface options rather than using the user's localstorage.
+var embeddedMode = false;
 
+// Load and apply any URL params. This is used for "embedded mode" where another site can embed a version of
+// Spothole and provide its own interface options rather than using the user's saved ones. These may select things
+// from the various filter & display options, so this function needs to be called after these are set up, but if
+// the URL params ask for "embedded mode", this will suppress loading settings, so this needs to be called before
+// that occurs..
+function loadURLParams() {
+    let params = new URLSearchParams(document.location.search);
+
+    // Handle embedded mode. We set a global to e.g. suppress loading/saving settings, and apply an attribute to the
+    // top-level html element to use CSS selectors to remove bits of UI.
+    let embedded = params.get("embedded");
+    if (embedded != null && embedded === "true") {
+        embeddedMode = true;
+        $("html").attr("embedded-mode", "true");
+    }
+
+    // Handle dark mode.
+    let dark = params.get("dark-mode");
+    if (dark != null) {
+        enableDarkMode(dark === "true");
+    }
+}
 
 // For a parameter, such as dx_continent, get the query string for the current filter options.
 function getQueryStringFor(parameter) {
@@ -218,31 +243,35 @@ function usePreferredTheme() {
     }
 }
 
-// Save settings to local storage
+// Save settings to local storage. Suppressed if "embedded mode" is in use.
 function saveSettings() {
-    // Find all storeable UI elements, store a key of "element id:property name" mapped to the value of that
-    // property. For a checkbox, that's the "checked" property.
-    $(".storeable-checkbox").each(function() {
-        localStorage.setItem("#" + $(this)[0].id + ":checked", JSON.stringify($(this)[0].checked));
-    });
-    $(".storeable-select").each(function() {
-        localStorage.setItem("#" + $(this)[0].id + ":value", JSON.stringify($(this)[0].value));
-    });
-    $(".storeable-text").each(function() {
-        localStorage.setItem("#" + $(this)[0].id + ":value", JSON.stringify($(this)[0].value));
-    });
+    if (!embeddedMode) {
+        // Find all storeable UI elements, store a key of "element id:property name" mapped to the value of that
+        // property. For a checkbox, that's the "checked" property.
+        $(".storeable-checkbox").each(function() {
+            localStorage.setItem("#" + $(this)[0].id + ":checked", JSON.stringify($(this)[0].checked));
+        });
+        $(".storeable-select").each(function() {
+            localStorage.setItem("#" + $(this)[0].id + ":value", JSON.stringify($(this)[0].value));
+        });
+        $(".storeable-text").each(function() {
+            localStorage.setItem("#" + $(this)[0].id + ":value", JSON.stringify($(this)[0].value));
+        });
+    }
 }
 
-// Load settings from local storage and set up the filter selectors
+// Load settings from local storage and set up the filter selectors. Suppressed if "embedded mode" is in use.
 function loadSettings() {
-    // Find all local storage entries and push their data to the corresponding UI element
-    Object.keys(localStorage).forEach(function(key) {
-        if (key.startsWith("#") && key.includes(":")) {
-            // Split the key back into an element ID and a property
-            var split = key.split(":");
-            $(split[0]).prop(split[1], JSON.parse(localStorage.getItem(key)));
-        }
-    });
+    if (!embeddedMode) {
+        // Find all local storage entries and push their data to the corresponding UI element
+        Object.keys(localStorage).forEach(function(key) {
+            if (key.startsWith("#") && key.includes(":")) {
+                // Split the key back into an element ID and a property
+                var split = key.split(":");
+                $(split[0]).prop(split[1], JSON.parse(localStorage.getItem(key)));
+            }
+        });
+    }
 }
 
 // Startup

webassets/js/map.js

@@ -171,6 +171,11 @@ function loadOptions() {
         })));
         $("#max-spot-age").val(options["web-ui-options"]["max-spot-age-default"] * 60);
 
+        // Load URL params. These may select things from the various filter & display options, so the function needs
+        // to be called after these are set up, but if the URL params ask for "embedded mode", this will suppress
+        // loading settings, so this needs to be called before that.
+        loadURLParams();
+
         // Load settings from settings storage now all the controls are available
         loadSettings();
 
@@ -258,6 +263,6 @@ $(document).ready(function() {
     // Call loadOptions(), this will then trigger loading spots and setting up timers.
     loadOptions();
     // Prevent mouse scroll and touch actions in the popup menus being passed through to the map
-    L.DomEvent.disableScrollPropagation(document.getElementById('maptools'));
-    L.DomEvent.disableClickPropagation(document.getElementById('maptools'));
+    L.DomEvent.disableScrollPropagation(document.getElementById('settingsButtonRowMap'));
+    L.DomEvent.disableClickPropagation(document.getElementById('settingsButtonRowMap'));
 });

webassets/js/spots.js

@@ -295,6 +295,11 @@ function loadOptions() {
         })));
         $("#spots-to-fetch").val(options["web-ui-options"]["spot-count-default"]);
 
+        // Load URL params. These may select things from the various filter & display options, so the function needs
+        // to be called after these are set up, but if the URL params ask for "embedded mode", this will suppress
+        // loading settings, so this needs to be called before that.
+        loadURLParams();
+
         // Load settings from settings storage now all the controls are available
         loadSettings();