Use yet another different method to show/hide dialogs (2a080939) · Commits · Technik / teaching / yalikejazz

static/css/test.css

+3 −3

Original line number	Diff line number	Diff line
		@@ -4,7 +4,7 @@ body {
		grid-template-columns: 1fr 1fr;
		}

		body[class*="-dialog-shown"] {
		body.dialog-shown {
		overflow: hidden;
		}

		@@ -21,7 +21,7 @@ body[class*="-dialog-shown"] {
		grid-template-columns: 1fr 2fr 1fr;
		}

		body[class*="-dialog-shown"] .overlay {
		body.dialog-shown .overlay {
		display: grid;
		}

		@@ -43,7 +43,7 @@ body[class*="-dialog-shown"] .overlay {
		box-shadow: 4px 4px 4px black;
		}

		.welcome-dialog-shown #welcome-dialog, .hand-in-dialog-shown #hand-in-dialog {
		.dialog.dialog-shown {
		display: block;
		}

static/js/yalikejazz.mjs

+24 −6

Original line number	Diff line number	Diff line
		@@ -99,23 +99,23 @@ function initActionLinks() {
		const handInToken = currentTest.getHandInToken(currentState)
		navigator.clipboard.writeText(handInToken)
		document.querySelector("#hand-in-token").textContent = handInToken
		document.body.classList.add("hand-in-dialog-shown")
		setDialogShown("hand-in-dialog", true)
		},
		"begin": function () {
		document.body.classList.remove("welcome-dialog-shown")
		setDialogShown("welcome-dialog", false)
		currentTest.markWelcomeAsRead(currentState)
		},
		"continue": function () {
		document.body.classList.remove("welcome-dialog-shown")
		setDialogShown("welcome-dialog", false)
		},
		"complete": function () {
		document.body.classList.remove("hand-in-dialog-shown")
		setDialogShown("hand-in-dialog", false)
		setAutoFocusEnabled(true)
		},
		"welcome-again": function () {
		document.querySelector("#welcome-dialog [data-action='begin']").style.display = "none"
		document.querySelector("#welcome-dialog [data-action='continue']").style.display = "block"
		document.body.classList.add("welcome-dialog-shown")
		setDialogShown("welcome-dialog", true)
		},
		"reset": function () {
		const response = prompt("Möchtest du wirklich allen Fortschritt löschen und von vorne beginnen? Achtung: Die Seite verhält sich danach, als würdest du sie zum allerersten Mal besuchen (insbesondere: falls du schon angefangen hast, den Pooltest zu bearbeiten, ist dein Fortschritt komplett weg). Gib 'ZURÜCKSETZEN' (ohne Anführungszeichen) ein, falls du alles zurücksetzen willst. Ansonsten drücke einfach auf Abbrechen :)")
		@@ -130,6 +130,24 @@ function initActionLinks() {
		})
		}

		/**
		* Show (or hide) a dialog
		* @param {string} id The id of the dialog
		* @param {boolean} shown If the dialog should be shown or hidden
		*/
		function setDialogShown(id, shown) {
		const DIALOG_SHOWN = "dialog-shown"
		const dialog = document.querySelector(`#${id}`)

		if(shown) {
		document.body.classList.add(DIALOG_SHOWN)
		dialog.classList.add(DIALOG_SHOWN)
		} else {
		dialog.classList.remove(DIALOG_SHOWN)
		document.body.classList.remove(DIALOG_SHOWN)
		}
		}

		/**
		* Enables or disables all exercise action buttons
		* @param {boolean} enabled If all exercise action buttons should be enabled
		@@ -161,7 +179,7 @@ export async function main() {
		}

		if (!currentTest.wasWelcomeRead(currentState)) {
		document.body.classList.add("welcome-dialog-shown")
		setDialogShown("welcome-dialog", true)
		}
		} else {
		// No welcome dialog exists, so we also don't want the user to be able to show it again