@cntrl-site/sdk-nextjs 1.9.13-8 → 1.9.13
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.
|
@@ -110,7 +110,8 @@ class InteractionsRegistry {
|
|
|
110
110
|
const timestamp = Date.now();
|
|
111
111
|
for (const interaction of this.interactions) {
|
|
112
112
|
const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
|
|
113
|
-
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) && trigger.from === currentStateId));
|
|
114
115
|
if (!matchingTrigger)
|
|
115
116
|
continue;
|
|
116
117
|
const activeStateId = this.getActiveInteractionState(interaction.id);
|
|
@@ -151,24 +152,68 @@ class InteractionsRegistry {
|
|
|
151
152
|
notifyScroll(position) {
|
|
152
153
|
var _a, _b, _c;
|
|
153
154
|
const timestamp = Date.now();
|
|
154
|
-
const item = this.items.find((item) => item.id === this.items[0].id);
|
|
155
|
-
const testtop = item.area[this.layoutId].top;
|
|
156
155
|
for (const interaction of this.interactions) {
|
|
157
156
|
const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
|
|
158
157
|
const activeStateId = (_a = interaction.states.find((state) => state.id !== interaction.startStateId)) === null || _a === void 0 ? void 0 : _a.id;
|
|
159
158
|
const matchingTrigger = interaction.triggers.find((trigger) => {
|
|
160
|
-
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 * window.innerWidth - window.innerHeight / 2;
|
|
175
|
+
break;
|
|
176
|
+
case 'bottom':
|
|
177
|
+
triggerPosition = itemArea.top * window.innerWidth - window.innerHeight;
|
|
178
|
+
break;
|
|
179
|
+
default:
|
|
180
|
+
triggerPosition = itemArea.top * window.innerWidth;
|
|
181
|
+
break;
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
if (!triggerPosition)
|
|
161
185
|
return false;
|
|
162
|
-
const triggerPosition = testtop * window.innerWidth;
|
|
163
186
|
const isScrolledPastTrigger = triggerPosition < position;
|
|
164
187
|
if (!isScrolledPastTrigger && !trigger.isReverse)
|
|
165
188
|
return false;
|
|
166
189
|
const stateId = isScrolledPastTrigger ? trigger.from : trigger.to;
|
|
167
190
|
return stateId === currentStateId;
|
|
168
191
|
});
|
|
169
|
-
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 * window.innerWidth - window.innerHeight / 2;
|
|
206
|
+
break;
|
|
207
|
+
case 'bottom':
|
|
208
|
+
triggerPosition = itemArea.top * window.innerWidth - window.innerHeight;
|
|
209
|
+
break;
|
|
210
|
+
default:
|
|
211
|
+
triggerPosition = itemArea.top * window.innerWidth;
|
|
212
|
+
break;
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
if (!triggerPosition)
|
|
170
216
|
continue;
|
|
171
|
-
const triggerPosition = testtop * window.innerWidth;
|
|
172
217
|
const isScrolledPastTrigger = triggerPosition < position;
|
|
173
218
|
const targetStateId = isScrolledPastTrigger ? matchingTrigger.to : matchingTrigger.from;
|
|
174
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",
|
|
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.
|
|
35
|
+
"@cntrl-site/sdk": "^1.25.1-0",
|
|
36
36
|
"@types/vimeo__player": "^2.18.0",
|
|
37
37
|
"@vimeo/player": "^2.25.0",
|
|
38
38
|
"html-react-parser": "^3.0.1",
|
|
@@ -119,7 +119,8 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
|
|
|
119
119
|
for (const interaction of this.interactions) {
|
|
120
120
|
const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
|
|
121
121
|
const matchingTrigger = interaction.triggers.find(trigger =>
|
|
122
|
-
'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) && trigger.from === currentStateId)
|
|
123
124
|
);
|
|
124
125
|
if (!matchingTrigger) continue;
|
|
125
126
|
const activeStateId = this.getActiveInteractionState(interaction.id);
|
|
@@ -159,21 +160,62 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
|
|
|
159
160
|
|
|
160
161
|
notifyScroll(position: number) {
|
|
161
162
|
const timestamp = Date.now();
|
|
162
|
-
const item = this.items.find((item) => item.id === this.items[0].id)!;
|
|
163
|
-
const testtop = item.area[this.layoutId].top;
|
|
164
163
|
for (const interaction of this.interactions) {
|
|
165
164
|
const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
|
|
166
165
|
const activeStateId = interaction.states.find((state) => state.id !== interaction.startStateId)?.id;
|
|
167
166
|
const matchingTrigger = interaction.triggers.find((trigger) => {
|
|
168
|
-
if (
|
|
169
|
-
|
|
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 * window.innerWidth - window.innerHeight / 2;
|
|
181
|
+
break;
|
|
182
|
+
case 'bottom':
|
|
183
|
+
triggerPosition = itemArea.top * window.innerWidth - window.innerHeight;
|
|
184
|
+
break;
|
|
185
|
+
default:
|
|
186
|
+
triggerPosition = itemArea.top * window.innerWidth;
|
|
187
|
+
break;
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
if (!triggerPosition) return false;
|
|
170
191
|
const isScrolledPastTrigger = triggerPosition < position;
|
|
171
192
|
if (!isScrolledPastTrigger && !trigger.isReverse) return false;
|
|
172
193
|
const stateId = isScrolledPastTrigger ? trigger.from : trigger.to;
|
|
173
194
|
return stateId === currentStateId;
|
|
174
195
|
});
|
|
175
|
-
if (!matchingTrigger ||
|
|
176
|
-
|
|
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 * window.innerWidth - window.innerHeight / 2;
|
|
209
|
+
break;
|
|
210
|
+
case 'bottom':
|
|
211
|
+
triggerPosition = itemArea.top * window.innerWidth - window.innerHeight;
|
|
212
|
+
break;
|
|
213
|
+
default:
|
|
214
|
+
triggerPosition = itemArea.top * window.innerWidth;
|
|
215
|
+
break;
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
if (!triggerPosition) continue;
|
|
177
219
|
const isScrolledPastTrigger = triggerPosition < position;
|
|
178
220
|
const targetStateId = isScrolledPastTrigger ? matchingTrigger.to : matchingTrigger.from;
|
|
179
221
|
this.setCurrentStateForInteraction(interaction.id, targetStateId);
|