Merge pull request #247 from cuthbertLab/sandbox-stores

Sandbox stores last values
cuthbertLab · Mar 8, 2024 · 8f45633 · 8f45633
2 parents c83395b + 613e064
commit 8f45633
Showing 1 changed file with 29 additions and 22 deletions.
diff --git a/testHTML/m21jSandbox.html b/testHTML/m21jSandbox.html
@@ -32,6 +32,7 @@
 
 <body>
 <div class="header">
+    <button id="resetButton" role="button" style="float: right">Reset</button>
     <h1>Music21j Sandbox</h1>
     <div class="main">
         <label for="sandbox">
@@ -47,14 +48,23 @@ <h1>Music21j Sandbox</h1>
         <p></p>
         <div class="example sandbox">
             <textarea id="sandbox" class="editor">
+            </textarea>
+            <p></p>
+            <div class='streamHolding' id='mainSVG'>
+                <svg width="525" height="220"></svg>
+            </div>
+            <p></p>
+        </div>
+    </div>
+</div>
+<script>
+    let timeout;
+
+    const default_text = `
 const s = new music21.stream.Measure();
 const n = new music21.note.Note("C#4");
-n.addLyric('lulli-');
-n.addLyric('sad');
 n.duration.type = "half";
-const n2 = new music21.note.Note("A3");
-n2.addLyric('bye');
-n2.addLyric('day');
+const n2 = new music21.note.Note("A4");
 n2.duration.type = "quarter";
 const n3 = new music21.note.Note("C#");
 n3.duration.type = "quarter";
@@ -64,32 +74,28 @@ <h1>Music21j Sandbox</h1>
 s.append(n3);
 s.renderOptions.marginBottom = 80;
 s.replaceDOM('#mainSVG');
-</textarea>
-            <p></p>
-            <div class='streamHolding' id='mainSVG'>
-                <svg width="525" height="220"></svg>
-            </div>
-            <p></p>
-        </div>
-    </div>
-</div>
-<script>
-    Vex = undefined;
-    mainSVG = undefined;
-    let timeout;
-    let msg = "";
+    `;
 
-    mainSVG = document.querySelector("#mainSVG");
-    msg = document.querySelector('div.editor-error .text');
+    const mainSVG = document.querySelector("#mainSVG");
+    const msg = document.querySelector('div.editor-error .text');
     const sandbox = document.querySelector("#sandbox");
+    const localStorageKey = 'm21j_sandbox_code';
+    const local_storage_value = localStorage.getItem(localStorageKey);
+    sandbox.value = local_storage_value || default_text;
+    document.querySelector('#resetButton').addEventListener('click', () => {
+        sandbox.value = default_text;
+        localStorage.removeItem(localStorageKey);
+        live_code();
+    });
+
     live_code();
 
     for (const evt of ['blur', 'keyup', 'paste']) {
         sandbox.addEventListener(evt, () => {
             if (timeout) {
                 clearTimeout(timeout);
             }
-            timeout = setTimeout(live_code, 200);
+            timeout = setTimeout(live_code, 250);
         });
     }
 
@@ -100,6 +106,7 @@ <h1>Music21j Sandbox</h1>
             eval(code);
             msg.innerHTML = '';
             msg.style.display = 'none';
+            localStorage.setItem(localStorageKey, code);
         } catch (e) {
             msg.innerHTML = e.toString();
             msg.style.display = 'block';