@cntrl-site/sdk-nextjs 1.9.13-3 → 1.9.13-4

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 (3) hide show
  1. package/lib/interactions/InteractionsRegistry.js +69 -62
  2. package/package.json +1 -1
  3. package/src/interactions/InteractionsRegistry.ts +69 -65
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;
@@ -105,38 +106,93 @@ class InteractionsRegistry {
105
106
  return available;
106
107
  }
107
108
  notifyLoad() {
108
- var _a, _b;
109
+ // const timestamp = Date.now();
110
+ // for (const interaction of this.interactions) {
111
+ // const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
112
+ // const matchingTrigger = interaction.triggers.find(trigger =>
113
+ // 'position' in trigger && trigger.position === 0 && trigger.from === currentStateId
114
+ // );
115
+ // if (!matchingTrigger) continue;
116
+ // const activeStateId = this.getActiveInteractionState(interaction.id);
117
+ // const isNewStateActive = matchingTrigger.to === activeStateId;
118
+ // this.setCurrentStateForInteraction(interaction.id, matchingTrigger.to);
119
+ // const transitioningItems = this.stateItemsIdsMap[activeStateId] ?? [];
120
+ // const state = interaction.states.find((state) => state.id === matchingTrigger.to);
121
+ // const actions = state?.actions ?? [];
122
+ // for (const action of actions) {
123
+ // const ctrl = this.ctrls.get(action.itemId);
124
+ // if (!ctrl) continue;
125
+ // ctrl.receiveAction(action.type);
126
+ // }
127
+ // this.itemsStages = this.itemsStages.map((stage) => {
128
+ // if (stage.interactionId !== interaction.id) return stage;
129
+ // return {
130
+ // itemId: stage.itemId,
131
+ // interactionId: stage.interactionId,
132
+ // type: 'transitioning',
133
+ // from: stage.type === 'transitioning' ? stage.to : stage.stateId!,
134
+ // to: matchingTrigger.to,
135
+ // direction: isNewStateActive ? 'in' : 'out',
136
+ // updated: timestamp
137
+ // };
138
+ // });
139
+ // const itemsToNotify = new Set<ItemId>(transitioningItems);
140
+ // for (const trigger of interaction.triggers) {
141
+ // if (!('itemId' in trigger)) continue;
142
+ // itemsToNotify.add(trigger.itemId);
143
+ // }
144
+ // this.notifyItemCtrlsChange(Array.from(itemsToNotify));
145
+ // this.notifyTransitionStartForItems(transitioningItems, activeStateId);
146
+ // }
147
+ }
148
+ notifyScroll(position) {
149
+ var _a, _b, _c;
109
150
  const timestamp = Date.now();
151
+ const item = this.items.find((item) => item.id === 'FYUIEGBF');
152
+ const testtop = item.area[this.layoutId].top;
110
153
  for (const interaction of this.interactions) {
111
154
  const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
112
- const matchingTrigger = interaction.triggers.find(trigger => 'position' in trigger && trigger.position === 0 && trigger.from === currentStateId);
113
- if (!matchingTrigger)
155
+ const activeStateId = (_a = interaction.states.find((state) => state.id !== interaction.startStateId)) === null || _a === void 0 ? void 0 : _a.id;
156
+ const matchingTrigger = interaction.triggers.find((trigger) => {
157
+ if (!('position' in trigger) || testtop === 0)
158
+ return false;
159
+ const triggerPosition = testtop * window.innerWidth;
160
+ const isScrolledPastTrigger = triggerPosition < position;
161
+ if (!isScrolledPastTrigger && !trigger.isReverse)
162
+ return false;
163
+ const stateId = isScrolledPastTrigger ? trigger.from : trigger.to;
164
+ return stateId === currentStateId;
165
+ });
166
+ if (!matchingTrigger || !('position' in matchingTrigger) || !activeStateId)
114
167
  continue;
115
- const activeStateId = this.getActiveInteractionState(interaction.id);
116
- const isNewStateActive = matchingTrigger.to === activeStateId;
117
- this.setCurrentStateForInteraction(interaction.id, matchingTrigger.to);
118
- const transitioningItems = (_a = this.stateItemsIdsMap[activeStateId]) !== null && _a !== void 0 ? _a : [];
119
- const state = interaction.states.find((state) => state.id === matchingTrigger.to);
120
- const actions = (_b = state === null || state === void 0 ? void 0 : state.actions) !== null && _b !== void 0 ? _b : [];
168
+ const triggerPosition = testtop * window.innerWidth;
169
+ const isScrolledPastTrigger = triggerPosition < position;
170
+ const targetStateId = isScrolledPastTrigger ? matchingTrigger.to : matchingTrigger.from;
171
+ this.setCurrentStateForInteraction(interaction.id, targetStateId);
172
+ const transitioningItems = (_b = this.stateItemsIdsMap[activeStateId]) !== null && _b !== void 0 ? _b : [];
173
+ const state = interaction.states.find((state) => state.id === targetStateId);
174
+ const actions = (_c = state === null || state === void 0 ? void 0 : state.actions) !== null && _c !== void 0 ? _c : [];
121
175
  for (const action of actions) {
122
176
  const ctrl = this.ctrls.get(action.itemId);
123
177
  if (!ctrl)
124
178
  continue;
125
179
  ctrl.receiveAction(action.type);
126
180
  }
127
- this.itemsStages = this.itemsStages.map((stage) => {
181
+ const itemsStages = this.itemsStages.map((stage) => {
128
182
  if (stage.interactionId !== interaction.id)
129
183
  return stage;
130
- return {
184
+ const newStage = {
131
185
  itemId: stage.itemId,
132
186
  interactionId: stage.interactionId,
133
187
  type: 'transitioning',
134
188
  from: stage.type === 'transitioning' ? stage.to : stage.stateId,
135
- to: matchingTrigger.to,
136
- direction: isNewStateActive ? 'in' : 'out',
189
+ to: targetStateId,
190
+ direction: targetStateId === activeStateId ? 'in' : 'out',
137
191
  updated: timestamp
138
192
  };
193
+ return newStage;
139
194
  });
195
+ this.itemsStages = itemsStages;
140
196
  const itemsToNotify = new Set(transitioningItems);
141
197
  for (const trigger of interaction.triggers) {
142
198
  if (!('itemId' in trigger))
@@ -147,55 +203,6 @@ class InteractionsRegistry {
147
203
  this.notifyTransitionStartForItems(transitioningItems, activeStateId);
148
204
  }
149
205
  }
150
- notifyScroll(position) {
151
- // const timestamp = Date.now();
152
- // for (const interaction of this.interactions) {
153
- // const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
154
- // const activeStateId = interaction.states.find((state) => state.id !== interaction.startStateId)?.id;
155
- // const matchingTrigger = interaction.triggers.find((trigger) => {
156
- // if (!('position' in trigger) || trigger.position === 0) return false;
157
- // const triggerPosition = trigger.position * window.innerWidth;
158
- // const isScrolledPastTrigger = triggerPosition < position;
159
- // if (!isScrolledPastTrigger && !trigger.isReverse) return false;
160
- // const stateId = isScrolledPastTrigger ? trigger.from : trigger.to;
161
- // return stateId === currentStateId;
162
- // });
163
- // if (!matchingTrigger || !('position' in matchingTrigger) || !activeStateId) continue;
164
- // const triggerPosition = matchingTrigger.position * window.innerWidth;
165
- // const isScrolledPastTrigger = triggerPosition < position;
166
- // const targetStateId = isScrolledPastTrigger ? matchingTrigger.to : matchingTrigger.from;
167
- // this.setCurrentStateForInteraction(interaction.id, targetStateId);
168
- // const transitioningItems = this.stateItemsIdsMap[activeStateId] ?? [];
169
- // const state = interaction.states.find((state) => state.id === targetStateId);
170
- // const actions = state?.actions ?? [];
171
- // for (const action of actions) {
172
- // const ctrl = this.ctrls.get(action.itemId);
173
- // if (!ctrl) continue;
174
- // ctrl.receiveAction(action.type);
175
- // }
176
- // const itemsStages = this.itemsStages.map((stage) => {
177
- // if (stage.interactionId !== interaction.id) return stage;
178
- // const newStage = {
179
- // itemId: stage.itemId,
180
- // interactionId: stage.interactionId,
181
- // type: 'transitioning' as const,
182
- // from: stage.type === 'transitioning' ? stage.to : stage.stateId!,
183
- // to: targetStateId,
184
- // direction: targetStateId === activeStateId ? 'in' as const : 'out' as const,
185
- // updated: timestamp
186
- // };
187
- // return newStage;
188
- // });
189
- // this.itemsStages = itemsStages;
190
- // const itemsToNotify = new Set<ItemId>(transitioningItems);
191
- // for (const trigger of interaction.triggers) {
192
- // if (!('itemId' in trigger)) continue;
193
- // itemsToNotify.add(trigger.itemId);
194
- // }
195
- // this.notifyItemCtrlsChange(Array.from(itemsToNotify));
196
- // this.notifyTransitionStartForItems(transitioningItems, activeStateId);
197
- // }
198
- }
199
206
  notifyItemTrigger(itemId, triggerType) {
200
207
  // const timestamp = Date.now();
201
208
  // for (const interaction of this.interactions) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cntrl-site/sdk-nextjs",
3
- "version": "1.9.13-3",
3
+ "version": "1.9.13-4",
4
4
  "description": "SDK for Next.js",
5
5
  "author": "arsen@momdesign.nyc",
6
6
  "license": "MIT",
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;
@@ -113,88 +115,38 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
113
115
  }
114
116
 
115
117
  notifyLoad() {
116
- const timestamp = Date.now();
117
- for (const interaction of this.interactions) {
118
- const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
119
- const matchingTrigger = interaction.triggers.find(trigger =>
120
- 'position' in trigger && trigger.position === 0 && trigger.from === currentStateId
121
- );
122
- if (!matchingTrigger) continue;
123
- const activeStateId = this.getActiveInteractionState(interaction.id);
124
- const isNewStateActive = matchingTrigger.to === activeStateId;
125
- this.setCurrentStateForInteraction(interaction.id, matchingTrigger.to);
126
- const transitioningItems = this.stateItemsIdsMap[activeStateId] ?? [];
127
- const state = interaction.states.find((state) => state.id === matchingTrigger.to);
128
- const actions = state?.actions ?? [];
129
- for (const action of actions) {
130
- const ctrl = this.ctrls.get(action.itemId);
131
- if (!ctrl) continue;
132
- ctrl.receiveAction(action.type);
133
- }
134
-
135
- this.itemsStages = this.itemsStages.map((stage) => {
136
- if (stage.interactionId !== interaction.id) return stage;
137
- return {
138
- itemId: stage.itemId,
139
- interactionId: stage.interactionId,
140
- type: 'transitioning',
141
- from: stage.type === 'transitioning' ? stage.to : stage.stateId!,
142
- to: matchingTrigger.to,
143
- direction: isNewStateActive ? 'in' : 'out',
144
- updated: timestamp
145
- };
146
- });
147
-
148
- const itemsToNotify = new Set<ItemId>(transitioningItems);
149
- for (const trigger of interaction.triggers) {
150
- if (!('itemId' in trigger)) continue;
151
- itemsToNotify.add(trigger.itemId);
152
- }
153
- this.notifyItemCtrlsChange(Array.from(itemsToNotify));
154
- this.notifyTransitionStartForItems(transitioningItems, activeStateId);
155
- }
156
- }
157
-
158
- notifyScroll(position: number) {
159
118
  // const timestamp = Date.now();
160
119
  // for (const interaction of this.interactions) {
161
120
  // const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
162
- // const activeStateId = interaction.states.find((state) => state.id !== interaction.startStateId)?.id;
163
- // const matchingTrigger = interaction.triggers.find((trigger) => {
164
- // if (!('position' in trigger) || trigger.position === 0) return false;
165
- // const triggerPosition = trigger.position * window.innerWidth;
166
- // const isScrolledPastTrigger = triggerPosition < position;
167
- // if (!isScrolledPastTrigger && !trigger.isReverse) return false;
168
- // const stateId = isScrolledPastTrigger ? trigger.from : trigger.to;
169
- // return stateId === currentStateId;
170
- // });
171
- // if (!matchingTrigger || !('position' in matchingTrigger) || !activeStateId) continue;
172
- // const triggerPosition = matchingTrigger.position * window.innerWidth;
173
- // const isScrolledPastTrigger = triggerPosition < position;
174
- // const targetStateId = isScrolledPastTrigger ? matchingTrigger.to : matchingTrigger.from;
175
- // this.setCurrentStateForInteraction(interaction.id, targetStateId);
121
+ // const matchingTrigger = interaction.triggers.find(trigger =>
122
+ // 'position' in trigger && trigger.position === 0 && trigger.from === currentStateId
123
+ // );
124
+ // if (!matchingTrigger) continue;
125
+ // const activeStateId = this.getActiveInteractionState(interaction.id);
126
+ // const isNewStateActive = matchingTrigger.to === activeStateId;
127
+ // this.setCurrentStateForInteraction(interaction.id, matchingTrigger.to);
176
128
  // const transitioningItems = this.stateItemsIdsMap[activeStateId] ?? [];
177
- // const state = interaction.states.find((state) => state.id === targetStateId);
129
+ // const state = interaction.states.find((state) => state.id === matchingTrigger.to);
178
130
  // const actions = state?.actions ?? [];
179
131
  // for (const action of actions) {
180
132
  // const ctrl = this.ctrls.get(action.itemId);
181
133
  // if (!ctrl) continue;
182
134
  // ctrl.receiveAction(action.type);
183
135
  // }
184
- // const itemsStages = this.itemsStages.map((stage) => {
136
+
137
+ // this.itemsStages = this.itemsStages.map((stage) => {
185
138
  // if (stage.interactionId !== interaction.id) return stage;
186
- // const newStage = {
139
+ // return {
187
140
  // itemId: stage.itemId,
188
141
  // interactionId: stage.interactionId,
189
- // type: 'transitioning' as const,
142
+ // type: 'transitioning',
190
143
  // from: stage.type === 'transitioning' ? stage.to : stage.stateId!,
191
- // to: targetStateId,
192
- // direction: targetStateId === activeStateId ? 'in' as const : 'out' as const,
144
+ // to: matchingTrigger.to,
145
+ // direction: isNewStateActive ? 'in' : 'out',
193
146
  // updated: timestamp
194
147
  // };
195
- // return newStage;
196
148
  // });
197
- // this.itemsStages = itemsStages;
149
+
198
150
  // const itemsToNotify = new Set<ItemId>(transitioningItems);
199
151
  // for (const trigger of interaction.triggers) {
200
152
  // if (!('itemId' in trigger)) continue;
@@ -205,6 +157,58 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
205
157
  // }
206
158
  }
207
159
 
160
+ notifyScroll(position: number) {
161
+ const timestamp = Date.now();
162
+ const item = this.items.find((item) => item.id === 'FYUIEGBF')!;
163
+ const testtop = item.area[this.layoutId].top;
164
+ for (const interaction of this.interactions) {
165
+ const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
166
+ const activeStateId = interaction.states.find((state) => state.id !== interaction.startStateId)?.id;
167
+ const matchingTrigger = interaction.triggers.find((trigger) => {
168
+ if (!('position' in trigger) || testtop === 0) return false;
169
+ const triggerPosition = testtop * window.innerWidth;
170
+ const isScrolledPastTrigger = triggerPosition < position;
171
+ if (!isScrolledPastTrigger && !trigger.isReverse) return false;
172
+ const stateId = isScrolledPastTrigger ? trigger.from : trigger.to;
173
+ return stateId === currentStateId;
174
+ });
175
+ if (!matchingTrigger || !('position' in matchingTrigger) || !activeStateId) continue;
176
+ const triggerPosition = testtop * window.innerWidth;
177
+ const isScrolledPastTrigger = triggerPosition < position;
178
+ const targetStateId = isScrolledPastTrigger ? matchingTrigger.to : matchingTrigger.from;
179
+ this.setCurrentStateForInteraction(interaction.id, targetStateId);
180
+ const transitioningItems = this.stateItemsIdsMap[activeStateId] ?? [];
181
+ const state = interaction.states.find((state) => state.id === targetStateId);
182
+ const actions = state?.actions ?? [];
183
+ for (const action of actions) {
184
+ const ctrl = this.ctrls.get(action.itemId);
185
+ if (!ctrl) continue;
186
+ ctrl.receiveAction(action.type);
187
+ }
188
+ const itemsStages = this.itemsStages.map((stage) => {
189
+ if (stage.interactionId !== interaction.id) return stage;
190
+ const newStage = {
191
+ itemId: stage.itemId,
192
+ interactionId: stage.interactionId,
193
+ type: 'transitioning' as const,
194
+ from: stage.type === 'transitioning' ? stage.to : stage.stateId!,
195
+ to: targetStateId,
196
+ direction: targetStateId === activeStateId ? 'in' as const : 'out' as const,
197
+ updated: timestamp
198
+ };
199
+ return newStage;
200
+ });
201
+ this.itemsStages = itemsStages;
202
+ const itemsToNotify = new Set<ItemId>(transitioningItems);
203
+ for (const trigger of interaction.triggers) {
204
+ if (!('itemId' in trigger)) continue;
205
+ itemsToNotify.add(trigger.itemId);
206
+ }
207
+ this.notifyItemCtrlsChange(Array.from(itemsToNotify));
208
+ this.notifyTransitionStartForItems(transitioningItems, activeStateId);
209
+ }
210
+ }
211
+
208
212
  notifyItemTrigger(itemId: string, triggerType: TriggerType): void {
209
213
  // const timestamp = Date.now();
210
214
  // for (const interaction of this.interactions) {