From 7d081f333977176f67e33da6642d082567d50196 Mon Sep 17 00:00:00 2001 From: Stian <1493836+Pathduck@users.noreply.github.com> Date: Thu, 24 Jul 2025 10:44:44 +0200 Subject: [PATCH] Add keyboard-lock --- test/keyboard-lock/index.html | 44 +++++++++++++++++++ test/keyboard-lock/script.js | 83 +++++++++++++++++++++++++++++++++++ test/keyboard-lock/style.css | 46 +++++++++++++++++++ 3 files changed, 173 insertions(+) create mode 100755 test/keyboard-lock/index.html create mode 100755 test/keyboard-lock/script.js create mode 100755 test/keyboard-lock/style.css diff --git a/test/keyboard-lock/index.html b/test/keyboard-lock/index.html new file mode 100755 index 0000000..e1aa7be --- /dev/null +++ b/test/keyboard-lock/index.html @@ -0,0 +1,44 @@ + + + + + + + + + + Keyboard Lock Demo + + + + + + + + + +
+

Keyboard Lock Demo

+ +

+ Press the button to toggle full screen mode. + +

+ + + +
+ + + \ No newline at end of file diff --git a/test/keyboard-lock/script.js b/test/keyboard-lock/script.js new file mode 100755 index 0000000..18e285b --- /dev/null +++ b/test/keyboard-lock/script.js @@ -0,0 +1,83 @@ +if (window.self === window.top) { + if (!("keyboard" in navigator)) { + alert("Your browser does not support the Keyboard Lock API."); + } +} + +const fullscreenButton = document.querySelector("#fullscreen"); +const keyboardButton = document.querySelector("#keyboard"); +const body = document.body; +const div = document.querySelector("div"); +const info = document.querySelector(".info"); + +const ENTER_FULLSCREEN = "Enter full screen"; +const LEAVE_FULLSCREEN = "Leave full screen"; +const ACTIVATE_KEYBOARD_LOCK = "Activate keyboard lock"; +const DEACTIVATE_KEYBOARD_LOCK = "Dectivate keyboard lock"; + +const LOCKED_KEYS = ["MetaLeft", "MetaRight", "Tab", "KeyN", "KeyT", "Escape"]; + +let lock = false; + +fullscreenButton.addEventListener("click", async () => { + if (window.self !== window.top) { + window.open(location.href, "", "noopener,noreferrer"); + return; + } + try { + if (!document.fullscreen) { + await document.documentElement.requestFullscreen(); + fullscreenButton.textContent = LEAVE_FULLSCREEN; + return; + } + await document.exitFullscreen(); + fullscreenButton.textContent = ENTER_FULLSCREEN; + } catch (err) { + fullscreenButton.textContent = ENTER_FULLSCREEN; + alert(`${err.name}: ${err.message}`); + } +}); + +keyboardButton.addEventListener("click", async () => { + try { + if (!lock) { + //await navigator.keyboard.lock(LOCKED_KEYS); + await navigator.keyboard.lock(); + lock = true; + keyboardButton.textContent = DEACTIVATE_KEYBOARD_LOCK; + return; + } + navigator.keyboard.unlock(); + keyboardButton.textContent = ACTIVATE_KEYBOARD_LOCK; + lock = false; + } catch (err) { + lock = false; + keyboardButton.textContent = ACTIVATE_KEYBOARD_LOCK; + alert(`${err.name}: ${err.message}`); + } +}); + +document.addEventListener("fullscreenchange", () => { + keyboardButton.textContent = ACTIVATE_KEYBOARD_LOCK; + lock = false; + if (document.fullscreen) { + fullscreenButton.textContent = LEAVE_FULLSCREEN; + return (div.style.display = "block"); + } + fullscreenButton.textContent = ENTER_FULLSCREEN; + div.style.display = "none"; +}); + +document.addEventListener("keydown", (e) => { + if ( + lock && + (e.code === "Escape" || + ((e.code === "KeyN" || e.code === "KeyT") && + (event.ctrlKey || event.metaKey))) + ) { + info.style.display = "block"; + setTimeout(() => { + info.style.display = "none"; + }, 3000); + } +}); diff --git a/test/keyboard-lock/style.css b/test/keyboard-lock/style.css new file mode 100755 index 0000000..ffccde4 --- /dev/null +++ b/test/keyboard-lock/style.css @@ -0,0 +1,46 @@ +/* CSS files add styling rules to your content */ + +:root { + color-scheme: dark light; +} + +html { + display: flex; + justify-content: center; +} + +body { + font-family: helvetica, arial, sans-serif; + margin: 2em; +} + +main { + max-width: 500px; +} + +h1 { + color: #373fff; +} + +button { + display: block; + margin-block: 1rem; + width: 100%; +} + +p, +div { + margin-block-end: 2.5rem; +} + +kbd { + outline: solid 1px gray; + background-color: lightgray; + color: black; + padding-inline: 0.25rem; + font-family: monospace; +} + +.info { + color: red; +}