Changes to blocks and added basic framework for Newsletters

assets/js/lcp.js

@@ -0,0 +1,122 @@
+
+
+
+document.addEventListener('DOMContentLoaded', function () {
+    // Get references to the DOM elements
+    const header = document.getElementById('lcp-header-container');
+    const sideContent = document.getElementById('lcp-sidecontent');
+    
+    // Ensure elements exist before proceeding
+    if (!header || !sideContent) return;
+    
+    // Check if the header has the 'lcp-sticky' and 'lcp-sticky-on-scroll' class
+    const headerIsSticky = header.classList.contains('lcp-sticky');
+    const headerIsStickyOnScroll = header.classList.contains('lcp-sticky-on-scroll');
+    
+    // Measure the height of the header once the DOM is loaded
+    const headerHeight = header.offsetHeight;
+    let fullHeaderHeight;
+    
+    // If the admin-bar is present, the fullHeaderHeight is the headerHeight + 32px
+    if (document.body.classList.contains('admin-bar')) {
+        const adminBarHeight = document.getElementById('wpadminbar').offsetHeight;
+        fullHeaderHeight = headerHeight + adminBarHeight;
+    } else {
+        fullHeaderHeight = headerHeight;
+    }
+
+
+
+    // Function to handle the scroll event
+    function handleScroll() {
+        document.documentElement.style.setProperty('--lcp--full-header--height', fullHeaderHeight + "px");
+        if (!headerIsSticky){
+        const scrolled = window.scrollY || document.documentElement.scrollTop;
+
+        // Check if the page has scrolled past the height of the header
+        if (scrolled >= headerHeight) {
+            // Add the 'lcp-fixed' class and set 'top' to 0 for side content
+            sideContent.classList.add('lcp-fixed');
+           // sideContent.style.top = fullHeaderHeight + 'px';
+
+            // If the header has 'lcp-sticky-on-scroll', adjust height of side content to be 100vh - fullHeaderHeight
+            if (headerIsStickyOnScroll) {
+                sideContent.style.height = `calc(100vh - ${fullHeaderHeight}px)`;
+                // Add 'lcp-fixed' to the header
+                header.classList.add('lcp-fixed');
+                // Set the 'top' of the sideContent to the height of the header
+                // sideContent.style.top = `${fullHeaderHeight}px`;
+            } else if (headerIsSticky) {
+                // If the header is sticky but not 'sticky-on-scroll', keep the side content height adjusted
+               // sideContent.style.height = `calc(100vh - ${fullHeaderHeight}px)`;
+            } else {
+                // Set side content height to 100vh when not sticky
+                
+               // sideContent.style.height = 'calc(100vh - 32px)';
+              //  sideContent.style.top = '32px';
+                
+            }
+        } else {
+            // Remove the 'lcp-fixed' class from side content and header if scrolled back above the header
+            sideContent.classList.remove('lcp-fixed');
+           // sideContent.style.top = ''; // Reset the 'top' style
+
+            // Reset height to 100vh when not fixed
+          //  sideContent.style.height = `calc(100vh - ${fullHeaderHeight}px)` ;
+
+            // If header has the 'lcp-sticky-on-scroll' class, remove 'lcp-fixed' from the header
+            if (headerIsStickyOnScroll) {
+                header.classList.remove('lcp-fixed');
+            }
+        }
+     }
+    }
+
+
+    // Also trigger the scroll handler once on load in case the page is already scrolled
+    handleScroll();
+
+    function debounce(func, delay) {
+        let timeout;
+        return function() {
+            const context = this;
+            const args = arguments;
+            clearTimeout(timeout);
+            timeout = setTimeout(function() {
+                func.apply(context, args);
+            }, delay);
+        };
+    }
+    
+// Add debounced scroll event listener
+window.addEventListener('scroll', debounce(handleScroll, 20)); // 200ms debounce
+
+});
+
+
+
+
+
+
+
+
+
+const sidecontent = document.getElementById("lcp-sidecontent");
+const innerContent = document.getElementById("lcp-sidecontent-inner");
+const scrollTrack = document.getElementById("lcp-scroll-track");
+const scrollBar = document.getElementById("lcp-scroll-bar");
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+