update hash automatically; react to it changing

1 files changed, 40 insertions, 6 deletions

diff --git a/src/js/main.js b/src/js/main.js
index 11717dc..a4e3dfd 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -18,13 +18,13 @@ function assetURL({md5, ext}) {
     return `https://cdn.assets.scratch.mit.edu/internalapi/asset/${md5}.${ext}/get/`;
 }
 
-function isUrlInputValid() {
+function isGeneratorUrlValid(value) {
     const re = /^((.*:\/\/scratch.mit.edu\/projects\/[0-9]+\/?)|[0-9]+)(:.*)?$/;
-    return re.test(urlInput.value);
+    return re.test(value);
 }
 
 urlInput.addEventListener('input', () => {
-    if (urlInput.value === '' || isUrlInputValid()) {
+    if (urlInput.value === '' || isGeneratorUrlValid(urlInput.value)) {
         generateButton.classList.add('enabled');
         generateButton.classList.remove('disabled');
     } else {
@@ -46,7 +46,7 @@ function showError(msg) {
 
 async function submitGenerate(evt) {
     try {
-        if (!isUrlInputValid()) {
+        if (!isGeneratorUrlValid(urlInput.value)) {
             return;
         }
 
@@ -75,7 +75,7 @@ async function submitGenerate(evt) {
             }
         });
         downloadIndicator.style.opacity = 0;
-        presentProject(project);
+        presentProject(project, id);
     } catch (error) {
         console.error(error);
         showError(`Sorry, there was an error loading that project.`);
@@ -128,9 +128,24 @@ const targetList = document.getElementById('target-list');
 const scriptArea = document.getElementById('script-area');
 
 let project;
+let projectID;
 let selectedTarget;
 const sym = Symbol();
 
+function updateDisplayedUrl() {
+    let value;
+    if (projectID) {
+        value = projectID;
+        if (selectedTarget) {
+            value += ':' + selectedTarget.name;
+        }
+    } else {
+        value = ''
+    }
+    urlInput.value = value;
+    location.hash = '#' + value;
+}
+
 function presentTarget(targetName, {autoload = false} = {}) {
     if (!project) {
         return;
@@ -156,6 +171,7 @@ function presentTarget(targetName, {autoload = false} = {}) {
     }
 
     selectedTarget = target;
+    updateDisplayedUrl();
 
     if (target[sym]) {
         Object.assign(scriptArea, {
@@ -205,8 +221,9 @@ function presentTarget(targetName, {autoload = false} = {}) {
     });
 }
 
-function presentProject(p) {
+function presentProject(p, id = null) {
     project = p;
+    projectID = id;
 
     clearChildren(targetList);
     for (const target of [project.stage, ...project.sprites]) {
@@ -229,4 +246,21 @@ function presentProject(p) {
         const targetName = decodeURIComponent(location.hash.slice(location.hash.indexOf(':') + 1));
         presentTarget(targetName, {autoload: true});
     }
+
+    updateDisplayedUrl();
 }
+
+window.addEventListener('hashchange', evt => {
+    const v = decodeURIComponent(location.hash.slice(1));
+    if (!isGeneratorUrlValid(v)) {
+        return;
+    }
+    const id = v.match(/[0-9]+/)[0];
+    if (id !== projectID) {
+        urlInput.value = v;
+        submitGenerate();
+    } else if (v.includes(':')) {
+        const targetName = v.slice(v.indexOf(':') + 1);
+        presentTarget(targetName);
+    }
+});