From d70224e473fc6a4242cc510dfe0abfb5696f194f Mon Sep 17 00:00:00 2001 From: MAX-786 Date: Thu, 4 Jul 2024 14:44:33 +0530 Subject: [PATCH] Update hydra to have scroll into view functionality --- packages/hydra-js/hydra.js | 26 +++++++++++++++++++++----- 1 file changed, 21 insertions(+), 5 deletions(-) diff --git a/packages/hydra-js/hydra.js b/packages/hydra-js/hydra.js index 11a1d83..4f9cf12 100644 --- a/packages/hydra-js/hydra.js +++ b/packages/hydra-js/hydra.js @@ -11,6 +11,8 @@ class Bridge { this.deleteButton = null; this.clickOnBtn = false; this.quantaToolbar = null; + this.currentPathname = + typeof window !== 'undefined' ? window.location.pathname : null; this.init(); } @@ -20,11 +22,19 @@ class Bridge { } if (window.self !== window.top) { - this.navigationHandler = (event) => { - window.parent.postMessage( - { type: 'URL_CHANGE', url: event.destination.url }, - this.adminOrigin, - ); + // Handle URL changes generically (no chromium-specific code here) + this.navigationHandler = (e) => { + const newPathname = new URL(e.destination.url).pathname; + if ( + newPathname !== this.currentPathname || + this.currentPathname === null + ) { + this.currentUrl = newPathname; + window.parent.postMessage( + { type: 'URL_CHANGE', url: e.destination.url }, + this.adminOrigin, + ); + } }; // Ensure we don't add multiple listeners @@ -214,6 +224,12 @@ class Bridge { window.addEventListener('message', this.messageHandler); } + /** + * Checks if an element is visible in the viewport + * @param {} el + * @param {} partiallyVisible + * @returns boolean - true if the element is visible in the viewport + */ elementIsVisibleInViewport(el, partiallyVisible = false) { const { top, left, bottom, right } = el.getBoundingClientRect(); const { innerHeight, innerWidth } = window;