@cntrl-site/sdk-nextjs 1.9.14-1 → 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 -125
  3. package/package.json +2 -2
  4. package/src/interactions/InteractionsRegistry.ts +12 -130
  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,62 +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 triggerPosition = this.getTriggerPositionForItemScrollTrigger(trigger);
144
- return triggerPosition < 0;
145
- }
146
107
  notifyLoad() {
147
108
  var _a, _b;
148
109
  const timestamp = Date.now();
149
110
  for (const interaction of this.interactions) {
150
111
  const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
151
- const matchingTrigger = interaction.triggers.find(trigger => ('position' in trigger && trigger.position === 0 && trigger.from === currentStateId)
152
- || (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);
153
113
  if (!matchingTrigger)
154
114
  continue;
155
115
  const activeStateId = this.getActiveInteractionState(interaction.id);
@@ -194,94 +154,18 @@ class InteractionsRegistry {
194
154
  const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
195
155
  const activeStateId = (_a = interaction.states.find((state) => state.id !== interaction.startStateId)) === null || _a === void 0 ? void 0 : _a.id;
196
156
  const matchingTrigger = interaction.triggers.find((trigger) => {
197
- if (trigger.type !== 'scroll-position' && trigger.type !== 'item-scroll-position')
198
- return false;
199
- let triggerPosition;
200
- if (trigger.type === 'scroll-position') {
201
- if (trigger.position === 0)
202
- return false;
203
- triggerPosition = trigger.position * window.innerWidth;
204
- }
205
- if (trigger.type === 'item-scroll-position') {
206
- const itemArea = this.items.find((item) => item.id === trigger.itemId).area[this.layoutId];
207
- switch (trigger.itemPosition) {
208
- case 'top':
209
- triggerPosition = itemArea.top * window.innerWidth;
210
- break;
211
- case 'center':
212
- triggerPosition = itemArea.top * window.innerWidth - window.innerHeight / 2;
213
- break;
214
- case 'bottom':
215
- triggerPosition = itemArea.top * window.innerWidth - window.innerHeight;
216
- break;
217
- default:
218
- triggerPosition = itemArea.top * window.innerWidth;
219
- break;
220
- }
221
- switch (trigger.screenPosition) {
222
- case 'top':
223
- triggerPosition += 0;
224
- break;
225
- case 'center':
226
- triggerPosition += (itemArea.height * window.innerWidth) / 2;
227
- break;
228
- case 'bottom':
229
- triggerPosition += itemArea.height * window.innerWidth;
230
- break;
231
- default:
232
- triggerPosition += 0;
233
- break;
234
- }
235
- triggerPosition += trigger.offset;
236
- }
237
- if (!triggerPosition)
157
+ if (!('position' in trigger) || trigger.position === 0)
238
158
  return false;
159
+ const triggerPosition = trigger.position * window.innerWidth;
239
160
  const isScrolledPastTrigger = triggerPosition < position;
240
161
  if (!isScrolledPastTrigger && !trigger.isReverse)
241
162
  return false;
242
163
  const stateId = isScrolledPastTrigger ? trigger.from : trigger.to;
243
164
  return stateId === currentStateId;
244
165
  });
245
- if (!matchingTrigger || (matchingTrigger.type !== 'scroll-position' && matchingTrigger.type !== 'item-scroll-position') || !activeStateId)
246
- continue;
247
- let triggerPosition;
248
- if (matchingTrigger.type === 'scroll-position') {
249
- triggerPosition = matchingTrigger.position * window.innerWidth;
250
- }
251
- if (matchingTrigger.type === 'item-scroll-position') {
252
- const itemArea = this.items.find((item) => item.id === matchingTrigger.itemId).area[this.layoutId];
253
- switch (matchingTrigger.itemPosition) {
254
- case 'top':
255
- triggerPosition = itemArea.top * window.innerWidth;
256
- break;
257
- case 'center':
258
- triggerPosition = itemArea.top * window.innerWidth - window.innerHeight / 2;
259
- break;
260
- case 'bottom':
261
- triggerPosition = itemArea.top * window.innerWidth - window.innerHeight;
262
- break;
263
- default:
264
- triggerPosition = itemArea.top * window.innerWidth;
265
- break;
266
- }
267
- switch (matchingTrigger.screenPosition) {
268
- case 'top':
269
- triggerPosition += 0;
270
- break;
271
- case 'center':
272
- triggerPosition += (itemArea.height * window.innerWidth) / 2;
273
- break;
274
- case 'bottom':
275
- triggerPosition += itemArea.height * window.innerWidth;
276
- break;
277
- default:
278
- triggerPosition += 0;
279
- break;
280
- }
281
- triggerPosition += matchingTrigger.offset;
282
- }
283
- if (!triggerPosition)
166
+ if (!matchingTrigger || !('position' in matchingTrigger) || !activeStateId)
284
167
  continue;
168
+ const triggerPosition = matchingTrigger.position * window.innerWidth;
285
169
  const isScrolledPastTrigger = triggerPosition < position;
286
170
  const targetStateId = isScrolledPastTrigger ? matchingTrigger.to : matchingTrigger.from;
287
171
  this.setCurrentStateForInteraction(interaction.id, targetStateId);
@@ -324,10 +208,10 @@ class InteractionsRegistry {
324
208
  const timestamp = Date.now();
325
209
  for (const interaction of this.interactions) {
326
210
  const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
327
- const matchingTrigger = interaction.triggers.find((trigger) => 'triggerEvent' in trigger
211
+ const matchingTrigger = interaction.triggers.find((trigger) => 'itemId' in trigger
328
212
  && trigger.itemId === itemId
329
213
  && trigger.from === currentStateId
330
- && trigger.triggerEvent === triggerType);
214
+ && trigger.type === triggerType);
331
215
  if (!matchingTrigger)
332
216
  continue;
333
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-1",
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,69 +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 triggerPosition = this.getTriggerPositionForItemScrollTrigger(trigger);
156
- return triggerPosition < 0;
157
- }
158
-
159
115
  notifyLoad() {
160
116
  const timestamp = Date.now();
161
117
  for (const interaction of this.interactions) {
162
118
  const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
163
119
  const matchingTrigger = interaction.triggers.find(trigger =>
164
- ('position' in trigger && trigger.position === 0 && trigger.from === currentStateId)
165
- || (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
166
121
  );
167
122
  if (!matchingTrigger) continue;
168
123
  const activeStateId = this.getActiveInteractionState(interaction.id);
@@ -206,88 +161,15 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
206
161
  const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
207
162
  const activeStateId = interaction.states.find((state) => state.id !== interaction.startStateId)?.id;
208
163
  const matchingTrigger = interaction.triggers.find((trigger) => {
209
- if (trigger.type !== 'scroll-position' && trigger.type !== 'item-scroll-position') return false;
210
- let triggerPosition;
211
- if (trigger.type === 'scroll-position') {
212
- if (trigger.position === 0) return false;
213
- triggerPosition = trigger.position * window.innerWidth;
214
- }
215
- if (trigger.type === 'item-scroll-position') {
216
- const itemArea = this.items.find((item) => item.id === trigger.itemId)!.area[this.layoutId];
217
- switch (trigger.itemPosition) {
218
- case 'top':
219
- triggerPosition = itemArea.top * window.innerWidth;
220
- break;
221
- case 'center':
222
- triggerPosition = itemArea.top * window.innerWidth - window.innerHeight / 2;
223
- break;
224
- case 'bottom':
225
- triggerPosition = itemArea.top * window.innerWidth - window.innerHeight;
226
- break;
227
- default:
228
- triggerPosition = itemArea.top * window.innerWidth;
229
- break;
230
- }
231
- switch (trigger.screenPosition) {
232
- case 'top':
233
- triggerPosition += 0;
234
- break;
235
- case 'center':
236
- triggerPosition += (itemArea.height * window.innerWidth) / 2;
237
- break;
238
- case 'bottom':
239
- triggerPosition += itemArea.height * window.innerWidth;
240
- break;
241
- default:
242
- triggerPosition += 0;
243
- break;
244
- }
245
- triggerPosition += trigger.offset;
246
- }
247
- if (!triggerPosition) return false;
164
+ if (!('position' in trigger) || trigger.position === 0) return false;
165
+ const triggerPosition = trigger.position * window.innerWidth;
248
166
  const isScrolledPastTrigger = triggerPosition < position;
249
167
  if (!isScrolledPastTrigger && !trigger.isReverse) return false;
250
168
  const stateId = isScrolledPastTrigger ? trigger.from : trigger.to;
251
169
  return stateId === currentStateId;
252
170
  });
253
- if (!matchingTrigger || (matchingTrigger.type !== 'scroll-position' && matchingTrigger.type !== 'item-scroll-position') || !activeStateId) continue;
254
- let triggerPosition;
255
- if (matchingTrigger.type === 'scroll-position') {
256
- triggerPosition = matchingTrigger.position * window.innerWidth;
257
- }
258
- if (matchingTrigger.type === 'item-scroll-position') {
259
- const itemArea = this.items.find((item) => item.id === matchingTrigger.itemId)!.area[this.layoutId];
260
- switch (matchingTrigger.itemPosition) {
261
- case 'top':
262
- triggerPosition = itemArea.top * window.innerWidth;
263
- break;
264
- case 'center':
265
- triggerPosition = itemArea.top * window.innerWidth - window.innerHeight / 2;
266
- break;
267
- case 'bottom':
268
- triggerPosition = itemArea.top * window.innerWidth - window.innerHeight;
269
- break;
270
- default:
271
- triggerPosition = itemArea.top * window.innerWidth;
272
- break;
273
- }
274
- switch (matchingTrigger.screenPosition) {
275
- case 'top':
276
- triggerPosition += 0;
277
- break;
278
- case 'center':
279
- triggerPosition += (itemArea.height * window.innerWidth) / 2;
280
- break;
281
- case 'bottom':
282
- triggerPosition += itemArea.height * window.innerWidth;
283
- break;
284
- default:
285
- triggerPosition += 0;
286
- break;
287
- }
288
- triggerPosition += matchingTrigger.offset;
289
- }
290
- if (!triggerPosition) continue;
171
+ if (!matchingTrigger || !('position' in matchingTrigger) || !activeStateId) continue;
172
+ const triggerPosition = matchingTrigger.position * window.innerWidth;
291
173
  const isScrolledPastTrigger = triggerPosition < position;
292
174
  const targetStateId = isScrolledPastTrigger ? matchingTrigger.to : matchingTrigger.from;
293
175
  this.setCurrentStateForInteraction(interaction.id, targetStateId);
@@ -328,10 +210,10 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
328
210
  for (const interaction of this.interactions) {
329
211
  const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
330
212
  const matchingTrigger = interaction.triggers.find((trigger) =>
331
- 'triggerEvent' in trigger
213
+ 'itemId' in trigger
332
214
  && trigger.itemId === itemId
333
215
  && trigger.from === currentStateId
334
- && trigger.triggerEvent === triggerType
216
+ && trigger.type === triggerType
335
217
  );
336
218
  if (!matchingTrigger) continue;
337
219
  const activeStateId = this.getActiveInteractionState(interaction.id);
@@ -484,7 +366,7 @@ type TransitioningStage = {
484
366
  type ActiveStage = { type: 'active'; itemId: string; interactionId: string; stateId?: string; isStartState: boolean; updated: number; };
485
367
  type InteractionStateMap = Record<InteractionId, StateId>;
486
368
  type StateItemsIdsMap = Record<StateId, ItemId[]>;
487
- type TriggerType = InteractionItemTrigger['triggerEvent'];
369
+ type TriggerType = InteractionItemTrigger['type'];
488
370
  type InteractionId = string;
489
371
  type StateId = string;
490
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
  }