mirror of
https://github.com/kevinveenbirkenbach/homepage.veen.world.git
synced 2025-07-07 11:35:12 +02:00
Added fullscreen mode
This commit is contained in:
parent
25dbc3f331
commit
d6389157ec
84
app/static/js/screen.js
Normal file
84
app/static/js/screen.js
Normal 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;
|
@ -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>
|
Loading…
x
Reference in New Issue
Block a user