@cntrl-site/sdk-nextjs 1.9.13-3 → 1.9.13-5
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.
|
@@ -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;
|
|
@@ -148,96 +149,108 @@ class InteractionsRegistry {
|
|
|
148
149
|
}
|
|
149
150
|
}
|
|
150
151
|
notifyScroll(position) {
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
152
|
+
var _a, _b, _c;
|
|
153
|
+
const timestamp = Date.now();
|
|
154
|
+
const item = this.items.find((item) => item.id === 'FYUIEGBF');
|
|
155
|
+
const testtop = item.area[this.layoutId].top;
|
|
156
|
+
for (const interaction of this.interactions) {
|
|
157
|
+
const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
|
|
158
|
+
const activeStateId = (_a = interaction.states.find((state) => state.id !== interaction.startStateId)) === null || _a === void 0 ? void 0 : _a.id;
|
|
159
|
+
const matchingTrigger = interaction.triggers.find((trigger) => {
|
|
160
|
+
if (!('position' in trigger) || testtop === 0)
|
|
161
|
+
return false;
|
|
162
|
+
const triggerPosition = testtop * window.innerWidth;
|
|
163
|
+
const isScrolledPastTrigger = triggerPosition < position;
|
|
164
|
+
if (!isScrolledPastTrigger && !trigger.isReverse)
|
|
165
|
+
return false;
|
|
166
|
+
const stateId = isScrolledPastTrigger ? trigger.from : trigger.to;
|
|
167
|
+
return stateId === currentStateId;
|
|
168
|
+
});
|
|
169
|
+
if (!matchingTrigger || !('position' in matchingTrigger) || !activeStateId)
|
|
170
|
+
continue;
|
|
171
|
+
const triggerPosition = testtop * window.innerWidth;
|
|
172
|
+
const isScrolledPastTrigger = triggerPosition < position;
|
|
173
|
+
const targetStateId = isScrolledPastTrigger ? matchingTrigger.to : matchingTrigger.from;
|
|
174
|
+
this.setCurrentStateForInteraction(interaction.id, targetStateId);
|
|
175
|
+
const transitioningItems = (_b = this.stateItemsIdsMap[activeStateId]) !== null && _b !== void 0 ? _b : [];
|
|
176
|
+
const state = interaction.states.find((state) => state.id === targetStateId);
|
|
177
|
+
const actions = (_c = state === null || state === void 0 ? void 0 : state.actions) !== null && _c !== void 0 ? _c : [];
|
|
178
|
+
for (const action of actions) {
|
|
179
|
+
const ctrl = this.ctrls.get(action.itemId);
|
|
180
|
+
if (!ctrl)
|
|
181
|
+
continue;
|
|
182
|
+
ctrl.receiveAction(action.type);
|
|
183
|
+
}
|
|
184
|
+
const itemsStages = this.itemsStages.map((stage) => {
|
|
185
|
+
if (stage.interactionId !== interaction.id)
|
|
186
|
+
return stage;
|
|
187
|
+
const newStage = {
|
|
188
|
+
itemId: stage.itemId,
|
|
189
|
+
interactionId: stage.interactionId,
|
|
190
|
+
type: 'transitioning',
|
|
191
|
+
from: stage.type === 'transitioning' ? stage.to : stage.stateId,
|
|
192
|
+
to: targetStateId,
|
|
193
|
+
direction: targetStateId === activeStateId ? 'in' : 'out',
|
|
194
|
+
updated: timestamp
|
|
195
|
+
};
|
|
196
|
+
return newStage;
|
|
197
|
+
});
|
|
198
|
+
this.itemsStages = itemsStages;
|
|
199
|
+
const itemsToNotify = new Set(transitioningItems);
|
|
200
|
+
for (const trigger of interaction.triggers) {
|
|
201
|
+
if (!('itemId' in trigger))
|
|
202
|
+
continue;
|
|
203
|
+
itemsToNotify.add(trigger.itemId);
|
|
204
|
+
}
|
|
205
|
+
this.notifyItemCtrlsChange(Array.from(itemsToNotify));
|
|
206
|
+
this.notifyTransitionStartForItems(transitioningItems, activeStateId);
|
|
207
|
+
}
|
|
198
208
|
}
|
|
199
209
|
notifyItemTrigger(itemId, triggerType) {
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
210
|
+
var _a, _b;
|
|
211
|
+
const timestamp = Date.now();
|
|
212
|
+
for (const interaction of this.interactions) {
|
|
213
|
+
const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
|
|
214
|
+
const matchingTrigger = interaction.triggers.find((trigger) => 'triggerEvent' in trigger
|
|
215
|
+
&& trigger.itemId === itemId
|
|
216
|
+
&& trigger.from === currentStateId
|
|
217
|
+
&& trigger.triggerEvent === triggerType);
|
|
218
|
+
if (!matchingTrigger)
|
|
219
|
+
continue;
|
|
220
|
+
const activeStateId = this.getActiveInteractionState(interaction.id);
|
|
221
|
+
const isNewStateActive = matchingTrigger.to === activeStateId;
|
|
222
|
+
this.setCurrentStateForInteraction(interaction.id, matchingTrigger.to);
|
|
223
|
+
const transitioningItems = (_a = this.stateItemsIdsMap[activeStateId]) !== null && _a !== void 0 ? _a : [];
|
|
224
|
+
const state = interaction.states.find((state) => state.id === matchingTrigger.to);
|
|
225
|
+
const actions = (_b = state === null || state === void 0 ? void 0 : state.actions) !== null && _b !== void 0 ? _b : [];
|
|
226
|
+
for (const action of actions) {
|
|
227
|
+
const ctrl = this.ctrls.get(action.itemId);
|
|
228
|
+
if (!ctrl)
|
|
229
|
+
continue;
|
|
230
|
+
ctrl.receiveAction(action.type);
|
|
231
|
+
}
|
|
232
|
+
this.itemsStages = this.itemsStages.map((stage) => {
|
|
233
|
+
if (stage.interactionId !== interaction.id)
|
|
234
|
+
return stage;
|
|
235
|
+
return {
|
|
236
|
+
itemId: stage.itemId,
|
|
237
|
+
interactionId: stage.interactionId,
|
|
238
|
+
type: 'transitioning',
|
|
239
|
+
from: stage.type === 'transitioning' ? stage.to : stage.stateId,
|
|
240
|
+
to: matchingTrigger.to,
|
|
241
|
+
direction: isNewStateActive ? 'in' : 'out',
|
|
242
|
+
updated: timestamp
|
|
243
|
+
};
|
|
244
|
+
});
|
|
245
|
+
const itemsToNotify = new Set(transitioningItems);
|
|
246
|
+
for (const trigger of interaction.triggers) {
|
|
247
|
+
if (!('itemId' in trigger))
|
|
248
|
+
continue;
|
|
249
|
+
itemsToNotify.add(trigger.itemId);
|
|
250
|
+
}
|
|
251
|
+
this.notifyItemCtrlsChange(Array.from(itemsToNotify));
|
|
252
|
+
this.notifyTransitionStartForItems(transitioningItems, activeStateId);
|
|
253
|
+
}
|
|
241
254
|
}
|
|
242
255
|
notifyTransitionStartForItems(itemsIds, activeStateId) {
|
|
243
256
|
var _a, _b;
|
package/package.json
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;
|
|
@@ -156,97 +158,99 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
|
|
|
156
158
|
}
|
|
157
159
|
|
|
158
160
|
notifyScroll(position: number) {
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
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
|
+
}
|
|
206
210
|
}
|
|
207
211
|
|
|
208
212
|
notifyItemTrigger(itemId: string, triggerType: TriggerType): void {
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
213
|
+
const timestamp = Date.now();
|
|
214
|
+
for (const interaction of this.interactions) {
|
|
215
|
+
const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
|
|
216
|
+
const matchingTrigger = interaction.triggers.find((trigger) =>
|
|
217
|
+
'triggerEvent' in trigger
|
|
218
|
+
&& trigger.itemId === itemId
|
|
219
|
+
&& trigger.from === currentStateId
|
|
220
|
+
&& trigger.triggerEvent === triggerType
|
|
221
|
+
);
|
|
222
|
+
if (!matchingTrigger) continue;
|
|
223
|
+
const activeStateId = this.getActiveInteractionState(interaction.id);
|
|
224
|
+
const isNewStateActive = matchingTrigger.to === activeStateId;
|
|
225
|
+
this.setCurrentStateForInteraction(interaction.id, matchingTrigger.to);
|
|
226
|
+
const transitioningItems = this.stateItemsIdsMap[activeStateId] ?? [];
|
|
227
|
+
const state = interaction.states.find((state) => state.id === matchingTrigger.to);
|
|
228
|
+
const actions = state?.actions ?? [];
|
|
229
|
+
for (const action of actions) {
|
|
230
|
+
const ctrl = this.ctrls.get(action.itemId);
|
|
231
|
+
if (!ctrl) continue;
|
|
232
|
+
ctrl.receiveAction(action.type);
|
|
233
|
+
}
|
|
234
|
+
this.itemsStages = this.itemsStages.map((stage) => {
|
|
235
|
+
if (stage.interactionId !== interaction.id) return stage;
|
|
236
|
+
return {
|
|
237
|
+
itemId: stage.itemId,
|
|
238
|
+
interactionId: stage.interactionId,
|
|
239
|
+
type: 'transitioning',
|
|
240
|
+
from: stage.type === 'transitioning' ? stage.to : stage.stateId!,
|
|
241
|
+
to: matchingTrigger.to,
|
|
242
|
+
direction: isNewStateActive ? 'in' : 'out',
|
|
243
|
+
updated: timestamp
|
|
244
|
+
};
|
|
245
|
+
});
|
|
246
|
+
const itemsToNotify = new Set<ItemId>(transitioningItems);
|
|
247
|
+
for (const trigger of interaction.triggers) {
|
|
248
|
+
if (!('itemId' in trigger)) continue;
|
|
249
|
+
itemsToNotify.add(trigger.itemId);
|
|
250
|
+
}
|
|
251
|
+
this.notifyItemCtrlsChange(Array.from(itemsToNotify));
|
|
252
|
+
this.notifyTransitionStartForItems(transitioningItems, activeStateId);
|
|
253
|
+
}
|
|
250
254
|
}
|
|
251
255
|
|
|
252
256
|
notifyTransitionStartForItems(itemsIds: string[], activeStateId: string) {
|