@depict-ai/ui 4.0.17 → 4.0.19
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/ES10/index.cjs +145 -120
- package/ES10/index.d.ts +1 -1
- package/ES10/index.js +145 -120
- package/latest/index.cjs +143 -118
- package/latest/index.d.ts +1 -1
- package/latest/index.js +143 -118
- package/package.json +2 -2
- package/server/ES10/index.cjs +97 -77
- package/server/ES10/index.d.ts +1 -1
- package/server/ES10/index.js +97 -77
- package/server/latest/index.cjs +95 -75
- package/server/latest/index.d.ts +1 -1
- package/server/latest/index.js +95 -75
package/ES10/index.js
CHANGED
|
@@ -10,7 +10,7 @@ import { createStore as $8tj43$createStore, reconcile as $8tj43$reconcile } from
|
|
|
10
10
|
/*! Depict.ai search and product listing SDK */
|
|
11
11
|
import { register_es_version } from "../multi_import_deduplicator.mjs";
|
|
12
12
|
register_es_version("ui", "ES10");
|
|
13
|
-
const $8db9a15135765c11$export$83d89fbfd8236492 = "4.0.
|
|
13
|
+
const $8db9a15135765c11$export$83d89fbfd8236492 = "4.0.19";
|
|
14
14
|
|
|
15
15
|
/**
|
|
16
16
|
* Symbol used to identify the version of a SearchModal function. Values right now: 1 = 1st gen classic modal, 2 = second gen modal
|
|
@@ -2736,8 +2736,8 @@ function $4a3ed70b3b7c60d5$export$9ca09caa9c849d9c() {
|
|
|
2736
2736
|
var $26db6925469636a4$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<a>`),
|
|
2737
2737
|
$26db6925469636a4$var$_tmpl$2 = /*#__PURE__*/$8tj43$template(`<div class=listing-card><div class=image-part></div><!$><!/><h3 class=title>`),
|
|
2738
2738
|
$26db6925469636a4$var$_tmpl$3 = /*#__PURE__*/$8tj43$template(`<div class=empty-image>`);
|
|
2739
|
-
const $26db6925469636a4$var$aspectRatioWidthComponent =
|
|
2740
|
-
const $26db6925469636a4$var$aspectRatioHeightComponent =
|
|
2739
|
+
const $26db6925469636a4$var$aspectRatioWidthComponent = 400;
|
|
2740
|
+
const $26db6925469636a4$var$aspectRatioHeightComponent = 200;
|
|
2741
2741
|
const $26db6925469636a4$var$listingSuggestionCollageAspectRatio = $26db6925469636a4$var$aspectRatioWidthComponent / $26db6925469636a4$var$aspectRatioHeightComponent;
|
|
2742
2742
|
function $26db6925469636a4$export$67152d26d4f56ee8(_ref) {
|
|
2743
2743
|
let {
|
|
@@ -2899,7 +2899,7 @@ function $26db6925469636a4$export$ea41102db9bd68c3(_ref3) {
|
|
|
2899
2899
|
function $26db6925469636a4$var$EmptyImage() {
|
|
2900
2900
|
return (() => {
|
|
2901
2901
|
var _el$7 = $8tj43$getNextElement($26db6925469636a4$var$_tmpl$3);
|
|
2902
|
-
_el$7.style.setProperty("aspect-ratio", "
|
|
2902
|
+
_el$7.style.setProperty("aspect-ratio", "2");
|
|
2903
2903
|
$8tj43$insert(_el$7, $8tj43$createComponent((0, $4a3ed70b3b7c60d5$export$9ca09caa9c849d9c), {}));
|
|
2904
2904
|
return _el$7;
|
|
2905
2905
|
})();
|
|
@@ -3520,11 +3520,12 @@ function $1abb91ab5abc8994$export$66d1697a0f27069c(modalLayoutStacked) {
|
|
|
3520
3520
|
var $06fcd2a345efd24d$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<div class=instant-results-wrapper><h2></h2><!$><!/>`),
|
|
3521
3521
|
$06fcd2a345efd24d$var$_tmpl$2 = /*#__PURE__*/$8tj43$template(`<div>`),
|
|
3522
3522
|
$06fcd2a345efd24d$var$_tmpl$3 = /*#__PURE__*/$8tj43$template(`<dialog>`),
|
|
3523
|
-
$06fcd2a345efd24d$var$_tmpl$4 = /*#__PURE__*/$8tj43$template(`<div class=
|
|
3524
|
-
$06fcd2a345efd24d$var$_tmpl$5 = /*#__PURE__*/$8tj43$template(`<
|
|
3525
|
-
$06fcd2a345efd24d$var$_tmpl$6 = /*#__PURE__*/$8tj43$template(`<div class=
|
|
3526
|
-
$06fcd2a345efd24d$var$_tmpl$7 = /*#__PURE__*/$8tj43$template(`<div class=
|
|
3527
|
-
$06fcd2a345efd24d$var$_tmpl$8 = /*#__PURE__*/$8tj43$template(`<
|
|
3523
|
+
$06fcd2a345efd24d$var$_tmpl$4 = /*#__PURE__*/$8tj43$template(`<div class=discover-more><button class=major type=button>`),
|
|
3524
|
+
$06fcd2a345efd24d$var$_tmpl$5 = /*#__PURE__*/$8tj43$template(`<b>`),
|
|
3525
|
+
$06fcd2a345efd24d$var$_tmpl$6 = /*#__PURE__*/$8tj43$template(`<div class=depict-search-modal-backdrop>`),
|
|
3526
|
+
$06fcd2a345efd24d$var$_tmpl$7 = /*#__PURE__*/$8tj43$template(`<div class=depict-search-modal><div class=body><!$><!/><div class=padded></div></div><!$><!/>`),
|
|
3527
|
+
$06fcd2a345efd24d$var$_tmpl$8 = /*#__PURE__*/$8tj43$template(`<div class=left>`),
|
|
3528
|
+
$06fcd2a345efd24d$var$_tmpl$9 = /*#__PURE__*/$8tj43$template(`<div class=right>`);
|
|
3528
3529
|
/**
|
|
3529
3530
|
* Second generation search modal - the solid component that gets added to <body> when the search modal is opened
|
|
3530
3531
|
*/
|
|
@@ -3826,6 +3827,21 @@ function $06fcd2a345efd24d$var$RawSearchModalV2(_ref) {
|
|
|
3826
3827
|
return _el$6;
|
|
3827
3828
|
})();
|
|
3828
3829
|
};
|
|
3830
|
+
const discoverMoreSection = (() => {
|
|
3831
|
+
var _el$7 = $8tj43$getNextElement($06fcd2a345efd24d$var$_tmpl$4),
|
|
3832
|
+
_el$8 = _el$7.firstChild;
|
|
3833
|
+
$8tj43$addEventListener(_el$8, "click", $8tj43$catchify(() => submit_query_()), true);
|
|
3834
|
+
$8tj43$insert(_el$8, (() => {
|
|
3835
|
+
var _c$ = $8tj43$memo(() => !!get_search_field_value_());
|
|
3836
|
+
return () => _c$() ? i18n_.modal_view_all_results_()((() => {
|
|
3837
|
+
var _el$9 = $8tj43$getNextElement($06fcd2a345efd24d$var$_tmpl$5);
|
|
3838
|
+
$8tj43$insert(_el$9, formattedTotalNumberResults);
|
|
3839
|
+
return _el$9;
|
|
3840
|
+
})()) : i18n_.modal_discover_more_();
|
|
3841
|
+
})());
|
|
3842
|
+
$8tj43$runHydrationEvents();
|
|
3843
|
+
return _el$7;
|
|
3844
|
+
})();
|
|
3829
3845
|
const search_field = $584c06c09cf4609d$export$b94867ecbd698f21({
|
|
3830
3846
|
BackIcon_: () => $8tj43$createComponent((0, $c2fe922d21c40514$export$11e9f390c90a537f), {}),
|
|
3831
3847
|
input_field_ref_: element => set_input_field(element),
|
|
@@ -3875,24 +3891,22 @@ function $06fcd2a345efd24d$var$RawSearchModalV2(_ref) {
|
|
|
3875
3891
|
},
|
|
3876
3892
|
get children() {
|
|
3877
3893
|
return [(() => {
|
|
3878
|
-
var _el$
|
|
3879
|
-
$8tj43$addEventListener(_el$
|
|
3880
|
-
$8tj43$effect(_$p => $8tj43$classList(_el$
|
|
3894
|
+
var _el$10 = $8tj43$getNextElement($06fcd2a345efd24d$var$_tmpl$6);
|
|
3895
|
+
$8tj43$addEventListener(_el$10, "click", close_modal_, true);
|
|
3896
|
+
$8tj43$effect(_$p => $8tj43$classList(_el$10, {
|
|
3881
3897
|
[backdropRandomClassname]: true
|
|
3882
3898
|
}, _$p));
|
|
3883
3899
|
$8tj43$runHydrationEvents();
|
|
3884
|
-
return _el$
|
|
3900
|
+
return _el$10;
|
|
3885
3901
|
})(), (() => {
|
|
3886
|
-
var _el$
|
|
3887
|
-
_el$9 = _el$8.firstChild,
|
|
3888
|
-
_el$13 = _el$9.firstChild,
|
|
3889
|
-
[_el$14, _co$2] = $8tj43$getNextMarker(_el$13.nextSibling),
|
|
3890
|
-
_el$10 = _el$14.nextSibling,
|
|
3891
|
-
_el$11 = _el$10.nextSibling,
|
|
3902
|
+
var _el$11 = $8tj43$getNextElement($06fcd2a345efd24d$var$_tmpl$7),
|
|
3892
3903
|
_el$12 = _el$11.firstChild,
|
|
3893
|
-
_el$
|
|
3894
|
-
[_el$
|
|
3895
|
-
|
|
3904
|
+
_el$14 = _el$12.firstChild,
|
|
3905
|
+
[_el$15, _co$2] = $8tj43$getNextMarker(_el$14.nextSibling),
|
|
3906
|
+
_el$13 = _el$15.nextSibling,
|
|
3907
|
+
_el$16 = _el$12.nextSibling,
|
|
3908
|
+
[_el$17, _co$3] = $8tj43$getNextMarker(_el$16.nextSibling);
|
|
3909
|
+
$8tj43$addEventListener(_el$11, "click", $8tj43$catchify(_ref3 => {
|
|
3896
3910
|
let {
|
|
3897
3911
|
target: target,
|
|
3898
3912
|
currentTarget: currentTarget
|
|
@@ -3904,10 +3918,11 @@ function $06fcd2a345efd24d$var$RawSearchModalV2(_ref) {
|
|
|
3904
3918
|
const resizeObserver = new ResizeObserver($8tj43$catchify(records => setModalBodyWidth(records.at(-1).contentRect.width)));
|
|
3905
3919
|
resizeObserver.observe(element);
|
|
3906
3920
|
$8tj43$onCleanup(() => resizeObserver.disconnect());
|
|
3907
|
-
}, _el$
|
|
3908
|
-
$8tj43$insert(_el$
|
|
3921
|
+
}, _el$12);
|
|
3922
|
+
$8tj43$insert(_el$12, search_field, _el$15, _co$2);
|
|
3909
3923
|
$8tj43$use(el => {
|
|
3910
|
-
$8tj43$catchify((0, $558d0596fcf0e0b0$export$50b90be27d8502d9))(el, bodyAlignmentSignal, bottom_distance_under_modal_)
|
|
3924
|
+
$8tj43$catchify((0, $558d0596fcf0e0b0$export$50b90be27d8502d9))(el, bodyAlignmentSignal, bottom_distance_under_modal_ || (() => 0.03 // 3% under SearchModalV2 by default
|
|
3925
|
+
));
|
|
3911
3926
|
// Workaround part 2 of https://github.com/solidjs/solid/issues/2030
|
|
3912
3927
|
// We can't just re-render the components in the two different <Show> branches because <Show> would infinite loop because it depends on the resource created by the components
|
|
3913
3928
|
// We could also lift out the createResource from InstantResults into this component, but this component is already huge.
|
|
@@ -3915,41 +3930,32 @@ function $06fcd2a345efd24d$var$RawSearchModalV2(_ref) {
|
|
|
3915
3930
|
const showStackedDOM = $8tj43$createMemo(() => modalLayoutStacked_() || noResults());
|
|
3916
3931
|
$8tj43$createEffect(() => {
|
|
3917
3932
|
if (showStackedDOM()) {
|
|
3918
|
-
el.replaceChildren(...renderedTextSuggestions(), ...renderedVisualSuggestions());
|
|
3933
|
+
el.replaceChildren(...renderedTextSuggestions(), ...renderedVisualSuggestions(), discoverMoreSection);
|
|
3919
3934
|
return;
|
|
3920
3935
|
}
|
|
3921
3936
|
el.replaceChildren(...[(() => {
|
|
3922
|
-
var _el$
|
|
3923
|
-
$8tj43$insert(_el$
|
|
3924
|
-
return _el$17;
|
|
3925
|
-
})(), (() => {
|
|
3926
|
-
var _el$18 = $8tj43$getNextElement($06fcd2a345efd24d$var$_tmpl$7);
|
|
3927
|
-
$8tj43$insert(_el$18, renderedVisualSuggestions);
|
|
3937
|
+
var _el$18 = $8tj43$getNextElement($06fcd2a345efd24d$var$_tmpl$8);
|
|
3938
|
+
$8tj43$insert(_el$18, renderedTextSuggestions);
|
|
3928
3939
|
return _el$18;
|
|
3929
|
-
})()
|
|
3940
|
+
})(), (() => {
|
|
3941
|
+
var _el$19 = $8tj43$getNextElement($06fcd2a345efd24d$var$_tmpl$9);
|
|
3942
|
+
$8tj43$insert(_el$19, renderedVisualSuggestions);
|
|
3943
|
+
return _el$19;
|
|
3944
|
+
})(), discoverMoreSection]);
|
|
3930
3945
|
});
|
|
3931
|
-
}, _el$
|
|
3932
|
-
$8tj43$
|
|
3933
|
-
$8tj43$insert(_el$12, (() => {
|
|
3934
|
-
var _c$ = $8tj43$memo(() => !!get_search_field_value_());
|
|
3935
|
-
return () => _c$() ? i18n_.modal_view_all_results_()((() => {
|
|
3936
|
-
var _el$19 = $8tj43$getNextElement($06fcd2a345efd24d$var$_tmpl$8);
|
|
3937
|
-
$8tj43$insert(_el$19, formattedTotalNumberResults);
|
|
3938
|
-
return _el$19;
|
|
3939
|
-
})()) : i18n_.modal_discover_more_();
|
|
3940
|
-
})());
|
|
3941
|
-
$8tj43$insert(_el$8, $8tj43$createComponent((0, $a86e71c0015bd8ab$export$f021bdedd3ec901a), {
|
|
3946
|
+
}, _el$13);
|
|
3947
|
+
$8tj43$insert(_el$11, $8tj43$createComponent((0, $a86e71c0015bd8ab$export$f021bdedd3ec901a), {
|
|
3942
3948
|
styles: mergedCssObject
|
|
3943
|
-
}), _el$
|
|
3949
|
+
}), _el$17, _co$3);
|
|
3944
3950
|
$8tj43$effect(_p$ => {
|
|
3945
3951
|
var _v$ = !!modalLayoutStacked_(),
|
|
3946
3952
|
_v$2 = {
|
|
3947
3953
|
[random_classname_body]: true
|
|
3948
3954
|
},
|
|
3949
3955
|
_v$3 = !!noResults();
|
|
3950
|
-
_v$ !== _p$.e && _el$
|
|
3951
|
-
_p$.t = $8tj43$classList(_el$
|
|
3952
|
-
_v$3 !== _p$.a && _el$
|
|
3956
|
+
_v$ !== _p$.e && _el$11.classList.toggle("stacked", _p$.e = _v$);
|
|
3957
|
+
_p$.t = $8tj43$classList(_el$12, _v$2, _p$.t);
|
|
3958
|
+
_v$3 !== _p$.a && _el$13.classList.toggle("no-results", _p$.a = _v$3);
|
|
3953
3959
|
return _p$;
|
|
3954
3960
|
}, {
|
|
3955
3961
|
e: undefined,
|
|
@@ -3957,7 +3963,7 @@ function $06fcd2a345efd24d$var$RawSearchModalV2(_ref) {
|
|
|
3957
3963
|
a: undefined
|
|
3958
3964
|
});
|
|
3959
3965
|
$8tj43$runHydrationEvents();
|
|
3960
|
-
return _el$
|
|
3966
|
+
return _el$11;
|
|
3961
3967
|
})()];
|
|
3962
3968
|
}
|
|
3963
3969
|
})];
|
|
@@ -10449,7 +10455,8 @@ function $082c4ed3e22f8d71$export$9bf11afa910f536e(_ref) {
|
|
|
10449
10455
|
background = el;
|
|
10450
10456
|
(0, $8tj43$observer).wait_for_element(el).then($8tj43$catchify(() => {
|
|
10451
10457
|
set_background_style("transition", "all 200ms ease-in");
|
|
10452
|
-
|
|
10458
|
+
// For some reason this needs a requestAnimationFrame but the other modal-opening animations don't
|
|
10459
|
+
requestAnimationFrame($8tj43$catchify(() => set_background_style("opacity", "1")));
|
|
10453
10460
|
}));
|
|
10454
10461
|
}, _el$2);
|
|
10455
10462
|
$8tj43$addEventListener(_el$2, "click", dismiss_modal_, true);
|
|
@@ -13529,6 +13536,69 @@ function $d53ebed6f63304e4$var$make_state_saved_rows(_ref2, i18n_) {
|
|
|
13529
13536
|
}));
|
|
13530
13537
|
return rows;
|
|
13531
13538
|
}
|
|
13539
|
+
function $d7833ca17fc05c5e$export$e06dee46ebe7faa9(_ref) {
|
|
13540
|
+
let {
|
|
13541
|
+
setBackdropStyle_: setBackdropStyle_,
|
|
13542
|
+
setBodyAlignment_: setBodyAlignment_,
|
|
13543
|
+
openDuration_: openDuration_
|
|
13544
|
+
} = _ref;
|
|
13545
|
+
setBackdropStyle_(prev => ({
|
|
13546
|
+
...prev,
|
|
13547
|
+
opacity: 0,
|
|
13548
|
+
transition: "opacity ".concat(openDuration_, "ms ease-in")
|
|
13549
|
+
}));
|
|
13550
|
+
requestAnimationFrame(() => setBackdropStyle_(prev => ({
|
|
13551
|
+
...prev,
|
|
13552
|
+
opacity: 1
|
|
13553
|
+
})));
|
|
13554
|
+
setBodyAlignment_(prev => ({
|
|
13555
|
+
...prev,
|
|
13556
|
+
opacity: 0,
|
|
13557
|
+
transition: "opacity ".concat(openDuration_, "ms ease-in ").concat(openDuration_ / 5, "ms"),
|
|
13558
|
+
// Add a slight delay so the brightness of the modal isn't so jarring before the background has gotten darkened
|
|
13559
|
+
"--js-animation-duration": "".concat(openDuration_, "ms")
|
|
13560
|
+
}));
|
|
13561
|
+
requestAnimationFrame(() => setBodyAlignment_(prev => ({
|
|
13562
|
+
...prev,
|
|
13563
|
+
opacity: 1
|
|
13564
|
+
})));
|
|
13565
|
+
}
|
|
13566
|
+
function $d7833ca17fc05c5e$export$23d40cc5971c3acd(_ref2) {
|
|
13567
|
+
let {
|
|
13568
|
+
setBackdropStyle_: setBackdropStyle_,
|
|
13569
|
+
setBodyAlignment_: setBodyAlignment_,
|
|
13570
|
+
closeDuration_: closeDuration_
|
|
13571
|
+
} = _ref2;
|
|
13572
|
+
setBackdropStyle_(prev => ({
|
|
13573
|
+
...prev,
|
|
13574
|
+
opacity: 0,
|
|
13575
|
+
transition: "opacity ".concat(closeDuration_, "ms ease-out")
|
|
13576
|
+
}));
|
|
13577
|
+
setBodyAlignment_(prev => ({
|
|
13578
|
+
...prev,
|
|
13579
|
+
opacity: 0,
|
|
13580
|
+
transition: "opacity ".concat(closeDuration_, "ms ease-out")
|
|
13581
|
+
}));
|
|
13582
|
+
}
|
|
13583
|
+
function $d7833ca17fc05c5e$export$dab9321f3c157061(alignmentSignals, modalVersion) {
|
|
13584
|
+
const [, setBodyAlignment_] = alignmentSignals.body_;
|
|
13585
|
+
const [, setBackdropStyle_] = alignmentSignals.backdrop_ || $8tj43$createSignal({});
|
|
13586
|
+
// For default centered modal, also run our fading animations if search modal v2
|
|
13587
|
+
modalVersion === 2 && $d7833ca17fc05c5e$export$e06dee46ebe7faa9({
|
|
13588
|
+
openDuration_: 125,
|
|
13589
|
+
setBodyAlignment_: setBodyAlignment_,
|
|
13590
|
+
setBackdropStyle_: setBackdropStyle_
|
|
13591
|
+
});
|
|
13592
|
+
const closingAnimation = modalVersion === 2 ? async () => {
|
|
13593
|
+
$d7833ca17fc05c5e$export$23d40cc5971c3acd({
|
|
13594
|
+
closeDuration_: 100,
|
|
13595
|
+
setBodyAlignment_: setBodyAlignment_,
|
|
13596
|
+
setBackdropStyle_: setBackdropStyle_
|
|
13597
|
+
});
|
|
13598
|
+
await new Promise(r => setTimeout(r, 100));
|
|
13599
|
+
} : undefined;
|
|
13600
|
+
return closingAnimation;
|
|
13601
|
+
}
|
|
13532
13602
|
var $937791b86d3d1509$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<div class="depict plp search">`);
|
|
13533
13603
|
function $937791b86d3d1509$export$44f738469d5570cf(_ref) {
|
|
13534
13604
|
let {
|
|
@@ -13543,7 +13613,15 @@ function $937791b86d3d1509$export$44f738469d5570cf(_ref) {
|
|
|
13543
13613
|
} = _ref;
|
|
13544
13614
|
return $8tj43$createRoot(dispose => {
|
|
13545
13615
|
const [innerWidthReactive, setInnerWidthReactive] = $8tj43$createSignal(innerWidth);
|
|
13546
|
-
const
|
|
13616
|
+
const [innerHeightReactive, setInnerHeightReactive] = $8tj43$createSignal(innerHeight);
|
|
13617
|
+
const resizeObserver = new ResizeObserver(records => {
|
|
13618
|
+
const {
|
|
13619
|
+
width: width,
|
|
13620
|
+
height: height
|
|
13621
|
+
} = records.at(-1).contentRect;
|
|
13622
|
+
setInnerWidthReactive(width);
|
|
13623
|
+
setInnerHeightReactive(height);
|
|
13624
|
+
});
|
|
13547
13625
|
const {
|
|
13548
13626
|
left: left,
|
|
13549
13627
|
top: top,
|
|
@@ -13576,6 +13654,13 @@ function $937791b86d3d1509$export$44f738469d5570cf(_ref) {
|
|
|
13576
13654
|
zIndex: +zIndexOfFake + 1
|
|
13577
13655
|
} : {})
|
|
13578
13656
|
});
|
|
13657
|
+
const absoluteFieldTop = $8tj43$createMemo(() => {
|
|
13658
|
+
innerHeightReactive();
|
|
13659
|
+
innerWidthReactive();
|
|
13660
|
+
// This is very semi-scientific but I hope it works (seems to, albeit laggy see comment where this value gets used)
|
|
13661
|
+
return fakeField.getBoundingClientRect().top;
|
|
13662
|
+
});
|
|
13663
|
+
$8tj43$createEffect(() => console.log("absoluteFieldTop", fakeField, absoluteFieldTop(), "changing", addedToBody));
|
|
13579
13664
|
const pxOffCenter = Math.abs($8tj43$untrack(innerWidthReactive) / 2 - (left + width / 2));
|
|
13580
13665
|
const openDuration_ = pxOffCenter > 100 ? 250 : 125; // faster animations if little left-right movement
|
|
13581
13666
|
const closeDuration_ = pxOffCenter > 100 ? 150 : 100;
|
|
@@ -13609,7 +13694,10 @@ function $937791b86d3d1509$export$44f738469d5570cf(_ref) {
|
|
|
13609
13694
|
Object.assign(addedToBody.style, {
|
|
13610
13695
|
// This is left: 50%, transform: translateX(-50) with extra steps but when using it safari and firefox glitch out like crazy
|
|
13611
13696
|
left: "".concat(innerWidthReactive() / 2 - inModalFieldWidth() / 2, "px"),
|
|
13612
|
-
width: inModalFieldWidthPx()
|
|
13697
|
+
width: inModalFieldWidthPx(),
|
|
13698
|
+
// Lord forgive me for this is laggy. Example: on preview browser when resizing the screen in both x and y direction at the sam time. But it's too hard to change the code now, so that it doesn't happen.
|
|
13699
|
+
// Basically we'd want one align_field running in only the y-axis on the field that's still in the DOM and another one in the x-axis on the fake field. Or something…
|
|
13700
|
+
top: absoluteFieldTop() + "px"
|
|
13613
13701
|
});
|
|
13614
13702
|
// We might only have changed the left position which align_field doesn't know about, make it poll the position for a while
|
|
13615
13703
|
setPollAlignment_(true);
|
|
@@ -13627,7 +13715,7 @@ function $937791b86d3d1509$export$44f738469d5570cf(_ref) {
|
|
|
13627
13715
|
clearTimeout(disableResizePollingTimeout);
|
|
13628
13716
|
setPollAlignment_(false);
|
|
13629
13717
|
});
|
|
13630
|
-
$
|
|
13718
|
+
$d7833ca17fc05c5e$export$e06dee46ebe7faa9({
|
|
13631
13719
|
setBackdropStyle_: setBackdropStyle_,
|
|
13632
13720
|
setBodyAlignment_: setBodyAlignment_,
|
|
13633
13721
|
openDuration_: openDuration_
|
|
@@ -13641,7 +13729,7 @@ function $937791b86d3d1509$export$44f738469d5570cf(_ref) {
|
|
|
13641
13729
|
width: width,
|
|
13642
13730
|
left: left
|
|
13643
13731
|
} = fakeField.getBoundingClientRect();
|
|
13644
|
-
$
|
|
13732
|
+
$d7833ca17fc05c5e$export$23d40cc5971c3acd({
|
|
13645
13733
|
setBackdropStyle_: setBackdropStyle_,
|
|
13646
13734
|
setBodyAlignment_: setBodyAlignment_,
|
|
13647
13735
|
closeDuration_: closeDuration_
|
|
@@ -13670,69 +13758,6 @@ function $937791b86d3d1509$export$44f738469d5570cf(_ref) {
|
|
|
13670
13758
|
};
|
|
13671
13759
|
});
|
|
13672
13760
|
}
|
|
13673
|
-
function $937791b86d3d1509$export$e06dee46ebe7faa9(_ref2) {
|
|
13674
|
-
let {
|
|
13675
|
-
setBackdropStyle_: setBackdropStyle_,
|
|
13676
|
-
setBodyAlignment_: setBodyAlignment_,
|
|
13677
|
-
openDuration_: openDuration_
|
|
13678
|
-
} = _ref2;
|
|
13679
|
-
setBackdropStyle_(prev => ({
|
|
13680
|
-
...prev,
|
|
13681
|
-
opacity: 0,
|
|
13682
|
-
transition: "opacity ".concat(openDuration_, "ms ease-in")
|
|
13683
|
-
}));
|
|
13684
|
-
requestAnimationFrame(() => setBackdropStyle_(prev => ({
|
|
13685
|
-
...prev,
|
|
13686
|
-
opacity: 1
|
|
13687
|
-
})));
|
|
13688
|
-
setBodyAlignment_(prev => ({
|
|
13689
|
-
...prev,
|
|
13690
|
-
opacity: 0,
|
|
13691
|
-
transition: "opacity ".concat(openDuration_, "ms ease-in ").concat(openDuration_ / 5, "ms"),
|
|
13692
|
-
// Add a slight delay so the brightness of the modal isn't so jarring before the background has gotten darkened
|
|
13693
|
-
"--js-animation-duration": "".concat(openDuration_, "ms")
|
|
13694
|
-
}));
|
|
13695
|
-
requestAnimationFrame(() => setBodyAlignment_(prev => ({
|
|
13696
|
-
...prev,
|
|
13697
|
-
opacity: 1
|
|
13698
|
-
})));
|
|
13699
|
-
}
|
|
13700
|
-
function $937791b86d3d1509$export$23d40cc5971c3acd(_ref3) {
|
|
13701
|
-
let {
|
|
13702
|
-
setBackdropStyle_: setBackdropStyle_,
|
|
13703
|
-
setBodyAlignment_: setBodyAlignment_,
|
|
13704
|
-
closeDuration_: closeDuration_
|
|
13705
|
-
} = _ref3;
|
|
13706
|
-
setBackdropStyle_(prev => ({
|
|
13707
|
-
...prev,
|
|
13708
|
-
opacity: 0,
|
|
13709
|
-
transition: "opacity ".concat(closeDuration_, "ms ease-out")
|
|
13710
|
-
}));
|
|
13711
|
-
setBodyAlignment_(prev => ({
|
|
13712
|
-
...prev,
|
|
13713
|
-
opacity: 0,
|
|
13714
|
-
transition: "opacity ".concat(closeDuration_, "ms ease-out")
|
|
13715
|
-
}));
|
|
13716
|
-
}
|
|
13717
|
-
function $937791b86d3d1509$export$dab9321f3c157061(alignmentSignals, modalVersion) {
|
|
13718
|
-
const [, setBodyAlignment_] = alignmentSignals.body_;
|
|
13719
|
-
const [, setBackdropStyle_] = alignmentSignals.backdrop_ || $8tj43$createSignal({});
|
|
13720
|
-
// For default centered modal, also run our fading animations if search modal v2
|
|
13721
|
-
modalVersion === 2 && $937791b86d3d1509$export$e06dee46ebe7faa9({
|
|
13722
|
-
openDuration_: 125,
|
|
13723
|
-
setBodyAlignment_: setBodyAlignment_,
|
|
13724
|
-
setBackdropStyle_: setBackdropStyle_
|
|
13725
|
-
});
|
|
13726
|
-
const closingAnimation = modalVersion === 2 ? async () => {
|
|
13727
|
-
$937791b86d3d1509$export$23d40cc5971c3acd({
|
|
13728
|
-
closeDuration_: 100,
|
|
13729
|
-
setBodyAlignment_: setBodyAlignment_,
|
|
13730
|
-
setBackdropStyle_: setBackdropStyle_
|
|
13731
|
-
});
|
|
13732
|
-
await new Promise(r => setTimeout(r, 100));
|
|
13733
|
-
} : undefined;
|
|
13734
|
-
return closingAnimation;
|
|
13735
|
-
}
|
|
13736
13761
|
var $da279c5a540c6846$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<div class=filter-results-for-one-row><!$><!/><!$><!/>`),
|
|
13737
13762
|
$da279c5a540c6846$var$_tmpl$2 = /*#__PURE__*/$8tj43$template(`<div class="depict plp search"><div class=listing-page><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/></div><!$><!/><!$><!/>`);
|
|
13738
13763
|
function $da279c5a540c6846$export$a54ec244c8863715(_ref) {
|
|
@@ -14461,7 +14486,7 @@ class $eb064bc3350276c1$export$ac6237957a15b3f0 {
|
|
|
14461
14486
|
if (!((_ = open_signal_value[0]) !== null && _ !== void 0 && _.alignmentSignals_) && search_page_aligned_modal_alignment_signals_) {
|
|
14462
14487
|
// Open modal aligned with search page if no alignment specified and possible to align with search page
|
|
14463
14488
|
const [options_arg, ...rest] = open_signal_value === true ? [{}] : open_signal_value;
|
|
14464
|
-
const closingAnimation = $
|
|
14489
|
+
const closingAnimation = $d7833ca17fc05c5e$export$dab9321f3c157061(search_page_aligned_modal_alignment_signals_, modalVersion);
|
|
14465
14490
|
open_modal_({
|
|
14466
14491
|
closing_animation_: closingAnimation,
|
|
14467
14492
|
...options_arg,
|
|
@@ -14471,7 +14496,7 @@ class $eb064bc3350276c1$export$ac6237957a15b3f0 {
|
|
|
14471
14496
|
}
|
|
14472
14497
|
// Open centered modal
|
|
14473
14498
|
const centeredModalAlignmentSignals = $8e8ce3f7a5eb11a6$export$41b4894022a3580f();
|
|
14474
|
-
const closingAnimation = $
|
|
14499
|
+
const closingAnimation = $d7833ca17fc05c5e$export$dab9321f3c157061(centeredModalAlignmentSignals, modalVersion);
|
|
14475
14500
|
if (signal_value_is_options) {
|
|
14476
14501
|
const [options_arg, ...rest] = open_signal_value;
|
|
14477
14502
|
open_modal_({
|
|
@@ -14725,7 +14750,7 @@ const $169c13c0531d91d2$export$d86a33413558014e = openModalParams => {
|
|
|
14725
14750
|
field_: $8tj43$createSignal({}),
|
|
14726
14751
|
backdrop_: $8tj43$createSignal({})
|
|
14727
14752
|
};
|
|
14728
|
-
const closingAnimation = $
|
|
14753
|
+
const closingAnimation = $d7833ca17fc05c5e$export$dab9321f3c157061(alignmentSignals_, openModalParams.runAnimations_ ? 2 : 1);
|
|
14729
14754
|
$8tj43$createRoot(dispose => {
|
|
14730
14755
|
dispose_aligner = () => {
|
|
14731
14756
|
var _cleanup;
|