blob: 9e5ee5077daa253ed2d58c4c4638d1fd00155fef (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
<script lang="ts">
import { onMount, type SvelteComponent } from 'svelte';
import type { GenericPage } from '@jet-app/app-store/api/models';
import Modal from '@amp/web-app-components/src/components/Modal/Modal.svelte';
import { getModalPageStore } from '~/stores/modalPage';
import ShelfComponent from '~/components/jet/shelf/Shelf.svelte';
import ContentModal from '~/components/jet/item/ContentModal.svelte';
import { LICENSE_AGREEMENT_MODAL_ID } from '~/utils/metrics';
let modalElement: SvelteComponent;
let modalPage = getModalPageStore();
let page: GenericPage | undefined;
$: page = $modalPage?.page;
$: shelves = page?.shelves ?? [];
$: title = page?.title ?? null;
$: targetId =
$modalPage?.pageDetail === 'licenseAgreement'
? LICENSE_AGREEMENT_MODAL_ID
: undefined;
onMount(() => {
return modalPage.clearPage;
});
$: {
if ($modalPage) {
modalElement?.showModal();
} else {
handleModalClose();
}
}
function handleModalClose() {
modalElement?.close();
modalPage.clearPage();
}
</script>
<Modal
modalTriggerElement={null}
bind:this={modalElement}
on:close={handleModalClose}
>
<div class="modal-content">
{#if page}
<ContentModal
{title}
subtitle={null}
on:close={handleModalClose}
{targetId}
>
<svelte:fragment slot="content">
{#each shelves as shelf}
<ShelfComponent {shelf}>
<slot
name="marker-shelf"
slot="marker-shelf"
let:shelf
{shelf}
/>
</ShelfComponent>
{/each}
</svelte:fragment>
</ContentModal>
{/if}
</div>
</Modal>
<style lang="scss">
.modal-content :global(p) {
user-select: text;
margin-bottom: 15px;
overflow-wrap: break-word;
}
:global(.noscroll) {
overflow: hidden;
touch-action: none;
}
</style>
|
