New dev branch

script.js

@@ -0,0 +1,197 @@
+document.addEventListener('DOMContentLoaded', function() {
+
+
+
+// Select all elements with the class .lcpOpenLoginPopup
+const openLoginButtons = document.querySelectorAll('.lcpOpenLoginPopup');
+    
+// Loop through all the elements with the .lcpOpenLoginPopup class
+openLoginButtons.forEach(function(button) {
+    button.addEventListener('click', function() {
+        // Add the .open class to the #lcp-login-form when clicked
+        const loginForm = document.getElementById('lcp-login-form');
+        console.log("login form");
+        if (loginForm) {
+            loginForm.classList.add('open');
+        }
+    });
+});
+
+    // Get references to the DOM elements once
+    const header = document.getElementById('lcp-header-container');
+    const sideContent = document.getElementById('lcp-sidecontent');
+    const mainContent = document.getElementById('lcp-main-content');
+    const adminBarHeight = getAdminBarHeight(); // Get admin bar height
+
+    // Ensure elements exist before applying logic
+    if (!header || !sideContent || !mainContent) return;
+
+    // Update position of side content and adjust margin of main content based on header lcp-sticky class
+    updateSideContentPosition(header, sideContent, adminBarHeight);
+    adjustMainContentMargin(header, mainContent, adminBarHeight);
+
+    // Ensure the header and side content are properly positioned on page load
+    handleInitialPageLoad(header, sideContent, adminBarHeight);
+
+    // Debounce the scroll handler to limit the frequency of the function calls
+    const debouncedScroll = debounce(() => handleScroll(header, sideContent, adminBarHeight), 10); // 10ms debounce delay
+    
+    // Add the scroll event listener
+    window.addEventListener('scroll', debouncedScroll);
+
+    // Add the resize event listener
+    window.addEventListener('resize', debounce(function() {
+        updateSideContentPosition(header, sideContent, adminBarHeight);
+        adjustMainContentMargin(header, mainContent, adminBarHeight);
+    }, 0)); // 0ms debounce delay
+
+
+
+    // Optional: Popup auto-open after a delay (e.g., 2 seconds)
+    setTimeout(function() {
+        var popups = document.querySelectorAll('.lcp-popup');
+        popups.forEach(function(popup) {
+            // Uncomment the line below if you want the popup to auto-open
+            // popup.classList.add('open');
+        });
+    }, 2000); // 2 seconds delay
+
+});
+
+// Function to get the height of the admin bar if it's visible
+function getAdminBarHeight() {
+    const adminBar = document.getElementById('wpadminbar');
+    return adminBar ? adminBar.offsetHeight : 0; // Returns 32px if admin bar is present, 0 if not
+}
+
+// Function to update the position of side content
+function updateSideContentPosition(header, sideContent, adminBarHeight) {
+    const headerHeight = header.offsetHeight;
+    // If the header has the 'lcp-sticky' or 'lcp-sticky-on-scroll' class, position side content below it, considering the admin bar height
+    if (header.classList.contains('lcp-sticky') || header.classList.contains('lcp-sticky-on-scroll')) {
+        sideContent.style.top = (headerHeight + adminBarHeight) + 'px'; // Update side content position
+    }
+}
+
+// Function to adjust margin-top of the main content
+function adjustMainContentMargin(header, mainContent, adminBarHeight) {
+    if (header.classList.contains('lcp-sticky')) {
+        const headerHeight = header.offsetHeight;
+        mainContent.style.marginTop = (headerHeight + adminBarHeight) + 'px'; // Set margin-top to header + admin bar height
+    }
+}
+
+// Debounce function to limit the frequency of function calls
+function debounce(func, delay) {
+    let timeout;
+    return function (...args) {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => {
+            func.apply(this, args);
+        }, delay);
+    };
+}
+
+// Scroll handler function to update the 'scrolled' variable and toggle the lcp-sticky class
+function handleScroll(header, sideContent, adminBarHeight) {
+    const scrolled = window.scrollY || document.documentElement.scrollTop;
+    const headerHeight = header.offsetHeight;
+
+    // Add 'lcp-fixed' class to side content if scrolled beyond the header height + admin bar height
+    if (scrolled > (headerHeight + adminBarHeight)) {
+        sideContent.classList.add('lcp-fixed');
+    } else {
+        sideContent.classList.remove('lcp-fixed');
+    }
+
+    // Check if the header has the 'lcp-sticky-on-scroll' class and toggle the lcp-sticky class
+    if (header.classList.contains('lcp-sticky-on-scroll')) {
+        if (scrolled > (headerHeight + adminBarHeight)) {
+            header.classList.add('lcp-stuck'); // Slide the header down
+        } else {
+            header.classList.remove('lcp-stuck'); // Hide the header if scrolling back up
+        }
+    }
+}
+
+// Function to handle the initial page load position for both header and side content
+function handleInitialPageLoad(header, sideContent, adminBarHeight) {
+    const scrolled = window.scrollY || document.documentElement.scrollTop;
+    const headerHeight = header.offsetHeight;
+
+    // Ensure the side content is properly positioned below the header + admin bar on page load
+    sideContent.style.top = (headerHeight + adminBarHeight) + 'px';
+
+    // If the page is loaded with a scroll position greater than header + admin bar height, apply the 'lcp-fixed' class
+    if (scrolled > (headerHeight + adminBarHeight)) {
+        sideContent.classList.add('lcp-fixed');
+    } else {
+        sideContent.classList.remove('lcp-fixed');
+    }
+
+    // If the page is loaded with a scroll position greater than header + admin bar height, apply the 'lcp-stuck' class
+    if (header.classList.contains('lcp-sticky-on-scroll') && scrolled > (headerHeight + adminBarHeight)) {
+        header.classList.add('lcp-stuck');
+    }
+
+    const openLoginButtons = document.querySelectorAll('.lcpOpenLoginPopup');
+
+    
+    
+
+}
+
+// Highlight to share
+
+document.addEventListener('mouseup', function() {
+    // Get the selected text
+    const selectedText = window.getSelection().toString();
+
+    // Check if the selected text is at least 100 characters
+    if (selectedText.length >= 100) {
+      // Get the position of the selection
+      const range = window.getSelection().getRangeAt(0);
+      const rect = range.getBoundingClientRect();
+
+      // Ensure the tooltip exists before trying to manipulate its style
+      const tooltip = document.getElementById('share-tooltip');
+      if (tooltip) {
+        // Show the tooltip at the position of the selection
+        tooltip.style.display = 'block';
+        tooltip.style.left = `${rect.left + window.scrollX}px`;
+        tooltip.style.top = `${rect.top + window.scrollY + window.getSelection().anchorNode.offsetHeight + 5}px`;
+      }
+    } else {
+      // Hide the tooltip if selection is less than 100 characters
+      const tooltip = document.getElementById('share-tooltip');
+      if (tooltip) {
+        tooltip.style.display = 'none';
+      }
+    }
+  });
+
+  // Share to Facebook
+  document.getElementById('facebook-share')?.addEventListener('click', function() {
+    const selectedText = window.getSelection().toString();
+    const facebookUrl = `https://www.facebook.com/sharer/sharer.php?u=&quote=${encodeURIComponent(selectedText)}`;
+    window.open(facebookUrl, '_blank');
+  });
+
+  // Share to Twitter
+  document.getElementById('twitter-share')?.addEventListener('click', function() {
+    const selectedText = window.getSelection().toString();
+    const twitterUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(selectedText)}`;
+    window.open(twitterUrl, '_blank');
+  });
+
+  // Close the tooltip when clicked elsewhere
+  document.addEventListener('click', function(e) {
+    if (!e.target.closest('#share-tooltip') && !e.target.closest('.share-btn')) {
+      const tooltip = document.getElementById('share-tooltip');
+      if (tooltip) {
+        tooltip.style.display = 'none';
+      }
+    }
+  });
+
+