@plaidev/karte-action-sdk 1.1.267-29071733.fabf64a6 → 1.1.267-29071859.db1ade43
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 +51 -131
- package/dist/index.es.js +50 -82
- package/dist/svelte5/hydrate/index.es.js +44 -24
- package/dist/svelte5/index.es.js +26 -21
- package/dist/svelte5/index.front2.es.js +26 -21
- package/package.json +1 -1
package/dist/hydrate/index.es.js
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
import { writable, get } from 'svelte/store';
|
2
2
|
import { onMount as onMount$1, onDestroy as onDestroy$1, beforeUpdate as beforeUpdate$1, afterUpdate as afterUpdate$1, tick as tick$1, getContext, setContext, createEventDispatcher } from 'svelte';
|
3
3
|
import { SvelteComponent, init, safe_not_equal, empty, head_selector, detach, append_hydration, noop, component_subscribe, element, claim_element, attr, insert_hydration, create_slot, create_component, space, claim_component, claim_space, mount_component, update_slot_base, get_all_dirty_from_scope, get_slot_changes, transition_in, transition_out, destroy_component, append_styles, group_outros, check_outros, children, null_to_empty, listen, assign, set_attributes, toggle_class, get_spread_update, prevent_default, is_function, add_render_callback, create_in_transition, binding_callbacks, set_style, svg_element, claim_svg_element, destroy_each, text, claim_text, set_data, src_url_equal, set_store_value, run_all, HtmlTagHydration, claim_html_tag, construct_svelte_component, subscribe, set_custom_element_data_map } from 'svelte/internal';
|
4
|
-
import
|
4
|
+
import 'svelte/easing';
|
5
5
|
|
6
6
|
/** @internal */
|
7
7
|
const ACTION_HOOK_LABEL = '__ACTION_HOOK__';
|
@@ -38,6 +38,7 @@ const NOOP = (_args) => { }; // eslint-disable-line @typescript-eslint/no-unused
|
|
38
38
|
const isPreview = () => {
|
39
39
|
return true;
|
40
40
|
};
|
41
|
+
const isCanvasPreview = () => (document.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') === 'true';
|
41
42
|
/** @internal */
|
42
43
|
const setPreviousFocus = () => {
|
43
44
|
const previously_focused = typeof document !== 'undefined' && document.activeElement;
|
@@ -3381,54 +3382,6 @@ const execOnClickOperation = (onClickOperation) => {
|
|
3381
3382
|
const haveFunction = (onClickOperation) => {
|
3382
3383
|
return onClickOperation.operation !== 'none';
|
3383
3384
|
};
|
3384
|
-
function getAnimation(animation) {
|
3385
|
-
switch (animation.type) {
|
3386
|
-
case 'fade':
|
3387
|
-
return `opacity: ${animation.progress}`;
|
3388
|
-
case 'bounce': {
|
3389
|
-
const translateX = animation.x;
|
3390
|
-
const translateY = animation.y;
|
3391
|
-
return `transform: translate3d(${translateX}%, ${translateY}%, 0) scale(${animation.progress});`;
|
3392
|
-
}
|
3393
|
-
case 'slide-down': {
|
3394
|
-
const translateX = animation.x;
|
3395
|
-
const translateY = animation.y - 100 * (1 - animation.progress);
|
3396
|
-
return `transform: translate3d(${translateX}%, ${translateY}%, 0);`;
|
3397
|
-
}
|
3398
|
-
case 'slide-up': {
|
3399
|
-
const translateX = animation.x;
|
3400
|
-
const translateY = animation.y + 100 * (1 - animation.progress);
|
3401
|
-
return `transform: translate3d(${translateX}%, ${translateY}%, 0);`;
|
3402
|
-
}
|
3403
|
-
case 'slide-left': {
|
3404
|
-
const translateX = animation.x + 100 * (1 - animation.progress);
|
3405
|
-
const translateY = animation.y;
|
3406
|
-
return `transform: translate3d(${translateX}%, ${translateY}%, 0);`;
|
3407
|
-
}
|
3408
|
-
case 'slide-right': {
|
3409
|
-
const translateX = animation.x - 100 * (1 - animation.progress);
|
3410
|
-
const translateY = animation.y;
|
3411
|
-
return `transform: translate3d(${translateX}%, ${translateY}%, 0);`;
|
3412
|
-
}
|
3413
|
-
case 'none': {
|
3414
|
-
const translateX = animation.x;
|
3415
|
-
const translateY = animation.y;
|
3416
|
-
return `transform: translate3d(${translateX}%, ${translateY}%, 0);`;
|
3417
|
-
}
|
3418
|
-
default:
|
3419
|
-
console.warn(`[action-sdk] invalid '${animation}', so we use 'transform: none' instead`);
|
3420
|
-
return 'transform: none';
|
3421
|
-
}
|
3422
|
-
}
|
3423
|
-
const EASING = {
|
3424
|
-
fade: linear,
|
3425
|
-
bounce: elasticOut,
|
3426
|
-
'slide-down': cubicOut,
|
3427
|
-
'slide-up': cubicOut,
|
3428
|
-
'slide-left': cubicOut,
|
3429
|
-
'slide-right': cubicOut,
|
3430
|
-
none: linear,
|
3431
|
-
};
|
3432
3385
|
/**
|
3433
3386
|
* The function to activate svelte animation.
|
3434
3387
|
*
|
@@ -3444,35 +3397,6 @@ function customAnimation(node, { transforms, animationStyle, delay = 0, duration
|
|
3444
3397
|
return {};
|
3445
3398
|
}
|
3446
3399
|
}
|
3447
|
-
/**
|
3448
|
-
* The function to activate svelte animation v2.
|
3449
|
-
*
|
3450
|
-
* @param node - A target node of animation. This argument is passed by svelte, by default.
|
3451
|
-
* @param customAnimationOptions - A custom animation option object
|
3452
|
-
*
|
3453
|
-
* @see {@link https://svelte.dev/docs#template-syntax-element-directives-transition-fn-custom-transition-functions| Custom transition functions} for detail documentation
|
3454
|
-
*
|
3455
|
-
* @internal
|
3456
|
-
*/
|
3457
|
-
function customAnimationV2(node, { transforms, animationStyle, delay = 0, duration = 1000, disabled, }) {
|
3458
|
-
if (disabled) {
|
3459
|
-
return {};
|
3460
|
-
}
|
3461
|
-
let [x, y] = [0, 0];
|
3462
|
-
for (const { query, x: tx, y: ty } of transforms) {
|
3463
|
-
if (query == null || window.matchMedia(query).matches) {
|
3464
|
-
x = tx;
|
3465
|
-
y = ty;
|
3466
|
-
break;
|
3467
|
-
}
|
3468
|
-
}
|
3469
|
-
return {
|
3470
|
-
delay,
|
3471
|
-
duration,
|
3472
|
-
easing: EASING[animationStyle],
|
3473
|
-
css: (progress) => getAnimation({ type: animationStyle, x, y, progress }),
|
3474
|
-
};
|
3475
|
-
}
|
3476
3400
|
|
3477
3401
|
/* src/components/BackgroundOverlay.svelte generated by Svelte v3.53.1 */
|
3478
3402
|
|
@@ -18728,7 +18652,7 @@ function add_css$9(target) {
|
|
18728
18652
|
append_styles(target, "svelte-45ue06", "*{box-sizing:border-box}.modal.svelte-45ue06{position:fixed;z-index:2147483647;display:flex}.modal.svelte-45ue06 > .button{flex:auto;display:flex}@media screen and (min-width: 641px){.modal-bp.svelte-45ue06{height:var(--modal-bp-height-pc) !important;width:var(--modal-bp-width-pc) !important;top:var(--modal-bp-top-pc) !important;left:var(--modal-bp-left-pc) !important;bottom:var(--modal-bp-bottom-pc) !important;right:var(--modal-bp-right-pc) !important;transform:var(--modal-bp-transform-pc);margin:var(--modal-bp-margin-pc) !important}.background-bp-pc{display:block}.background-bp-sp{display:none}}@media screen and (max-width: 640px){.modal-bp.svelte-45ue06{height:var(--modal-bp-height-sp) !important;width:var(--modal-bp-width-sp) !important;top:var(--modal-bp-top-sp) !important;left:var(--modal-bp-left-sp) !important;bottom:var(--modal-bp-bottom-sp) !important;right:var(--modal-bp-right-sp) !important;transform:var(--modal-bp-transform-sp);margin:var(--modal-bp-margin-sp) !important}.background-bp-pc{display:none}.background-bp-sp{display:block}}");
|
18729
18653
|
}
|
18730
18654
|
|
18731
|
-
// (
|
18655
|
+
// (219:0) {:else}
|
18732
18656
|
function create_else_block(ctx) {
|
18733
18657
|
let backgroundoverlay;
|
18734
18658
|
let current;
|
@@ -18775,7 +18699,7 @@ function create_else_block(ctx) {
|
|
18775
18699
|
};
|
18776
18700
|
}
|
18777
18701
|
|
18778
|
-
// (
|
18702
|
+
// (208:24)
|
18779
18703
|
function create_if_block_2(ctx) {
|
18780
18704
|
let backgroundoverlay0;
|
18781
18705
|
let t;
|
@@ -18849,7 +18773,7 @@ function create_if_block_2(ctx) {
|
|
18849
18773
|
};
|
18850
18774
|
}
|
18851
18775
|
|
18852
|
-
// (
|
18776
|
+
// (206:0) {#if isCanvasPreview()}
|
18853
18777
|
function create_if_block_1$1(ctx) {
|
18854
18778
|
return {
|
18855
18779
|
c: noop,
|
@@ -18862,14 +18786,14 @@ function create_if_block_1$1(ctx) {
|
|
18862
18786
|
};
|
18863
18787
|
}
|
18864
18788
|
|
18865
|
-
// (
|
18789
|
+
// (222:0) {#if visible}
|
18866
18790
|
function create_if_block$3(ctx) {
|
18867
18791
|
let div;
|
18868
18792
|
let div_class_value;
|
18869
18793
|
let div_intro;
|
18870
18794
|
let current;
|
18871
|
-
const default_slot_template = /*#slots*/ ctx[
|
18872
|
-
const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[
|
18795
|
+
const default_slot_template = /*#slots*/ ctx[25].default;
|
18796
|
+
const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[24], null);
|
18873
18797
|
|
18874
18798
|
return {
|
18875
18799
|
c() {
|
@@ -18896,7 +18820,7 @@ function create_if_block$3(ctx) {
|
|
18896
18820
|
attr(div, "role", "dialog");
|
18897
18821
|
attr(div, "aria-modal", "true");
|
18898
18822
|
attr(div, "data-layer-id", /*layerId*/ ctx[2]);
|
18899
|
-
attr(div, "style", Array.from(/*modalStyles*/ ctx[
|
18823
|
+
attr(div, "style", Array.from(/*modalStyles*/ ctx[13]).join(';'));
|
18900
18824
|
},
|
18901
18825
|
m(target, anchor) {
|
18902
18826
|
insert_hydration(target, div, anchor);
|
@@ -18905,22 +18829,22 @@ function create_if_block$3(ctx) {
|
|
18905
18829
|
default_slot.m(div, null);
|
18906
18830
|
}
|
18907
18831
|
|
18908
|
-
/*div_binding*/ ctx[
|
18832
|
+
/*div_binding*/ ctx[26](div);
|
18909
18833
|
current = true;
|
18910
18834
|
},
|
18911
18835
|
p(new_ctx, dirty) {
|
18912
18836
|
ctx = new_ctx;
|
18913
18837
|
|
18914
18838
|
if (default_slot) {
|
18915
|
-
if (default_slot.p && (!current || dirty & /*$$scope*/
|
18839
|
+
if (default_slot.p && (!current || dirty & /*$$scope*/ 16777216)) {
|
18916
18840
|
update_slot_base(
|
18917
18841
|
default_slot,
|
18918
18842
|
default_slot_template,
|
18919
18843
|
ctx,
|
18920
|
-
/*$$scope*/ ctx[
|
18844
|
+
/*$$scope*/ ctx[24],
|
18921
18845
|
!current
|
18922
|
-
? get_all_dirty_from_scope(/*$$scope*/ ctx[
|
18923
|
-
: get_slot_changes(default_slot_template, /*$$scope*/ ctx[
|
18846
|
+
? get_all_dirty_from_scope(/*$$scope*/ ctx[24])
|
18847
|
+
: get_slot_changes(default_slot_template, /*$$scope*/ ctx[24], dirty, null),
|
18924
18848
|
null
|
18925
18849
|
);
|
18926
18850
|
}
|
@@ -18940,10 +18864,9 @@ function create_if_block$3(ctx) {
|
|
18940
18864
|
|
18941
18865
|
if (!div_intro) {
|
18942
18866
|
add_render_callback(() => {
|
18943
|
-
div_intro = create_in_transition(div,
|
18867
|
+
div_intro = create_in_transition(div, customAnimation, {
|
18944
18868
|
transforms: /*transforms*/ ctx[3],
|
18945
|
-
animationStyle: /*animation*/ ctx[1]
|
18946
|
-
disabled: !/*isOnSite*/ ctx[14]
|
18869
|
+
animationStyle: /*animation*/ ctx[1]
|
18947
18870
|
});
|
18948
18871
|
|
18949
18872
|
div_intro.start();
|
@@ -18959,12 +18882,13 @@ function create_if_block$3(ctx) {
|
|
18959
18882
|
d(detaching) {
|
18960
18883
|
if (detaching) detach(div);
|
18961
18884
|
if (default_slot) default_slot.d(detaching);
|
18962
|
-
/*div_binding*/ ctx[
|
18885
|
+
/*div_binding*/ ctx[26](null);
|
18963
18886
|
}
|
18964
18887
|
};
|
18965
18888
|
}
|
18966
18889
|
|
18967
18890
|
function create_fragment$d(ctx) {
|
18891
|
+
let show_if;
|
18968
18892
|
let current_block_type_index;
|
18969
18893
|
let if_block0;
|
18970
18894
|
let t;
|
@@ -18976,7 +18900,8 @@ function create_fragment$d(ctx) {
|
|
18976
18900
|
const if_blocks = [];
|
18977
18901
|
|
18978
18902
|
function select_block_type(ctx, dirty) {
|
18979
|
-
if (
|
18903
|
+
if (show_if == null) show_if = !!isCanvasPreview();
|
18904
|
+
if (show_if) return 0;
|
18980
18905
|
if (/*useBreakPoint*/ ctx[0]) return 1;
|
18981
18906
|
return 2;
|
18982
18907
|
}
|
@@ -19104,9 +19029,6 @@ function instance$d($$self, $$props, $$invalidate) {
|
|
19104
19029
|
let { closeEventValue = null } = $$props;
|
19105
19030
|
let { layerId = '' } = $$props;
|
19106
19031
|
const { brandKit } = useBrandKit();
|
19107
|
-
const isCanvasPreview = (document.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') === 'true';
|
19108
|
-
const isOnSite = (document.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') === 'true';
|
19109
|
-
console.log('isOnSite', isOnSite);
|
19110
19032
|
|
19111
19033
|
// モーダル背景の設定
|
19112
19034
|
const isExistBackgroundOverlayValue = placement && placement.backgroundOverlay !== undefined;
|
@@ -19139,20 +19061,20 @@ function instance$d($$self, $$props, $$invalidate) {
|
|
19139
19061
|
|
19140
19062
|
$$self.$$set = $$props => {
|
19141
19063
|
if ('useBreakPoint' in $$props) $$invalidate(0, useBreakPoint = $$props.useBreakPoint);
|
19142
|
-
if ('placement' in $$props) $$invalidate(
|
19143
|
-
if ('breakPoint' in $$props) $$invalidate(
|
19144
|
-
if ('elasticity' in $$props) $$invalidate(
|
19064
|
+
if ('placement' in $$props) $$invalidate(14, placement = $$props.placement);
|
19065
|
+
if ('breakPoint' in $$props) $$invalidate(15, breakPoint = $$props.breakPoint);
|
19066
|
+
if ('elasticity' in $$props) $$invalidate(16, elasticity = $$props.elasticity);
|
19145
19067
|
if ('animation' in $$props) $$invalidate(1, animation = $$props.animation);
|
19146
|
-
if ('props' in $$props) $$invalidate(
|
19147
|
-
if ('closeEventName' in $$props) $$invalidate(
|
19148
|
-
if ('closeEventValue' in $$props) $$invalidate(
|
19068
|
+
if ('props' in $$props) $$invalidate(17, props = $$props.props);
|
19069
|
+
if ('closeEventName' in $$props) $$invalidate(18, closeEventName = $$props.closeEventName);
|
19070
|
+
if ('closeEventValue' in $$props) $$invalidate(19, closeEventValue = $$props.closeEventValue);
|
19149
19071
|
if ('layerId' in $$props) $$invalidate(2, layerId = $$props.layerId);
|
19150
|
-
if ('$$scope' in $$props) $$invalidate(
|
19072
|
+
if ('$$scope' in $$props) $$invalidate(24, $$scope = $$props.$$scope);
|
19151
19073
|
};
|
19152
19074
|
|
19153
19075
|
$$self.$$.update = () => {
|
19154
|
-
if ($$self.$$.dirty & /*closeEventName, closeEventValue*/
|
19155
|
-
$$invalidate(
|
19076
|
+
if ($$self.$$.dirty & /*closeEventName, closeEventValue*/ 786432) {
|
19077
|
+
$$invalidate(23, close = () => {
|
19156
19078
|
const onClose = { operation: 'closeApp', args: ['button'] };
|
19157
19079
|
|
19158
19080
|
if (closeEventName) {
|
@@ -19163,9 +19085,9 @@ function instance$d($$self, $$props, $$invalidate) {
|
|
19163
19085
|
});
|
19164
19086
|
}
|
19165
19087
|
|
19166
|
-
if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/
|
19088
|
+
if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 49153) {
|
19167
19089
|
{
|
19168
|
-
if (!isCanvasPreview && isExistBackgroundOverlayValue) {
|
19090
|
+
if (!isCanvasPreview() && isExistBackgroundOverlayValue) {
|
19169
19091
|
$$invalidate(4, backgroundOverlay = placement.backgroundOverlay);
|
19170
19092
|
}
|
19171
19093
|
|
@@ -19178,29 +19100,29 @@ function instance$d($$self, $$props, $$invalidate) {
|
|
19178
19100
|
}
|
19179
19101
|
}
|
19180
19102
|
|
19181
|
-
if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/
|
19103
|
+
if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 49153) {
|
19182
19104
|
{
|
19183
19105
|
if (placement && placement.backgroundClick) {
|
19184
|
-
$$invalidate(
|
19106
|
+
$$invalidate(20, backgroundClickFunction = placement.backgroundClick);
|
19185
19107
|
}
|
19186
19108
|
|
19187
19109
|
if (useBreakPoint) {
|
19188
19110
|
const pc = breakPoint?.PC?.placement?.backgroundClick;
|
19189
19111
|
|
19190
19112
|
if (pc) {
|
19191
|
-
$$invalidate(
|
19113
|
+
$$invalidate(21, backgroundClickFunctionPC = pc);
|
19192
19114
|
}
|
19193
19115
|
|
19194
19116
|
const sp = breakPoint?.SP?.placement?.backgroundClick;
|
19195
19117
|
|
19196
19118
|
if (sp) {
|
19197
|
-
$$invalidate(
|
19119
|
+
$$invalidate(22, backgroundClickFunctionSP = sp);
|
19198
19120
|
}
|
19199
19121
|
}
|
19200
19122
|
}
|
19201
19123
|
}
|
19202
19124
|
|
19203
|
-
if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunction*/
|
19125
|
+
if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunction*/ 1835008) {
|
19204
19126
|
$$invalidate(12, backgroundClick = () => {
|
19205
19127
|
if (closeEventName) {
|
19206
19128
|
send_event(closeEventName, closeEventValue);
|
@@ -19210,7 +19132,7 @@ function instance$d($$self, $$props, $$invalidate) {
|
|
19210
19132
|
});
|
19211
19133
|
}
|
19212
19134
|
|
19213
|
-
if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionPC*/
|
19135
|
+
if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionPC*/ 2883584) {
|
19214
19136
|
$$invalidate(11, backgroundClickPC = () => {
|
19215
19137
|
if (closeEventName) {
|
19216
19138
|
send_event(closeEventName, closeEventValue);
|
@@ -19220,7 +19142,7 @@ function instance$d($$self, $$props, $$invalidate) {
|
|
19220
19142
|
});
|
19221
19143
|
}
|
19222
19144
|
|
19223
|
-
if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionSP*/
|
19145
|
+
if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionSP*/ 4980736) {
|
19224
19146
|
$$invalidate(10, backgroundClickSP = () => {
|
19225
19147
|
if (closeEventName) {
|
19226
19148
|
send_event(closeEventName, closeEventValue);
|
@@ -19230,13 +19152,13 @@ function instance$d($$self, $$props, $$invalidate) {
|
|
19230
19152
|
});
|
19231
19153
|
}
|
19232
19154
|
|
19233
|
-
if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint, transforms*/
|
19155
|
+
if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint, transforms*/ 49161) {
|
19234
19156
|
// 表示位置のスタイルとアニメーションの動きを設定
|
19235
19157
|
{
|
19236
19158
|
// 表示位置のスタイルの設定
|
19237
19159
|
let position = DefaultModalPlacement.position;
|
19238
19160
|
|
19239
|
-
if (!isCanvasPreview && placement && placement.position !== null) {
|
19161
|
+
if (!isCanvasPreview() && placement && placement.position !== null) {
|
19240
19162
|
position = placement.position;
|
19241
19163
|
}
|
19242
19164
|
|
@@ -19253,7 +19175,7 @@ function instance$d($$self, $$props, $$invalidate) {
|
|
19253
19175
|
$$invalidate(3, transforms = []);
|
19254
19176
|
|
19255
19177
|
DEVICE_IDS.forEach(deviceId => {
|
19256
|
-
if (!isCanvasPreview && useBreakPoint) {
|
19178
|
+
if (!isCanvasPreview() && useBreakPoint) {
|
19257
19179
|
const positionWithBp = breakPoint[deviceId]?.placement?.position;
|
19258
19180
|
|
19259
19181
|
transforms.push({
|
@@ -19278,12 +19200,12 @@ function instance$d($$self, $$props, $$invalidate) {
|
|
19278
19200
|
}
|
19279
19201
|
}
|
19280
19202
|
|
19281
|
-
if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint, props*/
|
19203
|
+
if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint, props*/ 180225) {
|
19282
19204
|
// 表示位置の調整のスタイルを設定
|
19283
19205
|
{
|
19284
19206
|
let margin = DefaultModalPlacement.margin;
|
19285
19207
|
|
19286
|
-
if (!isCanvasPreview && placement && placement.margin !== null) {
|
19208
|
+
if (!isCanvasPreview() && placement && placement.margin !== null) {
|
19287
19209
|
margin = placement.margin;
|
19288
19210
|
}
|
19289
19211
|
|
@@ -19294,7 +19216,7 @@ function instance$d($$self, $$props, $$invalidate) {
|
|
19294
19216
|
}
|
19295
19217
|
|
19296
19218
|
DEVICE_IDS.forEach(deviceId => {
|
19297
|
-
if (!isCanvasPreview && useBreakPoint) {
|
19219
|
+
if (!isCanvasPreview() && useBreakPoint) {
|
19298
19220
|
const marginWithBp = breakPoint[deviceId]?.placement?.margin;
|
19299
19221
|
marginStyle = getMarginStyle(marginWithBp);
|
19300
19222
|
}
|
@@ -19322,7 +19244,7 @@ function instance$d($$self, $$props, $$invalidate) {
|
|
19322
19244
|
}
|
19323
19245
|
}
|
19324
19246
|
|
19325
|
-
if ($$self.$$.dirty & /*close*/
|
19247
|
+
if ($$self.$$.dirty & /*close*/ 8388608) {
|
19326
19248
|
$$invalidate(9, handle_keydown = handleKeydown({ Escape: close }));
|
19327
19249
|
}
|
19328
19250
|
};
|
@@ -19346,8 +19268,6 @@ function instance$d($$self, $$props, $$invalidate) {
|
|
19346
19268
|
backgroundClickSP,
|
19347
19269
|
backgroundClickPC,
|
19348
19270
|
backgroundClick,
|
19349
|
-
isCanvasPreview,
|
19350
|
-
isOnSite,
|
19351
19271
|
modalStyles,
|
19352
19272
|
placement,
|
19353
19273
|
breakPoint,
|
@@ -19377,13 +19297,13 @@ class Modal extends SvelteComponent {
|
|
19377
19297
|
safe_not_equal,
|
19378
19298
|
{
|
19379
19299
|
useBreakPoint: 0,
|
19380
|
-
placement:
|
19381
|
-
breakPoint:
|
19382
|
-
elasticity:
|
19300
|
+
placement: 14,
|
19301
|
+
breakPoint: 15,
|
19302
|
+
elasticity: 16,
|
19383
19303
|
animation: 1,
|
19384
|
-
props:
|
19385
|
-
closeEventName:
|
19386
|
-
closeEventValue:
|
19304
|
+
props: 17,
|
19305
|
+
closeEventName: 18,
|
19306
|
+
closeEventValue: 19,
|
19387
19307
|
layerId: 2
|
19388
19308
|
},
|
19389
19309
|
add_css$9
|
package/dist/index.es.js
CHANGED
@@ -38,6 +38,7 @@ const NOOP = (_args) => { }; // eslint-disable-line @typescript-eslint/no-unused
|
|
38
38
|
const isPreview = () => {
|
39
39
|
return false;
|
40
40
|
};
|
41
|
+
const isCanvasPreview = () => (document.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') === 'true';
|
41
42
|
/** @internal */
|
42
43
|
const setPreviousFocus = () => {
|
43
44
|
const previously_focused = typeof document !== 'undefined' && document.activeElement;
|
@@ -3479,35 +3480,6 @@ function customAnimation(node, { transforms, animationStyle, delay = 0, duration
|
|
3479
3480
|
css: (progress) => getAnimation({ type: animationStyle, x, y, progress }),
|
3480
3481
|
};
|
3481
3482
|
}
|
3482
|
-
/**
|
3483
|
-
* The function to activate svelte animation v2.
|
3484
|
-
*
|
3485
|
-
* @param node - A target node of animation. This argument is passed by svelte, by default.
|
3486
|
-
* @param customAnimationOptions - A custom animation option object
|
3487
|
-
*
|
3488
|
-
* @see {@link https://svelte.dev/docs#template-syntax-element-directives-transition-fn-custom-transition-functions| Custom transition functions} for detail documentation
|
3489
|
-
*
|
3490
|
-
* @internal
|
3491
|
-
*/
|
3492
|
-
function customAnimationV2(node, { transforms, animationStyle, delay = 0, duration = 1000, disabled, }) {
|
3493
|
-
if (disabled) {
|
3494
|
-
return {};
|
3495
|
-
}
|
3496
|
-
let [x, y] = [0, 0];
|
3497
|
-
for (const { query, x: tx, y: ty } of transforms) {
|
3498
|
-
if (query == null || window.matchMedia(query).matches) {
|
3499
|
-
x = tx;
|
3500
|
-
y = ty;
|
3501
|
-
break;
|
3502
|
-
}
|
3503
|
-
}
|
3504
|
-
return {
|
3505
|
-
delay,
|
3506
|
-
duration,
|
3507
|
-
easing: EASING[animationStyle],
|
3508
|
-
css: (progress) => getAnimation({ type: animationStyle, x, y, progress }),
|
3509
|
-
};
|
3510
|
-
}
|
3511
3483
|
|
3512
3484
|
/* src/components/BackgroundOverlay.svelte generated by Svelte v3.53.1 */
|
3513
3485
|
|
@@ -17310,7 +17282,7 @@ function add_css$9(target) {
|
|
17310
17282
|
append_styles(target, "svelte-45ue06", "*{box-sizing:border-box}.modal.svelte-45ue06{position:fixed;z-index:2147483647;display:flex}.modal.svelte-45ue06 > .button{flex:auto;display:flex}@media screen and (min-width: 641px){.modal-bp.svelte-45ue06{height:var(--modal-bp-height-pc) !important;width:var(--modal-bp-width-pc) !important;top:var(--modal-bp-top-pc) !important;left:var(--modal-bp-left-pc) !important;bottom:var(--modal-bp-bottom-pc) !important;right:var(--modal-bp-right-pc) !important;transform:var(--modal-bp-transform-pc);margin:var(--modal-bp-margin-pc) !important}.background-bp-pc{display:block}.background-bp-sp{display:none}}@media screen and (max-width: 640px){.modal-bp.svelte-45ue06{height:var(--modal-bp-height-sp) !important;width:var(--modal-bp-width-sp) !important;top:var(--modal-bp-top-sp) !important;left:var(--modal-bp-left-sp) !important;bottom:var(--modal-bp-bottom-sp) !important;right:var(--modal-bp-right-sp) !important;transform:var(--modal-bp-transform-sp);margin:var(--modal-bp-margin-sp) !important}.background-bp-pc{display:none}.background-bp-sp{display:block}}");
|
17311
17283
|
}
|
17312
17284
|
|
17313
|
-
// (
|
17285
|
+
// (219:0) {:else}
|
17314
17286
|
function create_else_block(ctx) {
|
17315
17287
|
let backgroundoverlay;
|
17316
17288
|
let current;
|
@@ -17354,7 +17326,7 @@ function create_else_block(ctx) {
|
|
17354
17326
|
};
|
17355
17327
|
}
|
17356
17328
|
|
17357
|
-
// (
|
17329
|
+
// (208:24)
|
17358
17330
|
function create_if_block_2(ctx) {
|
17359
17331
|
let backgroundoverlay0;
|
17360
17332
|
let t;
|
@@ -17423,7 +17395,7 @@ function create_if_block_2(ctx) {
|
|
17423
17395
|
};
|
17424
17396
|
}
|
17425
17397
|
|
17426
|
-
// (
|
17398
|
+
// (206:0) {#if isCanvasPreview()}
|
17427
17399
|
function create_if_block_1$1(ctx) {
|
17428
17400
|
return {
|
17429
17401
|
c: noop,
|
@@ -17435,14 +17407,14 @@ function create_if_block_1$1(ctx) {
|
|
17435
17407
|
};
|
17436
17408
|
}
|
17437
17409
|
|
17438
|
-
// (
|
17410
|
+
// (222:0) {#if visible}
|
17439
17411
|
function create_if_block$3(ctx) {
|
17440
17412
|
let div;
|
17441
17413
|
let div_class_value;
|
17442
17414
|
let div_intro;
|
17443
17415
|
let current;
|
17444
|
-
const default_slot_template = /*#slots*/ ctx[
|
17445
|
-
const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[
|
17416
|
+
const default_slot_template = /*#slots*/ ctx[25].default;
|
17417
|
+
const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[24], null);
|
17446
17418
|
|
17447
17419
|
return {
|
17448
17420
|
c() {
|
@@ -17452,7 +17424,7 @@ function create_if_block$3(ctx) {
|
|
17452
17424
|
attr(div, "role", "dialog");
|
17453
17425
|
attr(div, "aria-modal", "true");
|
17454
17426
|
attr(div, "data-layer-id", /*layerId*/ ctx[2]);
|
17455
|
-
attr(div, "style", Array.from(/*modalStyles*/ ctx[
|
17427
|
+
attr(div, "style", Array.from(/*modalStyles*/ ctx[13]).join(';'));
|
17456
17428
|
},
|
17457
17429
|
m(target, anchor) {
|
17458
17430
|
insert(target, div, anchor);
|
@@ -17461,22 +17433,22 @@ function create_if_block$3(ctx) {
|
|
17461
17433
|
default_slot.m(div, null);
|
17462
17434
|
}
|
17463
17435
|
|
17464
|
-
/*div_binding*/ ctx[
|
17436
|
+
/*div_binding*/ ctx[26](div);
|
17465
17437
|
current = true;
|
17466
17438
|
},
|
17467
17439
|
p(new_ctx, dirty) {
|
17468
17440
|
ctx = new_ctx;
|
17469
17441
|
|
17470
17442
|
if (default_slot) {
|
17471
|
-
if (default_slot.p && (!current || dirty & /*$$scope*/
|
17443
|
+
if (default_slot.p && (!current || dirty & /*$$scope*/ 16777216)) {
|
17472
17444
|
update_slot_base(
|
17473
17445
|
default_slot,
|
17474
17446
|
default_slot_template,
|
17475
17447
|
ctx,
|
17476
|
-
/*$$scope*/ ctx[
|
17448
|
+
/*$$scope*/ ctx[24],
|
17477
17449
|
!current
|
17478
|
-
? get_all_dirty_from_scope(/*$$scope*/ ctx[
|
17479
|
-
: get_slot_changes(default_slot_template, /*$$scope*/ ctx[
|
17450
|
+
? get_all_dirty_from_scope(/*$$scope*/ ctx[24])
|
17451
|
+
: get_slot_changes(default_slot_template, /*$$scope*/ ctx[24], dirty, null),
|
17480
17452
|
null
|
17481
17453
|
);
|
17482
17454
|
}
|
@@ -17496,10 +17468,9 @@ function create_if_block$3(ctx) {
|
|
17496
17468
|
|
17497
17469
|
if (!div_intro) {
|
17498
17470
|
add_render_callback(() => {
|
17499
|
-
div_intro = create_in_transition(div,
|
17471
|
+
div_intro = create_in_transition(div, customAnimation, {
|
17500
17472
|
transforms: /*transforms*/ ctx[3],
|
17501
|
-
animationStyle: /*animation*/ ctx[1]
|
17502
|
-
disabled: !/*isOnSite*/ ctx[14]
|
17473
|
+
animationStyle: /*animation*/ ctx[1]
|
17503
17474
|
});
|
17504
17475
|
|
17505
17476
|
div_intro.start();
|
@@ -17515,12 +17486,13 @@ function create_if_block$3(ctx) {
|
|
17515
17486
|
d(detaching) {
|
17516
17487
|
if (detaching) detach(div);
|
17517
17488
|
if (default_slot) default_slot.d(detaching);
|
17518
|
-
/*div_binding*/ ctx[
|
17489
|
+
/*div_binding*/ ctx[26](null);
|
17519
17490
|
}
|
17520
17491
|
};
|
17521
17492
|
}
|
17522
17493
|
|
17523
17494
|
function create_fragment$d(ctx) {
|
17495
|
+
let show_if;
|
17524
17496
|
let current_block_type_index;
|
17525
17497
|
let if_block0;
|
17526
17498
|
let t;
|
@@ -17532,7 +17504,8 @@ function create_fragment$d(ctx) {
|
|
17532
17504
|
const if_blocks = [];
|
17533
17505
|
|
17534
17506
|
function select_block_type(ctx, dirty) {
|
17535
|
-
if (
|
17507
|
+
if (show_if == null) show_if = !!isCanvasPreview();
|
17508
|
+
if (show_if) return 0;
|
17536
17509
|
if (/*useBreakPoint*/ ctx[0]) return 1;
|
17537
17510
|
return 2;
|
17538
17511
|
}
|
@@ -17654,9 +17627,6 @@ function instance$d($$self, $$props, $$invalidate) {
|
|
17654
17627
|
let { closeEventValue = null } = $$props;
|
17655
17628
|
let { layerId = '' } = $$props;
|
17656
17629
|
const { brandKit } = useBrandKit();
|
17657
|
-
const isCanvasPreview = (document.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') === 'true';
|
17658
|
-
const isOnSite = (document.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') === 'true';
|
17659
|
-
console.log('isOnSite', isOnSite);
|
17660
17630
|
|
17661
17631
|
// モーダル背景の設定
|
17662
17632
|
const isExistBackgroundOverlayValue = placement && placement.backgroundOverlay !== undefined;
|
@@ -17689,20 +17659,20 @@ function instance$d($$self, $$props, $$invalidate) {
|
|
17689
17659
|
|
17690
17660
|
$$self.$$set = $$props => {
|
17691
17661
|
if ('useBreakPoint' in $$props) $$invalidate(0, useBreakPoint = $$props.useBreakPoint);
|
17692
|
-
if ('placement' in $$props) $$invalidate(
|
17693
|
-
if ('breakPoint' in $$props) $$invalidate(
|
17694
|
-
if ('elasticity' in $$props) $$invalidate(
|
17662
|
+
if ('placement' in $$props) $$invalidate(14, placement = $$props.placement);
|
17663
|
+
if ('breakPoint' in $$props) $$invalidate(15, breakPoint = $$props.breakPoint);
|
17664
|
+
if ('elasticity' in $$props) $$invalidate(16, elasticity = $$props.elasticity);
|
17695
17665
|
if ('animation' in $$props) $$invalidate(1, animation = $$props.animation);
|
17696
|
-
if ('props' in $$props) $$invalidate(
|
17697
|
-
if ('closeEventName' in $$props) $$invalidate(
|
17698
|
-
if ('closeEventValue' in $$props) $$invalidate(
|
17666
|
+
if ('props' in $$props) $$invalidate(17, props = $$props.props);
|
17667
|
+
if ('closeEventName' in $$props) $$invalidate(18, closeEventName = $$props.closeEventName);
|
17668
|
+
if ('closeEventValue' in $$props) $$invalidate(19, closeEventValue = $$props.closeEventValue);
|
17699
17669
|
if ('layerId' in $$props) $$invalidate(2, layerId = $$props.layerId);
|
17700
|
-
if ('$$scope' in $$props) $$invalidate(
|
17670
|
+
if ('$$scope' in $$props) $$invalidate(24, $$scope = $$props.$$scope);
|
17701
17671
|
};
|
17702
17672
|
|
17703
17673
|
$$self.$$.update = () => {
|
17704
|
-
if ($$self.$$.dirty & /*closeEventName, closeEventValue*/
|
17705
|
-
$$invalidate(
|
17674
|
+
if ($$self.$$.dirty & /*closeEventName, closeEventValue*/ 786432) {
|
17675
|
+
$$invalidate(23, close = () => {
|
17706
17676
|
const onClose = { operation: 'closeApp', args: ['button'] };
|
17707
17677
|
|
17708
17678
|
if (closeEventName) {
|
@@ -17713,9 +17683,9 @@ function instance$d($$self, $$props, $$invalidate) {
|
|
17713
17683
|
});
|
17714
17684
|
}
|
17715
17685
|
|
17716
|
-
if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/
|
17686
|
+
if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 49153) {
|
17717
17687
|
{
|
17718
|
-
if (!isCanvasPreview && isExistBackgroundOverlayValue) {
|
17688
|
+
if (!isCanvasPreview() && isExistBackgroundOverlayValue) {
|
17719
17689
|
$$invalidate(4, backgroundOverlay = placement.backgroundOverlay);
|
17720
17690
|
}
|
17721
17691
|
|
@@ -17728,29 +17698,29 @@ function instance$d($$self, $$props, $$invalidate) {
|
|
17728
17698
|
}
|
17729
17699
|
}
|
17730
17700
|
|
17731
|
-
if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/
|
17701
|
+
if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint*/ 49153) {
|
17732
17702
|
{
|
17733
17703
|
if (placement && placement.backgroundClick) {
|
17734
|
-
$$invalidate(
|
17704
|
+
$$invalidate(20, backgroundClickFunction = placement.backgroundClick);
|
17735
17705
|
}
|
17736
17706
|
|
17737
17707
|
if (useBreakPoint) {
|
17738
17708
|
const pc = breakPoint?.PC?.placement?.backgroundClick;
|
17739
17709
|
|
17740
17710
|
if (pc) {
|
17741
|
-
$$invalidate(
|
17711
|
+
$$invalidate(21, backgroundClickFunctionPC = pc);
|
17742
17712
|
}
|
17743
17713
|
|
17744
17714
|
const sp = breakPoint?.SP?.placement?.backgroundClick;
|
17745
17715
|
|
17746
17716
|
if (sp) {
|
17747
|
-
$$invalidate(
|
17717
|
+
$$invalidate(22, backgroundClickFunctionSP = sp);
|
17748
17718
|
}
|
17749
17719
|
}
|
17750
17720
|
}
|
17751
17721
|
}
|
17752
17722
|
|
17753
|
-
if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunction*/
|
17723
|
+
if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunction*/ 1835008) {
|
17754
17724
|
$$invalidate(12, backgroundClick = () => {
|
17755
17725
|
if (closeEventName) {
|
17756
17726
|
send_event(closeEventName, closeEventValue);
|
@@ -17760,7 +17730,7 @@ function instance$d($$self, $$props, $$invalidate) {
|
|
17760
17730
|
});
|
17761
17731
|
}
|
17762
17732
|
|
17763
|
-
if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionPC*/
|
17733
|
+
if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionPC*/ 2883584) {
|
17764
17734
|
$$invalidate(11, backgroundClickPC = () => {
|
17765
17735
|
if (closeEventName) {
|
17766
17736
|
send_event(closeEventName, closeEventValue);
|
@@ -17770,7 +17740,7 @@ function instance$d($$self, $$props, $$invalidate) {
|
|
17770
17740
|
});
|
17771
17741
|
}
|
17772
17742
|
|
17773
|
-
if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionSP*/
|
17743
|
+
if ($$self.$$.dirty & /*closeEventName, closeEventValue, backgroundClickFunctionSP*/ 4980736) {
|
17774
17744
|
$$invalidate(10, backgroundClickSP = () => {
|
17775
17745
|
if (closeEventName) {
|
17776
17746
|
send_event(closeEventName, closeEventValue);
|
@@ -17780,13 +17750,13 @@ function instance$d($$self, $$props, $$invalidate) {
|
|
17780
17750
|
});
|
17781
17751
|
}
|
17782
17752
|
|
17783
|
-
if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint, transforms*/
|
17753
|
+
if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint, transforms*/ 49161) {
|
17784
17754
|
// 表示位置のスタイルとアニメーションの動きを設定
|
17785
17755
|
{
|
17786
17756
|
// 表示位置のスタイルの設定
|
17787
17757
|
let position = DefaultModalPlacement.position;
|
17788
17758
|
|
17789
|
-
if (!isCanvasPreview && placement && placement.position !== null) {
|
17759
|
+
if (!isCanvasPreview() && placement && placement.position !== null) {
|
17790
17760
|
position = placement.position;
|
17791
17761
|
}
|
17792
17762
|
|
@@ -17803,7 +17773,7 @@ function instance$d($$self, $$props, $$invalidate) {
|
|
17803
17773
|
$$invalidate(3, transforms = []);
|
17804
17774
|
|
17805
17775
|
DEVICE_IDS.forEach(deviceId => {
|
17806
|
-
if (!isCanvasPreview && useBreakPoint) {
|
17776
|
+
if (!isCanvasPreview() && useBreakPoint) {
|
17807
17777
|
const positionWithBp = breakPoint[deviceId]?.placement?.position;
|
17808
17778
|
|
17809
17779
|
transforms.push({
|
@@ -17828,12 +17798,12 @@ function instance$d($$self, $$props, $$invalidate) {
|
|
17828
17798
|
}
|
17829
17799
|
}
|
17830
17800
|
|
17831
|
-
if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint, props*/
|
17801
|
+
if ($$self.$$.dirty & /*placement, useBreakPoint, breakPoint, props*/ 180225) {
|
17832
17802
|
// 表示位置の調整のスタイルを設定
|
17833
17803
|
{
|
17834
17804
|
let margin = DefaultModalPlacement.margin;
|
17835
17805
|
|
17836
|
-
if (!isCanvasPreview && placement && placement.margin !== null) {
|
17806
|
+
if (!isCanvasPreview() && placement && placement.margin !== null) {
|
17837
17807
|
margin = placement.margin;
|
17838
17808
|
}
|
17839
17809
|
|
@@ -17844,7 +17814,7 @@ function instance$d($$self, $$props, $$invalidate) {
|
|
17844
17814
|
}
|
17845
17815
|
|
17846
17816
|
DEVICE_IDS.forEach(deviceId => {
|
17847
|
-
if (!isCanvasPreview && useBreakPoint) {
|
17817
|
+
if (!isCanvasPreview() && useBreakPoint) {
|
17848
17818
|
const marginWithBp = breakPoint[deviceId]?.placement?.margin;
|
17849
17819
|
marginStyle = getMarginStyle(marginWithBp);
|
17850
17820
|
}
|
@@ -17872,7 +17842,7 @@ function instance$d($$self, $$props, $$invalidate) {
|
|
17872
17842
|
}
|
17873
17843
|
}
|
17874
17844
|
|
17875
|
-
if ($$self.$$.dirty & /*close*/
|
17845
|
+
if ($$self.$$.dirty & /*close*/ 8388608) {
|
17876
17846
|
$$invalidate(9, handle_keydown = handleKeydown({ Escape: close }));
|
17877
17847
|
}
|
17878
17848
|
};
|
@@ -17896,8 +17866,6 @@ function instance$d($$self, $$props, $$invalidate) {
|
|
17896
17866
|
backgroundClickSP,
|
17897
17867
|
backgroundClickPC,
|
17898
17868
|
backgroundClick,
|
17899
|
-
isCanvasPreview,
|
17900
|
-
isOnSite,
|
17901
17869
|
modalStyles,
|
17902
17870
|
placement,
|
17903
17871
|
breakPoint,
|
@@ -17927,13 +17895,13 @@ class Modal extends SvelteComponent {
|
|
17927
17895
|
safe_not_equal,
|
17928
17896
|
{
|
17929
17897
|
useBreakPoint: 0,
|
17930
|
-
placement:
|
17931
|
-
breakPoint:
|
17932
|
-
elasticity:
|
17898
|
+
placement: 14,
|
17899
|
+
breakPoint: 15,
|
17900
|
+
elasticity: 16,
|
17933
17901
|
animation: 1,
|
17934
|
-
props:
|
17935
|
-
closeEventName:
|
17936
|
-
closeEventValue:
|
17902
|
+
props: 17,
|
17903
|
+
closeEventName: 18,
|
17904
|
+
closeEventValue: 19,
|
17937
17905
|
layerId: 2
|
17938
17906
|
},
|
17939
17907
|
add_css$9
|
@@ -39,8 +39,10 @@ const KARTE_MODAL_ROOT = 'karte-modal-root';
|
|
39
39
|
const NOOP = (_args) => { }; // eslint-disable-line @typescript-eslint/no-unused-vars
|
40
40
|
/** @internal */
|
41
41
|
const isPreview = () => {
|
42
|
-
return
|
42
|
+
return !isOnSite() ;
|
43
43
|
};
|
44
|
+
const isCanvasPreview = () => (document.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') === 'true';
|
45
|
+
const isOnSite = () => (document.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') === 'true';
|
44
46
|
/** @internal */
|
45
47
|
const setPreviousFocus = () => {
|
46
48
|
const previously_focused = typeof document !== 'undefined' && document.activeElement;
|
@@ -223,6 +225,10 @@ function onTime(time, fn) {
|
|
223
225
|
const timeoutHandler = setTimeout(fn, time);
|
224
226
|
return () => timeoutHandler && clearTimeout(timeoutHandler);
|
225
227
|
}
|
228
|
+
/** @internal */
|
229
|
+
function randStr(digit = 8) {
|
230
|
+
return Math.random().toString(32).substring(digit);
|
231
|
+
}
|
226
232
|
/**
|
227
233
|
* Goolge Fonts用のURLを生成
|
228
234
|
*
|
@@ -754,7 +760,7 @@ const state = writable('/');
|
|
754
760
|
* @public
|
755
761
|
*/
|
756
762
|
function setState$1(stateId, options) {
|
757
|
-
if (options?.disableInPreview)
|
763
|
+
if (isPreview() && options?.disableInPreview)
|
758
764
|
return;
|
759
765
|
state.set(stateId);
|
760
766
|
}
|
@@ -1198,8 +1204,11 @@ function cloneToJson(data) {
|
|
1198
1204
|
|
1199
1205
|
// prettier-ignore
|
1200
1206
|
/** @internal */
|
1201
|
-
const actionId =
|
1202
|
-
|
1207
|
+
const actionId = isPreview()
|
1208
|
+
? ALL_ACTION_ID
|
1209
|
+
: typeof __FLYER_GEN_ACTION_ID_ON_BUILD__ === 'string'
|
1210
|
+
? __FLYER_GEN_ACTION_ID_ON_BUILD__
|
1211
|
+
: randStr();
|
1203
1212
|
/** @internal */
|
1204
1213
|
const ACTION_DESTROY_EVENT = `KARTE-ACTION-DESTROY-${actionId}`;
|
1205
1214
|
/** @internal */
|
@@ -1553,8 +1562,23 @@ const loadActionTableQuery = async (config, data, api_key, collection_endpoint)
|
|
1553
1562
|
/** @internal */
|
1554
1563
|
const loadActionTable = async (config, data, api_key, collection_endpoint) => {
|
1555
1564
|
console.debug('[debug] loadActionTable', isPreview(), api_key, collection_endpoint, JSON.stringify(config));
|
1556
|
-
const results =
|
1557
|
-
|
1565
|
+
const results = isPreview()
|
1566
|
+
? config.map(c => c.preview_value)
|
1567
|
+
: await Promise.all(config
|
1568
|
+
.filter(c => c.resolver === 'action-table-row' ||
|
1569
|
+
c.resolver === 'action-table-rows' ||
|
1570
|
+
c.resolver === 'action-table-query')
|
1571
|
+
.map(async (c) => {
|
1572
|
+
if (c.resolver === 'action-table-row') {
|
1573
|
+
return await loadActionTableRow(c, data, api_key, collection_endpoint);
|
1574
|
+
}
|
1575
|
+
else if (c.resolver === 'action-table-rows') {
|
1576
|
+
return await loadActionTableRows(c, data, api_key, collection_endpoint);
|
1577
|
+
}
|
1578
|
+
else if (c.resolver === 'action-table-query') {
|
1579
|
+
return await loadActionTableQuery(c, data, api_key, collection_endpoint);
|
1580
|
+
}
|
1581
|
+
}));
|
1558
1582
|
return config.reduce((acc, c, i) => {
|
1559
1583
|
const value = results[i] ?? c.query.default_value;
|
1560
1584
|
if (value) {
|
@@ -2849,9 +2873,11 @@ function Header($$anchor, $$props) {
|
|
2849
2873
|
$fonts()
|
2850
2874
|
),
|
2851
2875
|
() => {
|
2852
|
-
{
|
2876
|
+
if (isPreview()) {
|
2853
2877
|
// フォントのロードが遅れてエディタのプレビューがガタつく対策
|
2854
2878
|
$.set(googleFontUrl, makeGoogleFontUrl(Fonts.filter((font) => font !== SYSTEM_FONT)));
|
2879
|
+
} else if ($fonts().length > 0) {
|
2880
|
+
$.set(googleFontUrl, makeGoogleFontUrl($fonts()));
|
2855
2881
|
}
|
2856
2882
|
}
|
2857
2883
|
);
|
@@ -3411,7 +3437,7 @@ const EASING = {
|
|
3411
3437
|
none: linear,
|
3412
3438
|
};
|
3413
3439
|
/**
|
3414
|
-
* The function to activate svelte animation
|
3440
|
+
* The function to activate svelte animation.
|
3415
3441
|
*
|
3416
3442
|
* @param node - A target node of animation. This argument is passed by svelte, by default.
|
3417
3443
|
* @param customAnimationOptions - A custom animation option object
|
@@ -3420,8 +3446,8 @@ const EASING = {
|
|
3420
3446
|
*
|
3421
3447
|
* @internal
|
3422
3448
|
*/
|
3423
|
-
function
|
3424
|
-
if (
|
3449
|
+
function customAnimation(node, { transforms, animationStyle, delay = 0, duration = 1000 }) {
|
3450
|
+
if (isPreview()) {
|
3425
3451
|
return {};
|
3426
3452
|
}
|
3427
3453
|
let [x, y] = [0, 0];
|
@@ -6304,11 +6330,6 @@ function Modal($$anchor, $$props) {
|
|
6304
6330
|
let closeEventValue = $.prop($$props, 'closeEventValue', 8, null);
|
6305
6331
|
let layerId = $.prop($$props, 'layerId', 8, '');
|
6306
6332
|
const { brandKit } = useBrandKit();
|
6307
|
-
const isCanvasPreview = (document.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') === 'true';
|
6308
|
-
const isOnSite = (document.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') === 'true';
|
6309
|
-
|
6310
|
-
console.log('isOnSite', isOnSite);
|
6311
|
-
|
6312
6333
|
// モーダル背景の設定
|
6313
6334
|
const isExistBackgroundOverlayValue = placement() && placement().backgroundOverlay !== undefined;
|
6314
6335
|
let backgroundOverlay = $.mutable_state(DefaultModalPlacement.backgroundOverlay);
|
@@ -6354,7 +6375,7 @@ function Modal($$anchor, $$props) {
|
|
6354
6375
|
$.deep_read_state(breakPoint())
|
6355
6376
|
),
|
6356
6377
|
() => {
|
6357
|
-
if (!isCanvasPreview && isExistBackgroundOverlayValue) {
|
6378
|
+
if (!isCanvasPreview() && isExistBackgroundOverlayValue) {
|
6358
6379
|
$.set(backgroundOverlay, placement().backgroundOverlay);
|
6359
6380
|
}
|
6360
6381
|
|
@@ -6460,7 +6481,7 @@ function Modal($$anchor, $$props) {
|
|
6460
6481
|
// 表示位置のスタイルの設定
|
6461
6482
|
let position = DefaultModalPlacement.position;
|
6462
6483
|
|
6463
|
-
if (!isCanvasPreview && placement() && placement().position !== null) {
|
6484
|
+
if (!isCanvasPreview() && placement() && placement().position !== null) {
|
6464
6485
|
position = placement().position;
|
6465
6486
|
}
|
6466
6487
|
|
@@ -6477,7 +6498,7 @@ function Modal($$anchor, $$props) {
|
|
6477
6498
|
$.set(transforms, []);
|
6478
6499
|
|
6479
6500
|
DEVICE_IDS.forEach((deviceId) => {
|
6480
|
-
if (!isCanvasPreview && useBreakPoint()) {
|
6501
|
+
if (!isCanvasPreview() && useBreakPoint()) {
|
6481
6502
|
const positionWithBp = breakPoint()[deviceId]?.placement?.position;
|
6482
6503
|
|
6483
6504
|
$.get(transforms).push({
|
@@ -6513,7 +6534,7 @@ function Modal($$anchor, $$props) {
|
|
6513
6534
|
() => {
|
6514
6535
|
let margin = DefaultModalPlacement.margin;
|
6515
6536
|
|
6516
|
-
if (!isCanvasPreview && placement() && placement().margin !== null) {
|
6537
|
+
if (!isCanvasPreview() && placement() && placement().margin !== null) {
|
6517
6538
|
margin = placement().margin;
|
6518
6539
|
}
|
6519
6540
|
|
@@ -6524,7 +6545,7 @@ function Modal($$anchor, $$props) {
|
|
6524
6545
|
}
|
6525
6546
|
|
6526
6547
|
DEVICE_IDS.forEach((deviceId) => {
|
6527
|
-
if (!isCanvasPreview && useBreakPoint()) {
|
6548
|
+
if (!isCanvasPreview() && useBreakPoint()) {
|
6528
6549
|
const marginWithBp = breakPoint()[deviceId]?.placement?.margin;
|
6529
6550
|
|
6530
6551
|
marginStyle = getMarginStyle(marginWithBp);
|
@@ -6638,7 +6659,7 @@ function Modal($$anchor, $$props) {
|
|
6638
6659
|
};
|
6639
6660
|
|
6640
6661
|
$.if(node, ($$render) => {
|
6641
|
-
if (isCanvasPreview) $$render(consequent); else $$render(alternate, false);
|
6662
|
+
if (isCanvasPreview()) $$render(consequent); else $$render(alternate, false);
|
6642
6663
|
});
|
6643
6664
|
}
|
6644
6665
|
|
@@ -6669,10 +6690,9 @@ function Modal($$anchor, $$props) {
|
|
6669
6690
|
$.derived_safe_equal
|
6670
6691
|
);
|
6671
6692
|
|
6672
|
-
$.transition(1, div, () =>
|
6693
|
+
$.transition(1, div, () => customAnimation, () => ({
|
6673
6694
|
transforms: $.get(transforms),
|
6674
|
-
animationStyle: animation()
|
6675
|
-
disabled: !isOnSite
|
6695
|
+
animationStyle: animation()
|
6676
6696
|
}));
|
6677
6697
|
|
6678
6698
|
$.append($$anchor, div);
|
package/dist/svelte5/index.es.js
CHANGED
@@ -39,8 +39,10 @@ const KARTE_MODAL_ROOT = 'karte-modal-root';
|
|
39
39
|
const NOOP = (_args) => { }; // eslint-disable-line @typescript-eslint/no-unused-vars
|
40
40
|
/** @internal */
|
41
41
|
const isPreview = () => {
|
42
|
-
return
|
42
|
+
return !isOnSite() ;
|
43
43
|
};
|
44
|
+
const isCanvasPreview = () => (document.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') === 'true';
|
45
|
+
const isOnSite = () => (document.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') === 'true';
|
44
46
|
/** @internal */
|
45
47
|
const setPreviousFocus = () => {
|
46
48
|
const previously_focused = typeof document !== 'undefined' && document.activeElement;
|
@@ -758,6 +760,8 @@ const state = writable('/');
|
|
758
760
|
* @public
|
759
761
|
*/
|
760
762
|
function setState$1(stateId, options) {
|
763
|
+
if (isPreview() && options?.disableInPreview)
|
764
|
+
return;
|
761
765
|
state.set(stateId);
|
762
766
|
}
|
763
767
|
/**
|
@@ -1168,7 +1172,9 @@ function cloneToJson(data) {
|
|
1168
1172
|
|
1169
1173
|
// prettier-ignore
|
1170
1174
|
/** @internal */
|
1171
|
-
const actionId =
|
1175
|
+
const actionId = isPreview()
|
1176
|
+
? ALL_ACTION_ID
|
1177
|
+
: typeof __FLYER_GEN_ACTION_ID_ON_BUILD__ === 'string'
|
1172
1178
|
? __FLYER_GEN_ACTION_ID_ON_BUILD__
|
1173
1179
|
: randStr();
|
1174
1180
|
/** @internal */
|
@@ -1576,7 +1582,9 @@ const loadActionTableQuery = async (config, data, api_key, collection_endpoint)
|
|
1576
1582
|
/** @internal */
|
1577
1583
|
const loadActionTable = async (config, data, api_key, collection_endpoint) => {
|
1578
1584
|
console.debug('[debug] loadActionTable', isPreview(), api_key, collection_endpoint, JSON.stringify(config));
|
1579
|
-
const results =
|
1585
|
+
const results = isPreview()
|
1586
|
+
? config.map(c => c.preview_value)
|
1587
|
+
: await Promise.all(config
|
1580
1588
|
.filter(c => c.resolver === 'action-table-row' ||
|
1581
1589
|
c.resolver === 'action-table-rows' ||
|
1582
1590
|
c.resolver === 'action-table-query')
|
@@ -2906,7 +2914,10 @@ function Header($$anchor, $$props) {
|
|
2906
2914
|
$fonts()
|
2907
2915
|
),
|
2908
2916
|
() => {
|
2909
|
-
if (
|
2917
|
+
if (isPreview()) {
|
2918
|
+
// フォントのロードが遅れてエディタのプレビューがガタつく対策
|
2919
|
+
$.set(googleFontUrl, makeGoogleFontUrl(Fonts.filter((font) => font !== SYSTEM_FONT)));
|
2920
|
+
} else if ($fonts().length > 0) {
|
2910
2921
|
$.set(googleFontUrl, makeGoogleFontUrl($fonts()));
|
2911
2922
|
}
|
2912
2923
|
}
|
@@ -3467,7 +3478,7 @@ const EASING = {
|
|
3467
3478
|
none: linear,
|
3468
3479
|
};
|
3469
3480
|
/**
|
3470
|
-
* The function to activate svelte animation
|
3481
|
+
* The function to activate svelte animation.
|
3471
3482
|
*
|
3472
3483
|
* @param node - A target node of animation. This argument is passed by svelte, by default.
|
3473
3484
|
* @param customAnimationOptions - A custom animation option object
|
@@ -3476,8 +3487,8 @@ const EASING = {
|
|
3476
3487
|
*
|
3477
3488
|
* @internal
|
3478
3489
|
*/
|
3479
|
-
function
|
3480
|
-
if (
|
3490
|
+
function customAnimation(node, { transforms, animationStyle, delay = 0, duration = 1000 }) {
|
3491
|
+
if (isPreview()) {
|
3481
3492
|
return {};
|
3482
3493
|
}
|
3483
3494
|
let [x, y] = [0, 0];
|
@@ -6360,11 +6371,6 @@ function Modal($$anchor, $$props) {
|
|
6360
6371
|
let closeEventValue = $.prop($$props, 'closeEventValue', 8, null);
|
6361
6372
|
let layerId = $.prop($$props, 'layerId', 8, '');
|
6362
6373
|
const { brandKit } = useBrandKit();
|
6363
|
-
const isCanvasPreview = (document.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') === 'true';
|
6364
|
-
const isOnSite = (document.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') === 'true';
|
6365
|
-
|
6366
|
-
console.log('isOnSite', isOnSite);
|
6367
|
-
|
6368
6374
|
// モーダル背景の設定
|
6369
6375
|
const isExistBackgroundOverlayValue = placement() && placement().backgroundOverlay !== undefined;
|
6370
6376
|
let backgroundOverlay = $.mutable_state(DefaultModalPlacement.backgroundOverlay);
|
@@ -6410,7 +6416,7 @@ function Modal($$anchor, $$props) {
|
|
6410
6416
|
$.deep_read_state(breakPoint())
|
6411
6417
|
),
|
6412
6418
|
() => {
|
6413
|
-
if (!isCanvasPreview && isExistBackgroundOverlayValue) {
|
6419
|
+
if (!isCanvasPreview() && isExistBackgroundOverlayValue) {
|
6414
6420
|
$.set(backgroundOverlay, placement().backgroundOverlay);
|
6415
6421
|
}
|
6416
6422
|
|
@@ -6516,7 +6522,7 @@ function Modal($$anchor, $$props) {
|
|
6516
6522
|
// 表示位置のスタイルの設定
|
6517
6523
|
let position = DefaultModalPlacement.position;
|
6518
6524
|
|
6519
|
-
if (!isCanvasPreview && placement() && placement().position !== null) {
|
6525
|
+
if (!isCanvasPreview() && placement() && placement().position !== null) {
|
6520
6526
|
position = placement().position;
|
6521
6527
|
}
|
6522
6528
|
|
@@ -6533,7 +6539,7 @@ function Modal($$anchor, $$props) {
|
|
6533
6539
|
$.set(transforms, []);
|
6534
6540
|
|
6535
6541
|
DEVICE_IDS.forEach((deviceId) => {
|
6536
|
-
if (!isCanvasPreview && useBreakPoint()) {
|
6542
|
+
if (!isCanvasPreview() && useBreakPoint()) {
|
6537
6543
|
const positionWithBp = breakPoint()[deviceId]?.placement?.position;
|
6538
6544
|
|
6539
6545
|
$.get(transforms).push({
|
@@ -6569,7 +6575,7 @@ function Modal($$anchor, $$props) {
|
|
6569
6575
|
() => {
|
6570
6576
|
let margin = DefaultModalPlacement.margin;
|
6571
6577
|
|
6572
|
-
if (!isCanvasPreview && placement() && placement().margin !== null) {
|
6578
|
+
if (!isCanvasPreview() && placement() && placement().margin !== null) {
|
6573
6579
|
margin = placement().margin;
|
6574
6580
|
}
|
6575
6581
|
|
@@ -6580,7 +6586,7 @@ function Modal($$anchor, $$props) {
|
|
6580
6586
|
}
|
6581
6587
|
|
6582
6588
|
DEVICE_IDS.forEach((deviceId) => {
|
6583
|
-
if (!isCanvasPreview && useBreakPoint()) {
|
6589
|
+
if (!isCanvasPreview() && useBreakPoint()) {
|
6584
6590
|
const marginWithBp = breakPoint()[deviceId]?.placement?.margin;
|
6585
6591
|
|
6586
6592
|
marginStyle = getMarginStyle(marginWithBp);
|
@@ -6694,7 +6700,7 @@ function Modal($$anchor, $$props) {
|
|
6694
6700
|
};
|
6695
6701
|
|
6696
6702
|
$.if(node, ($$render) => {
|
6697
|
-
if (isCanvasPreview) $$render(consequent); else $$render(alternate, false);
|
6703
|
+
if (isCanvasPreview()) $$render(consequent); else $$render(alternate, false);
|
6698
6704
|
});
|
6699
6705
|
}
|
6700
6706
|
|
@@ -6725,10 +6731,9 @@ function Modal($$anchor, $$props) {
|
|
6725
6731
|
$.derived_safe_equal
|
6726
6732
|
);
|
6727
6733
|
|
6728
|
-
$.transition(1, div, () =>
|
6734
|
+
$.transition(1, div, () => customAnimation, () => ({
|
6729
6735
|
transforms: $.get(transforms),
|
6730
|
-
animationStyle: animation()
|
6731
|
-
disabled: !isOnSite
|
6736
|
+
animationStyle: animation()
|
6732
6737
|
}));
|
6733
6738
|
|
6734
6739
|
$.append($$anchor, div);
|
@@ -39,8 +39,10 @@ const KARTE_MODAL_ROOT = 'karte-modal-root';
|
|
39
39
|
const NOOP = (_args) => { }; // eslint-disable-line @typescript-eslint/no-unused-vars
|
40
40
|
/** @internal */
|
41
41
|
const isPreview = () => {
|
42
|
-
return
|
42
|
+
return !isOnSite() ;
|
43
43
|
};
|
44
|
+
const isCanvasPreview = () => (document.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') === 'true';
|
45
|
+
const isOnSite = () => (document.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') === 'true';
|
44
46
|
/** @internal */
|
45
47
|
const setPreviousFocus = () => {
|
46
48
|
const previously_focused = typeof document !== 'undefined' && document.activeElement;
|
@@ -758,6 +760,8 @@ const state = writable('/');
|
|
758
760
|
* @public
|
759
761
|
*/
|
760
762
|
function setState$1(stateId, options) {
|
763
|
+
if (isPreview() && options?.disableInPreview)
|
764
|
+
return;
|
761
765
|
state.set(stateId);
|
762
766
|
}
|
763
767
|
/**
|
@@ -1168,7 +1172,9 @@ function cloneToJson(data) {
|
|
1168
1172
|
|
1169
1173
|
// prettier-ignore
|
1170
1174
|
/** @internal */
|
1171
|
-
const actionId =
|
1175
|
+
const actionId = isPreview()
|
1176
|
+
? ALL_ACTION_ID
|
1177
|
+
: typeof __FLYER_GEN_ACTION_ID_ON_BUILD__ === 'string'
|
1172
1178
|
? __FLYER_GEN_ACTION_ID_ON_BUILD__
|
1173
1179
|
: randStr();
|
1174
1180
|
/** @internal */
|
@@ -1576,7 +1582,9 @@ const loadActionTableQuery = async (config, data, api_key, collection_endpoint)
|
|
1576
1582
|
/** @internal */
|
1577
1583
|
const loadActionTable = async (config, data, api_key, collection_endpoint) => {
|
1578
1584
|
console.debug('[debug] loadActionTable', isPreview(), api_key, collection_endpoint, JSON.stringify(config));
|
1579
|
-
const results =
|
1585
|
+
const results = isPreview()
|
1586
|
+
? config.map(c => c.preview_value)
|
1587
|
+
: await Promise.all(config
|
1580
1588
|
.filter(c => c.resolver === 'action-table-row' ||
|
1581
1589
|
c.resolver === 'action-table-rows' ||
|
1582
1590
|
c.resolver === 'action-table-query')
|
@@ -2906,7 +2914,10 @@ function Header($$anchor, $$props) {
|
|
2906
2914
|
$fonts()
|
2907
2915
|
),
|
2908
2916
|
() => {
|
2909
|
-
if (
|
2917
|
+
if (isPreview()) {
|
2918
|
+
// フォントのロードが遅れてエディタのプレビューがガタつく対策
|
2919
|
+
$.set(googleFontUrl, makeGoogleFontUrl(Fonts.filter((font) => font !== SYSTEM_FONT)));
|
2920
|
+
} else if ($fonts().length > 0) {
|
2910
2921
|
$.set(googleFontUrl, makeGoogleFontUrl($fonts()));
|
2911
2922
|
}
|
2912
2923
|
}
|
@@ -3467,7 +3478,7 @@ const EASING = {
|
|
3467
3478
|
none: linear,
|
3468
3479
|
};
|
3469
3480
|
/**
|
3470
|
-
* The function to activate svelte animation
|
3481
|
+
* The function to activate svelte animation.
|
3471
3482
|
*
|
3472
3483
|
* @param node - A target node of animation. This argument is passed by svelte, by default.
|
3473
3484
|
* @param customAnimationOptions - A custom animation option object
|
@@ -3476,8 +3487,8 @@ const EASING = {
|
|
3476
3487
|
*
|
3477
3488
|
* @internal
|
3478
3489
|
*/
|
3479
|
-
function
|
3480
|
-
if (
|
3490
|
+
function customAnimation(node, { transforms, animationStyle, delay = 0, duration = 1000 }) {
|
3491
|
+
if (isPreview()) {
|
3481
3492
|
return {};
|
3482
3493
|
}
|
3483
3494
|
let [x, y] = [0, 0];
|
@@ -6360,11 +6371,6 @@ function Modal($$anchor, $$props) {
|
|
6360
6371
|
let closeEventValue = $.prop($$props, 'closeEventValue', 8, null);
|
6361
6372
|
let layerId = $.prop($$props, 'layerId', 8, '');
|
6362
6373
|
const { brandKit } = useBrandKit();
|
6363
|
-
const isCanvasPreview = (document.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') === 'true';
|
6364
|
-
const isOnSite = (document.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') === 'true';
|
6365
|
-
|
6366
|
-
console.log('isOnSite', isOnSite);
|
6367
|
-
|
6368
6374
|
// モーダル背景の設定
|
6369
6375
|
const isExistBackgroundOverlayValue = placement() && placement().backgroundOverlay !== undefined;
|
6370
6376
|
let backgroundOverlay = $.mutable_state(DefaultModalPlacement.backgroundOverlay);
|
@@ -6410,7 +6416,7 @@ function Modal($$anchor, $$props) {
|
|
6410
6416
|
$.deep_read_state(breakPoint())
|
6411
6417
|
),
|
6412
6418
|
() => {
|
6413
|
-
if (!isCanvasPreview && isExistBackgroundOverlayValue) {
|
6419
|
+
if (!isCanvasPreview() && isExistBackgroundOverlayValue) {
|
6414
6420
|
$.set(backgroundOverlay, placement().backgroundOverlay);
|
6415
6421
|
}
|
6416
6422
|
|
@@ -6516,7 +6522,7 @@ function Modal($$anchor, $$props) {
|
|
6516
6522
|
// 表示位置のスタイルの設定
|
6517
6523
|
let position = DefaultModalPlacement.position;
|
6518
6524
|
|
6519
|
-
if (!isCanvasPreview && placement() && placement().position !== null) {
|
6525
|
+
if (!isCanvasPreview() && placement() && placement().position !== null) {
|
6520
6526
|
position = placement().position;
|
6521
6527
|
}
|
6522
6528
|
|
@@ -6533,7 +6539,7 @@ function Modal($$anchor, $$props) {
|
|
6533
6539
|
$.set(transforms, []);
|
6534
6540
|
|
6535
6541
|
DEVICE_IDS.forEach((deviceId) => {
|
6536
|
-
if (!isCanvasPreview && useBreakPoint()) {
|
6542
|
+
if (!isCanvasPreview() && useBreakPoint()) {
|
6537
6543
|
const positionWithBp = breakPoint()[deviceId]?.placement?.position;
|
6538
6544
|
|
6539
6545
|
$.get(transforms).push({
|
@@ -6569,7 +6575,7 @@ function Modal($$anchor, $$props) {
|
|
6569
6575
|
() => {
|
6570
6576
|
let margin = DefaultModalPlacement.margin;
|
6571
6577
|
|
6572
|
-
if (!isCanvasPreview && placement() && placement().margin !== null) {
|
6578
|
+
if (!isCanvasPreview() && placement() && placement().margin !== null) {
|
6573
6579
|
margin = placement().margin;
|
6574
6580
|
}
|
6575
6581
|
|
@@ -6580,7 +6586,7 @@ function Modal($$anchor, $$props) {
|
|
6580
6586
|
}
|
6581
6587
|
|
6582
6588
|
DEVICE_IDS.forEach((deviceId) => {
|
6583
|
-
if (!isCanvasPreview && useBreakPoint()) {
|
6589
|
+
if (!isCanvasPreview() && useBreakPoint()) {
|
6584
6590
|
const marginWithBp = breakPoint()[deviceId]?.placement?.margin;
|
6585
6591
|
|
6586
6592
|
marginStyle = getMarginStyle(marginWithBp);
|
@@ -6694,7 +6700,7 @@ function Modal($$anchor, $$props) {
|
|
6694
6700
|
};
|
6695
6701
|
|
6696
6702
|
$.if(node, ($$render) => {
|
6697
|
-
if (isCanvasPreview) $$render(consequent); else $$render(alternate, false);
|
6703
|
+
if (isCanvasPreview()) $$render(consequent); else $$render(alternate, false);
|
6698
6704
|
});
|
6699
6705
|
}
|
6700
6706
|
|
@@ -6725,10 +6731,9 @@ function Modal($$anchor, $$props) {
|
|
6725
6731
|
$.derived_safe_equal
|
6726
6732
|
);
|
6727
6733
|
|
6728
|
-
$.transition(1, div, () =>
|
6734
|
+
$.transition(1, div, () => customAnimation, () => ({
|
6729
6735
|
transforms: $.get(transforms),
|
6730
|
-
animationStyle: animation()
|
6731
|
-
disabled: !isOnSite
|
6736
|
+
animationStyle: animation()
|
6732
6737
|
}));
|
6733
6738
|
|
6734
6739
|
$.append($$anchor, div);
|