Saving the playground state in local storage (#1942)

#1476 issue. Updated the function call(`getCodeFromPlayground`) in
`save-playground.js` file from `pagehide` event to change event in ace
editor.

---------

Co-authored-by: Martin Geisler <mgeisler@google.com>

Author: mani-chand

book.toml

@@ -48,6 +48,9 @@ urlcolor = "red"
 curly-quotes = true
 additional-js = [
   "theme/speaker-notes.js",
+  "theme/redbox.js",
+  "theme/save-playgrounds.js",
+  "theme/instructor-menu.js",
 ]
 additional-css = [
   "theme/css/svgbob.css",

theme/instructor-menu.js

@@ -24,10 +24,10 @@
     instructorMenu.title = "Utilities for course instructors";
     instructorMenu.innerHTML =
       '<i class="fa fa-ellipsis-v" aria-hidden="true"></i>';
-    redBoxButton.innerHTML = "aspect-ratio box";
+    redBoxButton.innerHTML = "Toggle aspect-ratio box";
     redBoxButton.title =
       "Outline the area that fits on one screen while teaching the course.";
-    playgroundStateButton.innerHTML = "reset all playgrounds";
+    playgroundStateButton.innerHTML = "Reset all playgrounds";
     playgroundStateButton.title =
       "Reset code in all playgrounds to its original value.";
 

theme/save-playgrounds.js

@@ -1,41 +1,54 @@
 (function savePlaygrounds() {
   function setCodeToPlayground() {
-    var codes = JSON.parse(
-      localStorage.getItem(`${window.location.href}₹code`)
-    );
-    if (codes) {
-      var i = 0;
-      Array.from(document.querySelectorAll(".playground")).forEach(function (
-        pre_block
-      ) {
-        let code_block = pre_block.querySelector("code");
-        let editor = window.ace.edit(code_block);
-        editor.setValue(codes[i]);
+    Array.from(document.querySelectorAll(".playground")).forEach(function (
+      pre_block,
+      index
+    ) {
+      let code_block = pre_block.querySelector("code");
+      let editor = window.ace.edit(code_block);
+      code = JSON.parse(
+        localStorage.getItem(`${window.location.href}₹${index}`)
+      );
+      if (code) {
+        editor.setValue(code);
         editor.clearSelection();
-        i += 1;
-      });
-    }
+      }
+    });
   }
   function getCodeFromPlayground() {
-    var codes = [];
     Array.from(document.querySelectorAll(".playground")).forEach(function (
-      pre_block
+      pre_block,
+      index
     ) {
       let code_block = pre_block.querySelector("code");
       let editor = window.ace.edit(code_block);
-      let code = editor.getValue();
-      codes.push(code);
+      editor.session.on("change", function () {
+        let code = editor.getValue();
+        localStorage.setItem(
+          `${window.location.href}₹${index}`,
+          JSON.stringify(code)
+        );
+      });
     });
-    localStorage.setItem(`${window.location.href}₹code`, JSON.stringify(codes));
   }
   setCodeToPlayground();
-  addEventListener("pagehide", getCodeFromPlayground);
+  getCodeFromPlayground();
 })();
 
 function resetPlaygroundsClicked() {
+  Array.from(document.querySelectorAll(".playground")).forEach(function (
+    pre_block,
+    index
+  ) {
+    let code_block = pre_block.querySelector("code");
+    let editor = window.ace.edit(code_block);
+    editor.setValue(editor.originalCode);
+    editor.clearSelection();
+  });
+
   let keys = [];
   for (var i = 0, len = localStorage.length; i < len; i++) {
-    if (localStorage.key(i).includes("₹code")) {
+    if (localStorage.key(i).includes("₹")) {
       keys.push(localStorage.key(i));
     }
   }