mirror of
				https://github.com/kevinveenbirkenbach/homepage.veen.world.git
				synced 2025-11-04 09:27:58 +00:00 
			
		
		
		
	Added fullscreen mode
This commit is contained in:
		
							
								
								
									
										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>
 | 
			
		||||
		Reference in New Issue
	
	Block a user