kevinveenbirkenbach/homepage.veen.world
1
0
Fork 0
mirror of https://github.com/kevinveenbirkenbach/homepage.veen.world.git synced 2025-11-04 01:18:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

finished fullscreen base implementation

Browse Source
This commit is contained in:
Kevin Veen-Birkenbach
2025-07-05 14:20:52 +02:00
parent d6389157ec
commit 697696347f
1 changed files with 66 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
app/static/js/screen.js
View File

@@ -3,82 +3,113 @@
* 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
* - toggleFullscreen(): toggles based on current state
* - updateButtonIcon(): updates a button's icon/text based on fullscreen state
* Reacts to URL ?fullscreen=1 on page load
* Mirrors browser fullscreen (F11) via fullscreenchange and resize events
*/
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';
// Update the toggle button's icon/text
function updateButtonIcon() {
const btn = document.getElementById('fullscreen-btn');
if (!btn) return;
if (document.fullscreenElement) {
btn.innerHTML = '<i class="fa fa-compress"></i>';
btn.title = 'Exit Fullscreen';
} else {
btn.innerHTML = '<i class="fa fa-expand"></i>';
btn.title = 'Enter Fullscreen';
}
}
async function fullscreen() {
// Hide header and footer
document.querySelectorAll('header, footer').forEach(el => el && (el.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
// Recalculate main height (guarded)
if (typeof adjustScrollContainerHeight === 'function') {
adjustScrollContainerHeight();
try { adjustScrollContainerHeight(); } catch (e) { console.warn('adjustScrollContainerHeight failed:', e); }
}
if (typeof updateCustomScrollbar === 'function') {
updateCustomScrollbar();
try { updateCustomScrollbar(); } catch (e) { console.warn('updateCustomScrollbar failed:', e); }
}
// Update URL parameter
const url = new URL(window.location);
url.searchParams.set('fullscreen', '1');
window.history.replaceState({}, '', url);
// Update toggle button
updateButtonIcon();
}
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 = '';
document.querySelectorAll('header, footer').forEach(el => el && (el.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 (container) container.classList.replace('container-fluid', 'container');
// Recalculate main height (guarded)
if (typeof adjustScrollContainerHeight === 'function') {
adjustScrollContainerHeight();
try { adjustScrollContainerHeight(); } catch (e) { console.warn('adjustScrollContainerHeight failed:', e); }
}
if (typeof updateCustomScrollbar === 'function') {
updateCustomScrollbar();
try { updateCustomScrollbar(); } catch (e) { console.warn('updateCustomScrollbar failed:', e); }
}
// Remove URL parameter
const url = new URL(window.location);
url.searchParams.delete('fullscreen');
window.history.replaceState({}, '', url);
// Update toggle button
updateButtonIcon();
}
function toggleFullscreen() {
const header = document.querySelector('header');
if (header && header.style.display === 'none') {
exitFullscreen();
} else {
fullscreen();
}
if (document.fullscreenElement) exitFullscreen();
else fullscreen();
}
// On load, check URL param and react
// On load: check URL param and set state
window.addEventListener('DOMContentLoaded', () => {
const params = new URLSearchParams(window.location.search);
if (params.get('fullscreen') === '1') {
fullscreen();
}
if (params.get('fullscreen') === '1') fullscreen();
else updateButtonIcon();
});
function isAnyBrowserFullscreen() {
// Fullscreen API
const apiFs = !!(
document.fullscreenElement ||
document.webkitFullscreenElement ||
document.mozFullScreenElement ||
document.msFullscreenElement
);
// Browser-chrome F11 fullscreen
const uiFs = Math.abs(window.innerHeight - screen.height) < 2;
// PWA fullscreen
const pwaFs = window.matchMedia('(display-mode: fullscreen)').matches;
return apiFs || uiFs || pwaFs;
}
// 1) Fullscreen API change (for JS-driven requestFullscreen)
document.addEventListener('fullscreenchange', () => {
if (isAnyBrowserFullscreen()) fullscreen();
else exitFullscreen();
});
// 2) Chromium F11 fallback
window.addEventListener('resize', () => {
if (isAnyBrowserFullscreen()) fullscreen();
else exitFullscreen();
});
// Expose functions globally
window.fullscreen = fullscreen;
window.exitFullscreen = exitFullscreen;
window.toggleFullscreen = toggleFullscreen;
window.updateButtonIcon = updateButtonIcon;