copy link

3 files changed, 70 insertions, 9 deletions

diff --git a/index.html b/index.html
index 5e3fc53..16a7c50 100644
--- a/index.html
+++ b/index.html
@@ -7,8 +7,8 @@
 	<meta content="width=device-width,initial-scale=1" name="viewport">
 	<script>
 	// make sure we have the right base for URLs
-	if (!location.href.endsWith('.html') && !location.href.endsWith('/')) {
-		location.href = location.href + '/';
+	if (!location.pathname.endsWith('.html') && !location.pathname.endsWith('/')) {
+		location.pathname = location.pathname + '/';
 	}
 	</script>
 	<link rel="icon" href="favicon.ico">
@@ -33,6 +33,10 @@
 					<button id="list-creations" class="img-button" title="list creations">
 						<img alt="list creations" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiI+PHBhdGggZD0iTTYgNyBMMjYgNyBNNiAxNiBMMjYgMTYgTTYgMjUgTDI2IDI1IiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+">
 					</button>
+					<button id="link-creation" class="img-button" title="copy link to creation">
+						<img alt="copy link" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiI+PHJlY3QgeD0iNiIgeT0iNCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjIwIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMyIgcng9IjIiIGZpbGw9Im5vbmUiLz48cmVjdCB4PSIxMSIgeT0iOCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjIwIiBzdHJva2U9IiNmZmYiIGNsaXAtcGF0aD0icGF0aCgnTSAyMCAwIGwgMCAyNCBsIC0xNCAwIGwgMCAxMDAgbCAxMDAgMCBMIDEwMCAwIHonKSIgc3Ryb2tlLXdpZHRoPSIzIiByeD0iMiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==">
+						<span id="copied-notice">Copied link!</span>
+					</button>
 					<button id="about-button" class="img-button" title="about pugl">
 						<img alt="about" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiI+PGVsbGlwc2UgY3g9IjE2IiBjeT0iMTYiIHJ4PSIxMiIgcnk9IjEyIiBzdHJva2U9IiNmOGYiIHN0cm9rZS13aWR0aD0iMyIgZmlsbD0ibm9uZSIgLz48dGV4dCBmaWxsPSIjZjhmIiB4PSIxNiIgeT0iMjQiIGZvbnQtd2VpZ2h0PSJib2xkIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIyMHB4IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj4/PC90ZXh0Pjwvc3ZnPg==">
 					</button>
@@ -131,8 +135,8 @@
 		<h3>delete creation "<span id="delete-creation-title"></span>"?</h3>
 		<br>
 		<form method="dialog">
-			<button>no</button>
 			<button id="delete-creation-confirm">yes</button>
+			<button>no</button>
 		</form>
 	</dialog>
 </div>
diff --git a/pugl.js b/pugl.js
index 76796db..ac0c72e 100644
--- a/pugl.js
+++ b/pugl.js
@@ -2349,6 +2349,8 @@ function import_widgets(string) {
 function export_widgets_to_local_storage() {
 	const widget_str = export_widgets();
 	code_input.value = widget_str;
+	// re-read metadata so that having multiple tabs with pugl open isn't an issue
+	creation_metadata = JSON.parse(localStorage.getItem(`${APP_ID}-metadata`));
 	localStorage.setItem(`${APP_ID}-${creation_id}-description`, widget_str);
 	creation_metadata[creation_id] = {
 		lastViewed: Date.now(),
@@ -2371,9 +2373,9 @@ function load_creation(id) {
 	}
 }
 
-function new_creation() {
+function new_creation(string) {
 	creation_id = generate_creation_id();
-	const result = import_widgets(null);
+	const result = import_widgets(string);
 	if (result.error) {
 		show_error(result.error);
 	}
@@ -2576,6 +2578,23 @@ function startup() {
 		new_creation();
 	});
 
+	document.getElementById('link-creation').addEventListener('click', () => {
+		// copy link
+		const string = code_input.value;
+		const url = new URL(location.href);
+		url.search = '';
+		url.hash = '';
+		url.searchParams.set('import', string);
+		navigator.clipboard.writeText(url.toString()).then(() => {
+			// display "Copied!" notice
+			const copied = document.getElementById('copied-notice');
+			copied.style.visibility = 'visible';
+			copied.style.animationName = '';
+			copied.offsetWidth; // force reflow to restart animation
+			copied.style.animationName = 'copied-notice-animation';
+		});
+	});
+
 	document.getElementById('resolution-form').addEventListener('submit', () => {
 		render_width = resolution_x_element.value;
 		render_height = resolution_y_element.value;
@@ -2729,7 +2748,16 @@ void main() {
 	});
 
 	creation_metadata = parse_json(localStorage.getItem(`${APP_ID}-metadata`));
-	load_most_recent_or_create_new();
+	const url = new URL(location.href);
+	const import_string = url.searchParams.get('import');
+	if (import_string) {
+		// import from URL parameter
+		new_creation(import_string);
+		url.searchParams.delete('import');
+		history.replaceState(null, '', url.toString());
+	} else {
+		load_most_recent_or_create_new();
+	}
 
 	frame(0.0);
 
diff --git a/style.css b/style.css
index 12f5986..78debd7 100644
--- a/style.css
+++ b/style.css
@@ -1,6 +1,7 @@
 :root {
 	--color-text: #ddd;
 	--color-link: #8fc;
+	--color-bg: #000;
 }
 
 body {
@@ -10,7 +11,7 @@ body {
 
 body,
 dialog {
-	background-color: black;
+	background-color: var(--color-bg);
 	color: var(--color-text);
 }
 
@@ -223,14 +224,42 @@ summary {
 #top-area {
 	vertical-align: middle;
 	font-weight: bold;
-	font-size: 0.5cm;
+	font-size: 1.2em;
 }
 #title-icon {
-	height: 1cm;
+	height: 1.5em;
 }
 #creation-buttons {
 	margin-top: 0.2em;
 }
+#link-creation {
+	position: relative;
+}
+
+@keyframes copied-notice-animation {
+	from {
+		opacity: 1;
+	}
+	to {
+		opacity: 0;
+		visibility: hidden;
+	}
+}
+
+#link-creation #copied-notice {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	width: 7em;
+	color: #0f0;
+	border: 1px solid #0f0;
+	pointer-events: none;
+	padding: 3px;
+	background: var(--color-bg);
+	visibility: hidden;
+	animation-duration: 3s;
+	animation-fill-mode: forwards;
+}
 #resolution-form input[type='number'] {
 	width: 4em;
 }