@redneckz/wildless-cms-uni-blocks 0.8.8 → 0.8.9

package/bundle/bundle.umd.js

@@ -290,7 +290,6 @@
     };
 
     class EventBus {
-        static inst = new EventBus();
         subscribers = {};
         subjectsStateMap = {};
         subscribe(type, listener) {
@@ -318,6 +317,8 @@
         }
     }
 
+    const defaultEventBus = new EventBus();
+
     const SENSITIVITY_SCALE = 10;
     function useIntersectionObserver(observerCallback, { sensitivity, rootRef } = {}) {
         const ref = useRef(null);
@@ -342,55 +343,17 @@
             .concat(1);
     }
 
-    const normalizeAnchor = (rawAnchor) => rawAnchor?.replace('#', '') || '';
-    const getURLWithAnchor = (rawAnchor) => `${globalThis.location?.pathname}#${normalizeAnchor(rawAnchor)}`;
-    class BlockRouter {
-        static inst = new BlockRouter();
-        eventBus = new EventBus();
-        constructor() {
-            const anchor = normalizeAnchor(globalThis.location?.hash);
-            if (anchor) {
-                this.eventBus.subject('goto', { anchor });
-            }
-        }
-        goto(rawAnchor) {
-            const anchor = normalizeAnchor(rawAnchor);
-            if (anchor) {
-                this.push(anchor);
-                this.eventBus.fire('goto', { anchor });
-            }
-        }
-        push(rawAnchor) {
-            globalThis.history?.pushState(null, '', getURLWithAnchor(rawAnchor));
-        }
-        replace(rawAnchor) {
-            globalThis.history?.replaceState(null, '', getURLWithAnchor(rawAnchor));
-        }
-        reset() {
-            globalThis.history?.replaceState(null, '', getURLWithAnchor());
-        }
-    }
+    const blockRouterEventBus = new EventBus();
 
-    function useBlockIntersectionObserver(block, router = BlockRouter.inst) {
+    function useBlockIntersectionObserver(block) {
         const observerCallback = useCallback((entries) => {
             if (!block || !entries?.length) {
                 return;
             }
             const intersection = entries[entries.length - 1];
-            router.eventBus.fire('intersection', { block, intersection });
-        }, [block, router]);
-        const ref = useIntersectionObserver(observerCallback, { sensitivity: 1 });
-        useEffect(() => {
-            if (!ref.current) {
-                return undefined;
-            }
-            return router.eventBus.subscribe('goto', ({ anchor }) => {
-                if (ref.current && block?.anchor === anchor) {
-                    ref.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
-                }
-            });
-        }, [block, router]);
-        return ref;
+            blockRouterEventBus.fire('intersection', { block, intersection });
+        }, [block]);
+        return useIntersectionObserver(observerCallback, { sensitivity: 1 });
     }
 
     const blockStyles = {
@@ -404,7 +367,7 @@
         const Tag = tag;
         const ref = useBlockIntersectionObserver(block);
         const [isVisible, setVisible] = useState(true);
-        useEffect(() => EventBus.inst.subscribe('tab', (event) => {
+        useEffect(() => defaultEventBus.subscribe('tab', (event) => {
             if (event.type === 'group') {
                 const hasSettings = block?.labels?.length || block?.anchor;
                 setVisible(event.label ? !hasSettings || Boolean(block?.labels?.includes(event.label)) : true);
@@ -651,8 +614,14 @@
         },
     ];
 
-    function useBlockRouter() {
-        return BlockRouter.inst;
+    const normalizeAnchor = (anchor) => anchor?.replace('#', '') || '';
+    function gotoBlock(router, anchor) {
+        router.replace(`#${normalizeAnchor(anchor)}`);
+    }
+    function trackBlock(router, block) {
+        router.replace(`#${normalizeAnchor(block?.anchor)}`, undefined, {
+            scroll: false,
+        });
     }
 
     const isURL = (href) => Boolean(href?.includes('//'));
@@ -699,7 +668,6 @@
 
     function useLink(isRemote) {
         const router = useRouter();
-        const blockRouter = useBlockRouter();
         return (props) => ({
             ...props,
             href: adjustHref(props.href),
@@ -722,7 +690,7 @@
                 // Client routing
                 ev?.preventDefault();
                 if (isHash(href)) {
-                    blockRouter.goto(href);
+                    gotoBlock(router, href);
                 }
                 else if (href) {
                     router.push(href);
@@ -1260,7 +1228,7 @@
 
     const BusinessBlock = JSX(({ className = '', title, cards, ...rest }) => (jsxs(BlockWrapper, { className: `p-12 pb-9 ${className}`, ...rest, children: [jsx(Heading, { headingType: "h3", title: title, className: "text-center mb-8" }), jsx("div", { className: "flex gap-5", children: cards?.length ? cards.map((_, i) => jsx(BusinessCard, { ..._ }, String(i))) : null })] })));
 
-    const ButtonBlock = JSX(({ button, ...rest }) => (jsx(BlockWrapper, { ...rest, children: renderButtonsSection([button]) })));
+    const ButtonBlock = JSX(({ button, className, ...rest }) => (jsx(BlockWrapper, { className: style('!bg-transparent', className), ...rest, children: renderButtonsSection([button]) })));
 
     const useCarouselControls = (props) => {
         const { itemCount, visibleItemCount, isCyclic } = props;
@@ -4121,7 +4089,7 @@
     const Tabs = JSX((props) => {
         const { className = '', tabs, showCounter, isSticky, tabsMode, ...rest } = props;
         const [currentTab, setCurrentTab] = useState(tabs ? tabs[0] : undefined);
-        useEffect(() => EventBus.inst.subscribe('tab', (event) => {
+        useEffect(() => defaultEventBus.subscribe('tab', (event) => {
             const tab = tabs?.find(checkTab(event));
             if (event.type === 'link' && tab) {
                 setCurrentTab(tab);
@@ -4129,11 +4097,11 @@
             return [];
         }), [tabs]);
         useEffect(() => currentTab?.type === 'group'
-            ? EventBus.inst.subject('tab', { type: currentTab.type, label: currentTab.ref })
+            ? defaultEventBus.subject('tab', { type: currentTab.type, label: currentTab.ref })
             : undefined, [currentTab]);
         const handleClick = useCallback((selectedTab) => {
             if (selectedTab?.type === 'group') {
-                EventBus.inst.fire('tab', { type: selectedTab.type, label: selectedTab.ref });
+                defaultEventBus.fire('tab', { type: selectedTab.type, label: selectedTab.ref });
             }
             setCurrentTab(selectedTab);
         }, []);
@@ -4459,25 +4427,22 @@
     }
 
     const isScrolledEnough = () => globalThis.scrollY > (globalThis.innerHeight * 3) / 4;
-    function useBlockRouterProvider(router = BlockRouter.inst, scrollTarget = globalThis) {
+    function useBlockRouterProvider(scrollTarget = globalThis) {
+        const router = useRouter();
         const intersectionsMapRef = useRef(new Map());
-        useEffect(() => router.eventBus.subscribe('intersection', ({ block, intersection }) => {
+        useEffect(() => blockRouterEventBus.subscribe('intersection', ({ block, intersection }) => {
             if (intersectionsMapRef.current) {
                 intersectionsMapRef.current.set(block, intersection);
             }
-        }), [router]);
+        }), []);
         useEffect(() => {
             const handleScroll = debounce(() => {
-                if (!isScrolledEnough()) {
-                    router.reset();
-                    return;
+                if (isScrolledEnough()) {
+                    const activeBlock = findActiveBlock([...(intersectionsMapRef.current || [])]);
+                    trackBlock(router, activeBlock);
                 }
-                const activeBlock = findActiveBlock([...(intersectionsMapRef.current || [])]);
-                if (activeBlock?.anchor) {
-                    router.replace(activeBlock.anchor);
-                }
-                else if (!activeBlock) {
-                    router.reset();
+                else {
+                    trackBlock(router);
                 }
             }, 100);
             scrollTarget.addEventListener('scroll', handleScroll);
@@ -4556,7 +4521,7 @@
         return (jsx("div", { className: "flex items-end absolute bottom-0 right-0 h-full pointer-events-none", children: jsx(LikeControl, { className: "rounded-tl-lg sticky bottom-0 pointer-events-auto" }) }));
     }
 
-    const packageVersion = "0.8.8";
+    const packageVersion = "0.8.9";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;