Share as b64 and add toast w/ clipboard filling
This commit is contained in:
parent
117a5eb0b1
commit
4e63112182
2 changed files with 43 additions and 4 deletions
|
@ -45,7 +45,12 @@
|
|||
'listWeek'
|
||||
];
|
||||
|
||||
const search = new URL(document.location).searchParams;
|
||||
let search = new URL(document.location).searchParams;
|
||||
|
||||
if (search.has('b64')) {
|
||||
// On est dans le cas où les paramètres sont codés en base64
|
||||
search = new URLSearchParams(window.atob(search.get('b64')));
|
||||
}
|
||||
|
||||
const params = search.getAll('c');
|
||||
const date = search.has('d') ? new Date(search.get('d')) : now;
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
import { Modal, ModalHeader, ModalBody, ModalFooter, Icon } from 'sveltestrap';
|
||||
import { Modal, ModalHeader, ModalBody, ModalFooter, Icon, Toast } from 'sveltestrap';
|
||||
|
||||
export let calendar = null;
|
||||
export let selectedCalendars = [];
|
||||
|
@ -7,6 +7,10 @@
|
|||
let share = document.URL;
|
||||
|
||||
let isOpen = false;
|
||||
let isToastOpen = false;
|
||||
|
||||
let toastText = '';
|
||||
|
||||
const toggle = () => {
|
||||
isOpen = !isOpen;
|
||||
|
||||
|
@ -22,10 +26,26 @@
|
|||
search.append('d', api.getDate().toISOString());
|
||||
}
|
||||
|
||||
share = `${loc.origin}${loc.pathname}?${search.toString()}`;
|
||||
const b64 = window.btoa(search.toString());
|
||||
|
||||
share = `${loc.origin}${loc.pathname}?b64=${b64}`;
|
||||
};
|
||||
|
||||
const doShare = () => {
|
||||
navigator.clipboard
|
||||
.writeText(share)
|
||||
.then(() => (toastText = '<b>Lien de partage copié dans le presse-papier.</b>'))
|
||||
.catch(() => (toastText = 'Erreur de copie.'))
|
||||
.finally((isToastOpen = true));
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="share-toast">
|
||||
<Toast autohide body isOpen={isToastOpen} on:close={() => (isToastOpen = false)}>
|
||||
{@html toastText}
|
||||
</Toast>
|
||||
</div>
|
||||
|
||||
<span class="share-btn fs-4" data-bs-toggle="tooltip" title="Partager" on:click={toggle}>
|
||||
<Icon name="share" />
|
||||
</span>
|
||||
|
@ -39,7 +59,7 @@
|
|||
<ModalBody>
|
||||
<p>La vue actuelle du calendrier peut être partagée avec l'URL suivante :</p>
|
||||
|
||||
<a id="share-url" href={share}>{share}</a>
|
||||
<a id="share-url" on:click={doShare}>{share}</a>
|
||||
</ModalBody>
|
||||
|
||||
<ModalFooter>
|
||||
|
@ -55,4 +75,18 @@
|
|||
right: 1em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#share-url {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
overflow-wrap: break-word;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.share-toast {
|
||||
position: absolute;
|
||||
top: 1.25em;
|
||||
left: 1em;
|
||||
z-index: 1100;
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in a new issue