diff options
-rw-r--r-- | index.html | 10 | ||||
-rw-r--r-- | pugl.js | 34 | ||||
-rw-r--r-- | style.css | 35 |
3 files changed, 70 insertions, 9 deletions
@@ -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> @@ -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); @@ -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; } |