@cntrl-site/sdk-nextjs 1.9.14-0 → 1.9.14

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 (6) hide show
  1. package/cntrl-site-sdk-nextjs-1.9.14-2.tgz +0 -0
  2. package/lib/interactions/InteractionsRegistry.js +9 -126
  3. package/package.json +2 -2
  4. package/src/interactions/InteractionsRegistry.ts +12 -131
  5. package/src/interactions/ItemInteractionCtrl.ts +1 -1
  6. package/src/interactions/types.ts +2 -2
package/lib/interactions/InteractionsRegistry.js CHANGED
@@ -8,7 +8,6 @@ class InteractionsRegistry {
8
8
  var _a;
9
9
  this.ctrls = new Map();
10
10
  this.items = this.unpackItems(article);
11
- this.layoutId = layoutId;
12
11
  const interactions = (_a = article.interactions[layoutId]) !== null && _a !== void 0 ? _a : [];
13
12
  const activeStatesIds = interactions.reduce((map, inter) => {
14
13
  var _a;
@@ -94,63 +93,23 @@ class InteractionsRegistry {
94
93
  for (const interaction of this.interactions) {
95
94
  const { triggers } = interaction;
96
95
  for (const trigger of triggers) {
97
- if (!('triggerEvent' in trigger))
96
+ if (!('itemId' in trigger))
98
97
  continue;
99
98
  if (trigger.itemId !== itemId)
100
99
  continue;
101
100
  if (activeStates.includes(trigger.from)) {
102
- available.add(trigger.triggerEvent);
101
+ available.add(trigger.type);
103
102
  }
104
103
  }
105
104
  }
106
105
  return available;
107
106
  }
108
- getTriggerPositionForItemScrollTrigger(trigger) {
109
- const itemArea = this.items.find((item) => item.id === trigger.itemId).area[this.layoutId];
110
- let triggerPosition = 0;
111
- switch (trigger.itemPosition) {
112
- case 'top':
113
- triggerPosition = itemArea.top * window.innerWidth;
114
- break;
115
- case 'center':
116
- triggerPosition = itemArea.top * window.innerWidth - window.innerHeight / 2;
117
- break;
118
- case 'bottom':
119
- triggerPosition = itemArea.top * window.innerWidth - window.innerHeight;
120
- break;
121
- default:
122
- triggerPosition = itemArea.top * window.innerWidth;
123
- break;
124
- }
125
- switch (trigger.screenPosition) {
126
- case 'top':
127
- triggerPosition += 0;
128
- break;
129
- case 'center':
130
- triggerPosition += (itemArea.height * window.innerWidth) / 2;
131
- break;
132
- case 'bottom':
133
- triggerPosition += itemArea.height * window.innerWidth;
134
- break;
135
- default:
136
- triggerPosition += 0;
137
- break;
138
- }
139
- triggerPosition += trigger.offset;
140
- return triggerPosition;
141
- }
142
- isItemScrollTriggerOnStartScreen(trigger) {
143
- const screenHeight = window.innerHeight;
144
- const triggerPosition = this.getTriggerPositionForItemScrollTrigger(trigger);
145
- return triggerPosition < screenHeight;
146
- }
147
107
  notifyLoad() {
148
108
  var _a, _b;
149
109
  const timestamp = Date.now();
150
110
  for (const interaction of this.interactions) {
151
111
  const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
152
- const matchingTrigger = interaction.triggers.find(trigger => ('position' in trigger && trigger.position === 0 && trigger.from === currentStateId)
153
- || (trigger.type === 'item-scroll-position' && this.items.find((item) => item.id === trigger.itemId) && trigger.from === currentStateId && this.isItemScrollTriggerOnStartScreen(trigger)));
112
+ const matchingTrigger = interaction.triggers.find(trigger => 'position' in trigger && trigger.position === 0 && trigger.from === currentStateId);
154
113
  if (!matchingTrigger)
155
114
  continue;
156
115
  const activeStateId = this.getActiveInteractionState(interaction.id);
@@ -195,94 +154,18 @@ class InteractionsRegistry {
195
154
  const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
196
155
  const activeStateId = (_a = interaction.states.find((state) => state.id !== interaction.startStateId)) === null || _a === void 0 ? void 0 : _a.id;
197
156
  const matchingTrigger = interaction.triggers.find((trigger) => {
198
- if (trigger.type !== 'scroll-position' && trigger.type !== 'item-scroll-position')
199
- return false;
200
- let triggerPosition;
201
- if (trigger.type === 'scroll-position') {
202
- if (trigger.position === 0)
203
- return false;
204
- triggerPosition = trigger.position * window.innerWidth;
205
- }
206
- if (trigger.type === 'item-scroll-position') {
207
- const itemArea = this.items.find((item) => item.id === trigger.itemId).area[this.layoutId];
208
- switch (trigger.itemPosition) {
209
- case 'top':
210
- triggerPosition = itemArea.top * window.innerWidth;
211
- break;
212
- case 'center':
213
- triggerPosition = itemArea.top * window.innerWidth - window.innerHeight / 2;
214
- break;
215
- case 'bottom':
216
- triggerPosition = itemArea.top * window.innerWidth - window.innerHeight;
217
- break;
218
- default:
219
- triggerPosition = itemArea.top * window.innerWidth;
220
- break;
221
- }
222
- switch (trigger.screenPosition) {
223
- case 'top':
224
- triggerPosition += 0;
225
- break;
226
- case 'center':
227
- triggerPosition += (itemArea.height * window.innerWidth) / 2;
228
- break;
229
- case 'bottom':
230
- triggerPosition += itemArea.height * window.innerWidth;
231
- break;
232
- default:
233
- triggerPosition += 0;
234
- break;
235
- }
236
- triggerPosition += trigger.offset;
237
- }
238
- if (!triggerPosition)
157
+ if (!('position' in trigger) || trigger.position === 0)
239
158
  return false;
159
+ const triggerPosition = trigger.position * window.innerWidth;
240
160
  const isScrolledPastTrigger = triggerPosition < position;
241
161
  if (!isScrolledPastTrigger && !trigger.isReverse)
242
162
  return false;
243
163
  const stateId = isScrolledPastTrigger ? trigger.from : trigger.to;
244
164
  return stateId === currentStateId;
245
165
  });
246
- if (!matchingTrigger || (matchingTrigger.type !== 'scroll-position' && matchingTrigger.type !== 'item-scroll-position') || !activeStateId)
247
- continue;
248
- let triggerPosition;
249
- if (matchingTrigger.type === 'scroll-position') {
250
- triggerPosition = matchingTrigger.position * window.innerWidth;
251
- }
252
- if (matchingTrigger.type === 'item-scroll-position') {
253
- const itemArea = this.items.find((item) => item.id === matchingTrigger.itemId).area[this.layoutId];
254
- switch (matchingTrigger.itemPosition) {
255
- case 'top':
256
- triggerPosition = itemArea.top * window.innerWidth;
257
- break;
258
- case 'center':
259
- triggerPosition = itemArea.top * window.innerWidth - window.innerHeight / 2;
260
- break;
261
- case 'bottom':
262
- triggerPosition = itemArea.top * window.innerWidth - window.innerHeight;
263
- break;
264
- default:
265
- triggerPosition = itemArea.top * window.innerWidth;
266
- break;
267
- }
268
- switch (matchingTrigger.screenPosition) {
269
- case 'top':
270
- triggerPosition += 0;
271
- break;
272
- case 'center':
273
- triggerPosition += (itemArea.height * window.innerWidth) / 2;
274
- break;
275
- case 'bottom':
276
- triggerPosition += itemArea.height * window.innerWidth;
277
- break;
278
- default:
279
- triggerPosition += 0;
280
- break;
281
- }
282
- triggerPosition += matchingTrigger.offset;
283
- }
284
- if (!triggerPosition)
166
+ if (!matchingTrigger || !('position' in matchingTrigger) || !activeStateId)
285
167
  continue;
168
+ const triggerPosition = matchingTrigger.position * window.innerWidth;
286
169
  const isScrolledPastTrigger = triggerPosition < position;
287
170
  const targetStateId = isScrolledPastTrigger ? matchingTrigger.to : matchingTrigger.from;
288
171
  this.setCurrentStateForInteraction(interaction.id, targetStateId);
@@ -325,10 +208,10 @@ class InteractionsRegistry {
325
208
  const timestamp = Date.now();
326
209
  for (const interaction of this.interactions) {
327
210
  const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
328
- const matchingTrigger = interaction.triggers.find((trigger) => 'triggerEvent' in trigger
211
+ const matchingTrigger = interaction.triggers.find((trigger) => 'itemId' in trigger
329
212
  && trigger.itemId === itemId
330
213
  && trigger.from === currentStateId
331
- && trigger.triggerEvent === triggerType);
214
+ && trigger.type === triggerType);
332
215
  if (!matchingTrigger)
333
216
  continue;
334
217
  const activeStateId = this.getActiveInteractionState(interaction.id);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cntrl-site/sdk-nextjs",
3
- "version": "1.9.14-0",
3
+ "version": "1.9.14",
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.25.1-0",
35
+ "@cntrl-site/sdk": "^1.25.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
@@ -4,16 +4,13 @@ import {
4
4
  ArticleItemType,
5
5
  Interaction,
6
6
  InteractionItemTrigger,
7
- InteractionScrollTrigger,
8
7
  ItemAny,
9
8
  } from '@cntrl-site/sdk';
10
9
  import { isItemType } from '../utils/isItemType';
11
- import { InteractionItemScrollTrigger } from '@cntrl-site/sdk/lib/types/article/Interaction';
12
10
 
13
11
  export class InteractionsRegistry implements InteractionsRegistryPort {
14
12
  private ctrls: Map<ItemId, ItemInteractionCtrl> = new Map();
15
13
  private items: ItemAny[];
16
- private layoutId: string;
17
14
  private interactions: Interaction[];
18
15
  private stateItemsIdsMap: StateItemsIdsMap;
19
16
  private interactionStateMap: InteractionStateMap;
@@ -22,7 +19,6 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
22
19
 
23
20
  constructor(article: Article, layoutId: string) {
24
21
  this.items = this.unpackItems(article);
25
- this.layoutId = layoutId;
26
22
  const interactions = article.interactions[layoutId] ?? [];
27
23
  const activeStatesIds = interactions.reduce<StateId[]>((map, inter) => {
28
24
  const activeStateId = inter.states.find((state) => state.id !== inter.startStateId)?.id;
@@ -100,70 +96,28 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
100
96
  return itemStyles;
101
97
  }
102
98
 
103
- getItemAvailableTriggers(itemId: string): Set<InteractionItemTrigger['triggerEvent']> {
104
- const available = new Set<InteractionItemTrigger['triggerEvent']>();
99
+ getItemAvailableTriggers(itemId: string): Set<InteractionItemTrigger['type']> {
100
+ const available = new Set<InteractionItemTrigger['type']>();
105
101
  const activeStates = Object.values(this.interactionStateMap);
106
102
  for (const interaction of this.interactions) {
107
103
  const { triggers } = interaction;
108
104
  for (const trigger of triggers) {
109
- if (!('triggerEvent' in trigger)) continue;
105
+ if (!('itemId' in trigger)) continue;
110
106
  if (trigger.itemId !== itemId) continue;
111
107
  if (activeStates.includes(trigger.from)) {
112
- available.add(trigger.triggerEvent);
108
+ available.add(trigger.type);
113
109
  }
114
110
  }
115
111
  }
116
112
  return available;
117
113
  }
118
114
 
119
- getTriggerPositionForItemScrollTrigger(trigger: InteractionItemScrollTrigger): number {
120
- const itemArea = this.items.find((item) => item.id === trigger.itemId)!.area[this.layoutId];
121
- let triggerPosition = 0;
122
- switch (trigger.itemPosition) {
123
- case 'top':
124
- triggerPosition = itemArea.top * window.innerWidth;
125
- break;
126
- case 'center':
127
- triggerPosition = itemArea.top * window.innerWidth - window.innerHeight / 2;
128
- break;
129
- case 'bottom':
130
- triggerPosition = itemArea.top * window.innerWidth - window.innerHeight;
131
- break;
132
- default:
133
- triggerPosition = itemArea.top * window.innerWidth;
134
- break;
135
- }
136
- switch (trigger.screenPosition) {
137
- case 'top':
138
- triggerPosition += 0;
139
- break;
140
- case 'center':
141
- triggerPosition += (itemArea.height * window.innerWidth) / 2;
142
- break;
143
- case 'bottom':
144
- triggerPosition += itemArea.height * window.innerWidth;
145
- break;
146
- default:
147
- triggerPosition += 0;
148
- break;
149
- }
150
- triggerPosition += trigger.offset;
151
- return triggerPosition;
152
- }
153
-
154
- isItemScrollTriggerOnStartScreen(trigger: InteractionItemScrollTrigger): boolean {
155
- const screenHeight = window.innerHeight;
156
- const triggerPosition = this.getTriggerPositionForItemScrollTrigger(trigger);
157
- return triggerPosition < screenHeight;
158
- }
159
-
160
115
  notifyLoad() {
161
116
  const timestamp = Date.now();
162
117
  for (const interaction of this.interactions) {
163
118
  const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
164
119
  const matchingTrigger = interaction.triggers.find(trigger =>
165
- ('position' in trigger && trigger.position === 0 && trigger.from === currentStateId)
166
- || (trigger.type === 'item-scroll-position' && this.items.find((item) => item.id === trigger.itemId) && trigger.from === currentStateId && this.isItemScrollTriggerOnStartScreen(trigger))
120
+ 'position' in trigger && trigger.position === 0 && trigger.from === currentStateId
167
121
  );
168
122
  if (!matchingTrigger) continue;
169
123
  const activeStateId = this.getActiveInteractionState(interaction.id);
@@ -207,88 +161,15 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
207
161
  const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
208
162
  const activeStateId = interaction.states.find((state) => state.id !== interaction.startStateId)?.id;
209
163
  const matchingTrigger = interaction.triggers.find((trigger) => {
210
- if (trigger.type !== 'scroll-position' && trigger.type !== 'item-scroll-position') return false;
211
- let triggerPosition;
212
- if (trigger.type === 'scroll-position') {
213
- if (trigger.position === 0) return false;
214
- triggerPosition = trigger.position * window.innerWidth;
215
- }
216
- if (trigger.type === 'item-scroll-position') {
217
- const itemArea = this.items.find((item) => item.id === trigger.itemId)!.area[this.layoutId];
218
- switch (trigger.itemPosition) {
219
- case 'top':
220
- triggerPosition = itemArea.top * window.innerWidth;
221
- break;
222
- case 'center':
223
- triggerPosition = itemArea.top * window.innerWidth - window.innerHeight / 2;
224
- break;
225
- case 'bottom':
226
- triggerPosition = itemArea.top * window.innerWidth - window.innerHeight;
227
- break;
228
- default:
229
- triggerPosition = itemArea.top * window.innerWidth;
230
- break;
231
- }
232
- switch (trigger.screenPosition) {
233
- case 'top':
234
- triggerPosition += 0;
235
- break;
236
- case 'center':
237
- triggerPosition += (itemArea.height * window.innerWidth) / 2;
238
- break;
239
- case 'bottom':
240
- triggerPosition += itemArea.height * window.innerWidth;
241
- break;
242
- default:
243
- triggerPosition += 0;
244
- break;
245
- }
246
- triggerPosition += trigger.offset;
247
- }
248
- if (!triggerPosition) return false;
164
+ if (!('position' in trigger) || trigger.position === 0) return false;
165
+ const triggerPosition = trigger.position * window.innerWidth;
249
166
  const isScrolledPastTrigger = triggerPosition < position;
250
167
  if (!isScrolledPastTrigger && !trigger.isReverse) return false;
251
168
  const stateId = isScrolledPastTrigger ? trigger.from : trigger.to;
252
169
  return stateId === currentStateId;
253
170
  });
254
- if (!matchingTrigger || (matchingTrigger.type !== 'scroll-position' && matchingTrigger.type !== 'item-scroll-position') || !activeStateId) continue;
255
- let triggerPosition;
256
- if (matchingTrigger.type === 'scroll-position') {
257
- triggerPosition = matchingTrigger.position * window.innerWidth;
258
- }
259
- if (matchingTrigger.type === 'item-scroll-position') {
260
- const itemArea = this.items.find((item) => item.id === matchingTrigger.itemId)!.area[this.layoutId];
261
- switch (matchingTrigger.itemPosition) {
262
- case 'top':
263
- triggerPosition = itemArea.top * window.innerWidth;
264
- break;
265
- case 'center':
266
- triggerPosition = itemArea.top * window.innerWidth - window.innerHeight / 2;
267
- break;
268
- case 'bottom':
269
- triggerPosition = itemArea.top * window.innerWidth - window.innerHeight;
270
- break;
271
- default:
272
- triggerPosition = itemArea.top * window.innerWidth;
273
- break;
274
- }
275
- switch (matchingTrigger.screenPosition) {
276
- case 'top':
277
- triggerPosition += 0;
278
- break;
279
- case 'center':
280
- triggerPosition += (itemArea.height * window.innerWidth) / 2;
281
- break;
282
- case 'bottom':
283
- triggerPosition += itemArea.height * window.innerWidth;
284
- break;
285
- default:
286
- triggerPosition += 0;
287
- break;
288
- }
289
- triggerPosition += matchingTrigger.offset;
290
- }
291
- if (!triggerPosition) continue;
171
+ if (!matchingTrigger || !('position' in matchingTrigger) || !activeStateId) continue;
172
+ const triggerPosition = matchingTrigger.position * window.innerWidth;
292
173
  const isScrolledPastTrigger = triggerPosition < position;
293
174
  const targetStateId = isScrolledPastTrigger ? matchingTrigger.to : matchingTrigger.from;
294
175
  this.setCurrentStateForInteraction(interaction.id, targetStateId);
@@ -329,10 +210,10 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
329
210
  for (const interaction of this.interactions) {
330
211
  const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
331
212
  const matchingTrigger = interaction.triggers.find((trigger) =>
332
- 'triggerEvent' in trigger
213
+ 'itemId' in trigger
333
214
  && trigger.itemId === itemId
334
215
  && trigger.from === currentStateId
335
- && trigger.triggerEvent === triggerType
216
+ && trigger.type === triggerType
336
217
  );
337
218
  if (!matchingTrigger) continue;
338
219
  const activeStateId = this.getActiveInteractionState(interaction.id);
@@ -485,7 +366,7 @@ type TransitioningStage = {
485
366
  type ActiveStage = { type: 'active'; itemId: string; interactionId: string; stateId?: string; isStartState: boolean; updated: number; };
486
367
  type InteractionStateMap = Record<InteractionId, StateId>;
487
368
  type StateItemsIdsMap = Record<StateId, ItemId[]>;
488
- type TriggerType = InteractionItemTrigger['triggerEvent'];
369
+ type TriggerType = InteractionItemTrigger['type'];
489
370
  type InteractionId = string;
490
371
  type StateId = string;
491
372
  type ItemId = string;
package/src/interactions/ItemInteractionCtrl.ts CHANGED
@@ -30,7 +30,7 @@ export class ItemInteractionController implements ItemInteractionCtrl {
30
30
  };
31
31
  }
32
32
 
33
- getHasTrigger(itemId: string, triggerType: InteractionItemTrigger['triggerEvent']): boolean {
33
+ getHasTrigger(itemId: string, triggerType: InteractionItemTrigger['type']): boolean {
34
34
  const triggers = this.registry.getItemAvailableTriggers(itemId);
35
35
  return triggers.has(triggerType);
36
36
  }
package/src/interactions/types.ts CHANGED
@@ -2,7 +2,7 @@ import { ArticleItemType, FillLayer, InteractionItemTrigger, ItemState } from '@
2
2
 
3
3
  export interface ItemInteractionCtrl {
4
4
  getState<T>(keys: string[]): StateCSSInfo<T>;
5
- getHasTrigger(itemId: string, triggerType: InteractionItemTrigger['triggerEvent']): boolean;
5
+ getHasTrigger(itemId: string, triggerType: InteractionItemTrigger['type']): boolean;
6
6
  sendTrigger(type: 'click' | 'hover-in' | 'hover-out'): void;
7
7
  handleTransitionEnd?: (styleKey: string) => void;
8
8
  handleTransitionStart?: (styleKeys: string[]) => void;
@@ -14,7 +14,7 @@ export interface ItemInteractionCtrl {
14
14
  export interface InteractionsRegistryPort {
15
15
  register(itemId: string, ctrl: ItemInteractionCtrl): void;
16
16
  getStatePropsForItem(itemId: string): StateProps<unknown>;
17
- getItemAvailableTriggers(itemId: string): Set<InteractionItemTrigger['triggerEvent']>;
17
+ getItemAvailableTriggers(itemId: string): Set<InteractionItemTrigger['type']>;
18
18
  notifyItemTrigger(itemId: string, type: TriggerType): void;
19
19
  notifyTransitionEnd(itemId: string): void;
20
20
  }