@plaidev/karte-action-sdk 1.1.180-28042066.2d66783f → 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 +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
|
);
|