diff --git a/.changeset/cool-buckets-notice.md b/.changeset/cool-buckets-notice.md new file mode 100644 index 0000000000..6a41bec58a --- /dev/null +++ b/.changeset/cool-buckets-notice.md @@ -0,0 +1,5 @@ +--- +"website": patch +--- + +feat:Add confirmation dialogue if leaving playground diff --git a/js/_website/src/lib/components/DemosLite.svelte b/js/_website/src/lib/components/DemosLite.svelte index 9bc5bb186c..eb2456958d 100644 --- a/js/_website/src/lib/components/DemosLite.svelte +++ b/js/_website/src/lib/components/DemosLite.svelte @@ -71,6 +71,7 @@ }); let copied_link = false; + let shared = false; async function copy_link(name: string) { let code_b64 = btoa(code); name = name.replaceAll(" ", "_"); @@ -78,6 +79,7 @@ `${$page.url.href.split("?")[0]}?demo=${name}&code=${code_b64}` ); copied_link = true; + shared = true; setTimeout(() => (copied_link = false), 2000); } @@ -113,6 +115,34 @@ } } } + + function show_dialog( + current_demos: typeof demos, + original_demos: typeof demos, + has_shared: boolean + ) { + let changes = + !(JSON.stringify(current_demos) === JSON.stringify(original_demos)) && + !has_shared; + if (browser) { + if (changes) { + window.onbeforeunload = function () { + return true; + }; + } else { + window.onbeforeunload = function () { + return null; + }; + } + } + } + + let demos_copy: typeof demos = JSON.parse(JSON.stringify(demos)); + + $: show_dialog(demos, demos_copy, shared); + $: if (code) { + shared = false; + } @@ -160,6 +190,7 @@ console.log("input")} label="" language="python" target={dummy_elem}