@cntrl-site/sdk-nextjs 0.14.0 → 0.14.2

package/lib/components/Item.js

@@ -24,6 +24,8 @@ const ScaleAnchorMap_1 = require("../utils/ScaleAnchorMap");
 const useSectionHeightMap_1 = require("./useSectionHeightMap");
 const HoverStyles_1 = require("../utils/HoverStyles/HoverStyles");
 const getItemTopStyle_1 = require("../utils/getItemTopStyle");
+const useStickyItemTop_1 = require("./items/useStickyItemTop");
+const getAnchoredItemTop_1 = require("../utils/getAnchoredItemTop");
 const itemsMap = {
     [sdk_1.ArticleItemType.Rectangle]: RectangleItem_1.RectangleItem,
     [sdk_1.ArticleItemType.Image]: ImageItem_1.ImageItem,
@@ -41,6 +43,7 @@ const Item = ({ item, sectionId }) => {
     const { scale, scaleAnchor } = (0, useItemScale_1.useItemScale)(item, sectionId);
     const { top, left } = (0, useItemPosition_1.useItemPosition)(item, sectionId);
     const sectionHeight = (0, useSectionHeightMap_1.useSectionHeightData)(sectionId);
+    const stickyTop = (0, useStickyItemTop_1.useStickyItemTop)(item, sectionHeight, sectionId);
     const layout = (0, useCurrentLayout_1.useCurrentLayout)();
     const { width, height } = (0, useItemDimensions_1.useItemDimensions)(item, sectionId);
     const layoutValues = [item.area, item.hidden, item.state.hover];
@@ -72,6 +75,7 @@ const Item = ({ item, sectionId }) => {
         transformOrigin: ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor],
         width: `${sizingAxis.x === sdk_1.ArticleItemSizingType.Manual ? `${width * 100}vw` : 'max-content'}`,
         height: `${sizingAxis.y === sdk_1.ArticleItemSizingType.Manual ? `${height * 100}vw` : 'unset'}`,
+        top: stickyTop
     };
     return ((0, jsx_runtime_1.jsxs)("div", { className: `item-wrapper-${item.id}`, style: { top, left, ...(wrapperHeight ? { height: `${wrapperHeight * 100}vw` } : {}) }, children: [(0, jsx_runtime_1.jsx)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: isInitialRef.current ? {} : styles, children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, onResize: handleItemResize }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, hidden, hoverParams, sticky, sectionHeight, layoutParams]) => {
@@ -82,7 +86,7 @@ const Item = ({ item, sectionId }) => {
               width: ${sizingAxis.x === sdk_1.ArticleItemSizingType.Manual ? `${area.width * 100}vw` : 'max-content'};
               height: ${sizingAxis.y === sdk_1.ArticleItemSizingType.Manual ? `w${area.height * 100}vw` : 'unset'};
               transform: scale(${scale});
-              top: ${sticky ? `${getAnchoredItemTop(area.top - sticky.from, sectionHeight, area.anchorSide)}` : 0};
+              top: ${sticky ? `${(0, getAnchoredItemTop_1.getAnchoredItemTop)(area.top - sticky.from, sectionHeight, area.anchorSide)}` : 0};
               transform-origin: ${ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor]};
               pointer-events: auto;
               --webkit-backface-visibility: hidden;
@@ -112,16 +116,6 @@ const Item = ({ item, sectionId }) => {
       ` })] }));
 };
 exports.Item = Item;
-function getAnchoredItemTop(top, sectionHeight, anchorSide) {
-    const styleTop = `${top * 100}vw`;
-    switch (anchorSide) {
-        case sdk_1.AnchorSide.Center: return `calc(${styleTop} + ${sectionHeight} / 2)`;
-        case sdk_1.AnchorSide.Bottom: return `calc(${styleTop} + ${sectionHeight})`;
-        case sdk_1.AnchorSide.Top:
-        default:
-            return styleTop;
-    }
-}
 function getStickyItemWrapperHeight(sticky, itemHeight) {
     const end = sticky.to ?? 100;
     return end - sticky.from + itemHeight;

package/lib/components/items/useStickyItemTop.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStickyItemTop = void 0;
+const useCurrentLayout_1 = require("../../common/useCurrentLayout");
+const useKeyframeValue_1 = require("../../common/useKeyframeValue");
+const getAnchoredItemTop_1 = require("../../utils/getAnchoredItemTop");
+function useStickyItemTop(item, sectionHeightMap, sectionId) {
+    const layoutId = (0, useCurrentLayout_1.useCurrentLayout)();
+    const { top } = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => item.area[layoutId], (animator, scroll, value) => animator.getPositions(value, scroll), sectionId, [layoutId]);
+    const sticky = item.sticky[layoutId];
+    const sectionHeight = sectionHeightMap[layoutId];
+    return sticky ? `${(0, getAnchoredItemTop_1.getAnchoredItemTop)(top - sticky.from, sectionHeight, item.area[layoutId].anchorSide)}` : 0;
+}
+exports.useStickyItemTop = useStickyItemTop;

package/lib/utils/getAnchoredItemTop.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAnchoredItemTop = void 0;
+const sdk_1 = require("@cntrl-site/sdk");
+function getAnchoredItemTop(top, sectionHeight, anchorSide) {
+    const styleTop = `${top * 100}vw`;
+    switch (anchorSide) {
+        case sdk_1.AnchorSide.Center: return `calc(${styleTop} + ${sectionHeight} / 2)`;
+        case sdk_1.AnchorSide.Bottom: return `calc(${styleTop} + ${sectionHeight})`;
+        case sdk_1.AnchorSide.Top:
+        default:
+            return styleTop;
+    }
+}
+exports.getAnchoredItemTop = getAnchoredItemTop;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.14.0",
+  "version": "0.14.2",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.ts",
@@ -21,6 +21,7 @@
   },
   "homepage": "https://github.com/cntrl-site/sdk-nextjs#readme",
   "dependencies": {
+    "@types/vimeo__player": "^2.18.0",
     "@cntrl-site/sdk": "^1.1.8",
     "@vimeo/player": "^2.20.1",
     "html-react-parser": "^3.0.1",
@@ -39,7 +40,6 @@
     "@types/jest": "^29.2.5",
     "@types/node": "^18.11.7",
     "@types/react": "^18.0.15",
-    "@types/vimeo__player": "^2.18.0",
     "jest": "^29.3.1",
     "ts-jest": "^29.0.3",
     "typescript": "^4.9.5"

package/src/components/Item.tsx

@@ -26,6 +26,8 @@ import { ScaleAnchorMap } from '../utils/ScaleAnchorMap';
 import { useSectionHeightData } from './useSectionHeightMap';
 import { getHoverStyles, getTransitions } from '../utils/HoverStyles/HoverStyles';
 import { getItemTopStyle } from '../utils/getItemTopStyle';
+import { useStickyItemTop } from './items/useStickyItemTop';
+import { getAnchoredItemTop } from '../utils/getAnchoredItemTop';
 
 export interface ItemProps<I extends TArticleItemAny> {
   item: I;
@@ -52,6 +54,7 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
   const { scale, scaleAnchor } = useItemScale(item, sectionId);
   const { top, left } = useItemPosition(item, sectionId);
   const sectionHeight = useSectionHeightData(sectionId);
+  const stickyTop = useStickyItemTop(item, sectionHeight, sectionId);
   const layout = useCurrentLayout();
   const { width, height } = useItemDimensions(item, sectionId);
   const layoutValues: Record<string, any>[] = [item.area, item.hidden, item.state.hover];
@@ -87,6 +90,7 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
     transformOrigin: ScaleAnchorMap[scaleAnchor],
     width: `${sizingAxis.x === SizingType.Manual ? `${width * 100}vw` : 'max-content'}`,
     height: `${sizingAxis.y === SizingType.Manual ? `${height * 100}vw` : 'unset'}`,
+    top: stickyTop
   };
 
   return (
@@ -142,17 +146,6 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
   );
 };
 
-function getAnchoredItemTop(top: number, sectionHeight: string, anchorSide: AnchorSide) {
-  const styleTop = `${top * 100}vw`;
-  switch (anchorSide) {
-    case AnchorSide.Center: return `calc(${styleTop} + ${sectionHeight} / 2)`;
-    case AnchorSide.Bottom: return `calc(${styleTop} + ${sectionHeight})`;
-    case AnchorSide.Top:
-    default:
-      return styleTop;
-  }
-}
-
 function getStickyItemWrapperHeight(sticky: TStickyParams, itemHeight: number): number {
   const end = sticky.to ?? 100;
   return end - sticky.from + itemHeight;

package/src/components/items/useStickyItemTop.ts

@@ -0,0 +1,18 @@
+import { TArticleItemAny } from '@cntrl-site/sdk';
+import { useCurrentLayout } from '../../common/useCurrentLayout';
+import { useKeyframeValue } from '../../common/useKeyframeValue';
+import { getAnchoredItemTop } from '../../utils/getAnchoredItemTop';
+
+export function useStickyItemTop(item: TArticleItemAny, sectionHeightMap: Record<string, string>, sectionId: string) {
+  const layoutId = useCurrentLayout();
+  const { top } = useKeyframeValue<{ top: number; left: number }>(
+    item,
+    (item, layoutId) => item.area[layoutId],
+    (animator, scroll, value) => animator.getPositions(value, scroll),
+    sectionId,
+    [layoutId]
+  );
+  const sticky = item.sticky[layoutId];
+  const sectionHeight = sectionHeightMap[layoutId];
+  return sticky ? `${getAnchoredItemTop(top - sticky.from, sectionHeight, item.area[layoutId].anchorSide)}` : 0
+}

package/src/utils/getAnchoredItemTop.ts

@@ -0,0 +1,12 @@
+import { AnchorSide } from '@cntrl-site/sdk';
+
+export function getAnchoredItemTop(top: number, sectionHeight: string, anchorSide?: AnchorSide) {
+  const styleTop = `${top * 100}vw`;
+  switch (anchorSide) {
+    case AnchorSide.Center: return `calc(${styleTop} + ${sectionHeight} / 2)`;
+    case AnchorSide.Bottom: return `calc(${styleTop} + ${sectionHeight})`;
+    case AnchorSide.Top:
+    default:
+      return styleTop;
+  }
+}