Use classes for fullscreen and pad capability

This commit is contained in:
Unrud 2022-01-27 16:50:16 +01:00
parent c749865ef1
commit 632c944561
3 changed files with 26 additions and 30 deletions

File diff suppressed because one or more lines are too long

View file

@ -54,8 +54,6 @@ var KEY_DELETE = 16;
var KEY_RETURN = 17; var KEY_RETURN = 17;
var ws; var ws;
var pad;
var padlabel;
var touchMoved = false; var touchMoved = false;
var touchStart = 0; var touchStart = 0;
@ -91,16 +89,14 @@ function requestFullscreen(element, options) {
} }
function exitFullscreen() { function exitFullscreen() {
if (fullscreenElement()) { if (document.exitFullscreen) {
if (document.exitFullscreen) { document.exitFullscreen();
document.exitFullscreen(); } else if (document.webkitExitFullscreen) {
} else if (document.webkitExitFullscreen) { document.webkitExitFullscreen();
document.webkitExitFullscreen(); } else if (document.mozCancelFullScreen) {
} else if (document.mozCancelFullScreen) { document.mozCancelFullScreen();
document.mozCancelFullScreen(); } else if (document.msExitFullscreen) {
} else if (document.msExitFullscreen) { document.msExitFullscreen();
document.msExitFullscreen();
}
} }
} }
@ -183,8 +179,7 @@ function handleStart(evt) {
} }
var touches = evt.changedTouches; var touches = evt.changedTouches;
for (var i = 0; i < touches.length; i += 1) { for (var i = 0; i < touches.length; i += 1) {
if (touches[i].target != pad && touches[i].target != padlabel && if (ongoingTouches.length == 0 && !touches[i].target.classList.contains("touchpad")) {
ongoingTouches.length == 0) {
continue; continue;
} }
evt.preventDefault(); evt.preventDefault();
@ -335,15 +330,19 @@ window.addEventListener("load", function() {
var authenticated = false; var authenticated = false;
var opening = document.getElementById("opening"); var opening = document.getElementById("opening");
var closed = document.getElementById("closed"); var closed = document.getElementById("closed");
pad = document.getElementById("pad"); var pad = document.getElementById("pad");
padlabel = document.getElementById("padlabel");
var keys = document.getElementById("keys"); var keys = document.getElementById("keys");
var keysPages = keys.querySelectorAll(".page"); var keysPages = keys.querySelectorAll(".page");
var keyboard = document.getElementById("keyboard"); var keyboard = document.getElementById("keyboard");
var fullscreenbutton = document.getElementById("fullscreenbutton"); var fullscreenbutton = document.getElementById("fullscreenbutton");
var keyboardtext = document.getElementById("keyboardtext"); var keyboardtext = document.getElementById("keyboardtext");
var activeScene;
function showScene(scene) { function showScene(scene) {
activeScene = scene;
if (fullscreenElement() && !scene.classList.contains("fullscreen")) {
exitFullscreen();
}
keyboardtext.value = ""; keyboardtext.value = "";
[opening, closed, pad, keys, keyboard].forEach(function(element) { [opening, closed, pad, keys, keyboard].forEach(function(element) {
element.classList.toggle("hidden", element != scene); element.classList.toggle("hidden", element != scene);
@ -354,7 +353,6 @@ window.addEventListener("load", function() {
if (!Number.isInteger(pageIndex) || pageIndex < 0 || keysPages.length <= pageIndex) { if (!Number.isInteger(pageIndex) || pageIndex < 0 || keysPages.length <= pageIndex) {
pageIndex = 0; pageIndex = 0;
} }
exitFullscreen();
showScene(keys); showScene(keys);
for (var i = 0; i < keysPages.length; i += 1) { for (var i = 0; i < keysPages.length; i += 1) {
keysPages[i].classList.toggle("hidden", i != pageIndex); keysPages[i].classList.toggle("hidden", i != pageIndex);
@ -367,7 +365,6 @@ window.addEventListener("load", function() {
} }
function showKeyboard() { function showKeyboard() {
exitFullscreen();
showScene(keyboard); showScene(keyboard);
keyboardtext.value = sessionStorage.getItem("keyboard") || ""; keyboardtext.value = sessionStorage.getItem("keyboard") || "";
keyboardtext.focus(); keyboardtext.focus();
@ -398,7 +395,6 @@ window.addEventListener("load", function() {
ws.onclose = function() { ws.onclose = function() {
authenticated = false; authenticated = false;
exitFullscreen();
showScene(closed); showScene(closed);
}; };
@ -476,12 +472,12 @@ window.addEventListener("load", function() {
document.getElementById("reloadbutton").addEventListener("click", function() { document.getElementById("reloadbutton").addEventListener("click", function() {
location.reload(); location.reload();
}); });
pad.addEventListener("touchstart", handleStart); document.addEventListener("touchstart", handleStart);
pad.addEventListener("touchend", handleEnd); document.addEventListener("touchend", handleEnd);
pad.addEventListener("touchcancel", handleEnd); document.addEventListener("touchcancel", handleEnd);
pad.addEventListener("touchmove", handleMove); document.addEventListener("touchmove", handleMove);
window.addEventListener("keydown", function(evt) { window.addEventListener("keydown", function(evt) {
if (!pad.classList.contains("hidden")) { if (activeScene && activeScene.classList.contains("key")) {
handleKeydown(evt); handleKeydown(evt);
} }
}); });

View file

@ -17,8 +17,8 @@
<p>Disconnected</p> <p>Disconnected</p>
<button id="reloadbutton"></button> <button id="reloadbutton"></button>
</div> </div>
<div id="pad" class="hidden"> <div id="pad" class="touchpad key fullscreen hidden">
<p id="padlabel">Touchpad</p> <p id="padlabel" class="touchpad">Touchpad</p>
<button id="keysbutton"></button> <button id="keysbutton"></button>
<button id="fullscreenbutton"></button> <button id="fullscreenbutton"></button>
<button id="keyboardbutton"></button> <button id="keyboardbutton"></button>