@redneckz/wildless-cms-uni-blocks 0.8.7 → 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;
@@ -3707,8 +3675,7 @@
         }
         // picture width = 242px. Text can overlay picture 20px deep. Outer paddings_x = 36px. 242-36-20 = 186px
         const benefitsWidth = image?.src ? 'max-w-[calc(100%-186px)]' : '100%';
-        return (jsx("div", { className: `z-10 grid grid-cols-[max-content_1fr] auto-rows-auto gap-x-6 gap-y-2.5 items-baseline
-        ${benefitsWidth}`, children: benefits.length ? benefits.map(renderBenefit) : null }));
+        return (jsx("div", { className: `z-10 grid grid-cols-[max-content_1fr] auto-rows-auto gap-x-6 gap-y-2.5 items-baseline ${benefitsWidth}`, children: benefits.length ? benefits.map(renderBenefit) : null }));
     }
 
     const PromoTile = JSX(({ className = '', title = 'Акции и спецпредложения', date, description, as, buttons = [], ...rest }) => (jsx(BlockWrapper, { className: style('p-9 box-border', className, getTileRightPadding(className), getTileMinHeight(className)), ...rest, children: jsx(BaseTile, { title: title ? (jsx(Headline, { className: "!p-0 max-w-[600px]", title: title, headlineVersion: getTileHeadingType(className), align: "text-left", as: as || 'h2' })) : null, buttons: renderButtonsSection(buttons), children: jsxs("div", { className: "mt-1.5", children: [date ? jsx("div", { className: "text-s mb-2", children: formatDate(date) }) : null, jsx("div", { className: "text-l", children: description })] }) }) })));
@@ -4122,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);
@@ -4130,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);
         }, []);
@@ -4333,9 +4300,9 @@
         secondary: 'bg-primary-main',
         'secondary-light': 'bg-primary-main/10',
     };
-    const TextBlock = JSX(({ className = '', title, description, blockVersion = 'primary', iconVersion, image, ...rest }) => {
+    const TextBlock = JSX(({ className = '', title, description, blockVersion = 'primary', iconVersion, image, __html, ...rest }) => {
         const isSecondaryBlock = blockVersion === 'secondary';
-        return (jsxs(BlockWrapper, { className: `px-9 py-4 flex gap-3 ${textBlockBack[blockVersion]} ${className}`, ...rest, children: [iconVersion === 'small' ? (jsx("div", { className: "mt-1", children: renderIcon(isSecondaryBlock) })) : null, iconVersion === 'big' ? renderImage(image) : null, jsxs("div", { children: [title ? renderTitle(title, isSecondaryBlock) : null, description ? (jsx("div", { className: "mt-1", children: renderDescription(description, isSecondaryBlock) })) : null] })] }));
+        return (jsxs(BlockWrapper, { className: `px-9 py-4 flex gap-3 ${textBlockBack[blockVersion]} ${className}`, ...rest, children: [iconVersion === 'small' ? (jsx("div", { className: "mt-1", children: renderIcon(isSecondaryBlock) })) : null, iconVersion === 'big' ? renderImage(image) : null, jsxs("div", { children: [title ? renderTitle(title, isSecondaryBlock) : null, description ? (jsx("div", { className: "mt-1", children: renderDescription(description, isSecondaryBlock) })) : null, __html ? jsx(RichText, { __html: __html }) : null] })] }));
     });
     const renderIcon = (isSecondaryBlock) => (jsx("div", { className: `rounded-full h-4 w-4 text-center text-xs-light ${isSecondaryBlock ? 'bg-white text-primary-main' : 'bg-primary-main text-white'}`, children: "i" }));
     const renderImage = (image) => (image?.src ? jsx(ImgInner, { image: image }) : null);
@@ -4460,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);
@@ -4557,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.7";
+    const packageVersion = "0.8.9";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;