@cntrl-site/sdk-nextjs 0.4.2 → 0.5.0

package/lib/common/useKeyframeValue.js

@@ -38,9 +38,6 @@ const useKeyframeValue = (item, itemParamsGetter, animatorGetter, deps = emptyDe
         }));
         return new Animator_1.Animator(animationData);
     }, [keyframes, layoutId]);
-    (0, react_1.useEffect)(() => {
-        setAdjustedValue(paramValue);
-    }, [paramValue]);
     (0, react_1.useEffect)(() => {
         if (!animator || !articleRectObserver)
             return;

package/lib/components/Item.js

@@ -15,6 +15,8 @@ const useCntrlContext_1 = require("../provider/useCntrlContext");
 const useItemAngle_1 = require("./useItemAngle");
 const useItemPosition_1 = require("./useItemPosition");
 const useItemDimensions_1 = require("./useItemDimensions");
+const useItemSticky_1 = require("./items/useItemSticky");
+const castObject_1 = require("../utils/castObject");
 const itemsMap = {
     [sdk_1.ArticleItemType.Rectangle]: RectangleItem_1.RectangleItem,
     [sdk_1.ArticleItemType.Image]: ImageItem_1.ImageItem,
@@ -28,7 +30,10 @@ const noop = () => null;
 const Item = ({ item }) => {
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const angle = (0, useItemAngle_1.useItemAngle)(item);
-    const { top, left } = (0, useItemPosition_1.useItemPosition)(item);
+    const position = (0, useItemPosition_1.useItemPosition)(item);
+    const ref = (0, react_1.useRef)(null);
+    const [parentOffsetTop, setParentOffsetTop] = (0, react_1.useState)(0);
+    const { top, isFixed } = (0, useItemSticky_1.useItemSticky)(position.top, parentOffsetTop, item);
     const { width, height } = (0, useItemDimensions_1.useItemDimensions)(item);
     const layoutValues = [item.area];
     const isInitialRef = (0, react_1.useRef)(true);
@@ -40,19 +45,25 @@ const Item = ({ item }) => {
     (0, react_1.useEffect)(() => {
         isInitialRef.current = false;
     }, []);
+    (0, react_1.useEffect)(() => {
+        if (!ref.current)
+            return;
+        const offsetParent = (0, castObject_1.castObject)(ref.current.offsetParent, HTMLElement);
+        setParentOffsetTop(offsetParent.offsetTop / window.innerWidth);
+    }, []);
     const styles = {
         transform: `rotate(${angle}deg)`,
-        left: `${left * 100}vw`,
+        left: `${position.left * 100}vw`,
         width: `${sizingAxis.x === sdk_1.ArticleItemSizingType.Manual ? `${width * 100}vw` : 'max-content'}`,
         height: `${sizingAxis.y === sdk_1.ArticleItemSizingType.Manual ? `${height * 100}vw` : 'unset'}`,
         top
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: isInitialRef.current ? {} : styles, children: [(0, jsx_runtime_1.jsx)(ItemComponent, { item: item }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
+    return ((0, jsx_runtime_1.jsxs)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, ref: ref, style: isInitialRef.current ? {} : { ...styles, position: isFixed ? 'fixed' : 'absolute' }, children: [(0, jsx_runtime_1.jsx)(ItemComponent, { item: item }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area]) => (`
            .item-${item.id} {
               position: absolute;
               z-index: ${area.zIndex};
-              top: ${(0, useItemPosition_1.getItemTopStyle)(area.top, area.anchorSide)};
+              top: ${(0, useItemSticky_1.getItemTopStyle)(area.top, area.anchorSide)};
               left: ${area.left * 100}vw;
               width: ${sizingAxis.x === sdk_1.ArticleItemSizingType.Manual ? `${area.width * 100}vw` : 'max-content'};
               height: ${sizingAxis.y === sdk_1.ArticleItemSizingType.Manual ? `${area.height * 100}vw` : 'unset'};

package/lib/components/items/useItemSticky.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getItemTopStyle = exports.useItemSticky = void 0;
+const react_1 = require("react");
+const sdk_1 = require("@cntrl-site/sdk");
+const StickyManager_1 = require("../../utils/StickyManager/StickyManager");
+const useCurrentLayout_1 = require("../../common/useCurrentLayout");
+const ArticleRectContext_1 = require("../../provider/ArticleRectContext");
+const useItemSticky = (top, parentOffsetTop, item) => {
+    const [isFixed, setIsFixed] = (0, react_1.useState)(false);
+    const [adjustedTop, setAdjustedTop] = (0, react_1.useState)(top);
+    const articleRectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
+    const layoutId = (0, useCurrentLayout_1.useCurrentLayout)();
+    const sticky = (0, react_1.useMemo)(() => item.layoutParams[layoutId].sticky, [layoutId]);
+    const stickyManager = (0, react_1.useMemo)(() => new StickyManager_1.StickyManager(sticky), []);
+    const handleSticky = (0, react_1.useCallback)((scroll) => {
+        setIsFixed(stickyManager.getIsSticky(scroll));
+        setAdjustedTop(stickyManager.getPosition(scroll, top, parentOffsetTop));
+    }, [top, stickyManager]);
+    (0, react_1.useEffect)(() => {
+        if (!articleRectObserver || !sticky)
+            return;
+        return articleRectObserver.on('scroll', () => {
+            handleSticky(articleRectObserver.scroll);
+        });
+    }, [handleSticky, articleRectObserver, sticky]);
+    return {
+        isFixed,
+        top: sticky ? `${adjustedTop * 100}vw` : getItemTopStyle(adjustedTop, layoutId ? item.area[layoutId].anchorSide : sdk_1.AnchorSide.Top)
+    };
+};
+exports.useItemSticky = useItemSticky;
+function getItemTopStyle(top, anchorSide) {
+    const defaultValue = `${top * 100}vw`;
+    if (!anchorSide)
+        return defaultValue;
+    switch (anchorSide) {
+        case sdk_1.AnchorSide.Top:
+            return defaultValue;
+        case sdk_1.AnchorSide.Center:
+            return `calc(50% + ${top * 100}vw)`;
+        case sdk_1.AnchorSide.Bottom:
+            return `calc(100% + ${top * 100}vw)`;
+    }
+}
+exports.getItemTopStyle = getItemTopStyle;

package/lib/components/useItemPosition.js

@@ -1,34 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getItemTopStyle = exports.useItemPosition = void 0;
-const sdk_1 = require("@cntrl-site/sdk");
+exports.useItemPosition = void 0;
 const useKeyframeValue_1 = require("../common/useKeyframeValue");
 const useCurrentLayout_1 = require("../common/useCurrentLayout");
-const defaultArea = {
-    left: 0,
-    top: 0,
-    width: 0,
-    height: 0,
-    angle: 0,
-    zIndex: 0
-};
 const useItemPosition = (item) => {
     const layoutId = (0, useCurrentLayout_1.useCurrentLayout)();
     const { top, left } = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => item.area[layoutId], (animator, scroll, value) => animator.getPositions(value, scroll), [layoutId]);
-    return { top: getItemTopStyle(top, layoutId ? item.area[layoutId].anchorSide : sdk_1.AnchorSide.Top), left };
+    return { top, left };
 };
 exports.useItemPosition = useItemPosition;
-function getItemTopStyle(top, anchorSide) {
-    const defaultValue = `${top * 100}vw`;
-    if (!anchorSide)
-        return defaultValue;
-    switch (anchorSide) {
-        case sdk_1.AnchorSide.Top:
-            return defaultValue;
-        case sdk_1.AnchorSide.Center:
-            return `calc(50% + ${top * 100}vw)`;
-        case sdk_1.AnchorSide.Bottom:
-            return `calc(100% + ${top * 100}vw)`;
-    }
-}
-exports.getItemTopStyle = getItemTopStyle;

package/lib/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CntrlProvider = exports.YoutubeEmbedItem = exports.VimeoEmbedItem = exports.LayoutStyle = exports.VideoItem = exports.RichTextItem = exports.RectangleItem = exports.ImageItem = exports.Item = exports.Section = exports.Article = exports.Head = exports.Page = exports.RichTextConverter = exports.cntrlSdkContext = void 0;
+exports.useCntrlContext = exports.CntrlProvider = exports.YoutubeEmbedItem = exports.VimeoEmbedItem = exports.LayoutStyle = exports.VideoItem = exports.RichTextItem = exports.RectangleItem = exports.ImageItem = exports.Item = exports.Section = exports.Article = exports.Head = exports.Page = exports.RichTextConverter = exports.cntrlSdkContext = void 0;
 var defaultContext_1 = require("./provider/defaultContext");
 Object.defineProperty(exports, "cntrlSdkContext", { enumerable: true, get: function () { return defaultContext_1.cntrlSdkContext; } });
 __exportStar(require("@cntrl-site/sdk"), exports);
@@ -47,3 +47,5 @@ Object.defineProperty(exports, "YoutubeEmbedItem", { enumerable: true, get: func
 // custom items
 var CntrlProvider_1 = require("./provider/CntrlProvider");
 Object.defineProperty(exports, "CntrlProvider", { enumerable: true, get: function () { return CntrlProvider_1.CntrlProvider; } });
+var useCntrlContext_1 = require("./provider/useCntrlContext");
+Object.defineProperty(exports, "useCntrlContext", { enumerable: true, get: function () { return useCntrlContext_1.useCntrlContext; } });

package/lib/utils/StickyManager/StickyManager.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StickyManager = void 0;
+class StickyManager {
+    constructor(sticky) {
+        this.sticky = sticky;
+    }
+    getIsSticky(scroll) {
+        if (!this.sticky)
+            return false;
+        return (this.sticky.from <= scroll) && (!this.sticky.to || this.sticky.to >= scroll);
+    }
+    getPosition(scroll, top, offsetTop) {
+        if (!this.sticky)
+            return top;
+        if (this.getIsSticky(scroll)) {
+            return top - this.sticky.from + offsetTop;
+        }
+        if (this.sticky.to !== undefined && this.sticky.to <= scroll) {
+            return top + this.sticky.to - this.sticky.from;
+        }
+        return top;
+    }
+}
+exports.StickyManager = StickyManager;

package/lib/utils/castObject.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.castObject = void 0;
+function castObject(value, ctor) {
+    if (value instanceof ctor) {
+        return value;
+    }
+    throw new TypeError(`passed value "${String(value)}" is not instance of ${ctor.name}`);
+}
+exports.castObject = castObject;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.js",
@@ -21,7 +21,7 @@
   },
   "homepage": "https://github.com/cntrl-site/sdk-nextjs#readme",
   "dependencies": {
-    "@cntrl-site/sdk": "^0.4.2",
+    "@cntrl-site/sdk": "^0.4.3",
     "html-react-parser": "^3.0.1",
     "styled-jsx": "^5.0.2"
   },

package/src/common/useKeyframeValue.ts

@@ -46,10 +46,6 @@ export const useKeyframeValue = <T>(
     return new Animator(animationData);
   }, [keyframes, layoutId]);
 
-  useEffect(() => {
-    setAdjustedValue(paramValue);
-  }, [paramValue]);
-
   useEffect(() => {
     if (!animator || !articleRectObserver) return;
     return articleRectObserver.on('resize', () => {

package/src/components/Item.tsx

@@ -1,4 +1,4 @@
-import { ComponentType, FC, useEffect, useRef } from 'react';
+import { ComponentType, FC, useEffect, useRef, useState } from 'react';
 import {
   getLayoutStyles,
   ArticleItemType,
@@ -14,8 +14,10 @@ import { YoutubeEmbedItem } from './items/YoutubeEmbed';
 import { CustomItem } from './items/CustomItem';
 import { useCntrlContext } from '../provider/useCntrlContext';
 import { useItemAngle } from './useItemAngle';
-import { getItemTopStyle, useItemPosition } from './useItemPosition';
+import { useItemPosition } from './useItemPosition';
 import { useItemDimensions } from './useItemDimensions';
+import { getItemTopStyle, useItemSticky } from './items/useItemSticky';
+import { castObject } from '../utils/castObject';
 
 export interface ItemProps<I extends TArticleItemAny> {
   item: I;
@@ -36,7 +38,10 @@ const noop = () => null;
 export const Item: FC<ItemProps<TArticleItemAny>> = ({ item }) => {
   const { layouts } = useCntrlContext();
   const angle = useItemAngle(item);
-  const { top, left } = useItemPosition(item);
+  const position = useItemPosition(item);
+  const ref = useRef<HTMLDivElement | null>(null);
+  const [parentOffsetTop, setParentOffsetTop] = useState(0);
+  const { top, isFixed } = useItemSticky(position.top, parentOffsetTop, item);
   const { width, height } = useItemDimensions(item);
   const layoutValues: Record<string, any>[] = [item.area];
   const isInitialRef = useRef(true);
@@ -51,9 +56,15 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item }) => {
     isInitialRef.current = false;
   }, []);
 
+  useEffect(() => {
+    if (!ref.current) return;
+    const offsetParent = castObject(ref.current.offsetParent, HTMLElement);
+    setParentOffsetTop(offsetParent.offsetTop / window.innerWidth);
+  }, []);
+
   const styles = {
     transform: `rotate(${angle}deg)`,
-    left: `${left * 100}vw`,
+    left: `${position.left * 100}vw`,
     width: `${sizingAxis.x === SizingType.Manual ? `${width * 100}vw` : 'max-content'}`,
     height: `${sizingAxis.y === SizingType.Manual ? `${height * 100}vw` : 'unset'}`,
     top
@@ -63,7 +74,8 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item }) => {
     <div
       suppressHydrationWarning={true}
       className={`item-${item.id}`}
-      style={isInitialRef.current ? {} : styles }
+      ref={ref}
+      style={isInitialRef.current ? {} : { ...styles, position: isFixed ? 'fixed': 'absolute' } }
     >
       <ItemComponent item={item} />
       <style jsx>{`

package/src/components/items/useItemSticky.ts

@@ -0,0 +1,47 @@
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { AnchorSide, TArticleItemAny } from '@cntrl-site/sdk';
+import { StickyManager } from '../../utils/StickyManager/StickyManager';
+import { useCurrentLayout } from '../../common/useCurrentLayout';
+import { ArticleRectContext } from '../../provider/ArticleRectContext';
+
+export const useItemSticky = (top: number, parentOffsetTop: number, item: TArticleItemAny) => {
+  const [isFixed, setIsFixed] = useState(false);
+  const [adjustedTop, setAdjustedTop] = useState(top);
+  const articleRectObserver = useContext(ArticleRectContext);
+  const layoutId = useCurrentLayout();
+  const sticky = useMemo(() => item.layoutParams[layoutId].sticky, [layoutId]);
+  const stickyManager = useMemo(() => new StickyManager(sticky), []);
+
+  const handleSticky = useCallback((scroll: number) => {
+    setIsFixed(stickyManager.getIsSticky(scroll));
+    setAdjustedTop(stickyManager.getPosition(
+      scroll,
+      top,
+      parentOffsetTop
+    ));
+  }, [top, stickyManager]);
+
+  useEffect(() => {
+    if (!articleRectObserver || !sticky) return;
+    return articleRectObserver.on('scroll', () => {
+      handleSticky(articleRectObserver.scroll);
+    });
+  }, [handleSticky, articleRectObserver, sticky]);
+  return {
+    isFixed,
+    top: sticky ? `${adjustedTop * 100}vw` : getItemTopStyle(adjustedTop, layoutId ? item.area[layoutId].anchorSide : AnchorSide.Top)
+  };
+};
+
+export function getItemTopStyle(top: number, anchorSide?: AnchorSide) {
+  const defaultValue = `${top * 100}vw`;
+  if (!anchorSide) return defaultValue;
+  switch (anchorSide) {
+    case AnchorSide.Top:
+      return defaultValue;
+    case AnchorSide.Center:
+      return `calc(50% + ${top * 100}vw)`;
+    case AnchorSide.Bottom:
+      return `calc(100% + ${top * 100}vw)`;
+  }
+}

package/src/components/useItemPosition.ts

@@ -1,36 +1,15 @@
-import { AnchorSide, TArticleItemAny } from '@cntrl-site/sdk';
+import { TArticleItemAny } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../common/useKeyframeValue';
 import { useCurrentLayout } from '../common/useCurrentLayout';
 
-const defaultArea = {
-  left: 0,
-  top: 0,
-  width: 0,
-  height: 0,
-  angle: 0,
-  zIndex: 0
-};
-
 export const useItemPosition = (item: TArticleItemAny) => {
-  const layoutId = useCurrentLayout()
+  const layoutId = useCurrentLayout();
   const { top, left } = useKeyframeValue<{ top: number; left: number }>(
     item,
     (item, layoutId) => item.area[layoutId],
     (animator, scroll, value) => animator.getPositions(value, scroll),
     [layoutId]
   );
-  return { top: getItemTopStyle(top, layoutId ? item.area[layoutId].anchorSide : AnchorSide.Top), left };
+  return { top, left };
 };
 
-export function getItemTopStyle(top: number, anchorSide?: AnchorSide) {
-  const defaultValue = `${top * 100}vw`;
-  if (!anchorSide) return defaultValue;
-  switch (anchorSide) {
-    case AnchorSide.Top:
-      return defaultValue;
-    case AnchorSide.Center:
-      return `calc(50% + ${top * 100}vw)`;
-    case AnchorSide.Bottom:
-      return `calc(100% + ${top * 100}vw)`;
-  }
-}

package/src/index.ts

@@ -19,3 +19,4 @@ export { YoutubeEmbedItem } from './components/items/YoutubeEmbed';
 // custom items
 export { CntrlProvider } from './provider/CntrlProvider';
 export type { CustomItemComponent } from './provider/CustomItemTypes';
+export { useCntrlContext } from './provider/useCntrlContext';

package/src/utils/StickyManager/StickyManager.ts

@@ -0,0 +1,23 @@
+export type TSticky = { from: number; to?: number; } | null;
+
+export class StickyManager {
+  constructor(
+    private sticky: TSticky
+  ) {}
+
+  getIsSticky(scroll: number): boolean {
+    if (!this.sticky) return false;
+    return (this.sticky.from <= scroll) && (!this.sticky.to || this.sticky.to >= scroll);
+  }
+
+  getPosition(scroll: number, top: number, offsetTop: number): number {
+    if (!this.sticky) return top;
+    if (this.getIsSticky(scroll)) {
+      return top - this.sticky.from + offsetTop;
+    }
+    if (this.sticky.to !== undefined && this.sticky.to <= scroll) {
+      return top + this.sticky.to - this.sticky.from;
+    }
+    return top;
+  }
+}

package/src/utils/castObject.ts

@@ -0,0 +1,10 @@
+type Ctor = {
+  new(...args: any): any;
+};
+
+export function castObject<O extends Ctor>(value: unknown, ctor: O): InstanceType<O> {
+  if (value instanceof ctor) {
+    return value;
+  }
+  throw new TypeError(`passed value "${String(value)}" is not instance of ${ctor.name}`);
+}