feat: move scroll to top to free version (#4445)

This PR moves Move to Scroll from Pro version to Free version. Few notes:

    It introduces new strings.
    It adds a migration for from the option to theme mod for enable/disable.

Author: HardeepAsrani

assets/apps/customizer-controls/src/builder/components/Builder.tsx

@@ -138,7 +138,7 @@ const Builder: React.FC<Props> = ({ value, hidden, portalMount }) => {
 								setMobileOverlayDismissed(true);
 							}}
 						>
-							{__('Enable', 'neve-pro-addon')}
+							{__('Enable', 'neve')}
 						</Button>
 					</div>
 				)}

assets/apps/customizer-controls/src/controls.js

@@ -297,6 +297,50 @@ const checkHasElementorTemplates = () => {
 	}
 };
 
+/**
+ * Find the Scroll to top button within the customizer preview.
+ */
+function findScrollToTopBtn() {
+	const iframeElement = document.querySelector('#customize-preview iframe');
+
+	if (!iframeElement) {
+		return;
+	}
+
+	const scrollToTopBtn =
+		iframeElement.contentWindow.document.querySelector('#scroll-to-top');
+
+	return scrollToTopBtn;
+}
+
+/**
+ * Show the Scroll to Top button as soon as the user enters the section in Customizer.
+ */
+function previewScrollToTopChanges() {
+	wp.customize.section('neve_scroll_to_top', (section) => {
+		section.expanded.bind((isExpanded) => {
+			const scrollToTopBtn = findScrollToTopBtn();
+
+			if (!scrollToTopBtn) {
+				return;
+			}
+
+			// If Scroll to top customizer section is expanded
+			if (isExpanded) {
+				wp.customize.previewer.bind('ready', () => {
+					wp.customize.previewer.send('nv-opened-stt', true);
+				});
+				scrollToTopBtn.style.visibility = 'visible';
+				scrollToTopBtn.style.opacity = '1';
+			} else {
+				// Hide the button when we leave the section
+				scrollToTopBtn.style.visibility = 'hidden';
+				scrollToTopBtn.style.opacity = '0';
+			}
+		});
+	});
+}
+
 window.wp.customize.bind('ready', () => {
 	initStarterContentNotice();
 	initDocSection();
@@ -311,6 +355,7 @@ window.wp.customize.bind('ready', () => {
 	initBlogPageFocus();
 	initSearchCustomizer();
 	initLocalGoogleFonts();
+	previewScrollToTopChanges();
 });
 
 window.HFG = {

assets/js/src/customizer-preview/app.js

@@ -0,0 +1,97 @@
+/*global neveScrollOffset*/
+
+function scrollTopSafe(to) {
+	let i = window.scrollY;
+	to = parseInt(to);
+	const scrollInterval = setInterval(function () {
+		if (i < to + 20) i -= 1;
+		else if (i < to + 40) i -= 6;
+		else if (i < to + 80) i -= 16;
+		else if (i < to + 160) i -= 36;
+		else if (i < to + 200) i -= 48;
+		else if (i < to + 300) i -= 80;
+		else i -= 120;
+		window.scroll(0, i);
+		if (i <= to) clearInterval(scrollInterval);
+	}, 15);
+}
+
+function runScroll() {
+	const smoothScrollFeature =
+		'scrollBehavior' in document.documentElement.style;
+	if (!smoothScrollFeature) {
+		scrollTopSafe(0);
+	} else {
+		window.scrollTo({
+			top: 0,
+			behavior: 'smooth',
+		});
+	}
+	const content = document.getElementById('content');
+	const scrollButton = document.getElementById('scroll-to-top');
+	if (content) {
+		scrollButton.blur();
+		content.focus();
+	}
+}
+function scrollToTop() {
+	const element = document.getElementById('scroll-to-top');
+	if (!element) {
+		return false;
+	}
+
+	element.addEventListener('click', function () {
+		runScroll();
+	});
+
+	element.addEventListener('keydown', function (event) {
+		if (event.key === 'Enter') {
+			runScroll();
+		}
+	});
+
+	window.addEventListener('scroll', function () {
+		const yScrollPos = window.scrollY;
+		const offset = neveScrollOffset.offset;
+
+		if (yScrollPos > offset) {
+			element.style.visibility = 'visible';
+			element.style.opacity = '1';
+		}
+		if (yScrollPos <= offset) {
+			element.style.opacity = '0';
+			element.style.visibility = 'hidden';
+		}
+
+		// Change scroll to top position if there is a sticky add to cart in place.
+		const stickyAddToCart = document.querySelector(
+			'.sticky-add-to-cart-bottom'
+		);
+		if (stickyAddToCart) {
+			element.style.bottom = '30px';
+
+			// Try to get Neve's sticky footer. If it doesn't exist try to get Elementor's.
+			let stickyFooter = document.querySelector('.hfg_footer');
+			if (
+				!stickyFooter ||
+				!stickyFooter.classList.contains('has-sticky-rows')
+			) {
+				stickyFooter = document.querySelector(
+					'.elementor-location-footer .elementor-sticky'
+				);
+			}
+			const footerHeight = stickyFooter ? stickyFooter.offsetHeight : 0;
+
+			if (
+				stickyAddToCart.classList.contains('sticky-add-to-cart--active')
+			) {
+				element.style.bottom =
+					stickyAddToCart.offsetHeight + footerHeight + 10 + 'px';
+			}
+		}
+	});
+}
+
+window.addEventListener('load', function () {
+	scrollToTop();
+});

assets/js/src/scroll-to-top.js

@@ -0,0 +1,28 @@
+{
+  "general": {
+    "neve_scroll_to_top_side": "left",
+    "neve_scroll_to_top_label": "Go up",
+    "neve_scroll_to_top_offset": 100,
+    "neve_scroll_to_top_padding": {
+      "desktop": { "top": 10, "right": 12, "bottom": 10, "left": 12 },
+      "tablet": { "top": 6, "right": 8, "bottom": 6, "left": 8 },
+      "mobile": { "top": 10, "right": 12, "bottom": 10, "left": 12 },
+      "desktop-unit": "px",
+      "tablet-unit": "px",
+      "mobile-unit": "px"
+    },
+    "neve_scroll_to_top_border_radius": 100,
+    "neve_scroll_to_top_icon_color": "#ff0000",
+    "neve_scroll_to_top_icon_hover_color": "#ff0000",
+    "neve_scroll_to_top_background_color": "#ffffff",
+    "neve_scroll_to_top_background_hover_color": "#ffffff",
+    "neve_scroll_to_top_type": "icon",
+    "neve_scroll_to_top_image": 0,
+    "neve_scroll_to_top_on_mobile": false
+  },
+  "icon-check": {
+    "neve_scroll_to_top_side": "left",
+    "neve_scroll_to_top_icon_size": "{ \"mobile\": \"100\", \"tablet\": \"50\", \"desktop\": \"100\" }",
+    "neve_scroll_to_top_on_mobile": false
+  }
+}

e2e-tests/fixtures/customizer/scroll-to-top/scroll-to-top-setup.json

@@ -128,7 +128,7 @@ test.describe('Logo Component palette', function () {
 
 		await expect(await siteLogo.getAttribute('src')).toBe(logos[1]?.url);
 
-		await page.locator('.icon > svg > path').click();
+		await page.getByRole('link', { name: 'Palette Switch' }).click();
 
 		await expect(await siteLogo.getAttribute('src')).toBe(logos[0]?.url);
 	});

e2e-tests/specs/customizer/hfg/hfg-logo-component.spec.ts

@@ -28,7 +28,7 @@ test.describe('Palette Switch component', function () {
 			);
 		}
 
-		await page.locator('.icon > svg > path').click();
+		await page.getByRole('link', { name: 'Palette Switch' }).click();
 
 		for (let i = 0; i < count; i++) {
 			await expect(headerElements.nth(i)).toHaveCSS(