@cntrl-site/sdk-nextjs 1.9.13-0 → 1.9.13-10

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 (4) hide show
  1. package/cntrl-site-sdk-nextjs-1.9.13-8.tgz +0 -0
  2. package/lib/interactions/InteractionsRegistry.js +26 -5
  3. package/package.json +2 -2
  4. package/src/interactions/InteractionsRegistry.ts +24 -5
package/lib/interactions/InteractionsRegistry.js CHANGED
@@ -8,6 +8,7 @@ class InteractionsRegistry {
8
8
  var _a;
9
9
  this.ctrls = new Map();
10
10
  this.items = this.unpackItems(article);
11
+ this.layoutId = layoutId;
11
12
  const interactions = (_a = article.interactions[layoutId]) !== null && _a !== void 0 ? _a : [];
12
13
  const activeStatesIds = interactions.reduce((map, inter) => {
13
14
  var _a;
@@ -109,7 +110,7 @@ class InteractionsRegistry {
109
110
  const timestamp = Date.now();
110
111
  for (const interaction of this.interactions) {
111
112
  const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
112
- const matchingTrigger = interaction.triggers.find(trigger => 'position' in trigger && trigger.position === 0 && trigger.from === currentStateId);
113
+ const matchingTrigger = interaction.triggers.find(trigger => ('position' in trigger && trigger.position === 0 && trigger.from === currentStateId) || trigger.type === 'item-scroll-position');
113
114
  if (!matchingTrigger)
114
115
  continue;
115
116
  const activeStateId = this.getActiveInteractionState(interaction.id);
@@ -154,18 +155,38 @@ class InteractionsRegistry {
154
155
  const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
155
156
  const activeStateId = (_a = interaction.states.find((state) => state.id !== interaction.startStateId)) === null || _a === void 0 ? void 0 : _a.id;
156
157
  const matchingTrigger = interaction.triggers.find((trigger) => {
157
- if (!('position' in trigger) || trigger.position === 0)
158
+ if (trigger.type !== 'scroll-position' && trigger.type !== 'item-scroll-position')
159
+ return false;
160
+ let triggerPosition;
161
+ if (trigger.type === 'scroll-position') {
162
+ if (trigger.position === 0)
163
+ return false;
164
+ triggerPosition = trigger.position * window.innerWidth;
165
+ }
166
+ if (trigger.type === 'item-scroll-position') {
167
+ const item = this.items.find((item) => item.id === trigger.itemId);
168
+ triggerPosition = item.area[this.layoutId].top * window.innerWidth;
169
+ }
170
+ if (!triggerPosition)
158
171
  return false;
159
- const triggerPosition = trigger.position * window.innerWidth;
160
172
  const isScrolledPastTrigger = triggerPosition < position;
161
173
  if (!isScrolledPastTrigger && !trigger.isReverse)
162
174
  return false;
163
175
  const stateId = isScrolledPastTrigger ? trigger.from : trigger.to;
164
176
  return stateId === currentStateId;
165
177
  });
166
- if (!matchingTrigger || !('position' in matchingTrigger) || !activeStateId)
178
+ if (!matchingTrigger || (matchingTrigger.type !== 'scroll-position' && matchingTrigger.type !== 'item-scroll-position') || !activeStateId)
179
+ continue;
180
+ let triggerPosition;
181
+ if (matchingTrigger.type === 'scroll-position') {
182
+ triggerPosition = matchingTrigger.position * window.innerWidth;
183
+ }
184
+ if (matchingTrigger.type === 'item-scroll-position') {
185
+ const item = this.items.find((item) => item.id === matchingTrigger.itemId);
186
+ triggerPosition = item.area[this.layoutId].top * window.innerWidth;
187
+ }
188
+ if (!triggerPosition)
167
189
  continue;
168
- const triggerPosition = matchingTrigger.position * window.innerWidth;
169
190
  const isScrolledPastTrigger = triggerPosition < position;
170
191
  const targetStateId = isScrolledPastTrigger ? matchingTrigger.to : matchingTrigger.from;
171
192
  this.setCurrentStateForInteraction(interaction.id, targetStateId);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cntrl-site/sdk-nextjs",
3
- "version": "1.9.13-0",
3
+ "version": "1.9.13-10",
4
4
  "description": "SDK for Next.js",
5
5
  "author": "arsen@momdesign.nyc",
6
6
  "license": "MIT",
@@ -32,7 +32,7 @@
32
32
  "@cntrl-site/color": "^1.0.0",
33
33
  "@cntrl-site/components": "^0.0.3",
34
34
  "@cntrl-site/effects": "^1.4.0",
35
- "@cntrl-site/sdk": "^1.24.6",
35
+ "@cntrl-site/sdk": "^1.24.7-0",
36
36
  "@types/vimeo__player": "^2.18.0",
37
37
  "@vimeo/player": "^2.25.0",
38
38
  "html-react-parser": "^3.0.1",
package/src/interactions/InteractionsRegistry.ts CHANGED
@@ -11,6 +11,7 @@ import { isItemType } from '../utils/isItemType';
11
11
  export class InteractionsRegistry implements InteractionsRegistryPort {
12
12
  private ctrls: Map<ItemId, ItemInteractionCtrl> = new Map();
13
13
  private items: ItemAny[];
14
+ private layoutId: string;
14
15
  private interactions: Interaction[];
15
16
  private stateItemsIdsMap: StateItemsIdsMap;
16
17
  private interactionStateMap: InteractionStateMap;
@@ -19,6 +20,7 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
19
20
 
20
21
  constructor(article: Article, layoutId: string) {
21
22
  this.items = this.unpackItems(article);
23
+ this.layoutId = layoutId;
22
24
  const interactions = article.interactions[layoutId] ?? [];
23
25
  const activeStatesIds = interactions.reduce<StateId[]>((map, inter) => {
24
26
  const activeStateId = inter.states.find((state) => state.id !== inter.startStateId)?.id;
@@ -117,7 +119,7 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
117
119
  for (const interaction of this.interactions) {
118
120
  const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
119
121
  const matchingTrigger = interaction.triggers.find(trigger =>
120
- 'position' in trigger && trigger.position === 0 && trigger.from === currentStateId
122
+ ('position' in trigger && trigger.position === 0 && trigger.from === currentStateId) || trigger.type === 'item-scroll-position'
121
123
  );
122
124
  if (!matchingTrigger) continue;
123
125
  const activeStateId = this.getActiveInteractionState(interaction.id);
@@ -161,15 +163,32 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
161
163
  const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
162
164
  const activeStateId = interaction.states.find((state) => state.id !== interaction.startStateId)?.id;
163
165
  const matchingTrigger = interaction.triggers.find((trigger) => {
164
- if (!('position' in trigger) || trigger.position === 0) return false;
165
- const triggerPosition = trigger.position * window.innerWidth;
166
+ if (trigger.type !== 'scroll-position' && trigger.type !== 'item-scroll-position') return false;
167
+ let triggerPosition;
168
+ if (trigger.type === 'scroll-position') {
169
+ if (trigger.position === 0) return false;
170
+ triggerPosition = trigger.position * window.innerWidth;
171
+ }
172
+ if (trigger.type === 'item-scroll-position') {
173
+ const item = this.items.find((item) => item.id === trigger.itemId)!;
174
+ triggerPosition = item.area[this.layoutId].top * window.innerWidth;
175
+ }
176
+ if (!triggerPosition) return false;
166
177
  const isScrolledPastTrigger = triggerPosition < position;
167
178
  if (!isScrolledPastTrigger && !trigger.isReverse) return false;
168
179
  const stateId = isScrolledPastTrigger ? trigger.from : trigger.to;
169
180
  return stateId === currentStateId;
170
181
  });
171
- if (!matchingTrigger || !('position' in matchingTrigger) || !activeStateId) continue;
172
- const triggerPosition = matchingTrigger.position * window.innerWidth;
182
+ if (!matchingTrigger || (matchingTrigger.type !== 'scroll-position' && matchingTrigger.type !== 'item-scroll-position') || !activeStateId) continue;
183
+ let triggerPosition;
184
+ if (matchingTrigger.type === 'scroll-position') {
185
+ triggerPosition = matchingTrigger.position * window.innerWidth;
186
+ }
187
+ if (matchingTrigger.type === 'item-scroll-position') {
188
+ const item = this.items.find((item) => item.id === matchingTrigger.itemId)!;
189
+ triggerPosition = item.area[this.layoutId].top * window.innerWidth;
190
+ }
191
+ if (!triggerPosition) continue;
173
192
  const isScrolledPastTrigger = triggerPosition < position;
174
193
  const targetStateId = isScrolledPastTrigger ? matchingTrigger.to : matchingTrigger.from;
175
194
  this.setCurrentStateForInteraction(interaction.id, targetStateId);