@cntrl-site/sdk-nextjs 1.9.13-1 → 1.9.13-11
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.
|
Binary file
|
|
@@ -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,8 @@ 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)
|
|
114
|
+
|| (trigger.type === 'item-scroll-position' && this.items.find((item) => item.id === trigger.itemId).area[this.layoutId].top * window.innerWidth === 0 && trigger.from === currentStateId));
|
|
113
115
|
if (!matchingTrigger)
|
|
114
116
|
continue;
|
|
115
117
|
const activeStateId = this.getActiveInteractionState(interaction.id);
|
|
@@ -154,18 +156,64 @@ class InteractionsRegistry {
|
|
|
154
156
|
const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
|
|
155
157
|
const activeStateId = (_a = interaction.states.find((state) => state.id !== interaction.startStateId)) === null || _a === void 0 ? void 0 : _a.id;
|
|
156
158
|
const matchingTrigger = interaction.triggers.find((trigger) => {
|
|
157
|
-
if (
|
|
159
|
+
if (trigger.type !== 'scroll-position' && trigger.type !== 'item-scroll-position')
|
|
160
|
+
return false;
|
|
161
|
+
let triggerPosition;
|
|
162
|
+
if (trigger.type === 'scroll-position') {
|
|
163
|
+
if (trigger.position === 0)
|
|
164
|
+
return false;
|
|
165
|
+
triggerPosition = trigger.position * window.innerWidth;
|
|
166
|
+
}
|
|
167
|
+
if (trigger.type === 'item-scroll-position') {
|
|
168
|
+
const itemArea = this.items.find((item) => item.id === trigger.itemId).area[this.layoutId];
|
|
169
|
+
switch (trigger.itemPosition) {
|
|
170
|
+
case 'top':
|
|
171
|
+
triggerPosition = itemArea.top * window.innerWidth;
|
|
172
|
+
break;
|
|
173
|
+
case 'center':
|
|
174
|
+
triggerPosition = (itemArea.top + itemArea.height / 2) * window.innerWidth;
|
|
175
|
+
break;
|
|
176
|
+
case 'bottom':
|
|
177
|
+
triggerPosition = (itemArea.top + itemArea.height) * window.innerWidth;
|
|
178
|
+
break;
|
|
179
|
+
default:
|
|
180
|
+
triggerPosition = itemArea.top * window.innerWidth;
|
|
181
|
+
break;
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
if (!triggerPosition)
|
|
158
185
|
return false;
|
|
159
|
-
const triggerPosition = trigger.position * window.innerWidth;
|
|
160
186
|
const isScrolledPastTrigger = triggerPosition < position;
|
|
161
187
|
if (!isScrolledPastTrigger && !trigger.isReverse)
|
|
162
188
|
return false;
|
|
163
189
|
const stateId = isScrolledPastTrigger ? trigger.from : trigger.to;
|
|
164
190
|
return stateId === currentStateId;
|
|
165
191
|
});
|
|
166
|
-
if (!matchingTrigger ||
|
|
192
|
+
if (!matchingTrigger || (matchingTrigger.type !== 'scroll-position' && matchingTrigger.type !== 'item-scroll-position') || !activeStateId)
|
|
193
|
+
continue;
|
|
194
|
+
let triggerPosition;
|
|
195
|
+
if (matchingTrigger.type === 'scroll-position') {
|
|
196
|
+
triggerPosition = matchingTrigger.position * window.innerWidth;
|
|
197
|
+
}
|
|
198
|
+
if (matchingTrigger.type === 'item-scroll-position') {
|
|
199
|
+
const itemArea = this.items.find((item) => item.id === matchingTrigger.itemId).area[this.layoutId];
|
|
200
|
+
switch (matchingTrigger.itemPosition) {
|
|
201
|
+
case 'top':
|
|
202
|
+
triggerPosition = itemArea.top * window.innerWidth;
|
|
203
|
+
break;
|
|
204
|
+
case 'center':
|
|
205
|
+
triggerPosition = (itemArea.top + itemArea.height / 2) * window.innerWidth;
|
|
206
|
+
break;
|
|
207
|
+
case 'bottom':
|
|
208
|
+
triggerPosition = (itemArea.top + itemArea.height) * window.innerWidth;
|
|
209
|
+
break;
|
|
210
|
+
default:
|
|
211
|
+
triggerPosition = itemArea.top * window.innerWidth;
|
|
212
|
+
break;
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
if (!triggerPosition)
|
|
167
216
|
continue;
|
|
168
|
-
const triggerPosition = matchingTrigger.position * window.innerWidth;
|
|
169
217
|
const isScrolledPastTrigger = triggerPosition < position;
|
|
170
218
|
const targetStateId = isScrolledPastTrigger ? matchingTrigger.to : matchingTrigger.from;
|
|
171
219
|
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-
|
|
3
|
+
"version": "1.9.13-11",
|
|
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.
|
|
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",
|
|
@@ -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,8 @@ 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)
|
|
123
|
+
|| (trigger.type === 'item-scroll-position' && this.items.find((item) => item.id === trigger.itemId)!.area[this.layoutId].top * window.innerWidth === 0 && trigger.from === currentStateId)
|
|
121
124
|
);
|
|
122
125
|
if (!matchingTrigger) continue;
|
|
123
126
|
const activeStateId = this.getActiveInteractionState(interaction.id);
|
|
@@ -161,15 +164,58 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
|
|
|
161
164
|
const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
|
|
162
165
|
const activeStateId = interaction.states.find((state) => state.id !== interaction.startStateId)?.id;
|
|
163
166
|
const matchingTrigger = interaction.triggers.find((trigger) => {
|
|
164
|
-
if (
|
|
165
|
-
|
|
167
|
+
if (trigger.type !== 'scroll-position' && trigger.type !== 'item-scroll-position') return false;
|
|
168
|
+
let triggerPosition;
|
|
169
|
+
if (trigger.type === 'scroll-position') {
|
|
170
|
+
if (trigger.position === 0) return false;
|
|
171
|
+
triggerPosition = trigger.position * window.innerWidth;
|
|
172
|
+
}
|
|
173
|
+
if (trigger.type === 'item-scroll-position') {
|
|
174
|
+
const itemArea = this.items.find((item) => item.id === trigger.itemId)!.area[this.layoutId];
|
|
175
|
+
switch (trigger.itemPosition) {
|
|
176
|
+
case 'top':
|
|
177
|
+
triggerPosition = itemArea.top * window.innerWidth;
|
|
178
|
+
break;
|
|
179
|
+
case 'center':
|
|
180
|
+
triggerPosition = (itemArea.top + itemArea.height / 2) * window.innerWidth;
|
|
181
|
+
break;
|
|
182
|
+
case 'bottom':
|
|
183
|
+
triggerPosition = (itemArea.top + itemArea.height) * window.innerWidth;
|
|
184
|
+
break;
|
|
185
|
+
default:
|
|
186
|
+
triggerPosition = itemArea.top * window.innerWidth;
|
|
187
|
+
break;
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
if (!triggerPosition) return false;
|
|
166
191
|
const isScrolledPastTrigger = triggerPosition < position;
|
|
167
192
|
if (!isScrolledPastTrigger && !trigger.isReverse) return false;
|
|
168
193
|
const stateId = isScrolledPastTrigger ? trigger.from : trigger.to;
|
|
169
194
|
return stateId === currentStateId;
|
|
170
195
|
});
|
|
171
|
-
if (!matchingTrigger ||
|
|
172
|
-
|
|
196
|
+
if (!matchingTrigger || (matchingTrigger.type !== 'scroll-position' && matchingTrigger.type !== 'item-scroll-position') || !activeStateId) continue;
|
|
197
|
+
let triggerPosition;
|
|
198
|
+
if (matchingTrigger.type === 'scroll-position') {
|
|
199
|
+
triggerPosition = matchingTrigger.position * window.innerWidth;
|
|
200
|
+
}
|
|
201
|
+
if (matchingTrigger.type === 'item-scroll-position') {
|
|
202
|
+
const itemArea = this.items.find((item) => item.id === matchingTrigger.itemId)!.area[this.layoutId];
|
|
203
|
+
switch (matchingTrigger.itemPosition) {
|
|
204
|
+
case 'top':
|
|
205
|
+
triggerPosition = itemArea.top * window.innerWidth;
|
|
206
|
+
break;
|
|
207
|
+
case 'center':
|
|
208
|
+
triggerPosition = (itemArea.top + itemArea.height / 2) * window.innerWidth;
|
|
209
|
+
break;
|
|
210
|
+
case 'bottom':
|
|
211
|
+
triggerPosition = (itemArea.top + itemArea.height) * window.innerWidth;
|
|
212
|
+
break;
|
|
213
|
+
default:
|
|
214
|
+
triggerPosition = itemArea.top * window.innerWidth;
|
|
215
|
+
break;
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
if (!triggerPosition) continue;
|
|
173
219
|
const isScrolledPastTrigger = triggerPosition < position;
|
|
174
220
|
const targetStateId = isScrolledPastTrigger ? matchingTrigger.to : matchingTrigger.from;
|
|
175
221
|
this.setCurrentStateForInteraction(interaction.id, targetStateId);
|