mirror of
https://github.com/kevinveenbirkenbach/homepage.veen.world.git
synced 2025-07-07 03:25:12 +02:00
Implemented full width function
This commit is contained in:
parent
f0d4206731
commit
2f63009c31
83
app/static/js/fullscreen.js
Normal file
83
app/static/js/fullscreen.js
Normal file
@ -0,0 +1,83 @@
|
||||
/**
|
||||
* Add or remove the `fullscreen=1` URL parameter.
|
||||
* @param {boolean} enabled
|
||||
*/
|
||||
function updateUrlFullscreen(enabled) {
|
||||
var url = new URL(window.location);
|
||||
if (enabled) url.searchParams.set('fullscreen', '1');
|
||||
else url.searchParams.delete('fullscreen');
|
||||
window.history.replaceState({}, '', url);
|
||||
}
|
||||
|
||||
/**
|
||||
* Enter fullscreen: hide header/footer, enable full width, recalc scroll,
|
||||
* set both URL params, update button.
|
||||
*/
|
||||
function enterFullscreen() {
|
||||
document.querySelectorAll('header, footer')
|
||||
.forEach(function(el){ el.style.display = 'none'; });
|
||||
setFullWidth(true);
|
||||
updateUrlFullscreen(true);
|
||||
|
||||
if (typeof adjustScrollContainerHeight === 'function') adjustScrollContainerHeight();
|
||||
if (typeof updateCustomScrollbar === 'function') updateCustomScrollbar();
|
||||
}
|
||||
|
||||
/**
|
||||
* Exit fullscreen: show header/footer, disable full width, recalc scroll,
|
||||
* clear both URL params, update button.
|
||||
*/
|
||||
function exitFullscreen() {
|
||||
document.querySelectorAll('header, footer')
|
||||
.forEach(function(el){ el.style.display = ''; });
|
||||
setFullWidth(false);
|
||||
updateUrlFullscreen(false);
|
||||
|
||||
if (typeof adjustScrollContainerHeight === 'function') adjustScrollContainerHeight();
|
||||
if (typeof updateCustomScrollbar === 'function') updateCustomScrollbar();
|
||||
if (typeof syncIframeHeight === 'function') syncIframeHeight();
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle between enter and exit fullscreen.
|
||||
*/
|
||||
function toggleFullscreen() {
|
||||
if (document.fullscreenElement) exitFullscreen();
|
||||
else enterFullscreen();
|
||||
}
|
||||
|
||||
/**
|
||||
* Read `fullscreen` flag from URL on load.
|
||||
* @returns {boolean}
|
||||
*/
|
||||
function initFullscreenFromUrl() {
|
||||
return new URLSearchParams(window.location.search).get('fullscreen') === '1';
|
||||
}
|
||||
|
||||
// On page load: apply fullwidth & fullscreen flags
|
||||
window.addEventListener('DOMContentLoaded', function() {
|
||||
// first fullwidth
|
||||
var wasFullWidth = initFullWidthFromUrl();
|
||||
setFullWidth(wasFullWidth);
|
||||
|
||||
// now fullscreen
|
||||
if (initFullscreenFromUrl()) {
|
||||
enterFullscreen();
|
||||
}
|
||||
});
|
||||
|
||||
// Mirror native F11/fullscreen API events
|
||||
document.addEventListener('fullscreenchange', function() {
|
||||
if (document.fullscreenElement) enterFullscreen();
|
||||
else exitFullscreen();
|
||||
});
|
||||
window.addEventListener('resize', function() {
|
||||
var isUiFs = Math.abs(window.innerHeight - screen.height) < 2;
|
||||
if (isUiFs) enterFullscreen();
|
||||
else exitFullscreen();
|
||||
});
|
||||
|
||||
// Expose globally
|
||||
window.fullscreen = enterFullscreen;
|
||||
window.exitFullscreen = exitFullscreen;
|
||||
window.toggleFullscreen = toggleFullscreen;
|
||||
42
app/static/js/fullwidth.js
Normal file
42
app/static/js/fullwidth.js
Normal file
@ -0,0 +1,42 @@
|
||||
/**
|
||||
* Toggles the .container class between .container and .container-fluid.
|
||||
* @param {boolean} enabled – true = full width, false = normal.
|
||||
*/
|
||||
function setFullWidth(enabled) {
|
||||
var el = document.querySelector('.container, .container-fluid');
|
||||
if (!el) return;
|
||||
console.log(el)
|
||||
if (enabled) {
|
||||
el.classList.replace('container', 'container-fluid');
|
||||
updateUrlFullWidth(true)
|
||||
} else {
|
||||
el.classList.replace('container-fluid', 'container');
|
||||
updateUrlFullWidth(false)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Reads the URL parameter `fullwidth` and applies full width if it's set.
|
||||
* @returns {boolean} – current full‐width state
|
||||
*/
|
||||
function initFullWidthFromUrl() {
|
||||
var isFull = new URLSearchParams(window.location.search).get('fullwidth') === '1';
|
||||
setFullWidth(isFull);
|
||||
return isFull;
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds or removes the `fullwidth=1` URL parameter.
|
||||
* @param {boolean} enabled
|
||||
*/
|
||||
function updateUrlFullWidth(enabled) {
|
||||
var url = new URL(window.location);
|
||||
if (enabled) url.searchParams.set('fullwidth', '1');
|
||||
else url.searchParams.delete('fullwidth');
|
||||
window.history.replaceState({}, '', url);
|
||||
}
|
||||
|
||||
// Expose globally
|
||||
window.setFullWidth = setFullWidth;
|
||||
window.initFullWidthFromUrl = initFullWidthFromUrl;
|
||||
window.updateUrlFullWidth = updateUrlFullWidth;
|
||||
@ -106,6 +106,7 @@ document.addEventListener("DOMContentLoaded", function() {
|
||||
link.addEventListener("click", function(event) {
|
||||
event.preventDefault(); // prevent full page navigation
|
||||
openIframe(this.href);
|
||||
updateUrlFullWidth(true);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@ -1,118 +0,0 @@
|
||||
/**
|
||||
* 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 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
|
||||
*/
|
||||
|
||||
// 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 (guarded)
|
||||
if (typeof adjustScrollContainerHeight === 'function') {
|
||||
try { adjustScrollContainerHeight(); } catch (e) { console.warn('adjustScrollContainerHeight failed:', e); }
|
||||
}
|
||||
if (typeof updateCustomScrollbar === 'function') {
|
||||
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
|
||||
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 (guarded)
|
||||
if (typeof adjustScrollContainerHeight === 'function') {
|
||||
try { adjustScrollContainerHeight(); } catch (e) { console.warn('adjustScrollContainerHeight failed:', e); }
|
||||
}
|
||||
if (typeof updateCustomScrollbar === 'function') {
|
||||
try { updateCustomScrollbar(); } catch (e) { console.warn('updateCustomScrollbar failed:', e); }
|
||||
}
|
||||
if (typeof syncIframeHeight === 'function') {
|
||||
try { syncIframeHeight(); } catch (e) { console.warn('syncIframeHeight 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() {
|
||||
if (document.fullscreenElement) exitFullscreen();
|
||||
else fullscreen();
|
||||
}
|
||||
|
||||
// On load: check URL param and set state
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
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;
|
||||
@ -49,11 +49,16 @@
|
||||
</div>
|
||||
<!-- Include modal -->
|
||||
{% include "moduls/modal.html.j2" %}
|
||||
<script src="{{ url_for('static', filename='js/modal.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/navigation.js') }}"></script>
|
||||
<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>
|
||||
{% for name in [
|
||||
'modal',
|
||||
'navigation',
|
||||
'tooltip',
|
||||
'container',
|
||||
'fullwidth',
|
||||
'fullscreen',
|
||||
'iframe',
|
||||
] %}
|
||||
<script src="{{ url_for('static', filename='js/' ~ name ~ '.js') }}"></script>
|
||||
{% endfor %}
|
||||
</body>
|
||||
</html>
|
||||
@ -36,37 +36,35 @@
|
||||
|
||||
<!-- Navigation Bar -->
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light menu-{{menu_type}}">
|
||||
<div class="container-fluid">
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav{{menu_type}}" aria-controls="navbarNav{{menu_type}}" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav{{menu_type}}">
|
||||
<ul class="navbar-nav {% if menu_type == 'header' %}ms-auto{% endif %} btn-group">
|
||||
{% for item in navigation[menu_type].children %}
|
||||
{% if item.url %}
|
||||
<!-- Single Item -->
|
||||
<li class="nav-item">
|
||||
<a class="nav-link btn btn-light {% if item.iframe %}iframe-link{% endif %}" href="{{ item.url }}" target="{{ item.target|default('_blank') }}" data-bs-toggle="tooltip" title="{{ item.description }}">
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav{{menu_type}}" aria-controls="navbarNav{{menu_type}}" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav{{menu_type}}">
|
||||
<ul class="navbar-nav {% if menu_type == 'header' %}ms-auto{% endif %} btn-group">
|
||||
{% for item in navigation[menu_type].children %}
|
||||
{% if item.url %}
|
||||
<!-- Single Item -->
|
||||
<li class="nav-item">
|
||||
<a class="nav-link btn btn-light {% if item.iframe %}iframe-link{% endif %}" href="{{ item.url }}" target="{{ item.target|default('_blank') }}" data-bs-toggle="tooltip" title="{{ item.description }}">
|
||||
{{ render_icon_and_name(item) }}
|
||||
</a>
|
||||
</li>
|
||||
{% else %}
|
||||
<!-- Dropdown Menu -->
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle btn btn-light" id="navbarDropdown{{ loop.index }}" role="button" data-bs-display="dynamic" aria-expanded="false">
|
||||
{% if item.icon is defined and item.icon.class is defined %}
|
||||
{{ render_icon_and_name(item) }}
|
||||
</a>
|
||||
</li>
|
||||
{% else %}
|
||||
<!-- Dropdown Menu -->
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle btn btn-light" id="navbarDropdown{{ loop.index }}" role="button" data-bs-display="dynamic" aria-expanded="false">
|
||||
{% if item.icon is defined and item.icon.class is defined %}
|
||||
{{ render_icon_and_name(item) }}
|
||||
{% else %}
|
||||
<p>Missing icon in item: {{ item }}</p>
|
||||
{% endif %}
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
{{ render_children(item.children) }}
|
||||
</ul>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% else %}
|
||||
<p>Missing icon in item: {{ item }}</p>
|
||||
{% endif %}
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
{{ render_children(item.children) }}
|
||||
</ul>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user