@cntrl-site/sdk-nextjs 1.9.13 → 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,13 +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
152
|
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));
|
|
153
|
+
|| (trigger.type === 'item-scroll-position' && this.items.find((item) => item.id === trigger.itemId) && trigger.from === currentStateId && this.isItemScrollTriggerOnStartScreen(trigger)));
|
|
115
154
|
if (!matchingTrigger)
|
|
116
155
|
continue;
|
|
117
156
|
const activeStateId = this.getActiveInteractionState(interaction.id);
|
|
@@ -180,6 +219,21 @@ class InteractionsRegistry {
|
|
|
180
219
|
triggerPosition = itemArea.top * window.innerWidth;
|
|
181
220
|
break;
|
|
182
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;
|
|
183
237
|
}
|
|
184
238
|
if (!triggerPosition)
|
|
185
239
|
return false;
|
|
@@ -211,6 +265,21 @@ class InteractionsRegistry {
|
|
|
211
265
|
triggerPosition = itemArea.top * window.innerWidth;
|
|
212
266
|
break;
|
|
213
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;
|
|
214
283
|
}
|
|
215
284
|
if (!triggerPosition)
|
|
216
285
|
continue;
|
package/package.json
CHANGED
|
@@ -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,13 +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
165
|
('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)
|
|
166
|
+
|| (trigger.type === 'item-scroll-position' && this.items.find((item) => item.id === trigger.itemId) && trigger.from === currentStateId && this.isItemScrollTriggerOnStartScreen(trigger))
|
|
124
167
|
);
|
|
125
168
|
if (!matchingTrigger) continue;
|
|
126
169
|
const activeStateId = this.getActiveInteractionState(interaction.id);
|
|
@@ -186,6 +229,21 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
|
|
|
186
229
|
triggerPosition = itemArea.top * window.innerWidth;
|
|
187
230
|
break;
|
|
188
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;
|
|
189
247
|
}
|
|
190
248
|
if (!triggerPosition) return false;
|
|
191
249
|
const isScrolledPastTrigger = triggerPosition < position;
|
|
@@ -214,6 +272,21 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
|
|
|
214
272
|
triggerPosition = itemArea.top * window.innerWidth;
|
|
215
273
|
break;
|
|
216
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;
|
|
217
290
|
}
|
|
218
291
|
if (!triggerPosition) continue;
|
|
219
292
|
const isScrolledPastTrigger = triggerPosition < position;
|