complete kiosk mode and permalink close #33

server/scripts/index.mjs

@@ -5,6 +5,7 @@ import {
 } from './modules/navigation.mjs';
 import { round2 } from './modules/utils/units.mjs';
 import { parseQueryString } from './modules/share.mjs';
+import settings from './modules/settings.mjs';
 
 document.addEventListener('DOMContentLoaded', () => {
 	init();
@@ -100,7 +101,9 @@ const init = () => {
 		btnGetGpsClick();
 	}
 
-	const play = localStorage.getItem('play');
+	// if kiosk mode was set via the query string, also play immediately
+	settings.kiosk.value = parsedParameters['settings-kiosk-checkbox'] === 'true';
+	const play = parsedParameters['settings-kiosk-checkbox'] ?? localStorage.getItem('play');
 	if (play === null || play === 'true') postMessage('navButton', 'play');
 
 	document.querySelector('#btnClearQuery').addEventListener('click', () => {

server/scripts/modules/navigation.mjs

@@ -275,7 +275,7 @@ const resize = () => {
 	const heightZoomPercent = (window.innerHeight) / 480;
 
 	const scale = Math.min(widthZoomPercent, heightZoomPercent);
-	if (scale < 1.0 || document.fullscreenElement) {
+	if (scale < 1.0 || document.fullscreenElement || settings.kiosk) {
 		document.querySelector('#container').style.transform = `scale(${scale})`;
 	} else {
 		document.querySelector('#container').style.transform = 'unset';

server/scripts/modules/settings.mjs

@@ -8,7 +8,8 @@ const settings = {};
 
 const init = () => {
 	// create settings
-	settings.wide = new Setting('wide', 'Widescreen', 'boolean', false, wideScreenChange);
+	settings.wide = new Setting('wide', 'Widescreen', 'boolean', false, wideScreenChange, true);
+	settings.kiosk = new Setting('kiosk', 'Kiosk', 'boolean', false, kioskChange, false);
 
 	// generate checkboxes
 	const checkboxes = Object.values(settings).map((d) => d.generateCheckbox());
@@ -28,4 +29,14 @@ const wideScreenChange = (value) => {
 	}
 };
 
+const kioskChange = (value) => {
+	const body = document.querySelector('body');
+	if (value) {
+		body.classList.add('kiosk');
+		window.dispatchEvent(new Event('resize'));
+	} else {
+		body.classList.remove('kiosk');
+	}
+};
+
 export default settings;

server/scripts/modules/share.mjs

@@ -1,5 +1,10 @@
 document.addEventListener('DOMContentLoaded', () => init());
 
+// shorthand mappings for frequently used values
+const specialMappings = {
+	kiosk: 'settings-kiosk-checkbox',
+};
+
 const init = () => {
 	// add action to existing link
 	document.querySelector('#share-link').addEventListener('click', createLink);
@@ -28,9 +33,6 @@ const createLink = async (e) => {
 
 	const url = new URL(`?${queryString}`, document.location.href);
 
-	console.log(queryStringElements);
-	console.log(queryString);
-	console.log(url.toString());
 	try {
 		await navigator.clipboard.writeText(url.toString());
 		const confirmSpan = document.querySelector('#share-link-copied');
@@ -47,8 +49,21 @@ const parseQueryString = () => {
 	// return memoized result
 	if (parseQueryString.params) return parseQueryString.params;
 	const urlSearchParams = new URLSearchParams(window.location.search);
+
+	// turn into an array of key-value pairs
+	const paramsArray = [...urlSearchParams];
+
+	// add additional expanded keys
+	paramsArray.forEach((paramPair) => {
+		const expandedKey = specialMappings[paramPair[0]];
+		if (expandedKey) {
+			paramsArray.push([expandedKey, paramPair[1]]);
+		}
+	});
+
 	// memoize result
-	parseQueryString.params = Object.fromEntries(urlSearchParams.entries());
+	parseQueryString.params = Object.fromEntries(paramsArray);
+
 	return parseQueryString.params;
 };
 

server/scripts/modules/utils/setting.mjs

@@ -1,19 +1,19 @@
 const SETTINGS_KEY = 'Settings';
 
 class Setting {
-	constructor(shortName, name, type, defaultValue, changeAction) {
+	constructor(shortName, name, type, defaultValue, changeAction, sticky) {
 		// store values
 		this.shortName = shortName;
 		this.name = name;
 		this.defaultValue = defaultValue;
 		this.myValue = defaultValue;
 		this.type = type;
-		// a defualt blank change function is provded
+		// a default blank change function is provided
 		this.changeAction = changeAction ?? (() => {});
 
 		// get existing value if present
 		const storedValue = this.getFromLocalStorage();
-		if (storedValue !== null) {
+		if (sticky && storedValue !== null) {
 			this.myValue = storedValue;
 		}
 
@@ -53,6 +53,7 @@ class Setting {
 	}
 
 	storeToLocalStorage(value) {
+		if (!this.sticky) return;
 		const allSettingsString = localStorage?.getItem(SETTINGS_KEY) ?? '{}';
 		const allSettings = JSON.parse(allSettingsString);
 		allSettings[this.shortName] = value;
@@ -86,7 +87,13 @@ class Setting {
 	}
 
 	set value(newValue) {
+		// update the state
 		this.myValue = newValue;
+		this.checkbox.checked = newValue;
+		this.storeToLocalStorage(this.myValue);
+
+		// call change action
+		this.changeAction(this.myValue);
 	}
 }