@cntrl-site/sdk-nextjs 1.3.4 → 1.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/.idea/inspectionProfiles/Project_Default.xml +15 -0
  2. package/cntrl-site-sdk-nextjs-1.4.1.tgz +0 -0
  3. package/lib/components/items/CompoundItem/CompoundChild.js +9 -9
  4. package/lib/components/items/Item.js +20 -18
  5. package/lib/components/items/useItemPointerEvents.js +14 -4
  6. package/package.json +2 -2
  7. package/src/components/items/CompoundItem/CompoundChild.tsx +6 -2
  8. package/src/components/items/Item.tsx +24 -17
  9. package/src/components/items/useItemPointerEvents.ts +17 -4
package/.idea/inspectionProfiles/Project_Default.xml ADDED
@@ -0,0 +1,15 @@
1
+ <component name="InspectionProjectProfileManager">
2
+ <profile version="1.0">
3
+ <option name="myName" value="Project Default" />
4
+ <inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
5
+ <option name="myValues">
6
+ <value>
7
+ <list size="1">
8
+ <item index="0" class="java.lang.String" itemvalue="jsx" />
9
+ </list>
10
+ </value>
11
+ </option>
12
+ <option name="myCustomValuesEnabled" value="true" />
13
+ </inspection_tool>
14
+ </profile>
15
+ </component>
package/cntrl-site-sdk-nextjs-1.4.1.tgz ADDED
Binary file
package/lib/components/items/CompoundItem/CompoundChild.js CHANGED
@@ -24,22 +24,22 @@ const useItemPointerEvents_1 = require("../useItemPointerEvents");
24
24
  const useItemArea_1 = require("../useItemArea");
25
25
  const noop = () => null;
26
26
  const CompoundChild = ({ item, sectionId, isParentVisible = true }) => {
27
- var _a, _b, _c, _d, _e, _f, _g, _h;
27
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
28
28
  const id = (0, react_1.useId)();
29
29
  const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
30
30
  const layout = (0, useLayoutContext_1.useLayoutContext)();
31
31
  const exemplary = (0, useExemplary_1.useExemplary)();
32
- const { handleVisibilityChange, allowPointerEvents } = (0, useItemPointerEvents_1.useItemPointerEvents)(isParentVisible);
32
+ const { handleVisibilityChange, allowPointerEvents } = (0, useItemPointerEvents_1.useItemPointerEvents)((_b = (_a = item.commonParams) === null || _a === void 0 ? void 0 : _a.pointerEvents) !== null && _b !== void 0 ? _b : 'when_visible', isParentVisible);
33
33
  const itemScale = (0, useItemScale_1.useItemScale)(item, sectionId);
34
34
  const interactionCtrl = (0, useItemInteractionCtrl_1.useItemInteractionCtrl)(item.id);
35
35
  const triggers = (0, useItemTriggers_1.useItemTriggers)(interactionCtrl);
36
36
  const stateProps = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['top', 'left', 'width', 'height', 'scale']);
37
37
  const compoundSettings = layout && item.compoundSettings ? item.compoundSettings[layout] : undefined;
38
38
  const { width, height, top, left } = (0, useItemArea_1.useItemArea)(item, sectionId, {
39
- top: (_a = stateProps === null || stateProps === void 0 ? void 0 : stateProps.styles) === null || _a === void 0 ? void 0 : _a.top,
40
- left: (_b = stateProps === null || stateProps === void 0 ? void 0 : stateProps.styles) === null || _b === void 0 ? void 0 : _b.left,
41
- width: (_c = stateProps === null || stateProps === void 0 ? void 0 : stateProps.styles) === null || _c === void 0 ? void 0 : _c.width,
42
- height: (_d = stateProps === null || stateProps === void 0 ? void 0 : stateProps.styles) === null || _d === void 0 ? void 0 : _d.height
39
+ top: (_c = stateProps === null || stateProps === void 0 ? void 0 : stateProps.styles) === null || _c === void 0 ? void 0 : _c.top,
40
+ left: (_d = stateProps === null || stateProps === void 0 ? void 0 : stateProps.styles) === null || _d === void 0 ? void 0 : _d.left,
41
+ width: (_e = stateProps === null || stateProps === void 0 ? void 0 : stateProps.styles) === null || _e === void 0 ? void 0 : _e.width,
42
+ height: (_f = stateProps === null || stateProps === void 0 ? void 0 : stateProps.styles) === null || _f === void 0 ? void 0 : _f.height
43
43
  });
44
44
  const isInitialRef = (0, react_1.useRef)(true);
45
45
  const sizingAxis = (0, useSizing_1.useSizing)(item);
@@ -49,8 +49,8 @@ const CompoundChild = ({ item, sectionId, isParentVisible = true }) => {
49
49
  }, []);
50
50
  const transformOrigin = compoundSettings ? ScaleAnchorMap_1.ScaleAnchorMap[compoundSettings.positionAnchor] : 'top left';
51
51
  const isRichText = (0, isItemType_1.isItemType)(item, sdk_1.ArticleItemType.RichText);
52
- const scale = (_f = (_e = stateProps === null || stateProps === void 0 ? void 0 : stateProps.styles) === null || _e === void 0 ? void 0 : _e.scale) !== null && _f !== void 0 ? _f : itemScale;
53
- const hasClickTriggers = (_g = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getHasTrigger(item.id, 'click')) !== null && _g !== void 0 ? _g : false;
52
+ const scale = (_h = (_g = stateProps === null || stateProps === void 0 ? void 0 : stateProps.styles) === null || _g === void 0 ? void 0 : _g.scale) !== null && _h !== void 0 ? _h : itemScale;
53
+ const hasClickTriggers = (_j = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getHasTrigger(item.id, 'click')) !== null && _j !== void 0 ? _j : false;
54
54
  if (!item.compoundSettings)
55
55
  return null;
56
56
  const layoutValues = [item.area, item.hidden, item.compoundSettings];
@@ -69,7 +69,7 @@ const CompoundChild = ({ item, sectionId, isParentVisible = true }) => {
69
69
  ? { height: `${sizingAxis.y === 'manual'
70
70
  ? (0, getCompoundBondaryStyles_1.getCompoundHeight)(compoundSettings, height)
71
71
  : 'unset'}` }
72
- : {})), (scale && compoundSettings ? { transform: `scale(${scale}) ${(0, getCompoundBondaryStyles_1.getCompoundTransform)(compoundSettings)}` } : {})), { transition: (_h = stateProps === null || stateProps === void 0 ? void 0 : stateProps.transition) !== null && _h !== void 0 ? _h : 'none', cursor: hasClickTriggers ? 'pointer' : 'unset', pointerEvents: allowPointerEvents ? 'auto' : 'none' }) }, triggers, { children: [(0, jsx_runtime_1.jsx)(RichTextWrapper_1.RichTextWrapper, { isRichText: isRichText, transformOrigin: transformOrigin, children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, interactionCtrl: interactionCtrl, onVisibilityChange: handleVisibilityChange }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
72
+ : {})), (scale && compoundSettings ? { transform: `scale(${scale}) ${(0, getCompoundBondaryStyles_1.getCompoundTransform)(compoundSettings)}` } : {})), { transition: (_k = stateProps === null || stateProps === void 0 ? void 0 : stateProps.transition) !== null && _k !== void 0 ? _k : 'none', cursor: hasClickTriggers ? 'pointer' : 'unset', pointerEvents: allowPointerEvents ? 'auto' : 'none' }) }, triggers, { children: [(0, jsx_runtime_1.jsx)(RichTextWrapper_1.RichTextWrapper, { isRichText: isRichText, transformOrigin: transformOrigin, children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, interactionCtrl: interactionCtrl, onVisibilityChange: handleVisibilityChange }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
73
73
  ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, hidden, compoundSettings, layoutParams]) => {
74
74
  const sizingAxis = (0, useSizing_1.parseSizing)(layoutParams.sizing);
75
75
  const scaleAnchor = area.scaleAnchor;
package/lib/components/items/Item.js CHANGED
@@ -33,7 +33,7 @@ const stickyFix = `
33
33
  `;
34
34
  const noop = () => null;
35
35
  const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGroup = false }) => {
36
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
36
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
37
37
  const itemWrapperRef = (0, react_1.useRef)(null);
38
38
  const itemInnerRef = (0, react_1.useRef)(null);
39
39
  const rectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
@@ -43,7 +43,7 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
43
43
  const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
44
44
  const layout = (0, useLayoutContext_1.useLayoutContext)();
45
45
  const exemplary = (0, useExemplary_1.useExemplary)();
46
- const { handleVisibilityChange, allowPointerEvents } = (0, useItemPointerEvents_1.useItemPointerEvents)(isParentVisible);
46
+ const { handleVisibilityChange, allowPointerEvents } = (0, useItemPointerEvents_1.useItemPointerEvents)((_a = item.commonParams.pointerEvents) !== null && _a !== void 0 ? _a : 'when_visible', isParentVisible);
47
47
  const [wrapperHeight, setWrapperHeight] = (0, react_1.useState)(undefined);
48
48
  const [itemHeight, setItemHeight] = (0, react_1.useState)(undefined);
49
49
  const itemScale = (0, useItemScale_1.useItemScale)(item, sectionId);
@@ -52,13 +52,13 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
52
52
  const wrapperStateProps = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['top', 'left']);
53
53
  const innerStateProps = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['width', 'height', 'scale', 'top', 'left']);
54
54
  const { width, height, top, left } = (0, useItemArea_1.useItemArea)(item, sectionId, {
55
- top: (_a = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.styles) === null || _a === void 0 ? void 0 : _a.top,
56
- left: (_b = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.styles) === null || _b === void 0 ? void 0 : _b.left,
57
- width: (_c = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.styles) === null || _c === void 0 ? void 0 : _c.width,
58
- height: (_d = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.styles) === null || _d === void 0 ? void 0 : _d.height
55
+ top: (_b = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.styles) === null || _b === void 0 ? void 0 : _b.top,
56
+ left: (_c = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.styles) === null || _c === void 0 ? void 0 : _c.left,
57
+ width: (_d = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.styles) === null || _d === void 0 ? void 0 : _d.width,
58
+ height: (_e = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.styles) === null || _e === void 0 ? void 0 : _e.height
59
59
  });
60
60
  const sectionHeight = (0, useSectionHeightMap_1.useSectionHeightData)(sectionId);
61
- const stickyTop = (0, useStickyItemTop_1.useStickyItemTop)(item, sectionId, (_e = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.styles) === null || _e === void 0 ? void 0 : _e.top);
61
+ const stickyTop = (0, useStickyItemTop_1.useStickyItemTop)(item, sectionId, (_f = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.styles) === null || _f === void 0 ? void 0 : _f.top);
62
62
  const layoutValues = [item.area, item.hidden];
63
63
  layoutValues.push(item.sticky);
64
64
  layoutValues.push(sectionHeight);
@@ -89,24 +89,26 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
89
89
  const anchorSide = layout ? item.area[layout].anchorSide : sdk_1.AnchorSide.Top;
90
90
  const positionType = layout ? item.area[layout].positionType : sdk_1.PositionType.ScreenBased;
91
91
  const isScreenBasedBottom = positionType === sdk_1.PositionType.ScreenBased && anchorSide === sdk_1.AnchorSide.Bottom;
92
- const scale = (_g = (_f = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.styles) === null || _f === void 0 ? void 0 : _f.scale) !== null && _g !== void 0 ? _g : itemScale;
93
- const hasClickTriggers = (_h = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getHasTrigger(item.id, 'click')) !== null && _h !== void 0 ? _h : false;
92
+ const scale = (_h = (_g = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.styles) === null || _g === void 0 ? void 0 : _g.scale) !== null && _h !== void 0 ? _h : itemScale;
93
+ const hasClickTriggers = (_j = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getHasTrigger(item.id, 'click')) !== null && _j !== void 0 ? _j : false;
94
94
  return ((0, jsx_runtime_1.jsxs)("div", { className: `item-wrapper-${item.id}`, ref: itemWrapperRef, onTransitionEnd: (e) => {
95
95
  var _a;
96
96
  e.stopPropagation();
97
97
  (_a = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.handleTransitionEnd) === null || _a === void 0 ? void 0 : _a.call(interactionCtrl, e.propertyName);
98
- }, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (top ? { top: isScreenBasedBottom ? 'unset' : (0, getItemTopStyle_1.getItemTopStyle)(top, anchorSide) } : {})), (left ? { left: `${left * 100}vw` } : {})), (top ? { bottom: isScreenBasedBottom ? `${-top * 100}vw` : 'unset' } : {})), (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})), { transition: (_j = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.transition) !== null && _j !== void 0 ? _j : 'none' }), children: [(0, jsx_runtime_1.jsx)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: {
98
+ }, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (top ? { top: isScreenBasedBottom ? 'unset' : (0, getItemTopStyle_1.getItemTopStyle)(top, anchorSide) } : {})), (left ? { left: `${left * 100}vw` } : {})), (top ? { bottom: isScreenBasedBottom ? `${-top * 100}vw` : 'unset' } : {})), (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})), { transition: (_k = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.transition) !== null && _k !== void 0 ? _k : 'none' }), children: [(0, jsx_runtime_1.jsx)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: {
99
99
  opacity: (keyframes.length !== 0 && !layout) ? 0 : 1,
100
100
  top: `${stickyTop * 100}vw`,
101
101
  height: isRichText && itemHeight ? `${itemHeight * 100}vw` : 'unset',
102
- }, children: (0, jsx_runtime_1.jsx)(RichTextWrapper_1.RichTextWrapper, { isRichText: isRichText, children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `item-${item.id}-inner`, ref: itemInnerRef, style: Object.assign(Object.assign(Object.assign({}, ((width && height) ? {
103
- width: `${sizingAxis.x === 'manual'
104
- ? isRichText
105
- ? `${width * exemplary}px`
106
- : `${width * 100}vw`
107
- : 'max-content'}`,
108
- height: `${sizingAxis.y === 'manual' ? `${height * 100}vw` : 'unset'}`
109
- } : {})), (scale !== undefined ? { transform: `scale(${scale})`, 'WebkitTransform': `scale(${scale})` } : {})), { transition: (_k = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.transition) !== null && _k !== void 0 ? _k : 'none', cursor: hasClickTriggers ? 'pointer' : 'unset', pointerEvents: allowPointerEvents ? 'auto' : 'none' }) }, triggers, { children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, onResize: handleItemResize, articleHeight: articleHeight, interactionCtrl: interactionCtrl, onVisibilityChange: handleVisibilityChange }) })) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
102
+ }, children: (0, jsx_runtime_1.jsx)(RichTextWrapper_1.RichTextWrapper, { isRichText: isRichText, children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `item-${item.id}-inner`, ref: itemInnerRef, style: Object.assign(Object.assign(Object.assign({}, ((width && height)
103
+ ? {
104
+ width: `${sizingAxis.x === 'manual'
105
+ ? isRichText
106
+ ? `${width * exemplary}px`
107
+ : `${width * 100}vw`
108
+ : 'max-content'}`,
109
+ height: `${sizingAxis.y === 'manual' ? `${height * 100}vw` : 'unset'}`
110
+ }
111
+ : {})), (scale !== undefined ? { transform: `scale(${scale})`, WebkitTransform: `scale(${scale})` } : {})), { transition: (_l = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.transition) !== null && _l !== void 0 ? _l : 'none', cursor: hasClickTriggers ? 'pointer' : 'unset', pointerEvents: allowPointerEvents ? 'auto' : 'none' }) }, triggers, { children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, onResize: handleItemResize, articleHeight: articleHeight, interactionCtrl: interactionCtrl, onVisibilityChange: handleVisibilityChange }) })) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
110
112
  ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, hidden, sticky, sectionHeight, layoutParams]) => {
111
113
  const sizingAxis = (0, useSizing_1.parseSizing)(layoutParams.sizing);
112
114
  const isScreenBasedBottom = area.positionType === sdk_1.PositionType.ScreenBased && area.anchorSide === sdk_1.AnchorSide.Bottom;
package/lib/components/items/useItemPointerEvents.js CHANGED
@@ -2,13 +2,23 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.useItemPointerEvents = void 0;
4
4
  const react_1 = require("react");
5
- function useItemPointerEvents(isParentVisible) {
6
- const [allowPointerEvents, setAllowPointerEvents] = (0, react_1.useState)(isParentVisible);
5
+ function useItemPointerEvents(pointerEvents, isParentVisible) {
6
+ const getAllowPointerEvents = () => {
7
+ switch (pointerEvents) {
8
+ case 'never':
9
+ return false;
10
+ case 'when_visible':
11
+ return isParentVisible;
12
+ case 'always':
13
+ return true;
14
+ }
15
+ };
16
+ const [allowPointerEvents, setAllowPointerEvents] = (0, react_1.useState)(getAllowPointerEvents());
7
17
  const handleVisibilityChange = (0, react_1.useCallback)((isVisible) => {
8
- if (!isParentVisible)
18
+ if (!isParentVisible || pointerEvents !== 'when_visible')
9
19
  return;
10
20
  setAllowPointerEvents(isVisible);
11
- }, [isParentVisible]);
21
+ }, [isParentVisible, pointerEvents]);
12
22
  return { allowPointerEvents, handleVisibilityChange };
13
23
  }
14
24
  exports.useItemPointerEvents = useItemPointerEvents;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cntrl-site/sdk-nextjs",
3
- "version": "1.3.4",
3
+ "version": "1.4.1",
4
4
  "description": "SDK for Next.js",
5
5
  "author": "arsen@momdesign.nyc",
6
6
  "license": "MIT",
@@ -31,7 +31,7 @@
31
31
  "@antfu/eslint-config": "^3.8.0",
32
32
  "@cntrl-site/color": "^1.0.0",
33
33
  "@cntrl-site/effects": "^1.3.2",
34
- "@cntrl-site/sdk": "^1.15.0",
34
+ "@cntrl-site/sdk": "^1.16.1",
35
35
  "@types/vimeo__player": "^2.18.0",
36
36
  "@vimeo/player": "^2.25.0",
37
37
  "html-react-parser": "^3.0.1",
package/src/components/items/CompoundItem/CompoundChild.tsx CHANGED
@@ -18,7 +18,8 @@ import { itemsMap } from '../itemsMap';
18
18
  import {
19
19
  getCompoundHeight,
20
20
  getCompoundLeft,
21
- getCompoundTop, getCompoundTransform,
21
+ getCompoundTop,
22
+ getCompoundTransform,
22
23
  getCompoundWidth
23
24
  } from '../../../utils/getCompoundBondaryStyles';
24
25
  import { useItemTriggers } from '../useItemTriggers';
@@ -39,7 +40,10 @@ export const CompoundChild: FC<ChildItemProps> = ({ item, sectionId, isParentVis
39
40
  const { layouts } = useCntrlContext();
40
41
  const layout = useLayoutContext();
41
42
  const exemplary = useExemplary();
42
- const { handleVisibilityChange, allowPointerEvents } = useItemPointerEvents(isParentVisible);
43
+ const { handleVisibilityChange, allowPointerEvents } = useItemPointerEvents(
44
+ item.commonParams?.pointerEvents ?? 'when_visible',
45
+ isParentVisible
46
+ );
43
47
  const itemScale = useItemScale(item, sectionId);
44
48
  const interactionCtrl = useItemInteractionCtrl(item.id);
45
49
  const triggers = useItemTriggers(interactionCtrl);
package/src/components/items/Item.tsx CHANGED
@@ -22,8 +22,8 @@ import { getItemTopStyle } from '../../utils/getItemTopStyle';
22
22
  import { useStickyItemTop } from './useStickyItemTop';
23
23
  import { getAnchoredItemTop } from '../../utils/getAnchoredItemTop';
24
24
  import { useLayoutContext } from '../useLayoutContext';
25
- import { ArticleRectContext } from "../../provider/ArticleRectContext";
26
- import { useExemplary } from "../../common/useExemplary";
25
+ import { ArticleRectContext } from '../../provider/ArticleRectContext';
26
+ import { useExemplary } from '../../common/useExemplary';
27
27
  import { AreaAnchor } from '@cntrl-site/sdk/src/types/article/ItemArea';
28
28
  import { KeyframesContext } from '../../provider/KeyframesContext';
29
29
  import { useItemInteractionCtrl } from '../../interactions/useItemInteractionCtrl';
@@ -69,7 +69,10 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
69
69
  const { layouts } = useCntrlContext();
70
70
  const layout = useLayoutContext();
71
71
  const exemplary = useExemplary();
72
- const { handleVisibilityChange, allowPointerEvents } = useItemPointerEvents(isParentVisible);
72
+ const { handleVisibilityChange, allowPointerEvents } = useItemPointerEvents(
73
+ item.commonParams.pointerEvents ?? 'when_visible',
74
+ isParentVisible
75
+ );
73
76
  const [wrapperHeight, setWrapperHeight] = useState<undefined | number>(undefined);
74
77
  const [itemHeight, setItemHeight] = useState<undefined | number>(undefined);
75
78
  const itemScale = useItemScale(item, sectionId);
@@ -148,14 +151,17 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
148
151
  className={`item-${item.id}-inner`}
149
152
  ref={itemInnerRef}
150
153
  style={{
151
- ...((width && height) ? {
152
- width: `${sizingAxis.x === 'manual'
153
- ? isRichText
154
- ? `${width * exemplary}px`
155
- : `${width * 100}vw`
156
- : 'max-content'}`,
157
- height: `${sizingAxis.y === 'manual' ? `${height * 100}vw` : 'unset'}` } : {}),
158
- ...(scale !== undefined ? { transform: `scale(${scale})`, 'WebkitTransform': `scale(${scale})` } : {}),
154
+ ...((width && height)
155
+ ? {
156
+ width: `${sizingAxis.x === 'manual'
157
+ ? isRichText
158
+ ? `${width * exemplary}px`
159
+ : `${width * 100}vw`
160
+ : 'max-content'}`,
161
+ height: `${sizingAxis.y === 'manual' ? `${height * 100}vw` : 'unset'}`
162
+ }
163
+ : {}),
164
+ ...(scale !== undefined ? { transform: `scale(${scale})`, WebkitTransform: `scale(${scale})` } : {}),
159
165
  transition: innerStateProps?.transition ?? 'none',
160
166
  cursor: hasClickTriggers ? 'pointer' : 'unset',
161
167
  pointerEvents: allowPointerEvents ? 'auto' : 'none'
@@ -175,10 +181,10 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
175
181
  </div>
176
182
  <JSXStyle id={id}>{`
177
183
  ${getLayoutStyles(layouts, layoutValues, ([area, hidden, sticky, sectionHeight, layoutParams]) => {
178
- const sizingAxis = parseSizing(layoutParams.sizing);
179
- const isScreenBasedBottom = area.positionType === PositionType.ScreenBased && area.anchorSide === AnchorSide.Bottom;
180
- const scaleAnchor = area.scaleAnchor as AreaAnchor;
181
- return (`
184
+ const sizingAxis = parseSizing(layoutParams.sizing);
185
+ const isScreenBasedBottom = area.positionType === PositionType.ScreenBased && area.anchorSide === AnchorSide.Bottom;
186
+ const scaleAnchor = area.scaleAnchor as AreaAnchor;
187
+ return (`
182
188
  .item-${item.id} {
183
189
  position: ${sticky ? 'sticky' : 'absolute'};
184
190
  top: ${sticky ? `${getAnchoredItemTop(area.top - sticky.from, sectionHeight, area.anchorSide)}` : 0};
@@ -196,7 +202,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
196
202
  transform: scale(${area.scale});
197
203
  }
198
204
  .item-wrapper-${item.id} {
199
- position: ${area.positionType === PositionType.ScreenBased ? 'fixed': 'absolute'};
205
+ position: ${area.positionType === PositionType.ScreenBased ? 'fixed' : 'absolute'};
200
206
  z-index: ${area.zIndex};
201
207
  ${!isInGroup && stickyFix}
202
208
  pointer-events: none;
@@ -206,7 +212,8 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
206
212
  }
207
213
  `);
208
214
  })}
209
- `}</JSXStyle>
215
+ `}
216
+ </JSXStyle>
210
217
  </div>
211
218
  );
212
219
  };
package/src/components/items/useItemPointerEvents.ts CHANGED
@@ -1,10 +1,23 @@
1
1
  import { useCallback, useState } from 'react';
2
2
 
3
- export function useItemPointerEvents(isParentVisible: boolean) {
4
- const [allowPointerEvents, setAllowPointerEvents] = useState<boolean>(isParentVisible);
3
+ export function useItemPointerEvents(
4
+ pointerEvents: 'never' | 'when_visible' | 'always',
5
+ isParentVisible: boolean
6
+ ) {
7
+ const getAllowPointerEvents = () => {
8
+ switch (pointerEvents) {
9
+ case 'never':
10
+ return false;
11
+ case 'when_visible':
12
+ return isParentVisible;
13
+ case 'always':
14
+ return true;
15
+ }
16
+ };
17
+ const [allowPointerEvents, setAllowPointerEvents] = useState<boolean>(getAllowPointerEvents());
5
18
  const handleVisibilityChange = useCallback((isVisible: boolean) => {
6
- if (!isParentVisible) return;
19
+ if (!isParentVisible || pointerEvents !== 'when_visible') return;
7
20
  setAllowPointerEvents(isVisible);
8
- }, [isParentVisible]);
21
+ }, [isParentVisible, pointerEvents]);
9
22
  return { allowPointerEvents, handleVisibilityChange };
10
23
  }