+ 
+
-
+
);
}
diff --git a/includes/blocks/lcp-sidecontent/src/view.js b/includes/blocks/lcp-sidecontent/src/view.js
index 87fd95d..6792717 100644
--- a/includes/blocks/lcp-sidecontent/src/view.js
+++ b/includes/blocks/lcp-sidecontent/src/view.js
@@ -21,5 +21,5 @@
*/
/* eslint-disable no-console */
-console.log( 'Hello World! (from create-block-lcp-sidecontent block)' );
+
/* eslint-enable no-console */
diff --git a/includes/blocks/lcp-viewport/src/edit.js b/includes/blocks/lcp-viewport/src/edit.js
index 25c61dd..6a78fa3 100644
--- a/includes/blocks/lcp-viewport/src/edit.js
+++ b/includes/blocks/lcp-viewport/src/edit.js
@@ -6,8 +6,10 @@ import './editor.scss';
export default function Edit({ attributes, setAttributes }) {
const { hasSidecontent } = attributes;
- // Block props
- const blockProps = useBlockProps();
+ // Block props with custom className management
+ const blockProps = useBlockProps({
+ className: hasSidecontent ? 'has-sidecontent' : '', // Custom class
+ });
// Custom template logic based on hasSidecontent
const template = [
@@ -31,15 +33,15 @@ export default function Edit({ attributes, setAttributes }) {
/>
- - { __( 'Lcp Sidecontent – hello from the editor!', 'lcp' ) } -
-
+
);
}
diff --git a/includes/blocks/lcp-sidecontent/src/editor.scss b/includes/blocks/lcp-sidecontent/src/editor.scss
index 40805c6..b5963a9 100644
--- a/includes/blocks/lcp-sidecontent/src/editor.scss
+++ b/includes/blocks/lcp-sidecontent/src/editor.scss
@@ -7,3 +7,16 @@
.wp-block-create-block-lcp-sidecontent {
border: 1px dotted #f00;
}
+
+#lcp-sidecontent {
+ position: absolute; /* or fixed depending on your JS logic */
+ left: 0;
+ background: #fff;
+ width: 340px; /* Fixed width of 340px */
+ height: 100%;
+ overflow: scroll;
+ z-index: 2;
+ border-right: 2px solid #eee;
+ outline: 0;
+ top: var(--my-top); /* Dynamically controlled top position via JS */
+}
\ No newline at end of file
diff --git a/includes/blocks/lcp-sidecontent/src/save.js b/includes/blocks/lcp-sidecontent/src/save.js
index 9458626..d377f59 100644
--- a/includes/blocks/lcp-sidecontent/src/save.js
+++ b/includes/blocks/lcp-sidecontent/src/save.js
@@ -21,8 +21,17 @@ export default function Save() {
return (
+
+
+
+
+
+
+
+
+
+
+
+ - {__('Lcp Viewport – hello from the editor!', 'lcp-viewport')} -
- - {/* Render the InnerBlocks with conditional template */} -
+
+ {/* Render the InnerBlocks with conditional template */}
+
+
-
-
+
);
diff --git a/includes/blocks/lcp-viewport/src/style.scss b/includes/blocks/lcp-viewport/src/style.scss
index 9bee04d..c37218a 100644
--- a/includes/blocks/lcp-viewport/src/style.scss
+++ b/includes/blocks/lcp-viewport/src/style.scss
@@ -5,3 +5,9 @@
* Replace them with your own styles or remove the file completely.
*/
+ #lcp-viewport-inner {
+ display: block; /* Arrange the side content and main content side-by-side */
+ width: 100%;
+ position: relative; /* To ensure side content stays in place */
+
+}
\ No newline at end of file
diff --git a/includes/classes/blocks.php b/includes/classes/blocks.php
index 195ee63..eece656 100644
--- a/includes/classes/blocks.php
+++ b/includes/classes/blocks.php
@@ -20,10 +20,10 @@ class Lcp_Blocks {
include $this->template_directory. '/includes/blocks/lcp-gallery/lcp-gallery.php';
include $this->template_directory. '/includes/blocks/lcp-viewport/lcp-viewport.php';
include $this->template_directory. '/includes/blocks/lcp-sidecontent/lcp-sidecontent.php';
- include $this->template_directory. '/includes/blocks/lcp-main-area/main-area.php';
- include $this->template_directory. '/includes/blocks/lcp-header-container/header-container.php';
- include $this->template_directory. '/includes/blocks/lcp-container/lcp-dynamic-container.php';
- include $this->template_directory. '/includes/blocks/lcp-key-points/key-points.php';
+ include $this->template_directory. '/includes/blocks/lcp-main-area/lcp-main-area.php';
+ include $this->template_directory. '/includes/blocks/lcp-header-container/lcp-header-container.php';
+ include $this->template_directory. '/includes/blocks/lcp-dynamic-container/lcp-dynamic-container.php';
+ include $this->template_directory. '/includes/blocks/lcp-key-points/lcp-key-points.php';
include $this->template_directory. '/includes/blocks/lcp-button/lcp-button.php';
}
diff --git a/script.js b/script.js
index efbd905..61fc935 100644
--- a/script.js
+++ b/script.js
@@ -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="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';
- }
- }
- });
-
-
\ No newline at end of file
+// Initialize the custom scrollbar position when the page loads
+updateCustomScrollbar();
diff --git a/style.css b/style.css
index 67d2537..bae05c0 100644
--- a/style.css
+++ b/style.css
@@ -25,20 +25,24 @@ Version: 1.0
/* Side content - absolute or fixed position */
#lcp-sidecontent {
- position: absolute; /* or fixed depending on your JS logic */
+ position: absolute; /* Positioned relative to the parent with position: relative */
left: 0;
- background: #fff;
- width: 340px; /* Fixed width of 340px */
- height: 100%;
- overflow: scroll;
- z-index: 2;
- border-right: 2px solid #eee;
- outline: 0;
top: var(--my-top); /* Dynamically controlled top position via JS */
+ width: 340px; /* Fixed width */
+ height: 100%; /* Full height */
+ overflow: auto; /* Allow scrolling inside */
+ background: #fff;
+ border-right: 2px solid #eee;
+ z-index: 2;
+ outline: 0;
+}
+
+#lcp-sidecontent.lcp-fixed {
+ position:fixed
}
/* Main content */
-.lcp-viewport.has-sidecontent #lcp-main-content {
+.has-sidecontent #lcp-main-wrap {
flex: 1; /* Main content takes up the rest of the space */
margin-left: 340px; /* Space for side content */
padding: 20px;
@@ -100,3 +104,46 @@ Version: 1.0
background: red;
}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+#lcp-sidecontent {
+
+ overflow: hidden; /* Hide native scrollbar */
+}
+
+#lcp-sidecontent-inner {
+ height: 100%;
+ overflow: auto; /* Enable scrolling for inner content */
+ padding-right: 15px; /* Space for the custom scrollbar */
+}
+
+#lcp-scroll-track {
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 5px;
+ height: 100%;
+ background-color: #e0e0e0;
+}
+
+#lcp-scroll-bar {
+ width: 100%;
+ background-color: #333;
+ cursor: pointer;
+ border-radius: 5px;
+}
\ No newline at end of file
+