CreeperVM/webapp
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fullscreen button

Browse Source
This commit is contained in:
cvmuser1000 2024-11-03 10:36:24 +00:00
parent 824f558975
commit 7d9cc7d1b4
1 changed files with 35 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/html/index.html
View File

@ -251,6 +251,41 @@
<button class="btn btn-secondary" id="voteResetButton"><i class="fa-solid fa-rotate-left"></i> <span id="voteForResetBtnText"></span></button>
<button class="btn btn-secondary" id="screenshotButton"><i class="fa-solid fa-camera"></i> <span id="screenshotBtnText"></span></button>
<button class="btn btn-secondary" id="ctrlAltDelBtn"><i class="fa-solid fa-gear"></i> <span id="ctrlAltDelBtnText"></span></button>
<button class="btn btn-secondary" id="fullscreenBtn" onclick="
const vmDisplay = document.getElementById('vmDisplay');
const canvas = vmDisplay.querySelector('canvas');
if (vmDisplay && canvas) {
if (!document.fullscreenElement) {
vmDisplay.requestFullscreen()
.then(() => resizeCanvas(true))
.catch(err => console.error('Error attempting to enable fullscreen mode:', err));
} else {
document.exitFullscreen()
.then(() => resizeCanvas(false))
.catch(err => console.error('Error attempting to exit fullscreen mode:', err));
}
} else {
console.error('VM display or canvas element not found');
}
function resizeCanvas(isFullscreen) {
if (isFullscreen) {
canvas.style.width = '100vw';
canvas.style.height = '100vh';
} else {
canvas.style.width = '720px';
canvas.style.height = '400px';
}
}
document.onfullscreenchange = () => {
resizeCanvas(!!document.fullscreenElement);
};
">
<svg class="svg-inline--fa fa-expand" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="expand" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path fill="currentColor" d="M0 0v192h96v-96h96v-96h-192zm96 224v96h96v192h96v-96h96v-96h96v-96h-96v-96h-96v-96h-96v96h-96v96h-96v96h96z"></path>
</svg>
<span id="fullscreenBtnText">Fullscreen VM</span>
</button>
<div id="staffbtns">
<button class="btn btn-secondary" id="restoreBtn"><i class="fa-solid fa-rotate-left"></i> <span id="restoreBtnText"></span></button>
<button class="btn btn-secondary" id="rebootBtn"><i class="fa-solid fa-power-off"></i> <span id="rebootBtnText"></span></button>