@gxpl/sdk 0.0.30 → 0.0.32

package/lib/sdk-nextjs/components/Article.js

@@ -7,9 +7,6 @@ exports.Article = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const style_1 = __importDefault(require("styled-jsx/style"));
-const Section_1 = require("./Section/Section");
-const Item_1 = require("./items/Item");
-const useArticleRectObserver_1 = require("../utils/ArticleRectManager/useArticleRectObserver");
 const ArticleRectContext_1 = require("../provider/ArticleRectContext");
 const Scene_1 = require("./Scene");
 const InteractionsContext_1 = require("../provider/InteractionsContext");
@@ -17,24 +14,15 @@ const WebGLContextManagerContext_1 = require("../provider/WebGLContextManagerCon
 const effects_1 = require("@cntrl-site/effects");
 const KeyframesContext_1 = require("../provider/KeyframesContext");
 const Keyframes_1 = require("../provider/Keyframes");
+const Sections_1 = require("./Section/Sections");
+const useArticleRectObserver_1 = require("../utils/ArticleRectManager/useArticleRectObserver");
 const Article = ({ article, styles, keyframes }) => {
+    const articleRectObserver = (0, useArticleRectObserver_1.useArticleRectObserver)();
     const sceneRef = (0, react_1.useRef)(null);
-    const articleRectObserver = (0, useArticleRectObserver_1.useArticleRectObserver)(sceneRef.current);
     const id = (0, react_1.useId)();
-    const [articleHeight, setArticleHeight] = (0, react_1.useState)(1);
     const keyframesRepo = (0, react_1.useMemo)(() => new Keyframes_1.Keyframes(keyframes), [keyframes]);
-    (0, react_1.useEffect)(() => {
-        if (!articleRectObserver)
-            return;
-        return articleRectObserver.on('resize', (rect) => {
-            setArticleHeight(rect.height / rect.width);
-        });
-    }, [articleRectObserver]);
     const webglContextManager = (0, react_1.useMemo)(() => new effects_1.WebGLContextManager(), []);
-    return ((0, jsx_runtime_1.jsx)(ArticleRectContext_1.ArticleRectContext.Provider, { value: articleRectObserver, children: (0, jsx_runtime_1.jsxs)(InteractionsContext_1.InteractionsProvider, { article: article, children: [(0, jsx_runtime_1.jsx)(KeyframesContext_1.KeyframesContext.Provider, { value: keyframesRepo, children: (0, jsx_runtime_1.jsx)(Scene_1.Scene, { id: article.id, styles: styles, elRef: sceneRef, children: (0, jsx_runtime_1.jsx)(WebGLContextManagerContext_1.WebglContextManagerContext.Provider, { value: webglContextManager, children: article.sections.map((section, i) => {
-                                const data = {};
-                                return ((0, jsx_runtime_1.jsx)(Section_1.Section, { section: section, data: data, children: article.sections[i].items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: section.id, articleHeight: articleHeight }, item.id))) }, section.id));
-                            }) }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+    return ((0, jsx_runtime_1.jsx)(ArticleRectContext_1.ArticleRectContext.Provider, { value: articleRectObserver, children: (0, jsx_runtime_1.jsxs)(InteractionsContext_1.InteractionsProvider, { article: article, children: [(0, jsx_runtime_1.jsx)(KeyframesContext_1.KeyframesContext.Provider, { value: keyframesRepo, children: (0, jsx_runtime_1.jsx)(Scene_1.Scene, { elRef: sceneRef, id: article.id, styles: styles, children: (0, jsx_runtime_1.jsx)(WebGLContextManagerContext_1.WebglContextManagerContext.Provider, { value: webglContextManager, children: (0, jsx_runtime_1.jsx)(Sections_1.Sections, { article: article, container: sceneRef.current }) }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
        .article {
          position: relative;
          overflow: clip;

package/lib/sdk-nextjs/components/Scene.js

@@ -135,7 +135,7 @@ const Scene = ({ children, id, styles: sceneStyles, elRef }) => {
     }, [isTransitioning, actorRef, id]);
     const isFixed = isControlledTransitioning || isSettling || isInstantTransitioning;
     const transitionStyle = type === 'slide' ? 'transform' : 'opacity';
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { ref: elRef, className: "article-wrapper", style: Object.assign(Object.assign({}, layoutDeviationStyle), { width: '100vw', height: '100%', position: isFixed ? 'fixed' : 'absolute', transform: sceneStyles && (sceneStyles.x !== 0 || sceneStyles.y !== 0) ? `translate(${sceneStyles.x}px, ${sceneStyles.y}px)` : 'none', transition: isSettling || isInstantTransitioning ? `${transitionStyle} 0.25s ease-out` : 'none', overflowY: isFixed ? 'hidden' : 'scroll', opacity: (_a = sceneStyles === null || sceneStyles === void 0 ? void 0 : sceneStyles.opacity) !== null && _a !== void 0 ? _a : 1, 'WebkitOverflowScrolling': 'touch' // prevent glitch on Safari (fast scroll to top/bottom sides)
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { ref: elRef, className: "article-wrapper", style: Object.assign(Object.assign({}, layoutDeviationStyle), { width: '100vw', height: '100%', position: isFixed ? 'fixed' : 'absolute', transform: sceneStyles && (sceneStyles.x !== 0 || sceneStyles.y !== 0) ? `translate(${sceneStyles.x}px, ${sceneStyles.y}px)` : 'none', transition: isSettling || isInstantTransitioning ? `${transitionStyle} 0.25s ease-out` : 'none', overflowY: isFixed ? 'hidden' : 'scroll', overflowX: 'clip', opacity: (_a = sceneStyles === null || sceneStyles === void 0 ? void 0 : sceneStyles.opacity) !== null && _a !== void 0 ? _a : 1, 'WebkitOverflowScrolling': 'touch' // prevent glitch on Safari (fast scroll to top/bottom sides)
              }), children: children }) }));
 };
 exports.Scene = Scene;
@@ -159,6 +159,6 @@ function canTransition(direction, el) {
         case 'west':
             return el.scrollLeft === 0;
         case 'east':
-            return el.scrollLeft + el.clientWidth === el.scrollWidth;
+            return el.scrollLeft + el.clientWidth === window.innerWidth;
     }
 }

package/lib/sdk-nextjs/components/Section/Sections.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { Article as TArticle } from '../../../sdk/types/article/Article';
+interface Props {
+    article: TArticle;
+    container: HTMLElement | null;
+}
+export declare const Sections: FC<Props>;
+export {};

package/lib/sdk-nextjs/components/Section/Sections.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sections = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ArticleRectContext_1 = require("../../provider/ArticleRectContext");
+const Section_1 = require("./Section");
+const Item_1 = require("../items/Item");
+const Sections = ({ article, container }) => {
+    const articleRectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
+    const [articleHeight, setArticleHeight] = (0, react_1.useState)(1);
+    (0, react_1.useEffect)(() => {
+        if (!articleRectObserver || !container)
+            return;
+        const rect = container.getBoundingClientRect();
+        setArticleHeight(container.scrollHeight / rect.width);
+        return articleRectObserver.init(container);
+    }, [articleRectObserver || !container]);
+    (0, react_1.useEffect)(() => {
+        if (!articleRectObserver || !container)
+            return;
+        return articleRectObserver.on('resize', (rect) => {
+            setArticleHeight(container.scrollHeight / rect.width);
+        });
+    }, [articleRectObserver, container]);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: article.sections.map((section, i) => {
+            const data = {};
+            return ((0, jsx_runtime_1.jsx)(Section_1.Section, { section: section, data: data, children: article.sections[i].items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: section.id, articleHeight: articleHeight }, item.id))) }, section.id));
+        }) }));
+};
+exports.Sections = Sections;

package/lib/sdk-nextjs/components/fixedLayers/FixedLayer.js

@@ -7,19 +7,19 @@ exports.FixedLayer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ArticleRectContext_1 = require("../../provider/ArticleRectContext");
-const useArticleRectObserver_1 = require("../../utils/ArticleRectManager/useArticleRectObserver");
 const WebGLContextManagerContext_1 = require("../../provider/WebGLContextManagerContext");
 const effects_1 = require("@cntrl-site/effects");
 const style_1 = __importDefault(require("styled-jsx/style"));
 const Item_1 = require("../items/Item");
 const FixedLayerTransitionsProvider_1 = require("../../fixedLayers/FixedLayerTransitionsProvider");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
+const useArticleRectObserver_1 = require("../../utils/ArticleRectManager/useArticleRectObserver");
 const FixedLayer = ({ layer, type }) => {
     const [fixedLayerRef, setFixedLayerRef] = (0, react_1.useState)(null);
     const { exemplary } = (0, useCntrlContext_1.useCntrlContext)();
     const id = (0, react_1.useId)();
     const [deviation, setDeviation] = (0, react_1.useState)(1);
-    const articleRectObserver = (0, useArticleRectObserver_1.useArticleRectObserver)(fixedLayerRef);
+    const articleRectObserver = (0, useArticleRectObserver_1.useArticleRectObserver)();
     const webglContextManager = (0, react_1.useMemo)(() => new effects_1.WebGLContextManager(), []);
     (0, react_1.useEffect)(() => {
         if (!fixedLayerRef)
@@ -32,7 +32,7 @@ const FixedLayer = ({ layer, type }) => {
         });
         observer.observe(fixedLayerRef);
         return () => observer.unobserve(fixedLayerRef);
-    }, [articleRectObserver, fixedLayerRef, exemplary]);
+    }, [fixedLayerRef, exemplary]);
     const layoutDeviationStyle = { '--layout-deviation': deviation };
     return ((0, jsx_runtime_1.jsx)(ArticleRectContext_1.ArticleRectContext.Provider, { value: articleRectObserver, children: (0, jsx_runtime_1.jsx)(FixedLayerTransitionsProvider_1.FixedLayerTransitionsProvider, { fixedLayer: layer, children: (0, jsx_runtime_1.jsxs)(WebGLContextManagerContext_1.WebglContextManagerContext.Provider, { value: webglContextManager, children: [(0, jsx_runtime_1.jsx)("div", { className: `fixed-layer-${type}`, ref: setFixedLayerRef, style: layoutDeviationStyle, children: layer.items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { isInFixedLayer: true, item: item, sectionId: layer.id }, item.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
           .fixed-layer-${type} {

package/lib/sdk-nextjs/utils/ArticleRectManager/ArticleRectObserver.js

@@ -63,7 +63,7 @@ class ArticleRectObserver extends EventEmitter_1.EventEmitter {
             if (!el)
                 continue;
             const rect = el.getBoundingClientRect();
-            this.sectionsScrollMap.set(sectionId, rect.top - parentBoundary.top);
+            this.sectionsScrollMap.set(sectionId, rect.top - parentBoundary.top + this.parent.scrollTop);
         }
         this.isInitialized = true;
         this.emit('init', undefined);
@@ -105,7 +105,7 @@ class ArticleRectObserver extends EventEmitter_1.EventEmitter {
             if (!el)
                 continue;
             const rect = el.getBoundingClientRect();
-            this.sectionsScrollMap.set(sectionId, rect.top - parentBoundary.top);
+            this.sectionsScrollMap.set(sectionId, rect.top - parentBoundary.top - this.parent.scrollTop);
         }
     }
     ;

package/lib/sdk-nextjs/utils/ArticleRectManager/useArticleRectObserver.js

@@ -8,11 +8,6 @@ const useArticleRectObserver = (el) => {
     (0, react_1.useEffect)(() => {
         setArticleRectObserver(new ArticleRectObserver_1.ArticleRectObserver());
     }, []);
-    (0, react_1.useEffect)(() => {
-        if (!el || !articleRectObserver)
-            return;
-        return articleRectObserver.init(el);
-    }, [el, articleRectObserver]);
     return articleRectObserver;
 };
 exports.useArticleRectObserver = useArticleRectObserver;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gxpl/sdk",
-  "version": "0.0.30",
+  "version": "0.0.32",
   "description": "Generic SDK for use in public websites.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",