From 4e631121826c396b59f08a0f18c015f3db0ce470 Mon Sep 17 00:00:00 2001
From: Tom Hubrecht <tom.hubrecht@ens.fr>
Date: Wed, 27 Jul 2022 00:13:16 +0200
Subject: [PATCH] Share as b64 and add toast w/ clipboard filling

---
 src/App.svelte   |  7 ++++++-
 src/Share.svelte | 40 +++++++++++++++++++++++++++++++++++++---
 2 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index c676930..8b31922 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -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;
diff --git a/src/Share.svelte b/src/Share.svelte
index 641aed2..eefb174 100644
--- a/src/Share.svelte
+++ b/src/Share.svelte
@@ -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>