jrangel/local-content-pro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changes to blocks

Browse Source
This commit is contained in:
Jeremy Rangel
2024-12-22 15:20:12 -08:00
parent cfbb860bf9
commit f3fbe0fa32
25 changed files with 612 additions and 1035 deletions
Download Patch File Download Diff File Expand all files Collapse all files

272
script.js
View File

@ -1,197 +1,109 @@
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
document.addEventListener('DOMContentLoaded', function () {
// Get references to the DOM elements
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;
// Ensure elements exist before proceeding
if (!header || !sideContent) return;
// Measure the height of the header once the DOM is loaded
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');
}
// Set the height of #lcp-sidecontent to 100vh minus the header height
sideContent.style.height = `calc(100vh - ${headerHeight}px)`;
// 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
// Function to handle the scroll event
function handleScroll() {
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
sideContent.classList.add('lcp-fixed');
sideContent.style.top = '0';
} else {
header.classList.remove('lcp-stuck'); // Hide the header if scrolling back up
// Remove the 'lcp-fixed' class if scrolled back above the header
sideContent.classList.remove('lcp-fixed');
sideContent.style.top = ''; // Reset the 'top' style
}
}
// Add the scroll event listener
window.addEventListener('scroll', handleScroll);
// Also trigger the scroll handler once on load in case the page is already scrolled
handleScroll();
});
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");
let isDragging = false;
let startY = 0;
let startScrollTop = 0;
// Update the custom scrollbar position based on the content's scroll position
function updateCustomScrollbar() {
const contentHeight = innerContent.scrollHeight;
const visibleHeight = innerContent.clientHeight;
const scrollTrackHeight = scrollTrack.clientHeight;
// Calculate the proportion of visible content to total content
const thumbHeight = (visibleHeight / contentHeight) * scrollTrackHeight;
scrollBar.style.height = `${thumbHeight}px`;
// Calculate the scroll ratio (position of the content relative to its height)
const scrollRatio = innerContent.scrollTop / (contentHeight - visibleHeight);
// Position the scrollbar thumb based on the scroll ratio
scrollBar.style.top = `${scrollRatio * (scrollTrackHeight - thumbHeight)}px`;
}
// 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');
// Handle the mouse down event to begin dragging the scrollbar
scrollBar.addEventListener("mousedown", (e) => {
isDragging = true;
startY = e.clientY;
startScrollTop = innerContent.scrollTop;
document.body.style.userSelect = "none"; // Disable text selection while dragging
});
// Handle mouse movement to drag the scrollbar and simulate scrolling
document.addEventListener("mousemove", (e) => {
if (!isDragging) return;
const deltaY = e.clientY - startY;
const contentHeight = innerContent.scrollHeight;
const visibleHeight = innerContent.clientHeight;
const scrollTrackHeight = scrollTrack.clientHeight;
const thumbHeight = scrollBar.clientHeight;
const scrollableDistance = contentHeight - visibleHeight;
const thumbDistance = scrollTrackHeight - thumbHeight;
// Calculate new scroll position for content based on dragging
const newScrollTop = (deltaY / thumbDistance) * scrollableDistance + startScrollTop;
innerContent.scrollTop = newScrollTop;
updateCustomScrollbar();
});
}
// Handle mouse up event to stop dragging
document.addEventListener("mouseup", () => {
isDragging = false;
document.body.style.userSelect = ""; // Enable text selection again
});
// Highlight to share
// Handle scroll events on the content to update the custom scrollbar
innerContent.addEventListener("scroll", updateCustomScrollbar);
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';
}
}
});
// Initialize the custom scrollbar position when the page loads
updateCustomScrollbar();