@cntrl-site/sdk-nextjs 1.9.13-9 → 1.9.14-0
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.
|
@@ -105,12 +105,52 @@ class InteractionsRegistry {
|
|
|
105
105
|
}
|
|
106
106
|
return available;
|
|
107
107
|
}
|
|
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
|
+
}
|
|
108
147
|
notifyLoad() {
|
|
109
148
|
var _a, _b;
|
|
110
149
|
const timestamp = Date.now();
|
|
111
150
|
for (const interaction of this.interactions) {
|
|
112
151
|
const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
|
|
113
|
-
const matchingTrigger = interaction.triggers.find(trigger => ('position' in trigger && trigger.position === 0 && trigger.from === currentStateId)
|
|
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)));
|
|
114
154
|
if (!matchingTrigger)
|
|
115
155
|
continue;
|
|
116
156
|
const activeStateId = this.getActiveInteractionState(interaction.id);
|
|
@@ -164,8 +204,36 @@ class InteractionsRegistry {
|
|
|
164
204
|
triggerPosition = trigger.position * window.innerWidth;
|
|
165
205
|
}
|
|
166
206
|
if (trigger.type === 'item-scroll-position') {
|
|
167
|
-
const
|
|
168
|
-
|
|
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;
|
|
169
237
|
}
|
|
170
238
|
if (!triggerPosition)
|
|
171
239
|
return false;
|
|
@@ -182,8 +250,36 @@ class InteractionsRegistry {
|
|
|
182
250
|
triggerPosition = matchingTrigger.position * window.innerWidth;
|
|
183
251
|
}
|
|
184
252
|
if (matchingTrigger.type === 'item-scroll-position') {
|
|
185
|
-
const
|
|
186
|
-
|
|
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;
|
|
187
283
|
}
|
|
188
284
|
if (!triggerPosition)
|
|
189
285
|
continue;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cntrl-site/sdk-nextjs",
|
|
3
|
-
"version": "1.9.
|
|
3
|
+
"version": "1.9.14-0",
|
|
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",
|
|
@@ -4,9 +4,11 @@ import {
|
|
|
4
4
|
ArticleItemType,
|
|
5
5
|
Interaction,
|
|
6
6
|
InteractionItemTrigger,
|
|
7
|
+
InteractionScrollTrigger,
|
|
7
8
|
ItemAny,
|
|
8
9
|
} from '@cntrl-site/sdk';
|
|
9
10
|
import { isItemType } from '../utils/isItemType';
|
|
11
|
+
import { InteractionItemScrollTrigger } from '@cntrl-site/sdk/lib/types/article/Interaction';
|
|
10
12
|
|
|
11
13
|
export class InteractionsRegistry implements InteractionsRegistryPort {
|
|
12
14
|
private ctrls: Map<ItemId, ItemInteractionCtrl> = new Map();
|
|
@@ -114,12 +116,54 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
|
|
|
114
116
|
return available;
|
|
115
117
|
}
|
|
116
118
|
|
|
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
|
+
|
|
117
160
|
notifyLoad() {
|
|
118
161
|
const timestamp = Date.now();
|
|
119
162
|
for (const interaction of this.interactions) {
|
|
120
163
|
const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
|
|
121
164
|
const matchingTrigger = interaction.triggers.find(trigger =>
|
|
122
|
-
('position' in trigger && trigger.position === 0 && trigger.from === currentStateId)
|
|
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))
|
|
123
167
|
);
|
|
124
168
|
if (!matchingTrigger) continue;
|
|
125
169
|
const activeStateId = this.getActiveInteractionState(interaction.id);
|
|
@@ -170,8 +214,36 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
|
|
|
170
214
|
triggerPosition = trigger.position * window.innerWidth;
|
|
171
215
|
}
|
|
172
216
|
if (trigger.type === 'item-scroll-position') {
|
|
173
|
-
const
|
|
174
|
-
|
|
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;
|
|
175
247
|
}
|
|
176
248
|
if (!triggerPosition) return false;
|
|
177
249
|
const isScrolledPastTrigger = triggerPosition < position;
|
|
@@ -185,8 +257,36 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
|
|
|
185
257
|
triggerPosition = matchingTrigger.position * window.innerWidth;
|
|
186
258
|
}
|
|
187
259
|
if (matchingTrigger.type === 'item-scroll-position') {
|
|
188
|
-
const
|
|
189
|
-
|
|
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;
|
|
190
290
|
}
|
|
191
291
|
if (!triggerPosition) continue;
|
|
192
292
|
const isScrolledPastTrigger = triggerPosition < position;
|
|
Binary file
|