@plaidev/karte-action-sdk 1.1.180-28041937.24d05b80 → 1.1.181-28042089.f7e0349f
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.
- package/dist/hydrate/index.es.js +240 -257
- package/dist/index.es.js +244 -259
- package/package.json +1 -1
package/dist/hydrate/index.es.js
CHANGED
|
@@ -25,6 +25,229 @@ const ALL_ACTION_SHORTEN_ID = 'KARTE_ALL_ACTION_SHORTEN_ID';
|
|
|
25
25
|
*/
|
|
26
26
|
const KARTE_MODAL_ROOT = 'karte-modal-root';
|
|
27
27
|
|
|
28
|
+
/** @internal */
|
|
29
|
+
const NOOP = (_args) => { }; // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
30
|
+
/** @internal */
|
|
31
|
+
const isPreview = () => {
|
|
32
|
+
return true;
|
|
33
|
+
};
|
|
34
|
+
/** @internal */
|
|
35
|
+
const setPreviousFocus = () => {
|
|
36
|
+
const previously_focused = typeof document !== 'undefined' && document.activeElement;
|
|
37
|
+
if (previously_focused) {
|
|
38
|
+
previously_focused?.focus();
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
/** @internal */
|
|
42
|
+
const handleKeydown = (handlers) => (e) => {
|
|
43
|
+
if (handlers[e.key]) {
|
|
44
|
+
handlers[e.key](e);
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
const POSITION_STYLES = {
|
|
48
|
+
'top-center': 'top: 0; right: 50%; transform: translate(+50%, 0%);',
|
|
49
|
+
'top-left': 'top: 0; left: 0; transform: translate(0%, 0%);',
|
|
50
|
+
'top-right': 'top: 0; right: 0; transform: translate(0%, 0%);',
|
|
51
|
+
'center-left': 'top: 50%; left: 0; transform: translate(0%, -50%);',
|
|
52
|
+
center: 'top: 50%; left: 50%; transform: translate(-50%, -50%);',
|
|
53
|
+
'center-right': 'top: 50%; right: 0; transform: translate(0%, -50%);',
|
|
54
|
+
'bottom-left': 'bottom: 0; left: 0; transform: translate(0%, 0%);',
|
|
55
|
+
'bottom-center': 'bottom: 0; left: 50%; transform: translate(-50%, 0%);',
|
|
56
|
+
'bottom-right': 'bottom: 0; right: 0; transform: translate(0%, 0);',
|
|
57
|
+
none: 'top: 0; bottom: 0; right: 0; left: 0;',
|
|
58
|
+
};
|
|
59
|
+
const TRANSFORM = {
|
|
60
|
+
'top-center': [50, 0],
|
|
61
|
+
'top-left': [0, 0],
|
|
62
|
+
'top-right': [0, 0],
|
|
63
|
+
'center-left': [0, -50],
|
|
64
|
+
center: [-50, -50],
|
|
65
|
+
'center-right': [0, -50],
|
|
66
|
+
'bottom-left': [0, 0],
|
|
67
|
+
'bottom-center': [-50, 0],
|
|
68
|
+
'bottom-right': [0, 0],
|
|
69
|
+
none: [0, 0],
|
|
70
|
+
};
|
|
71
|
+
/** @internal */
|
|
72
|
+
const getPositionStyle = (position) => {
|
|
73
|
+
const style = POSITION_STYLES[position];
|
|
74
|
+
if (style != null) {
|
|
75
|
+
return style;
|
|
76
|
+
}
|
|
77
|
+
else {
|
|
78
|
+
console.warn(`[action-sdk] invalid '${position}', so we use 'center' instead`);
|
|
79
|
+
return POSITION_STYLES['center'];
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
/** @internal */
|
|
83
|
+
const getTransform = (position) => {
|
|
84
|
+
const transform = TRANSFORM[position];
|
|
85
|
+
if (transform != null) {
|
|
86
|
+
return transform;
|
|
87
|
+
}
|
|
88
|
+
else {
|
|
89
|
+
console.warn(`[action-sdk] invalid '${position}', so we use 'center' instead`);
|
|
90
|
+
return TRANSFORM['center'];
|
|
91
|
+
}
|
|
92
|
+
};
|
|
93
|
+
/** @internal */
|
|
94
|
+
const getMarginStyle = (margin) => {
|
|
95
|
+
return `margin: ${margin?.top ?? 0} ${margin?.right ?? 0} ${margin?.bottom ?? 0} ${margin?.left ?? 0};`;
|
|
96
|
+
};
|
|
97
|
+
/** @internal */
|
|
98
|
+
const stringifyStyleObj = (styleObj) => {
|
|
99
|
+
return Object.entries(styleObj)
|
|
100
|
+
.map(([key, value]) => `${key}:${value}`)
|
|
101
|
+
.join(';');
|
|
102
|
+
};
|
|
103
|
+
/**
|
|
104
|
+
* スクロール率が達したときに呼び出すコールバックを登録します
|
|
105
|
+
*
|
|
106
|
+
* @param rate - スクロール率。この値は viewport でのスクロールのパーセンテージ
|
|
107
|
+
* @param fn - スクロール率が達したときに呼び出されるコールバック関数
|
|
108
|
+
*
|
|
109
|
+
* @returns スクロール率によって呼び出されるコールバックを停止する関数を返します
|
|
110
|
+
*
|
|
111
|
+
* @public
|
|
112
|
+
*/
|
|
113
|
+
function onScroll(rate, fn) {
|
|
114
|
+
const rates = Array.isArray(rate) ? rate : [rate];
|
|
115
|
+
const body = window.document.body;
|
|
116
|
+
const html = window.document.documentElement;
|
|
117
|
+
const contexts = new Map();
|
|
118
|
+
rates.forEach(rate => {
|
|
119
|
+
contexts.set(rate, {
|
|
120
|
+
rate,
|
|
121
|
+
repeat: false,
|
|
122
|
+
zone: 'out',
|
|
123
|
+
previousRate: 0,
|
|
124
|
+
deltaRate: 0,
|
|
125
|
+
scrollRate: 0,
|
|
126
|
+
scrollTop: html.scrollTop || body.scrollTop,
|
|
127
|
+
});
|
|
128
|
+
});
|
|
129
|
+
const _fn = fn;
|
|
130
|
+
const direction = (ctx) => ctx.deltaRate > 0 ? 'down' : 'up';
|
|
131
|
+
const updateStates = (ctx, repeat) => {
|
|
132
|
+
ctx.repeat = repeat;
|
|
133
|
+
// prettier-ignore
|
|
134
|
+
ctx.zone =
|
|
135
|
+
// case: the scroll rate cannot detect the rate when scrolling to the top
|
|
136
|
+
ctx.scrollTop === 0 && ctx.scrollRate >= ctx.rate
|
|
137
|
+
? 'out'
|
|
138
|
+
: ctx.scrollRate >= ctx.rate
|
|
139
|
+
? 'in'
|
|
140
|
+
: 'out';
|
|
141
|
+
// console.log('updateStates', ctx.zone);
|
|
142
|
+
};
|
|
143
|
+
// prettier-ignore
|
|
144
|
+
const canCall = ({ zone, scrollRate, rate, scrollTop, repeat }) => zone === 'out'
|
|
145
|
+
? scrollRate >= rate
|
|
146
|
+
: repeat
|
|
147
|
+
// case: the scroll rate cannot detect the rate when scrolling to the top
|
|
148
|
+
? scrollRate < rate || (scrollTop === 0 && scrollRate >= rate)
|
|
149
|
+
: false;
|
|
150
|
+
/*
|
|
151
|
+
// NOTE: same logic the above (code size optimiazation)
|
|
152
|
+
const canCall = (ctx: OnScrollInternalContext): boolean => {
|
|
153
|
+
// console.log('repeat', ctx.repeat, 'rate', ctx.rate, 'scrollRate', ctx.scrollRate, '1 - rate', 1 - ctx.rate, '1 - scrollRate', 1 - ctx.scrollRate, 'scrollRate >= rate', ctx.scrollRate >= ctx.rate, '1 - scrollRate >= 1 - rate', 1 - ctx.scrollRate >= 1 - ctx.rate);
|
|
154
|
+
// console.log(ctx.rate, 'deltaRate', ctx.deltaRate, 'reviousRate', ctx.previousRate)
|
|
155
|
+
if (ctx.zone === 'out') {
|
|
156
|
+
return ctx.scrollRate >= ctx.rate;
|
|
157
|
+
} else {
|
|
158
|
+
// 'in'
|
|
159
|
+
if (ctx.repeat) {
|
|
160
|
+
return ctx.scrollRate < ctx.rate || (ctx.scrollTop === 0 && ctx.scrollRate >= ctx.rate);
|
|
161
|
+
} else {
|
|
162
|
+
return false;
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
};
|
|
166
|
+
//*/
|
|
167
|
+
const onScroll = () => {
|
|
168
|
+
const scrollTop = html.scrollTop || body.scrollTop;
|
|
169
|
+
const pageHeight = Math.max(...[body.clientHeight, body.scrollHeight, html.scrollHeight, html.clientHeight]);
|
|
170
|
+
const viewHeight = Math.min(...[html.clientHeight, body.clientHeight]);
|
|
171
|
+
const scrollRate = (scrollTop + viewHeight) / pageHeight;
|
|
172
|
+
// console.log('scrollRate ->', scrollRate, 'scrollTop ->', scrollTop);
|
|
173
|
+
contexts.forEach(ctx => {
|
|
174
|
+
ctx.scrollRate = scrollRate;
|
|
175
|
+
ctx.deltaRate = ctx.scrollRate - ctx.previousRate;
|
|
176
|
+
ctx.previousRate = ctx.scrollRate;
|
|
177
|
+
ctx.scrollTop = scrollTop;
|
|
178
|
+
if (canCall(ctx)) {
|
|
179
|
+
const repeat = !!_fn(Object.assign({ direction: direction(ctx) }, ctx));
|
|
180
|
+
updateStates(ctx, repeat);
|
|
181
|
+
}
|
|
182
|
+
});
|
|
183
|
+
};
|
|
184
|
+
// register scorll event
|
|
185
|
+
window.addEventListener('scroll', onScroll);
|
|
186
|
+
// return disposing (finalizing/releasing) function
|
|
187
|
+
return () => {
|
|
188
|
+
window.removeEventListener('scroll', onScroll);
|
|
189
|
+
};
|
|
190
|
+
}
|
|
191
|
+
/**
|
|
192
|
+
* 指定した時間の経過後に呼び出すコールバックを登録します
|
|
193
|
+
*
|
|
194
|
+
* @param time - コールバックを呼び出すまでの時間。単位はミリセカンド(ms)
|
|
195
|
+
* @param fn - 指定した時間が経過後に呼び出されるコールバック関数
|
|
196
|
+
*
|
|
197
|
+
* @returns コールバックを呼び出すためのタイマーを停止する関数を返します
|
|
198
|
+
*
|
|
199
|
+
* @public
|
|
200
|
+
*/
|
|
201
|
+
function onTime(time, fn) {
|
|
202
|
+
const timeoutHandler = setTimeout(fn, time);
|
|
203
|
+
return () => timeoutHandler && clearTimeout(timeoutHandler);
|
|
204
|
+
}
|
|
205
|
+
/** @internal */
|
|
206
|
+
function hasSuffix(value, suffix) {
|
|
207
|
+
return new RegExp(`[0-9]${suffix}$`).test(value);
|
|
208
|
+
}
|
|
209
|
+
/**
|
|
210
|
+
* Goolge Fonts用のURLを生成
|
|
211
|
+
*
|
|
212
|
+
* @param fonts - フォント名の配列
|
|
213
|
+
* @param texts - 使用するテキストの配列
|
|
214
|
+
*
|
|
215
|
+
* @remarks
|
|
216
|
+
* textsを指定した場合フォントサイズが削減される
|
|
217
|
+
*
|
|
218
|
+
* @internal
|
|
219
|
+
*/
|
|
220
|
+
function makeGoogleFontUrl(fonts, texts) {
|
|
221
|
+
const params = [];
|
|
222
|
+
params.push('display=swap');
|
|
223
|
+
if (texts) {
|
|
224
|
+
texts.forEach(text => params.push(`text=${text}`));
|
|
225
|
+
}
|
|
226
|
+
fonts.forEach(font => params.push(`family=${font.replace(/['"]/g, '').replace(/ /g, '+')}`));
|
|
227
|
+
return `https://fonts.googleapis.com/css2?${params.join('&')}`;
|
|
228
|
+
}
|
|
229
|
+
/**
|
|
230
|
+
* HTML要素を生成
|
|
231
|
+
*
|
|
232
|
+
* @internal
|
|
233
|
+
*/
|
|
234
|
+
const h = (type, props, ...children) => {
|
|
235
|
+
const el = document.createElement(type);
|
|
236
|
+
for (const key of Object.keys(props)) {
|
|
237
|
+
const v = props[key];
|
|
238
|
+
if (key === 'style') {
|
|
239
|
+
Object.assign(el.style, v);
|
|
240
|
+
}
|
|
241
|
+
else {
|
|
242
|
+
el.setAttribute(key, v);
|
|
243
|
+
}
|
|
244
|
+
}
|
|
245
|
+
for (const child of children) {
|
|
246
|
+
el.appendChild(child);
|
|
247
|
+
}
|
|
248
|
+
return el;
|
|
249
|
+
};
|
|
250
|
+
|
|
28
251
|
/**
|
|
29
252
|
* ポップアップ(モーダル)のコンポーネントで利用するPropの定義
|
|
30
253
|
*/
|
|
@@ -269,239 +492,6 @@ const DefaultFormButtonColor = {
|
|
|
269
492
|
sub: '#fff',
|
|
270
493
|
};
|
|
271
494
|
|
|
272
|
-
/** @internal */
|
|
273
|
-
const NOOP = (_args) => { }; // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
274
|
-
/** @internal */
|
|
275
|
-
const isPreview = () => {
|
|
276
|
-
return true;
|
|
277
|
-
};
|
|
278
|
-
/** @internal */
|
|
279
|
-
const setPreviousFocus = () => {
|
|
280
|
-
const previously_focused = typeof document !== 'undefined' && document.activeElement;
|
|
281
|
-
if (previously_focused) {
|
|
282
|
-
previously_focused?.focus();
|
|
283
|
-
}
|
|
284
|
-
};
|
|
285
|
-
/** @internal */
|
|
286
|
-
const handleKeydown = (handlers) => (e) => {
|
|
287
|
-
if (handlers[e.key]) {
|
|
288
|
-
handlers[e.key](e);
|
|
289
|
-
}
|
|
290
|
-
};
|
|
291
|
-
const POSITION_STYLES = {
|
|
292
|
-
'top-center': 'top: 0; right: 50%; transform: translate(+50%, 0%);',
|
|
293
|
-
'top-left': 'top: 0; left: 0; transform: translate(0%, 0%);',
|
|
294
|
-
'top-right': 'top: 0; right: 0; transform: translate(0%, 0%);',
|
|
295
|
-
'center-left': 'top: 50%; left: 0; transform: translate(0%, -50%);',
|
|
296
|
-
center: 'top: 50%; left: 50%; transform: translate(-50%, -50%);',
|
|
297
|
-
'center-right': 'top: 50%; right: 0; transform: translate(0%, -50%);',
|
|
298
|
-
'bottom-left': 'bottom: 0; left: 0; transform: translate(0%, 0%);',
|
|
299
|
-
'bottom-center': 'bottom: 0; left: 50%; transform: translate(-50%, 0%);',
|
|
300
|
-
'bottom-right': 'bottom: 0; right: 0; transform: translate(0%, 0);',
|
|
301
|
-
none: 'top: 0; bottom: 0; right: 0; left: 0;',
|
|
302
|
-
};
|
|
303
|
-
const TRANSFORM = {
|
|
304
|
-
'top-center': [50, 0],
|
|
305
|
-
'top-left': [0, 0],
|
|
306
|
-
'top-right': [0, 0],
|
|
307
|
-
'center-left': [0, -50],
|
|
308
|
-
center: [-50, -50],
|
|
309
|
-
'center-right': [0, -50],
|
|
310
|
-
'bottom-left': [0, 0],
|
|
311
|
-
'bottom-center': [-50, 0],
|
|
312
|
-
'bottom-right': [0, 0],
|
|
313
|
-
none: [0, 0],
|
|
314
|
-
};
|
|
315
|
-
/** @internal */
|
|
316
|
-
const getPositionStyle = (position) => {
|
|
317
|
-
const style = POSITION_STYLES[position];
|
|
318
|
-
if (style != null) {
|
|
319
|
-
return style;
|
|
320
|
-
}
|
|
321
|
-
else {
|
|
322
|
-
console.warn(`[action-sdk] invalid '${position}', so we use 'center' instead`);
|
|
323
|
-
return POSITION_STYLES['center'];
|
|
324
|
-
}
|
|
325
|
-
};
|
|
326
|
-
/** @internal */
|
|
327
|
-
const getTransform = (position) => {
|
|
328
|
-
const transform = TRANSFORM[position];
|
|
329
|
-
if (transform != null) {
|
|
330
|
-
return transform;
|
|
331
|
-
}
|
|
332
|
-
else {
|
|
333
|
-
console.warn(`[action-sdk] invalid '${position}', so we use 'center' instead`);
|
|
334
|
-
return TRANSFORM['center'];
|
|
335
|
-
}
|
|
336
|
-
};
|
|
337
|
-
/** @internal */
|
|
338
|
-
const getMarginStyle = (margin) => {
|
|
339
|
-
return `margin: ${margin?.top ?? 0} ${margin?.right ?? 0} ${margin?.bottom ?? 0} ${margin?.left ?? 0};`;
|
|
340
|
-
};
|
|
341
|
-
/** @internal */
|
|
342
|
-
const stringifyStyleObj = (styleObj) => {
|
|
343
|
-
return Object.entries(styleObj)
|
|
344
|
-
.map(([key, value]) => `${key}:${value}`)
|
|
345
|
-
.join(';');
|
|
346
|
-
};
|
|
347
|
-
/**
|
|
348
|
-
* スクロール率が達したときに呼び出すコールバックを登録します
|
|
349
|
-
*
|
|
350
|
-
* @param rate - スクロール率。この値は viewport でのスクロールのパーセンテージ
|
|
351
|
-
* @param fn - スクロール率が達したときに呼び出されるコールバック関数
|
|
352
|
-
*
|
|
353
|
-
* @returns スクロール率によって呼び出されるコールバックを停止する関数を返します
|
|
354
|
-
*
|
|
355
|
-
* @public
|
|
356
|
-
*/
|
|
357
|
-
function onScroll(rate, fn) {
|
|
358
|
-
const rates = Array.isArray(rate) ? rate : [rate];
|
|
359
|
-
const body = window.document.body;
|
|
360
|
-
const html = window.document.documentElement;
|
|
361
|
-
const contexts = new Map();
|
|
362
|
-
rates.forEach(rate => {
|
|
363
|
-
contexts.set(rate, {
|
|
364
|
-
rate,
|
|
365
|
-
repeat: false,
|
|
366
|
-
zone: 'out',
|
|
367
|
-
previousRate: 0,
|
|
368
|
-
deltaRate: 0,
|
|
369
|
-
scrollRate: 0,
|
|
370
|
-
scrollTop: html.scrollTop || body.scrollTop,
|
|
371
|
-
});
|
|
372
|
-
});
|
|
373
|
-
const _fn = fn;
|
|
374
|
-
const direction = (ctx) => ctx.deltaRate > 0 ? 'down' : 'up';
|
|
375
|
-
const updateStates = (ctx, repeat) => {
|
|
376
|
-
ctx.repeat = repeat;
|
|
377
|
-
// prettier-ignore
|
|
378
|
-
ctx.zone =
|
|
379
|
-
// case: the scroll rate cannot detect the rate when scrolling to the top
|
|
380
|
-
ctx.scrollTop === 0 && ctx.scrollRate >= ctx.rate
|
|
381
|
-
? 'out'
|
|
382
|
-
: ctx.scrollRate >= ctx.rate
|
|
383
|
-
? 'in'
|
|
384
|
-
: 'out';
|
|
385
|
-
// console.log('updateStates', ctx.zone);
|
|
386
|
-
};
|
|
387
|
-
// prettier-ignore
|
|
388
|
-
const canCall = ({ zone, scrollRate, rate, scrollTop, repeat }) => zone === 'out'
|
|
389
|
-
? scrollRate >= rate
|
|
390
|
-
: repeat
|
|
391
|
-
// case: the scroll rate cannot detect the rate when scrolling to the top
|
|
392
|
-
? scrollRate < rate || (scrollTop === 0 && scrollRate >= rate)
|
|
393
|
-
: false;
|
|
394
|
-
/*
|
|
395
|
-
// NOTE: same logic the above (code size optimiazation)
|
|
396
|
-
const canCall = (ctx: OnScrollInternalContext): boolean => {
|
|
397
|
-
// console.log('repeat', ctx.repeat, 'rate', ctx.rate, 'scrollRate', ctx.scrollRate, '1 - rate', 1 - ctx.rate, '1 - scrollRate', 1 - ctx.scrollRate, 'scrollRate >= rate', ctx.scrollRate >= ctx.rate, '1 - scrollRate >= 1 - rate', 1 - ctx.scrollRate >= 1 - ctx.rate);
|
|
398
|
-
// console.log(ctx.rate, 'deltaRate', ctx.deltaRate, 'reviousRate', ctx.previousRate)
|
|
399
|
-
if (ctx.zone === 'out') {
|
|
400
|
-
return ctx.scrollRate >= ctx.rate;
|
|
401
|
-
} else {
|
|
402
|
-
// 'in'
|
|
403
|
-
if (ctx.repeat) {
|
|
404
|
-
return ctx.scrollRate < ctx.rate || (ctx.scrollTop === 0 && ctx.scrollRate >= ctx.rate);
|
|
405
|
-
} else {
|
|
406
|
-
return false;
|
|
407
|
-
}
|
|
408
|
-
}
|
|
409
|
-
};
|
|
410
|
-
//*/
|
|
411
|
-
const onScroll = () => {
|
|
412
|
-
const scrollTop = html.scrollTop || body.scrollTop;
|
|
413
|
-
const pageHeight = Math.max(...[body.clientHeight, body.scrollHeight, html.scrollHeight, html.clientHeight]);
|
|
414
|
-
const viewHeight = Math.min(...[html.clientHeight, body.clientHeight]);
|
|
415
|
-
const scrollRate = (scrollTop + viewHeight) / pageHeight;
|
|
416
|
-
// console.log('scrollRate ->', scrollRate, 'scrollTop ->', scrollTop);
|
|
417
|
-
contexts.forEach(ctx => {
|
|
418
|
-
ctx.scrollRate = scrollRate;
|
|
419
|
-
ctx.deltaRate = ctx.scrollRate - ctx.previousRate;
|
|
420
|
-
ctx.previousRate = ctx.scrollRate;
|
|
421
|
-
ctx.scrollTop = scrollTop;
|
|
422
|
-
if (canCall(ctx)) {
|
|
423
|
-
const repeat = !!_fn(Object.assign({ direction: direction(ctx) }, ctx));
|
|
424
|
-
updateStates(ctx, repeat);
|
|
425
|
-
}
|
|
426
|
-
});
|
|
427
|
-
};
|
|
428
|
-
// register scorll event
|
|
429
|
-
window.addEventListener('scroll', onScroll);
|
|
430
|
-
// return disposing (finalizing/releasing) function
|
|
431
|
-
return () => {
|
|
432
|
-
window.removeEventListener('scroll', onScroll);
|
|
433
|
-
};
|
|
434
|
-
}
|
|
435
|
-
/**
|
|
436
|
-
* 指定した時間の経過後に呼び出すコールバックを登録します
|
|
437
|
-
*
|
|
438
|
-
* @param time - コールバックを呼び出すまでの時間。単位はミリセカンド(ms)
|
|
439
|
-
* @param fn - 指定した時間が経過後に呼び出されるコールバック関数
|
|
440
|
-
*
|
|
441
|
-
* @returns コールバックを呼び出すためのタイマーを停止する関数を返します
|
|
442
|
-
*
|
|
443
|
-
* @public
|
|
444
|
-
*/
|
|
445
|
-
function onTime(time, fn) {
|
|
446
|
-
const timeoutHandler = setTimeout(fn, time);
|
|
447
|
-
return () => timeoutHandler && clearTimeout(timeoutHandler);
|
|
448
|
-
}
|
|
449
|
-
/** @internal */
|
|
450
|
-
function hasSuffix(value, suffix) {
|
|
451
|
-
return new RegExp(`[0-9]${suffix}$`).test(value);
|
|
452
|
-
}
|
|
453
|
-
/**
|
|
454
|
-
* Goolge Fonts用のURLを生成
|
|
455
|
-
*
|
|
456
|
-
* @param fonts - フォント名の配列
|
|
457
|
-
* @param texts - 使用するテキストの配列
|
|
458
|
-
*
|
|
459
|
-
* @remarks
|
|
460
|
-
* textsを指定した場合フォントサイズが削減される
|
|
461
|
-
*
|
|
462
|
-
* @internal
|
|
463
|
-
*/
|
|
464
|
-
function makeGoogleFontUrl(fonts, texts) {
|
|
465
|
-
const params = [];
|
|
466
|
-
params.push('display=swap');
|
|
467
|
-
if (texts) {
|
|
468
|
-
texts.forEach(text => params.push(`text=${text}`));
|
|
469
|
-
}
|
|
470
|
-
fonts.forEach(font => params.push(`family=${font.replace(/['"]/g, '').replace(/ /g, '+')}`));
|
|
471
|
-
return `https://fonts.googleapis.com/css2?${params.join('&')}`;
|
|
472
|
-
}
|
|
473
|
-
/**
|
|
474
|
-
* HTML要素を生成
|
|
475
|
-
*
|
|
476
|
-
* @internal
|
|
477
|
-
*/
|
|
478
|
-
const h = (type, props, ...children) => {
|
|
479
|
-
const el = document.createElement(type);
|
|
480
|
-
for (const key of Object.keys(props)) {
|
|
481
|
-
const v = props[key];
|
|
482
|
-
if (key === 'style') {
|
|
483
|
-
Object.assign(el.style, v);
|
|
484
|
-
}
|
|
485
|
-
else {
|
|
486
|
-
el.setAttribute(key, v);
|
|
487
|
-
}
|
|
488
|
-
}
|
|
489
|
-
for (const child of children) {
|
|
490
|
-
el.appendChild(child);
|
|
491
|
-
}
|
|
492
|
-
return el;
|
|
493
|
-
};
|
|
494
|
-
/**
|
|
495
|
-
* 非推奨
|
|
496
|
-
*
|
|
497
|
-
* @deprecated 非推奨
|
|
498
|
-
*
|
|
499
|
-
* @internal
|
|
500
|
-
*/
|
|
501
|
-
function getGoogleFontsParam() {
|
|
502
|
-
return 'family=' + Fonts.map(font => font.replace(/ /g, '+')).join('&family=');
|
|
503
|
-
}
|
|
504
|
-
|
|
505
495
|
/**
|
|
506
496
|
* Store to handle action setting
|
|
507
497
|
*
|
|
@@ -1761,6 +1751,7 @@ async function runScript$1(options = {
|
|
|
1761
1751
|
const { success } = await setupActionTable(options.localVariablesQuery, data.api_key);
|
|
1762
1752
|
if (!success)
|
|
1763
1753
|
return;
|
|
1754
|
+
options.send('script_fired');
|
|
1764
1755
|
// 旧Widget API IFの処理
|
|
1765
1756
|
const { onCreateHandlers } = getInternalHandlers();
|
|
1766
1757
|
if (onCreateHandlers) {
|
|
@@ -4889,7 +4880,7 @@ function add_css$n(target) {
|
|
|
4889
4880
|
append_styles(target, "svelte-wb7ek", ".text-button-element.svelte-wb7ek{width:100%;height:100%}.text-button-element.svelte-wb7ek > .button{display:flex;justify-content:center;align-items:center;width:100%;height:100%;background-color:transparent;border:none;box-shadow:transparent;box-sizing:border-box;cursor:pointer;transition:box-shadow 0.2s;white-space:pre-wrap;overflow:hidden}.text-button-element.svelte-wb7ek > .button._disabled{cursor:not-allowed !important;opacity:0.2}.text-button-element.svelte-wb7ek > .button:not(._disabled):active{box-shadow:inset 0 0 100px 100px rgba(0, 0, 0, 0.3)}.text-button-element.svelte-wb7ek > .button:not(._disabled):hover{box-shadow:inset 0 0 100px 100px rgba(255, 255, 255, 0.3)}");
|
|
4890
4881
|
}
|
|
4891
4882
|
|
|
4892
|
-
// (
|
|
4883
|
+
// (46:2) <Button onClick={onClick} {style} {eventName}>
|
|
4893
4884
|
function create_default_slot$5(ctx) {
|
|
4894
4885
|
let rendertext;
|
|
4895
4886
|
let current;
|
|
@@ -4928,9 +4919,6 @@ function create_default_slot$5(ctx) {
|
|
|
4928
4919
|
|
|
4929
4920
|
function create_fragment$o(ctx) {
|
|
4930
4921
|
let div;
|
|
4931
|
-
let link;
|
|
4932
|
-
let link_href_value;
|
|
4933
|
-
let t;
|
|
4934
4922
|
let button;
|
|
4935
4923
|
let current;
|
|
4936
4924
|
|
|
@@ -4947,43 +4935,31 @@ function create_fragment$o(ctx) {
|
|
|
4947
4935
|
return {
|
|
4948
4936
|
c() {
|
|
4949
4937
|
div = element("div");
|
|
4950
|
-
link = element("link");
|
|
4951
|
-
t = space();
|
|
4952
4938
|
create_component(button.$$.fragment);
|
|
4953
4939
|
this.h();
|
|
4954
4940
|
},
|
|
4955
4941
|
l(nodes) {
|
|
4956
4942
|
div = claim_element(nodes, "DIV", { class: true });
|
|
4957
4943
|
var div_nodes = children(div);
|
|
4958
|
-
link = claim_element(div_nodes, "LINK", { href: true, rel: true });
|
|
4959
|
-
t = claim_space(div_nodes);
|
|
4960
4944
|
claim_component(button.$$.fragment, div_nodes);
|
|
4961
4945
|
div_nodes.forEach(detach);
|
|
4962
4946
|
this.h();
|
|
4963
4947
|
},
|
|
4964
4948
|
h() {
|
|
4965
|
-
attr(link, "href", link_href_value = `https://fonts.googleapis.com/css2?${getGoogleFontsParam()}&display=swap&text=${/*text*/ ctx[0]}`);
|
|
4966
|
-
attr(link, "rel", "stylesheet");
|
|
4967
4949
|
attr(div, "class", "text-button-element svelte-wb7ek");
|
|
4968
4950
|
},
|
|
4969
4951
|
m(target, anchor) {
|
|
4970
4952
|
insert_hydration(target, div, anchor);
|
|
4971
|
-
append_hydration(div, link);
|
|
4972
|
-
append_hydration(div, t);
|
|
4973
4953
|
mount_component(button, div, null);
|
|
4974
4954
|
current = true;
|
|
4975
4955
|
},
|
|
4976
4956
|
p(ctx, [dirty]) {
|
|
4977
|
-
if (!current || dirty & /*text*/ 1 && link_href_value !== (link_href_value = `https://fonts.googleapis.com/css2?${getGoogleFontsParam()}&display=swap&text=${/*text*/ ctx[0]}`)) {
|
|
4978
|
-
attr(link, "href", link_href_value);
|
|
4979
|
-
}
|
|
4980
|
-
|
|
4981
4957
|
const button_changes = {};
|
|
4982
4958
|
if (dirty & /*onClick*/ 2) button_changes.onClick = /*onClick*/ ctx[1];
|
|
4983
4959
|
if (dirty & /*style*/ 8) button_changes.style = /*style*/ ctx[3];
|
|
4984
4960
|
if (dirty & /*eventName*/ 4) button_changes.eventName = /*eventName*/ ctx[2];
|
|
4985
4961
|
|
|
4986
|
-
if (dirty & /*$$scope, text*/
|
|
4962
|
+
if (dirty & /*$$scope, text*/ 129) {
|
|
4987
4963
|
button_changes.$$scope = { dirty, ctx };
|
|
4988
4964
|
}
|
|
4989
4965
|
|
|
@@ -5010,6 +4986,7 @@ function instance$o($$self, $$props, $$invalidate) {
|
|
|
5010
4986
|
let { text = 'ボタンラベル' } = $$props;
|
|
5011
4987
|
let { onClick = { operation: 'none', args: [] } } = $$props;
|
|
5012
4988
|
let { eventName = '' } = $$props;
|
|
4989
|
+
let { font = SYSTEM_FONT } = $$props;
|
|
5013
4990
|
let { _buttonStyle = 'color:#ffffff; font-size:14px; font-weight:bold; justify-content:center; align-items:center; padding:1px 6px 1px 6px; line-height: 1.5;' } = $$props;
|
|
5014
4991
|
let { _style = 'background-color: #000000; border-radius:4px; cursor: pointer' } = $$props;
|
|
5015
4992
|
|
|
@@ -5017,17 +4994,22 @@ function instance$o($$self, $$props, $$invalidate) {
|
|
|
5017
4994
|
if ('text' in $$props) $$invalidate(0, text = $$props.text);
|
|
5018
4995
|
if ('onClick' in $$props) $$invalidate(1, onClick = $$props.onClick);
|
|
5019
4996
|
if ('eventName' in $$props) $$invalidate(2, eventName = $$props.eventName);
|
|
5020
|
-
if ('
|
|
5021
|
-
if ('
|
|
4997
|
+
if ('font' in $$props) $$invalidate(4, font = $$props.font);
|
|
4998
|
+
if ('_buttonStyle' in $$props) $$invalidate(5, _buttonStyle = $$props._buttonStyle);
|
|
4999
|
+
if ('_style' in $$props) $$invalidate(6, _style = $$props._style);
|
|
5022
5000
|
};
|
|
5023
5001
|
|
|
5024
5002
|
$$self.$$.update = () => {
|
|
5025
|
-
if ($$self.$$.dirty & /*
|
|
5026
|
-
|
|
5003
|
+
if ($$self.$$.dirty & /*font*/ 16) {
|
|
5004
|
+
addFont(font);
|
|
5005
|
+
}
|
|
5006
|
+
|
|
5007
|
+
if ($$self.$$.dirty & /*_buttonStyle, _style, font*/ 112) {
|
|
5008
|
+
$$invalidate(3, style = [..._buttonStyle.split(';'), ..._style.split(';'), `font-family:${font}`].filter(prop => prop).join(';'));
|
|
5027
5009
|
}
|
|
5028
5010
|
};
|
|
5029
5011
|
|
|
5030
|
-
return [text, onClick, eventName, style, _buttonStyle, _style];
|
|
5012
|
+
return [text, onClick, eventName, style, font, _buttonStyle, _style];
|
|
5031
5013
|
}
|
|
5032
5014
|
|
|
5033
5015
|
class TextButtonElement extends SvelteComponent {
|
|
@@ -5044,8 +5026,9 @@ class TextButtonElement extends SvelteComponent {
|
|
|
5044
5026
|
text: 0,
|
|
5045
5027
|
onClick: 1,
|
|
5046
5028
|
eventName: 2,
|
|
5047
|
-
|
|
5048
|
-
|
|
5029
|
+
font: 4,
|
|
5030
|
+
_buttonStyle: 5,
|
|
5031
|
+
_style: 6
|
|
5049
5032
|
},
|
|
5050
5033
|
add_css$n
|
|
5051
5034
|
);
|
package/dist/index.es.js
CHANGED
|
@@ -25,6 +25,233 @@ const ALL_ACTION_SHORTEN_ID = 'KARTE_ALL_ACTION_SHORTEN_ID';
|
|
|
25
25
|
*/
|
|
26
26
|
const KARTE_MODAL_ROOT = 'karte-modal-root';
|
|
27
27
|
|
|
28
|
+
/** @internal */
|
|
29
|
+
const NOOP = (_args) => { }; // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
30
|
+
/** @internal */
|
|
31
|
+
const isPreview = () => {
|
|
32
|
+
return false;
|
|
33
|
+
};
|
|
34
|
+
/** @internal */
|
|
35
|
+
const setPreviousFocus = () => {
|
|
36
|
+
const previously_focused = typeof document !== 'undefined' && document.activeElement;
|
|
37
|
+
if (previously_focused) {
|
|
38
|
+
previously_focused?.focus();
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
/** @internal */
|
|
42
|
+
const handleKeydown = (handlers) => (e) => {
|
|
43
|
+
if (handlers[e.key]) {
|
|
44
|
+
handlers[e.key](e);
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
const POSITION_STYLES = {
|
|
48
|
+
'top-center': 'top: 0; right: 50%; transform: translate(+50%, 0%);',
|
|
49
|
+
'top-left': 'top: 0; left: 0; transform: translate(0%, 0%);',
|
|
50
|
+
'top-right': 'top: 0; right: 0; transform: translate(0%, 0%);',
|
|
51
|
+
'center-left': 'top: 50%; left: 0; transform: translate(0%, -50%);',
|
|
52
|
+
center: 'top: 50%; left: 50%; transform: translate(-50%, -50%);',
|
|
53
|
+
'center-right': 'top: 50%; right: 0; transform: translate(0%, -50%);',
|
|
54
|
+
'bottom-left': 'bottom: 0; left: 0; transform: translate(0%, 0%);',
|
|
55
|
+
'bottom-center': 'bottom: 0; left: 50%; transform: translate(-50%, 0%);',
|
|
56
|
+
'bottom-right': 'bottom: 0; right: 0; transform: translate(0%, 0);',
|
|
57
|
+
none: 'top: 0; bottom: 0; right: 0; left: 0;',
|
|
58
|
+
};
|
|
59
|
+
const TRANSFORM = {
|
|
60
|
+
'top-center': [50, 0],
|
|
61
|
+
'top-left': [0, 0],
|
|
62
|
+
'top-right': [0, 0],
|
|
63
|
+
'center-left': [0, -50],
|
|
64
|
+
center: [-50, -50],
|
|
65
|
+
'center-right': [0, -50],
|
|
66
|
+
'bottom-left': [0, 0],
|
|
67
|
+
'bottom-center': [-50, 0],
|
|
68
|
+
'bottom-right': [0, 0],
|
|
69
|
+
none: [0, 0],
|
|
70
|
+
};
|
|
71
|
+
/** @internal */
|
|
72
|
+
const getPositionStyle = (position) => {
|
|
73
|
+
const style = POSITION_STYLES[position];
|
|
74
|
+
if (style != null) {
|
|
75
|
+
return style;
|
|
76
|
+
}
|
|
77
|
+
else {
|
|
78
|
+
console.warn(`[action-sdk] invalid '${position}', so we use 'center' instead`);
|
|
79
|
+
return POSITION_STYLES['center'];
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
/** @internal */
|
|
83
|
+
const getTransform = (position) => {
|
|
84
|
+
const transform = TRANSFORM[position];
|
|
85
|
+
if (transform != null) {
|
|
86
|
+
return transform;
|
|
87
|
+
}
|
|
88
|
+
else {
|
|
89
|
+
console.warn(`[action-sdk] invalid '${position}', so we use 'center' instead`);
|
|
90
|
+
return TRANSFORM['center'];
|
|
91
|
+
}
|
|
92
|
+
};
|
|
93
|
+
/** @internal */
|
|
94
|
+
const getMarginStyle = (margin) => {
|
|
95
|
+
return `margin: ${margin?.top ?? 0} ${margin?.right ?? 0} ${margin?.bottom ?? 0} ${margin?.left ?? 0};`;
|
|
96
|
+
};
|
|
97
|
+
/** @internal */
|
|
98
|
+
const stringifyStyleObj = (styleObj) => {
|
|
99
|
+
return Object.entries(styleObj)
|
|
100
|
+
.map(([key, value]) => `${key}:${value}`)
|
|
101
|
+
.join(';');
|
|
102
|
+
};
|
|
103
|
+
/**
|
|
104
|
+
* スクロール率が達したときに呼び出すコールバックを登録します
|
|
105
|
+
*
|
|
106
|
+
* @param rate - スクロール率。この値は viewport でのスクロールのパーセンテージ
|
|
107
|
+
* @param fn - スクロール率が達したときに呼び出されるコールバック関数
|
|
108
|
+
*
|
|
109
|
+
* @returns スクロール率によって呼び出されるコールバックを停止する関数を返します
|
|
110
|
+
*
|
|
111
|
+
* @public
|
|
112
|
+
*/
|
|
113
|
+
function onScroll(rate, fn) {
|
|
114
|
+
const rates = Array.isArray(rate) ? rate : [rate];
|
|
115
|
+
const body = window.document.body;
|
|
116
|
+
const html = window.document.documentElement;
|
|
117
|
+
const contexts = new Map();
|
|
118
|
+
rates.forEach(rate => {
|
|
119
|
+
contexts.set(rate, {
|
|
120
|
+
rate,
|
|
121
|
+
repeat: false,
|
|
122
|
+
zone: 'out',
|
|
123
|
+
previousRate: 0,
|
|
124
|
+
deltaRate: 0,
|
|
125
|
+
scrollRate: 0,
|
|
126
|
+
scrollTop: html.scrollTop || body.scrollTop,
|
|
127
|
+
});
|
|
128
|
+
});
|
|
129
|
+
const _fn = fn;
|
|
130
|
+
const direction = (ctx) => ctx.deltaRate > 0 ? 'down' : 'up';
|
|
131
|
+
const updateStates = (ctx, repeat) => {
|
|
132
|
+
ctx.repeat = repeat;
|
|
133
|
+
// prettier-ignore
|
|
134
|
+
ctx.zone =
|
|
135
|
+
// case: the scroll rate cannot detect the rate when scrolling to the top
|
|
136
|
+
ctx.scrollTop === 0 && ctx.scrollRate >= ctx.rate
|
|
137
|
+
? 'out'
|
|
138
|
+
: ctx.scrollRate >= ctx.rate
|
|
139
|
+
? 'in'
|
|
140
|
+
: 'out';
|
|
141
|
+
// console.log('updateStates', ctx.zone);
|
|
142
|
+
};
|
|
143
|
+
// prettier-ignore
|
|
144
|
+
const canCall = ({ zone, scrollRate, rate, scrollTop, repeat }) => zone === 'out'
|
|
145
|
+
? scrollRate >= rate
|
|
146
|
+
: repeat
|
|
147
|
+
// case: the scroll rate cannot detect the rate when scrolling to the top
|
|
148
|
+
? scrollRate < rate || (scrollTop === 0 && scrollRate >= rate)
|
|
149
|
+
: false;
|
|
150
|
+
/*
|
|
151
|
+
// NOTE: same logic the above (code size optimiazation)
|
|
152
|
+
const canCall = (ctx: OnScrollInternalContext): boolean => {
|
|
153
|
+
// console.log('repeat', ctx.repeat, 'rate', ctx.rate, 'scrollRate', ctx.scrollRate, '1 - rate', 1 - ctx.rate, '1 - scrollRate', 1 - ctx.scrollRate, 'scrollRate >= rate', ctx.scrollRate >= ctx.rate, '1 - scrollRate >= 1 - rate', 1 - ctx.scrollRate >= 1 - ctx.rate);
|
|
154
|
+
// console.log(ctx.rate, 'deltaRate', ctx.deltaRate, 'reviousRate', ctx.previousRate)
|
|
155
|
+
if (ctx.zone === 'out') {
|
|
156
|
+
return ctx.scrollRate >= ctx.rate;
|
|
157
|
+
} else {
|
|
158
|
+
// 'in'
|
|
159
|
+
if (ctx.repeat) {
|
|
160
|
+
return ctx.scrollRate < ctx.rate || (ctx.scrollTop === 0 && ctx.scrollRate >= ctx.rate);
|
|
161
|
+
} else {
|
|
162
|
+
return false;
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
};
|
|
166
|
+
//*/
|
|
167
|
+
const onScroll = () => {
|
|
168
|
+
const scrollTop = html.scrollTop || body.scrollTop;
|
|
169
|
+
const pageHeight = Math.max(...[body.clientHeight, body.scrollHeight, html.scrollHeight, html.clientHeight]);
|
|
170
|
+
const viewHeight = Math.min(...[html.clientHeight, body.clientHeight]);
|
|
171
|
+
const scrollRate = (scrollTop + viewHeight) / pageHeight;
|
|
172
|
+
// console.log('scrollRate ->', scrollRate, 'scrollTop ->', scrollTop);
|
|
173
|
+
contexts.forEach(ctx => {
|
|
174
|
+
ctx.scrollRate = scrollRate;
|
|
175
|
+
ctx.deltaRate = ctx.scrollRate - ctx.previousRate;
|
|
176
|
+
ctx.previousRate = ctx.scrollRate;
|
|
177
|
+
ctx.scrollTop = scrollTop;
|
|
178
|
+
if (canCall(ctx)) {
|
|
179
|
+
const repeat = !!_fn(Object.assign({ direction: direction(ctx) }, ctx));
|
|
180
|
+
updateStates(ctx, repeat);
|
|
181
|
+
}
|
|
182
|
+
});
|
|
183
|
+
};
|
|
184
|
+
// register scorll event
|
|
185
|
+
window.addEventListener('scroll', onScroll);
|
|
186
|
+
// return disposing (finalizing/releasing) function
|
|
187
|
+
return () => {
|
|
188
|
+
window.removeEventListener('scroll', onScroll);
|
|
189
|
+
};
|
|
190
|
+
}
|
|
191
|
+
/**
|
|
192
|
+
* 指定した時間の経過後に呼び出すコールバックを登録します
|
|
193
|
+
*
|
|
194
|
+
* @param time - コールバックを呼び出すまでの時間。単位はミリセカンド(ms)
|
|
195
|
+
* @param fn - 指定した時間が経過後に呼び出されるコールバック関数
|
|
196
|
+
*
|
|
197
|
+
* @returns コールバックを呼び出すためのタイマーを停止する関数を返します
|
|
198
|
+
*
|
|
199
|
+
* @public
|
|
200
|
+
*/
|
|
201
|
+
function onTime(time, fn) {
|
|
202
|
+
const timeoutHandler = setTimeout(fn, time);
|
|
203
|
+
return () => timeoutHandler && clearTimeout(timeoutHandler);
|
|
204
|
+
}
|
|
205
|
+
/** @internal */
|
|
206
|
+
function hasSuffix(value, suffix) {
|
|
207
|
+
return new RegExp(`[0-9]${suffix}$`).test(value);
|
|
208
|
+
}
|
|
209
|
+
/** @internal */
|
|
210
|
+
function randStr(digit = 8) {
|
|
211
|
+
return Math.random().toString(32).substring(digit);
|
|
212
|
+
}
|
|
213
|
+
/**
|
|
214
|
+
* Goolge Fonts用のURLを生成
|
|
215
|
+
*
|
|
216
|
+
* @param fonts - フォント名の配列
|
|
217
|
+
* @param texts - 使用するテキストの配列
|
|
218
|
+
*
|
|
219
|
+
* @remarks
|
|
220
|
+
* textsを指定した場合フォントサイズが削減される
|
|
221
|
+
*
|
|
222
|
+
* @internal
|
|
223
|
+
*/
|
|
224
|
+
function makeGoogleFontUrl(fonts, texts) {
|
|
225
|
+
const params = [];
|
|
226
|
+
params.push('display=swap');
|
|
227
|
+
if (texts) {
|
|
228
|
+
texts.forEach(text => params.push(`text=${text}`));
|
|
229
|
+
}
|
|
230
|
+
fonts.forEach(font => params.push(`family=${font.replace(/['"]/g, '').replace(/ /g, '+')}`));
|
|
231
|
+
return `https://fonts.googleapis.com/css2?${params.join('&')}`;
|
|
232
|
+
}
|
|
233
|
+
/**
|
|
234
|
+
* HTML要素を生成
|
|
235
|
+
*
|
|
236
|
+
* @internal
|
|
237
|
+
*/
|
|
238
|
+
const h = (type, props, ...children) => {
|
|
239
|
+
const el = document.createElement(type);
|
|
240
|
+
for (const key of Object.keys(props)) {
|
|
241
|
+
const v = props[key];
|
|
242
|
+
if (key === 'style') {
|
|
243
|
+
Object.assign(el.style, v);
|
|
244
|
+
}
|
|
245
|
+
else {
|
|
246
|
+
el.setAttribute(key, v);
|
|
247
|
+
}
|
|
248
|
+
}
|
|
249
|
+
for (const child of children) {
|
|
250
|
+
el.appendChild(child);
|
|
251
|
+
}
|
|
252
|
+
return el;
|
|
253
|
+
};
|
|
254
|
+
|
|
28
255
|
/**
|
|
29
256
|
* ポップアップ(モーダル)のコンポーネントで利用するPropの定義
|
|
30
257
|
*/
|
|
@@ -269,243 +496,6 @@ const DefaultFormButtonColor = {
|
|
|
269
496
|
sub: '#fff',
|
|
270
497
|
};
|
|
271
498
|
|
|
272
|
-
/** @internal */
|
|
273
|
-
const NOOP = (_args) => { }; // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
274
|
-
/** @internal */
|
|
275
|
-
const isPreview = () => {
|
|
276
|
-
return false;
|
|
277
|
-
};
|
|
278
|
-
/** @internal */
|
|
279
|
-
const setPreviousFocus = () => {
|
|
280
|
-
const previously_focused = typeof document !== 'undefined' && document.activeElement;
|
|
281
|
-
if (previously_focused) {
|
|
282
|
-
previously_focused?.focus();
|
|
283
|
-
}
|
|
284
|
-
};
|
|
285
|
-
/** @internal */
|
|
286
|
-
const handleKeydown = (handlers) => (e) => {
|
|
287
|
-
if (handlers[e.key]) {
|
|
288
|
-
handlers[e.key](e);
|
|
289
|
-
}
|
|
290
|
-
};
|
|
291
|
-
const POSITION_STYLES = {
|
|
292
|
-
'top-center': 'top: 0; right: 50%; transform: translate(+50%, 0%);',
|
|
293
|
-
'top-left': 'top: 0; left: 0; transform: translate(0%, 0%);',
|
|
294
|
-
'top-right': 'top: 0; right: 0; transform: translate(0%, 0%);',
|
|
295
|
-
'center-left': 'top: 50%; left: 0; transform: translate(0%, -50%);',
|
|
296
|
-
center: 'top: 50%; left: 50%; transform: translate(-50%, -50%);',
|
|
297
|
-
'center-right': 'top: 50%; right: 0; transform: translate(0%, -50%);',
|
|
298
|
-
'bottom-left': 'bottom: 0; left: 0; transform: translate(0%, 0%);',
|
|
299
|
-
'bottom-center': 'bottom: 0; left: 50%; transform: translate(-50%, 0%);',
|
|
300
|
-
'bottom-right': 'bottom: 0; right: 0; transform: translate(0%, 0);',
|
|
301
|
-
none: 'top: 0; bottom: 0; right: 0; left: 0;',
|
|
302
|
-
};
|
|
303
|
-
const TRANSFORM = {
|
|
304
|
-
'top-center': [50, 0],
|
|
305
|
-
'top-left': [0, 0],
|
|
306
|
-
'top-right': [0, 0],
|
|
307
|
-
'center-left': [0, -50],
|
|
308
|
-
center: [-50, -50],
|
|
309
|
-
'center-right': [0, -50],
|
|
310
|
-
'bottom-left': [0, 0],
|
|
311
|
-
'bottom-center': [-50, 0],
|
|
312
|
-
'bottom-right': [0, 0],
|
|
313
|
-
none: [0, 0],
|
|
314
|
-
};
|
|
315
|
-
/** @internal */
|
|
316
|
-
const getPositionStyle = (position) => {
|
|
317
|
-
const style = POSITION_STYLES[position];
|
|
318
|
-
if (style != null) {
|
|
319
|
-
return style;
|
|
320
|
-
}
|
|
321
|
-
else {
|
|
322
|
-
console.warn(`[action-sdk] invalid '${position}', so we use 'center' instead`);
|
|
323
|
-
return POSITION_STYLES['center'];
|
|
324
|
-
}
|
|
325
|
-
};
|
|
326
|
-
/** @internal */
|
|
327
|
-
const getTransform = (position) => {
|
|
328
|
-
const transform = TRANSFORM[position];
|
|
329
|
-
if (transform != null) {
|
|
330
|
-
return transform;
|
|
331
|
-
}
|
|
332
|
-
else {
|
|
333
|
-
console.warn(`[action-sdk] invalid '${position}', so we use 'center' instead`);
|
|
334
|
-
return TRANSFORM['center'];
|
|
335
|
-
}
|
|
336
|
-
};
|
|
337
|
-
/** @internal */
|
|
338
|
-
const getMarginStyle = (margin) => {
|
|
339
|
-
return `margin: ${margin?.top ?? 0} ${margin?.right ?? 0} ${margin?.bottom ?? 0} ${margin?.left ?? 0};`;
|
|
340
|
-
};
|
|
341
|
-
/** @internal */
|
|
342
|
-
const stringifyStyleObj = (styleObj) => {
|
|
343
|
-
return Object.entries(styleObj)
|
|
344
|
-
.map(([key, value]) => `${key}:${value}`)
|
|
345
|
-
.join(';');
|
|
346
|
-
};
|
|
347
|
-
/**
|
|
348
|
-
* スクロール率が達したときに呼び出すコールバックを登録します
|
|
349
|
-
*
|
|
350
|
-
* @param rate - スクロール率。この値は viewport でのスクロールのパーセンテージ
|
|
351
|
-
* @param fn - スクロール率が達したときに呼び出されるコールバック関数
|
|
352
|
-
*
|
|
353
|
-
* @returns スクロール率によって呼び出されるコールバックを停止する関数を返します
|
|
354
|
-
*
|
|
355
|
-
* @public
|
|
356
|
-
*/
|
|
357
|
-
function onScroll(rate, fn) {
|
|
358
|
-
const rates = Array.isArray(rate) ? rate : [rate];
|
|
359
|
-
const body = window.document.body;
|
|
360
|
-
const html = window.document.documentElement;
|
|
361
|
-
const contexts = new Map();
|
|
362
|
-
rates.forEach(rate => {
|
|
363
|
-
contexts.set(rate, {
|
|
364
|
-
rate,
|
|
365
|
-
repeat: false,
|
|
366
|
-
zone: 'out',
|
|
367
|
-
previousRate: 0,
|
|
368
|
-
deltaRate: 0,
|
|
369
|
-
scrollRate: 0,
|
|
370
|
-
scrollTop: html.scrollTop || body.scrollTop,
|
|
371
|
-
});
|
|
372
|
-
});
|
|
373
|
-
const _fn = fn;
|
|
374
|
-
const direction = (ctx) => ctx.deltaRate > 0 ? 'down' : 'up';
|
|
375
|
-
const updateStates = (ctx, repeat) => {
|
|
376
|
-
ctx.repeat = repeat;
|
|
377
|
-
// prettier-ignore
|
|
378
|
-
ctx.zone =
|
|
379
|
-
// case: the scroll rate cannot detect the rate when scrolling to the top
|
|
380
|
-
ctx.scrollTop === 0 && ctx.scrollRate >= ctx.rate
|
|
381
|
-
? 'out'
|
|
382
|
-
: ctx.scrollRate >= ctx.rate
|
|
383
|
-
? 'in'
|
|
384
|
-
: 'out';
|
|
385
|
-
// console.log('updateStates', ctx.zone);
|
|
386
|
-
};
|
|
387
|
-
// prettier-ignore
|
|
388
|
-
const canCall = ({ zone, scrollRate, rate, scrollTop, repeat }) => zone === 'out'
|
|
389
|
-
? scrollRate >= rate
|
|
390
|
-
: repeat
|
|
391
|
-
// case: the scroll rate cannot detect the rate when scrolling to the top
|
|
392
|
-
? scrollRate < rate || (scrollTop === 0 && scrollRate >= rate)
|
|
393
|
-
: false;
|
|
394
|
-
/*
|
|
395
|
-
// NOTE: same logic the above (code size optimiazation)
|
|
396
|
-
const canCall = (ctx: OnScrollInternalContext): boolean => {
|
|
397
|
-
// console.log('repeat', ctx.repeat, 'rate', ctx.rate, 'scrollRate', ctx.scrollRate, '1 - rate', 1 - ctx.rate, '1 - scrollRate', 1 - ctx.scrollRate, 'scrollRate >= rate', ctx.scrollRate >= ctx.rate, '1 - scrollRate >= 1 - rate', 1 - ctx.scrollRate >= 1 - ctx.rate);
|
|
398
|
-
// console.log(ctx.rate, 'deltaRate', ctx.deltaRate, 'reviousRate', ctx.previousRate)
|
|
399
|
-
if (ctx.zone === 'out') {
|
|
400
|
-
return ctx.scrollRate >= ctx.rate;
|
|
401
|
-
} else {
|
|
402
|
-
// 'in'
|
|
403
|
-
if (ctx.repeat) {
|
|
404
|
-
return ctx.scrollRate < ctx.rate || (ctx.scrollTop === 0 && ctx.scrollRate >= ctx.rate);
|
|
405
|
-
} else {
|
|
406
|
-
return false;
|
|
407
|
-
}
|
|
408
|
-
}
|
|
409
|
-
};
|
|
410
|
-
//*/
|
|
411
|
-
const onScroll = () => {
|
|
412
|
-
const scrollTop = html.scrollTop || body.scrollTop;
|
|
413
|
-
const pageHeight = Math.max(...[body.clientHeight, body.scrollHeight, html.scrollHeight, html.clientHeight]);
|
|
414
|
-
const viewHeight = Math.min(...[html.clientHeight, body.clientHeight]);
|
|
415
|
-
const scrollRate = (scrollTop + viewHeight) / pageHeight;
|
|
416
|
-
// console.log('scrollRate ->', scrollRate, 'scrollTop ->', scrollTop);
|
|
417
|
-
contexts.forEach(ctx => {
|
|
418
|
-
ctx.scrollRate = scrollRate;
|
|
419
|
-
ctx.deltaRate = ctx.scrollRate - ctx.previousRate;
|
|
420
|
-
ctx.previousRate = ctx.scrollRate;
|
|
421
|
-
ctx.scrollTop = scrollTop;
|
|
422
|
-
if (canCall(ctx)) {
|
|
423
|
-
const repeat = !!_fn(Object.assign({ direction: direction(ctx) }, ctx));
|
|
424
|
-
updateStates(ctx, repeat);
|
|
425
|
-
}
|
|
426
|
-
});
|
|
427
|
-
};
|
|
428
|
-
// register scorll event
|
|
429
|
-
window.addEventListener('scroll', onScroll);
|
|
430
|
-
// return disposing (finalizing/releasing) function
|
|
431
|
-
return () => {
|
|
432
|
-
window.removeEventListener('scroll', onScroll);
|
|
433
|
-
};
|
|
434
|
-
}
|
|
435
|
-
/**
|
|
436
|
-
* 指定した時間の経過後に呼び出すコールバックを登録します
|
|
437
|
-
*
|
|
438
|
-
* @param time - コールバックを呼び出すまでの時間。単位はミリセカンド(ms)
|
|
439
|
-
* @param fn - 指定した時間が経過後に呼び出されるコールバック関数
|
|
440
|
-
*
|
|
441
|
-
* @returns コールバックを呼び出すためのタイマーを停止する関数を返します
|
|
442
|
-
*
|
|
443
|
-
* @public
|
|
444
|
-
*/
|
|
445
|
-
function onTime(time, fn) {
|
|
446
|
-
const timeoutHandler = setTimeout(fn, time);
|
|
447
|
-
return () => timeoutHandler && clearTimeout(timeoutHandler);
|
|
448
|
-
}
|
|
449
|
-
/** @internal */
|
|
450
|
-
function hasSuffix(value, suffix) {
|
|
451
|
-
return new RegExp(`[0-9]${suffix}$`).test(value);
|
|
452
|
-
}
|
|
453
|
-
/** @internal */
|
|
454
|
-
function randStr(digit = 8) {
|
|
455
|
-
return Math.random().toString(32).substring(digit);
|
|
456
|
-
}
|
|
457
|
-
/**
|
|
458
|
-
* Goolge Fonts用のURLを生成
|
|
459
|
-
*
|
|
460
|
-
* @param fonts - フォント名の配列
|
|
461
|
-
* @param texts - 使用するテキストの配列
|
|
462
|
-
*
|
|
463
|
-
* @remarks
|
|
464
|
-
* textsを指定した場合フォントサイズが削減される
|
|
465
|
-
*
|
|
466
|
-
* @internal
|
|
467
|
-
*/
|
|
468
|
-
function makeGoogleFontUrl(fonts, texts) {
|
|
469
|
-
const params = [];
|
|
470
|
-
params.push('display=swap');
|
|
471
|
-
if (texts) {
|
|
472
|
-
texts.forEach(text => params.push(`text=${text}`));
|
|
473
|
-
}
|
|
474
|
-
fonts.forEach(font => params.push(`family=${font.replace(/['"]/g, '').replace(/ /g, '+')}`));
|
|
475
|
-
return `https://fonts.googleapis.com/css2?${params.join('&')}`;
|
|
476
|
-
}
|
|
477
|
-
/**
|
|
478
|
-
* HTML要素を生成
|
|
479
|
-
*
|
|
480
|
-
* @internal
|
|
481
|
-
*/
|
|
482
|
-
const h = (type, props, ...children) => {
|
|
483
|
-
const el = document.createElement(type);
|
|
484
|
-
for (const key of Object.keys(props)) {
|
|
485
|
-
const v = props[key];
|
|
486
|
-
if (key === 'style') {
|
|
487
|
-
Object.assign(el.style, v);
|
|
488
|
-
}
|
|
489
|
-
else {
|
|
490
|
-
el.setAttribute(key, v);
|
|
491
|
-
}
|
|
492
|
-
}
|
|
493
|
-
for (const child of children) {
|
|
494
|
-
el.appendChild(child);
|
|
495
|
-
}
|
|
496
|
-
return el;
|
|
497
|
-
};
|
|
498
|
-
/**
|
|
499
|
-
* 非推奨
|
|
500
|
-
*
|
|
501
|
-
* @deprecated 非推奨
|
|
502
|
-
*
|
|
503
|
-
* @internal
|
|
504
|
-
*/
|
|
505
|
-
function getGoogleFontsParam() {
|
|
506
|
-
return 'family=' + Fonts.map(font => font.replace(/ /g, '+')).join('&family=');
|
|
507
|
-
}
|
|
508
|
-
|
|
509
499
|
/**
|
|
510
500
|
* Store to handle action setting
|
|
511
501
|
*
|
|
@@ -1825,6 +1815,7 @@ async function runScript$1(options = {
|
|
|
1825
1815
|
const { success } = await setupActionTable(options.localVariablesQuery, data.api_key);
|
|
1826
1816
|
if (!success)
|
|
1827
1817
|
return;
|
|
1818
|
+
options.send('script_fired');
|
|
1828
1819
|
// 旧Widget API IFの処理
|
|
1829
1820
|
const { onCreateHandlers } = getInternalHandlers();
|
|
1830
1821
|
if (onCreateHandlers) {
|
|
@@ -4736,7 +4727,7 @@ function add_css$n(target) {
|
|
|
4736
4727
|
append_styles(target, "svelte-wb7ek", ".text-button-element.svelte-wb7ek{width:100%;height:100%}.text-button-element.svelte-wb7ek > .button{display:flex;justify-content:center;align-items:center;width:100%;height:100%;background-color:transparent;border:none;box-shadow:transparent;box-sizing:border-box;cursor:pointer;transition:box-shadow 0.2s;white-space:pre-wrap;overflow:hidden}.text-button-element.svelte-wb7ek > .button._disabled{cursor:not-allowed !important;opacity:0.2}.text-button-element.svelte-wb7ek > .button:not(._disabled):active{box-shadow:inset 0 0 100px 100px rgba(0, 0, 0, 0.3)}.text-button-element.svelte-wb7ek > .button:not(._disabled):hover{box-shadow:inset 0 0 100px 100px rgba(255, 255, 255, 0.3)}");
|
|
4737
4728
|
}
|
|
4738
4729
|
|
|
4739
|
-
// (
|
|
4730
|
+
// (46:2) <Button onClick={onClick} {style} {eventName}>
|
|
4740
4731
|
function create_default_slot$5(ctx) {
|
|
4741
4732
|
let rendertext;
|
|
4742
4733
|
let current;
|
|
@@ -4772,9 +4763,6 @@ function create_default_slot$5(ctx) {
|
|
|
4772
4763
|
|
|
4773
4764
|
function create_fragment$o(ctx) {
|
|
4774
4765
|
let div;
|
|
4775
|
-
let link;
|
|
4776
|
-
let link_href_value;
|
|
4777
|
-
let t;
|
|
4778
4766
|
let button;
|
|
4779
4767
|
let current;
|
|
4780
4768
|
|
|
@@ -4791,31 +4779,21 @@ function create_fragment$o(ctx) {
|
|
|
4791
4779
|
return {
|
|
4792
4780
|
c() {
|
|
4793
4781
|
div = element("div");
|
|
4794
|
-
link = element("link");
|
|
4795
|
-
t = space();
|
|
4796
4782
|
create_component(button.$$.fragment);
|
|
4797
|
-
attr(link, "href", link_href_value = `https://fonts.googleapis.com/css2?${getGoogleFontsParam()}&display=swap&text=${/*text*/ ctx[0]}`);
|
|
4798
|
-
attr(link, "rel", "stylesheet");
|
|
4799
4783
|
attr(div, "class", "text-button-element svelte-wb7ek");
|
|
4800
4784
|
},
|
|
4801
4785
|
m(target, anchor) {
|
|
4802
4786
|
insert(target, div, anchor);
|
|
4803
|
-
append(div, link);
|
|
4804
|
-
append(div, t);
|
|
4805
4787
|
mount_component(button, div, null);
|
|
4806
4788
|
current = true;
|
|
4807
4789
|
},
|
|
4808
4790
|
p(ctx, [dirty]) {
|
|
4809
|
-
if (!current || dirty & /*text*/ 1 && link_href_value !== (link_href_value = `https://fonts.googleapis.com/css2?${getGoogleFontsParam()}&display=swap&text=${/*text*/ ctx[0]}`)) {
|
|
4810
|
-
attr(link, "href", link_href_value);
|
|
4811
|
-
}
|
|
4812
|
-
|
|
4813
4791
|
const button_changes = {};
|
|
4814
4792
|
if (dirty & /*onClick*/ 2) button_changes.onClick = /*onClick*/ ctx[1];
|
|
4815
4793
|
if (dirty & /*style*/ 8) button_changes.style = /*style*/ ctx[3];
|
|
4816
4794
|
if (dirty & /*eventName*/ 4) button_changes.eventName = /*eventName*/ ctx[2];
|
|
4817
4795
|
|
|
4818
|
-
if (dirty & /*$$scope, text*/
|
|
4796
|
+
if (dirty & /*$$scope, text*/ 129) {
|
|
4819
4797
|
button_changes.$$scope = { dirty, ctx };
|
|
4820
4798
|
}
|
|
4821
4799
|
|
|
@@ -4842,6 +4820,7 @@ function instance$o($$self, $$props, $$invalidate) {
|
|
|
4842
4820
|
let { text = 'ボタンラベル' } = $$props;
|
|
4843
4821
|
let { onClick = { operation: 'none', args: [] } } = $$props;
|
|
4844
4822
|
let { eventName = '' } = $$props;
|
|
4823
|
+
let { font = SYSTEM_FONT } = $$props;
|
|
4845
4824
|
let { _buttonStyle = 'color:#ffffff; font-size:14px; font-weight:bold; justify-content:center; align-items:center; padding:1px 6px 1px 6px; line-height: 1.5;' } = $$props;
|
|
4846
4825
|
let { _style = 'background-color: #000000; border-radius:4px; cursor: pointer' } = $$props;
|
|
4847
4826
|
|
|
@@ -4849,17 +4828,22 @@ function instance$o($$self, $$props, $$invalidate) {
|
|
|
4849
4828
|
if ('text' in $$props) $$invalidate(0, text = $$props.text);
|
|
4850
4829
|
if ('onClick' in $$props) $$invalidate(1, onClick = $$props.onClick);
|
|
4851
4830
|
if ('eventName' in $$props) $$invalidate(2, eventName = $$props.eventName);
|
|
4852
|
-
if ('
|
|
4853
|
-
if ('
|
|
4831
|
+
if ('font' in $$props) $$invalidate(4, font = $$props.font);
|
|
4832
|
+
if ('_buttonStyle' in $$props) $$invalidate(5, _buttonStyle = $$props._buttonStyle);
|
|
4833
|
+
if ('_style' in $$props) $$invalidate(6, _style = $$props._style);
|
|
4854
4834
|
};
|
|
4855
4835
|
|
|
4856
4836
|
$$self.$$.update = () => {
|
|
4857
|
-
if ($$self.$$.dirty & /*
|
|
4858
|
-
|
|
4837
|
+
if ($$self.$$.dirty & /*font*/ 16) {
|
|
4838
|
+
addFont(font);
|
|
4839
|
+
}
|
|
4840
|
+
|
|
4841
|
+
if ($$self.$$.dirty & /*_buttonStyle, _style, font*/ 112) {
|
|
4842
|
+
$$invalidate(3, style = [..._buttonStyle.split(';'), ..._style.split(';'), `font-family:${font}`].filter(prop => prop).join(';'));
|
|
4859
4843
|
}
|
|
4860
4844
|
};
|
|
4861
4845
|
|
|
4862
|
-
return [text, onClick, eventName, style, _buttonStyle, _style];
|
|
4846
|
+
return [text, onClick, eventName, style, font, _buttonStyle, _style];
|
|
4863
4847
|
}
|
|
4864
4848
|
|
|
4865
4849
|
class TextButtonElement extends SvelteComponent {
|
|
@@ -4876,8 +4860,9 @@ class TextButtonElement extends SvelteComponent {
|
|
|
4876
4860
|
text: 0,
|
|
4877
4861
|
onClick: 1,
|
|
4878
4862
|
eventName: 2,
|
|
4879
|
-
|
|
4880
|
-
|
|
4863
|
+
font: 4,
|
|
4864
|
+
_buttonStyle: 5,
|
|
4865
|
+
_style: 6
|
|
4881
4866
|
},
|
|
4882
4867
|
add_css$n
|
|
4883
4868
|
);
|