Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Saving playground code state #1917

Merged
merged 17 commits into from
Mar 22, 2024
Merged
Show file tree
Hide file tree
Changes from 7 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion book.toml
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ urlcolor = "red"

[output.html]
curly-quotes = true
additional-js = ["theme/speaker-notes.js", "theme/redbox.js"]
additional-js = ["theme/speaker-notes.js", "theme/additional.js"]
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, I thought you meant adding a new JS file for this functionality, rather than moving the existing red-box functionality too. Maybe keep theme/redbox.js and move this new functionality into theme/save-playgrounds.js?

additional-css = [
"theme/css/svgbob.css",
"theme/css/redbox.css",
Expand Down
30 changes: 30 additions & 0 deletions theme/redbox.js → theme/additional.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,3 +36,33 @@
}
});
})();

function setCodeToPlayground() {
var codes = JSON.parse(localStorage.getItem(window.location.href));
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]);
editor.clearSelection();
i += 1;
});
}
}
setCodeToPlayground();
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

minor point: this is a bit hard to spot here. Please move the whole thing to an IIFE, like the red-box functionality, and put the immediately-evaluated statements at the bottom:

(function savePlaygrounds() {
  function setCodeToPlayground() ..
  function getCodeFromPlaground() ..

  setCodeToPlayground();
  setInterval(getCodeFromPlayground, 900);
})()

function getCodeFromPlayground() {
var codes = [];
Array.from(document.querySelectorAll(".playground")).forEach(function (
pre_block
) {
let code_block = pre_block.querySelector("code");
let editor = window.ace.edit(code_block);
let code = editor.getValue();
codes.push(code);
});
localStorage.setItem(window.location.href, JSON.stringify(codes));
}
setInterval(getCodeFromPlayground, 900);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems like it will wake up the browser frequently even if nothing has changed. I wonder if we could either do this on some event indicating the browser is navigating away (maybe https://developer.mozilla.org/en-US/docs/Web/API/Window/pagehide_event?) or on a timer after the user has modified something in the editor.