@plaidev/karte-action-sdk 1.1.180-28042066.2d66783f → 1.1.181-28042089.f7e0349f
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/hydrate/index.es.js +239 -257
- package/dist/index.es.js +243 -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
|
*
|
|
@@ -4890,7 +4880,7 @@ function add_css$n(target) {
|
|
|
4890
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)}");
|
|
4891
4881
|
}
|
|
4892
4882
|
|
|
4893
|
-
// (
|
|
4883
|
+
// (46:2) <Button onClick={onClick} {style} {eventName}>
|
|
4894
4884
|
function create_default_slot$5(ctx) {
|
|
4895
4885
|
let rendertext;
|
|
4896
4886
|
let current;
|
|
@@ -4929,9 +4919,6 @@ function create_default_slot$5(ctx) {
|
|
|
4929
4919
|
|
|
4930
4920
|
function create_fragment$o(ctx) {
|
|
4931
4921
|
let div;
|
|
4932
|
-
let link;
|
|
4933
|
-
let link_href_value;
|
|
4934
|
-
let t;
|
|
4935
4922
|
let button;
|
|
4936
4923
|
let current;
|
|
4937
4924
|
|
|
@@ -4948,43 +4935,31 @@ function create_fragment$o(ctx) {
|
|
|
4948
4935
|
return {
|
|
4949
4936
|
c() {
|
|
4950
4937
|
div = element("div");
|
|
4951
|
-
link = element("link");
|
|
4952
|
-
t = space();
|
|
4953
4938
|
create_component(button.$$.fragment);
|
|
4954
4939
|
this.h();
|
|
4955
4940
|
},
|
|
4956
4941
|
l(nodes) {
|
|
4957
4942
|
div = claim_element(nodes, "DIV", { class: true });
|
|
4958
4943
|
var div_nodes = children(div);
|
|
4959
|
-
link = claim_element(div_nodes, "LINK", { href: true, rel: true });
|
|
4960
|
-
t = claim_space(div_nodes);
|
|
4961
4944
|
claim_component(button.$$.fragment, div_nodes);
|
|
4962
4945
|
div_nodes.forEach(detach);
|
|
4963
4946
|
this.h();
|
|
4964
4947
|
},
|
|
4965
4948
|
h() {
|
|
4966
|
-
attr(link, "href", link_href_value = `https://fonts.googleapis.com/css2?${getGoogleFontsParam()}&display=swap&text=${/*text*/ ctx[0]}`);
|
|
4967
|
-
attr(link, "rel", "stylesheet");
|
|
4968
4949
|
attr(div, "class", "text-button-element svelte-wb7ek");
|
|
4969
4950
|
},
|
|
4970
4951
|
m(target, anchor) {
|
|
4971
4952
|
insert_hydration(target, div, anchor);
|
|
4972
|
-
append_hydration(div, link);
|
|
4973
|
-
append_hydration(div, t);
|
|
4974
4953
|
mount_component(button, div, null);
|
|
4975
4954
|
current = true;
|
|
4976
4955
|
},
|
|
4977
4956
|
p(ctx, [dirty]) {
|
|
4978
|
-
if (!current || dirty & /*text*/ 1 && link_href_value !== (link_href_value = `https://fonts.googleapis.com/css2?${getGoogleFontsParam()}&display=swap&text=${/*text*/ ctx[0]}`)) {
|
|
4979
|
-
attr(link, "href", link_href_value);
|
|
4980
|
-
}
|
|
4981
|
-
|
|
4982
4957
|
const button_changes = {};
|
|
4983
4958
|
if (dirty & /*onClick*/ 2) button_changes.onClick = /*onClick*/ ctx[1];
|
|
4984
4959
|
if (dirty & /*style*/ 8) button_changes.style = /*style*/ ctx[3];
|
|
4985
4960
|
if (dirty & /*eventName*/ 4) button_changes.eventName = /*eventName*/ ctx[2];
|
|
4986
4961
|
|
|
4987
|
-
if (dirty & /*$$scope, text*/
|
|
4962
|
+
if (dirty & /*$$scope, text*/ 129) {
|
|
4988
4963
|
button_changes.$$scope = { dirty, ctx };
|
|
4989
4964
|
}
|
|
4990
4965
|
|
|
@@ -5011,6 +4986,7 @@ function instance$o($$self, $$props, $$invalidate) {
|
|
|
5011
4986
|
let { text = 'ボタンラベル' } = $$props;
|
|
5012
4987
|
let { onClick = { operation: 'none', args: [] } } = $$props;
|
|
5013
4988
|
let { eventName = '' } = $$props;
|
|
4989
|
+
let { font = SYSTEM_FONT } = $$props;
|
|
5014
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;
|
|
5015
4991
|
let { _style = 'background-color: #000000; border-radius:4px; cursor: pointer' } = $$props;
|
|
5016
4992
|
|
|
@@ -5018,17 +4994,22 @@ function instance$o($$self, $$props, $$invalidate) {
|
|
|
5018
4994
|
if ('text' in $$props) $$invalidate(0, text = $$props.text);
|
|
5019
4995
|
if ('onClick' in $$props) $$invalidate(1, onClick = $$props.onClick);
|
|
5020
4996
|
if ('eventName' in $$props) $$invalidate(2, eventName = $$props.eventName);
|
|
5021
|
-
if ('
|
|
5022
|
-
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);
|
|
5023
5000
|
};
|
|
5024
5001
|
|
|
5025
5002
|
$$self.$$.update = () => {
|
|
5026
|
-
if ($$self.$$.dirty & /*
|
|
5027
|
-
|
|
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(';'));
|
|
5028
5009
|
}
|
|
5029
5010
|
};
|
|
5030
5011
|
|
|
5031
|
-
return [text, onClick, eventName, style, _buttonStyle, _style];
|
|
5012
|
+
return [text, onClick, eventName, style, font, _buttonStyle, _style];
|
|
5032
5013
|
}
|
|
5033
5014
|
|
|
5034
5015
|
class TextButtonElement extends SvelteComponent {
|
|
@@ -5045,8 +5026,9 @@ class TextButtonElement extends SvelteComponent {
|
|
|
5045
5026
|
text: 0,
|
|
5046
5027
|
onClick: 1,
|
|
5047
5028
|
eventName: 2,
|
|
5048
|
-
|
|
5049
|
-
|
|
5029
|
+
font: 4,
|
|
5030
|
+
_buttonStyle: 5,
|
|
5031
|
+
_style: 6
|
|
5050
5032
|
},
|
|
5051
5033
|
add_css$n
|
|
5052
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
|
*
|
|
@@ -4737,7 +4727,7 @@ function add_css$n(target) {
|
|
|
4737
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)}");
|
|
4738
4728
|
}
|
|
4739
4729
|
|
|
4740
|
-
// (
|
|
4730
|
+
// (46:2) <Button onClick={onClick} {style} {eventName}>
|
|
4741
4731
|
function create_default_slot$5(ctx) {
|
|
4742
4732
|
let rendertext;
|
|
4743
4733
|
let current;
|
|
@@ -4773,9 +4763,6 @@ function create_default_slot$5(ctx) {
|
|
|
4773
4763
|
|
|
4774
4764
|
function create_fragment$o(ctx) {
|
|
4775
4765
|
let div;
|
|
4776
|
-
let link;
|
|
4777
|
-
let link_href_value;
|
|
4778
|
-
let t;
|
|
4779
4766
|
let button;
|
|
4780
4767
|
let current;
|
|
4781
4768
|
|
|
@@ -4792,31 +4779,21 @@ function create_fragment$o(ctx) {
|
|
|
4792
4779
|
return {
|
|
4793
4780
|
c() {
|
|
4794
4781
|
div = element("div");
|
|
4795
|
-
link = element("link");
|
|
4796
|
-
t = space();
|
|
4797
4782
|
create_component(button.$$.fragment);
|
|
4798
|
-
attr(link, "href", link_href_value = `https://fonts.googleapis.com/css2?${getGoogleFontsParam()}&display=swap&text=${/*text*/ ctx[0]}`);
|
|
4799
|
-
attr(link, "rel", "stylesheet");
|
|
4800
4783
|
attr(div, "class", "text-button-element svelte-wb7ek");
|
|
4801
4784
|
},
|
|
4802
4785
|
m(target, anchor) {
|
|
4803
4786
|
insert(target, div, anchor);
|
|
4804
|
-
append(div, link);
|
|
4805
|
-
append(div, t);
|
|
4806
4787
|
mount_component(button, div, null);
|
|
4807
4788
|
current = true;
|
|
4808
4789
|
},
|
|
4809
4790
|
p(ctx, [dirty]) {
|
|
4810
|
-
if (!current || dirty & /*text*/ 1 && link_href_value !== (link_href_value = `https://fonts.googleapis.com/css2?${getGoogleFontsParam()}&display=swap&text=${/*text*/ ctx[0]}`)) {
|
|
4811
|
-
attr(link, "href", link_href_value);
|
|
4812
|
-
}
|
|
4813
|
-
|
|
4814
4791
|
const button_changes = {};
|
|
4815
4792
|
if (dirty & /*onClick*/ 2) button_changes.onClick = /*onClick*/ ctx[1];
|
|
4816
4793
|
if (dirty & /*style*/ 8) button_changes.style = /*style*/ ctx[3];
|
|
4817
4794
|
if (dirty & /*eventName*/ 4) button_changes.eventName = /*eventName*/ ctx[2];
|
|
4818
4795
|
|
|
4819
|
-
if (dirty & /*$$scope, text*/
|
|
4796
|
+
if (dirty & /*$$scope, text*/ 129) {
|
|
4820
4797
|
button_changes.$$scope = { dirty, ctx };
|
|
4821
4798
|
}
|
|
4822
4799
|
|
|
@@ -4843,6 +4820,7 @@ function instance$o($$self, $$props, $$invalidate) {
|
|
|
4843
4820
|
let { text = 'ボタンラベル' } = $$props;
|
|
4844
4821
|
let { onClick = { operation: 'none', args: [] } } = $$props;
|
|
4845
4822
|
let { eventName = '' } = $$props;
|
|
4823
|
+
let { font = SYSTEM_FONT } = $$props;
|
|
4846
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;
|
|
4847
4825
|
let { _style = 'background-color: #000000; border-radius:4px; cursor: pointer' } = $$props;
|
|
4848
4826
|
|
|
@@ -4850,17 +4828,22 @@ function instance$o($$self, $$props, $$invalidate) {
|
|
|
4850
4828
|
if ('text' in $$props) $$invalidate(0, text = $$props.text);
|
|
4851
4829
|
if ('onClick' in $$props) $$invalidate(1, onClick = $$props.onClick);
|
|
4852
4830
|
if ('eventName' in $$props) $$invalidate(2, eventName = $$props.eventName);
|
|
4853
|
-
if ('
|
|
4854
|
-
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);
|
|
4855
4834
|
};
|
|
4856
4835
|
|
|
4857
4836
|
$$self.$$.update = () => {
|
|
4858
|
-
if ($$self.$$.dirty & /*
|
|
4859
|
-
|
|
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(';'));
|
|
4860
4843
|
}
|
|
4861
4844
|
};
|
|
4862
4845
|
|
|
4863
|
-
return [text, onClick, eventName, style, _buttonStyle, _style];
|
|
4846
|
+
return [text, onClick, eventName, style, font, _buttonStyle, _style];
|
|
4864
4847
|
}
|
|
4865
4848
|
|
|
4866
4849
|
class TextButtonElement extends SvelteComponent {
|
|
@@ -4877,8 +4860,9 @@ class TextButtonElement extends SvelteComponent {
|
|
|
4877
4860
|
text: 0,
|
|
4878
4861
|
onClick: 1,
|
|
4879
4862
|
eventName: 2,
|
|
4880
|
-
|
|
4881
|
-
|
|
4863
|
+
font: 4,
|
|
4864
|
+
_buttonStyle: 5,
|
|
4865
|
+
_style: 6
|
|
4882
4866
|
},
|
|
4883
4867
|
add_css$n
|
|
4884
4868
|
);
|