From 9e1cda8f45cea1707c5a228d5ce79b4cd81566f8 Mon Sep 17 00:00:00 2001
From: Beka Westberg <bwestberg@google.com>
Date: Mon, 14 Mar 2022 18:24:59 +0000
Subject: [PATCH] fix: playground access to Blockly

---
 tests/playground.html         | 57 +++++++++++++++++++++++++++--------
 tests/playgrounds/blockly.mjs |  3 +-
 2 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/tests/playground.html b/tests/playground.html
index 0e2a01a7044..cee6bb3098e 100644
--- a/tests/playground.html
+++ b/tests/playground.html
@@ -84,6 +84,8 @@
   if (autoimport) {
     load();
   }
+
+  addClickHandlers();
 }
 
 function setBackgroundColour() {
@@ -384,6 +386,35 @@
 // Call start().  Because this <script> has type=module, it is
 // automatically deferred, so it will not be run until after the
 // document has been parsed, but before firing DOMContentLoaded.
+
+function addClickHandlers() {
+  document.getElementById('save-json').addEventListener('click', saveJson);
+  document.getElementById('save-xml').addEventListener('click', saveXml);
+  document.getElementById('import').addEventListener('click', load);
+
+  document.getElementById('to-code-js')
+      .addEventListener('click', () => toCode('JavaScript'));
+  document.getElementById('to-code-py')
+      .addEventListener('click', () => toCode('Python'));
+  document.getElementById('to-code-php')
+      .addEventListener('click', () => toCode('PHP'));
+  document.getElementById('to-code-lua')
+      .addEventListener('click', () => toCode('Lua'));
+  document.getElementById('to-code-dart')
+      .addEventListener('click', () => toCode('Dart'));
+
+  document.getElementById('airstrike')
+      .addEventListener('click', () => airstrike(100));
+  document.getElementById('spaghetti-xml')
+      .addEventListener('click', () => spaghetti(8));
+  document.getElementById('spaghetti-js')
+      .addEventListener('click', () => jsoSpaghetti(8));
+
+  document.getElementById('logCheck')
+      .addEventListener('click', function() { logEvents(this.checked) });
+  document.getElementById('logFlyoutCheck')
+      .addEventListener('click', function() { logFlyoutEvents(this.checked) });
+}
   
 start();
 
@@ -459,15 +490,15 @@ <h1>Blockly Playground</h1>
     </select>
   </form>
   <p>
-    <input type="button" value="Save JSON" onclick="saveJson()">
-    <input type="button" value="Save XML" onclick="saveXml()">
-    <input type="button" value="Load" onclick="load()" id="import">
+    <input id="save-json" type="button" value="Save JSON">
+    <input id="save-xml" type="button" value="Save XML">
+    <input type="button" value="Load" id="import">
     <br>
-    <input type="button" value="To JavaScript" onclick="toCode('JavaScript')">
-    <input type="button" value="To Python" onclick="toCode('Python')">
-    <input type="button" value="To PHP" onclick="toCode('PHP')">
-    <input type="button" value="To Lua" onclick="toCode('Lua')">
-    <input type="button" value="To Dart" onclick="toCode('Dart')">
+    <input id="to-code-js" type="button" value="To JavaScript">
+    <input id="to-code-py" type="button" value="To Python">
+    <input id="to-code-php" type="button" value="To PHP">
+    <input id="to-code-lua" type="button" value="To Lua">
+    <input id="to-code-dart" type="button" value="To Dart">
     <br>
     <textarea id="importExport" style="width: 26%; height: 12em"
       onchange="taChange();" onkeyup="taChange()"></textarea>
@@ -475,18 +506,18 @@ <h1>Blockly Playground</h1>
 
   <p>
     Stress test: &nbsp;
-    <input type="button" value="Airstrike!" onclick="airstrike(100)">
-    <input type="button" value="Spaghetti!" onclick="spaghetti(8)">
-    <input type="button" value="JS Spaghetti!" onclick="jsoSpaghetti(8)">
+    <input id="airstrike" type="button" value="Airstrike!">
+    <input id="spaghetti-xml" type="button" value="Spaghetti!">
+    <input id="spaghetti-js" type="button" value="JS Spaghetti!">
   </p>
   <ul class="playgroundToggleOptions">
     <li>
       <label for="logCheck">Log main workspace events:</label>
-      <input type="checkbox" onclick="logEvents(this.checked)" id="logCheck">
+      <input type="checkbox" id="logCheck">
     </li>
     <li>
     <label for="logFlyoutCheck">Log flyout events:</label>
-    <input type="checkbox" onclick="logFlyoutEvents(this.checked)" id="logFlyoutCheck">
+    <input type="checkbox" id="logFlyoutCheck">
   </li>
   </ul>
 
diff --git a/tests/playgrounds/blockly.mjs b/tests/playgrounds/blockly.mjs
index dcbc95a6d82..cb836f5399b 100644
--- a/tests/playgrounds/blockly.mjs
+++ b/tests/playgrounds/blockly.mjs
@@ -27,7 +27,8 @@ if (window.BlocklyLoader) {
   // Uncompiled mode.  Use top-level await
   // (https://v8.dev/features/top-level-await) to block loading of
   // this module until goog.bootstrap()ping of Blockly is finished.
-  Blockly = await window.BlocklyLoader;
+  await window.BlocklyLoader;
+  Blockly = globalThis.Blockly;
 } else if (window.Blockly) {
   // Compiled mode.  Retrieve the pre-installed Blockly global.
   Blockly = globalThis.Blockly;