Added fullscreen mode

This commit is contained in:
Kevin Veen-Birkenbach 2025-07-05 13:30:25 +02:00
parent 25dbc3f331
commit d6389157ec
No known key found for this signature in database
GPG Key ID: 44D8F11FD62F878E
2 changed files with 85 additions and 0 deletions

84
app/static/js/screen.js Normal file
View File

@ -0,0 +1,84 @@
/**
* screen.js
* Provides fullscreen and exitFullscreen functionality:
* - fullscreen(): hides header/footer, expands container, recalculates main height, sets ?fullscreen=1
* - exitFullscreen(): restores header/footer, container, recalculates main height, removes parameter
* - toggleFullscreen(): toggles between modes
* Reacts to URL ?fullscreen=1 on page load
*/
function fullscreen() {
// Hide header and footer
const header = document.querySelector('header');
const footer = document.querySelector('footer');
if (header) header.style.display = 'none';
if (footer) footer.style.display = 'none';
// Expand container to full width
const container = document.querySelector('.container');
if (container && !container.classList.contains('container-fluid')) {
container.classList.replace('container', 'container-fluid');
}
// Recalculate main height
if (typeof adjustScrollContainerHeight === 'function') {
adjustScrollContainerHeight();
}
if (typeof updateCustomScrollbar === 'function') {
updateCustomScrollbar();
}
// Update URL parameter
const url = new URL(window.location);
url.searchParams.set('fullscreen', '1');
window.history.replaceState({}, '', url);
}
function exitFullscreen() {
// Show header and footer
const header = document.querySelector('header');
const footer = document.querySelector('footer');
if (header) header.style.display = '';
if (footer) footer.style.display = '';
// Revert container to default width
const container = document.querySelector('.container-fluid');
if (container) {
container.classList.replace('container-fluid', 'container');
}
// Recalculate main height
if (typeof adjustScrollContainerHeight === 'function') {
adjustScrollContainerHeight();
}
if (typeof updateCustomScrollbar === 'function') {
updateCustomScrollbar();
}
// Remove URL parameter
const url = new URL(window.location);
url.searchParams.delete('fullscreen');
window.history.replaceState({}, '', url);
}
function toggleFullscreen() {
const header = document.querySelector('header');
if (header && header.style.display === 'none') {
exitFullscreen();
} else {
fullscreen();
}
}
// On load, check URL param and react
window.addEventListener('DOMContentLoaded', () => {
const params = new URLSearchParams(window.location.search);
if (params.get('fullscreen') === '1') {
fullscreen();
}
});
// Expose functions globally
window.fullscreen = fullscreen;
window.exitFullscreen = exitFullscreen;
window.toggleFullscreen = toggleFullscreen;

View File

@ -54,5 +54,6 @@
<script src="{{ url_for('static', filename='js/tooltip.js') }}"></script>
<script src="{{ url_for('static', filename='js/custom_scrollbar.js') }}"></script>
<script src="{{ url_for('static', filename='js/iframe.js') }}"></script>
<script src="{{ url_for('static', filename='js/screen.js') }}"></script>
</body>
</html>