metis/src/Share.svelte
2022-07-26 22:50:16 +02:00

58 lines
1.3 KiB
Svelte

<script>
import { Modal, ModalHeader, ModalBody, ModalFooter, Icon } from 'sveltestrap';
export let calendar = null;
export let selectedCalendars = [];
let share = document.URL;
let isOpen = false;
const toggle = () => {
isOpen = !isOpen;
const loc = document.location;
const search = new URLSearchParams();
const api = calendar.getAPI();
if (calendar !== null) {
search.append('v', api.view.type);
selectedCalendars.forEach(c => search.append('c', c));
search.append('d', api.getDate().toISOString());
}
share = `${loc.origin}${loc.pathname}?${search.toString()}`;
};
</script>
<span class="share-btn fs-4" data-bs-toggle="tooltip" title="Partager" on:click={toggle}>
<Icon name="share" />
</span>
<Modal {isOpen} {toggle} centered scrollable>
<ModalHeader {toggle}>
<Icon name="share" class="text-success me-2" />
<b>Partage</b>
</ModalHeader>
<ModalBody>
<p>La vue actuelle du calendrier peut être partagée avec l'URL suivante :</p>
<a id="share-url" href={share}>{share}</a>
</ModalBody>
<ModalFooter>
<Icon name="balloon-heart" class="text-danger fs-5" />
<span class="fs-7">Propulsé par le Club Réseau de l'ENS</span>
</ModalFooter>
</Modal>
<style>
.share-btn {
position: absolute;
top: 0.75em;
right: 3em;
cursor: pointer;
}
</style>