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="e=${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'; } } });