https://www.stefanseegerer.de/assets/js/projectGrid.js

1// Project Grid Layout Handler
2document.addEventListener('DOMContentLoaded', function() {
3    // Function to check if we're on a mobile device
4    function isMobile() {
5        return window.innerWidth <= 768;
6    }
7    
8    // Function to apply grid classes based on attributes
9    function applyProjectGridClasses() {
10        const projectElements = document.querySelectorAll('my-project');
11        
12        projectElements.forEach(project => {
13            // Remove existing span classes
14            project.classList.remove('span-2', 'span-4', 'tall');
15            
16            // Apply span classes based on attributes
17            const spanCols = project.getAttribute('span-cols') || '1';
18            const spanRows = project.getAttribute('span-rows') || '1';
19            
20            // Apply column span classes
21            if (spanCols === '2') {
22                project.classList.add('span-2');
23            } else if (spanCols === '4') {
24                project.classList.add('span-4');
25            }
26            
27            // Apply row span classes
28            if (spanRows === '2') {
29                project.classList.add('tall');
30            }
31        });
32    }
33    
34    // Apply classes when DOM is ready
35    applyProjectGridClasses();
36    
37    // Re-apply classes when window is resized (responsive behavior)
38    let resizeTimeout;
39    window.addEventListener('resize', function() {
40        clearTimeout(resizeTimeout);
41        resizeTimeout = setTimeout(applyProjectGridClasses, 250);
42    });
43    
44    // Also apply when custom elements are defined (for slower loading)
45    if (window.customElements) {
46        window.customElements.whenDefined('my-project').then(() => {
47            applyProjectGridClasses();
48        });
49    }
50});