From 6fdae32ad5ecdf1deba3970235f6abcacdef52e7 Mon Sep 17 00:00:00 2001 From: Manichand Kondapaka Date: Mon, 11 Mar 2024 17:11:58 +0000 Subject: [PATCH 01/17] saving playground code state --- theme/redbox.js | 65 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 65 insertions(+) diff --git a/theme/redbox.js b/theme/redbox.js index dd8a1c31380..d0a01f17bd6 100644 --- a/theme/redbox.js +++ b/theme/redbox.js @@ -36,3 +36,68 @@ } }); })(); + +function setCodeToPlayground() { + const code = JSON.parse(localStorage.getItem(window.location.href)); + console.log(code) + if (code) { + const playground = document.getElementsByClassName('ace_text-layer')[0] + while (playground.firstElementChild) { + console.log(playground.firstElementChild.innerText.replace(/\s+/g, ' ')) + playground.removeChild(playground.firstElementChild); + } + console.log(playground, "after removal") + for (let i = 0; i < code.length; i++) { + let parentDiv = code[i][0] + let spanChild = code[i][1] + let div = document.createElement(parentDiv.tag) + div.style.height = "17.5938px" + div.style.top = `${17.5938 * i}px` + for (let cls in parentDiv.classes) { + div.classList.add(parentDiv.classes[cls]) + } + for (let j = 0; j < spanChild.length; j++) { + //console.log(spanChild[j].styles,typeof(spanChild[j].styles)) + let span = document.createElement(spanChild[j].tag) + //span.classList = spanChild[j].classes + for (let cls in spanChild[j].classes) { + span.classList.add(spanChild[j].classes[cls]) + } + span.innerText = spanChild[j].text + div.insertBefore(span, div.lastChild) + } + playground.insertBefore(div, playground.lastChild) + } + } + localStorage.removeItem(window.location.href) +} + +window.onunload = setTimeout(setCodeToPlayground, 5000) +function getCodeFromPlayground() { + console.log("getCodeFromPlayground") + const playground = document.getElementsByClassName('ace_text-layer')[0].children + var code = [] + for (let i = 0; i < playground.length; i++) { + let parentCodeList = { + tag: playground[i].tagName, + classes: playground[i].classList, + styles: playground[i].style + } + var line = [] + for (let j = 0; j < playground[i].children.length; j++) { + console.log(playground[i].innerHTML) + let codeList = { + tag: playground[i].children[j].tagName, + text: playground[i].children[j].innerText, + classes: playground[i].children[j].classList, + styles: playground[i].children[j].style, + } + line.push(codeList) + } + code.push([parentCodeList, line]) + } + console.log(code) + //localStorage.removeItem(window.location.href) + localStorage.setItem(window.location.href, JSON.stringify(code)) +} +addEventListener('beforeunload', getCodeFromPlayground()) \ No newline at end of file From 65e4327d5745c5b7d8343c04faf1bc253ef402ca Mon Sep 17 00:00:00 2001 From: Manichand Date: Mon, 11 Mar 2024 22:53:00 +0530 Subject: [PATCH 02/17] Formatted code --- theme/redbox.js | 61 +++++++++++++++++++++++++------------------------ 1 file changed, 31 insertions(+), 30 deletions(-) diff --git a/theme/redbox.js b/theme/redbox.js index d0a01f17bd6..230063d53dd 100644 --- a/theme/redbox.js +++ b/theme/redbox.js @@ -39,65 +39,66 @@ function setCodeToPlayground() { const code = JSON.parse(localStorage.getItem(window.location.href)); - console.log(code) + console.log(code); if (code) { - const playground = document.getElementsByClassName('ace_text-layer')[0] + const playground = document.getElementsByClassName("ace_text-layer")[0]; while (playground.firstElementChild) { - console.log(playground.firstElementChild.innerText.replace(/\s+/g, ' ')) + console.log(playground.firstElementChild.innerText.replace(/\s+/g, " ")); playground.removeChild(playground.firstElementChild); } - console.log(playground, "after removal") + console.log(playground, "after removal"); for (let i = 0; i < code.length; i++) { - let parentDiv = code[i][0] - let spanChild = code[i][1] - let div = document.createElement(parentDiv.tag) - div.style.height = "17.5938px" - div.style.top = `${17.5938 * i}px` + let parentDiv = code[i][0]; + let spanChild = code[i][1]; + let div = document.createElement(parentDiv.tag); + div.style.height = "17.5938px"; + div.style.top = `${17.5938 * i}px`; for (let cls in parentDiv.classes) { - div.classList.add(parentDiv.classes[cls]) + div.classList.add(parentDiv.classes[cls]); } for (let j = 0; j < spanChild.length; j++) { //console.log(spanChild[j].styles,typeof(spanChild[j].styles)) - let span = document.createElement(spanChild[j].tag) + let span = document.createElement(spanChild[j].tag); //span.classList = spanChild[j].classes for (let cls in spanChild[j].classes) { - span.classList.add(spanChild[j].classes[cls]) + span.classList.add(spanChild[j].classes[cls]); } - span.innerText = spanChild[j].text - div.insertBefore(span, div.lastChild) + span.innerText = spanChild[j].text; + div.insertBefore(span, div.lastChild); } - playground.insertBefore(div, playground.lastChild) + playground.insertBefore(div, playground.lastChild); } } - localStorage.removeItem(window.location.href) + localStorage.removeItem(window.location.href); } -window.onunload = setTimeout(setCodeToPlayground, 5000) +window.onunload = setTimeout(setCodeToPlayground, 5000); function getCodeFromPlayground() { - console.log("getCodeFromPlayground") - const playground = document.getElementsByClassName('ace_text-layer')[0].children - var code = [] + console.log("getCodeFromPlayground"); + const playground = + document.getElementsByClassName("ace_text-layer")[0].children; + var code = []; for (let i = 0; i < playground.length; i++) { let parentCodeList = { tag: playground[i].tagName, classes: playground[i].classList, - styles: playground[i].style - } - var line = [] + styles: playground[i].style, + }; + var line = []; for (let j = 0; j < playground[i].children.length; j++) { - console.log(playground[i].innerHTML) + console.log(playground[i].innerHTML); let codeList = { tag: playground[i].children[j].tagName, text: playground[i].children[j].innerText, classes: playground[i].children[j].classList, styles: playground[i].children[j].style, - } - line.push(codeList) + }; + line.push(codeList); } - code.push([parentCodeList, line]) + code.push([parentCodeList, line]); } - console.log(code) + console.log(code); //localStorage.removeItem(window.location.href) - localStorage.setItem(window.location.href, JSON.stringify(code)) + localStorage.setItem(window.location.href, JSON.stringify(code)); } -addEventListener('beforeunload', getCodeFromPlayground()) \ No newline at end of file +addEventListener("beforeunload", getCodeFromPlayground()); From 61403a5a241dd812012133050603b6fb0b7a6651 Mon Sep 17 00:00:00 2001 From: Manichand Date: Wed, 13 Mar 2024 22:28:19 +0530 Subject: [PATCH 03/17] Saving code of playground by local storage using ace api. --- theme/redbox.js | 82 +++++++++++++------------------------------------ 1 file changed, 21 insertions(+), 61 deletions(-) diff --git a/theme/redbox.js b/theme/redbox.js index 230063d53dd..9c962851be8 100644 --- a/theme/redbox.js +++ b/theme/redbox.js @@ -38,67 +38,27 @@ })(); function setCodeToPlayground() { - const code = JSON.parse(localStorage.getItem(window.location.href)); - console.log(code); - if (code) { - const playground = document.getElementsByClassName("ace_text-layer")[0]; - while (playground.firstElementChild) { - console.log(playground.firstElementChild.innerText.replace(/\s+/g, " ")); - playground.removeChild(playground.firstElementChild); - } - console.log(playground, "after removal"); - for (let i = 0; i < code.length; i++) { - let parentDiv = code[i][0]; - let spanChild = code[i][1]; - let div = document.createElement(parentDiv.tag); - div.style.height = "17.5938px"; - div.style.top = `${17.5938 * i}px`; - for (let cls in parentDiv.classes) { - div.classList.add(parentDiv.classes[cls]); - } - for (let j = 0; j < spanChild.length; j++) { - //console.log(spanChild[j].styles,typeof(spanChild[j].styles)) - let span = document.createElement(spanChild[j].tag); - //span.classList = spanChild[j].classes - for (let cls in spanChild[j].classes) { - span.classList.add(spanChild[j].classes[cls]); - } - span.innerText = spanChild[j].text; - div.insertBefore(span, div.lastChild); - } - playground.insertBefore(div, playground.lastChild); - } + 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 + }) } - localStorage.removeItem(window.location.href); } - -window.onunload = setTimeout(setCodeToPlayground, 5000); +setTimeout(setCodeToPlayground, 100); function getCodeFromPlayground() { - console.log("getCodeFromPlayground"); - const playground = - document.getElementsByClassName("ace_text-layer")[0].children; - var code = []; - for (let i = 0; i < playground.length; i++) { - let parentCodeList = { - tag: playground[i].tagName, - classes: playground[i].classList, - styles: playground[i].style, - }; - var line = []; - for (let j = 0; j < playground[i].children.length; j++) { - console.log(playground[i].innerHTML); - let codeList = { - tag: playground[i].children[j].tagName, - text: playground[i].children[j].innerText, - classes: playground[i].children[j].classList, - styles: playground[i].children[j].style, - }; - line.push(codeList); - } - code.push([parentCodeList, line]); - } - console.log(code); - //localStorage.removeItem(window.location.href) - localStorage.setItem(window.location.href, JSON.stringify(code)); -} -addEventListener("beforeunload", 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) From 58b36a194a4b87db11556b27562e8cc12485cbfb Mon Sep 17 00:00:00 2001 From: Manichand Date: Wed, 13 Mar 2024 22:28:49 +0530 Subject: [PATCH 04/17] Formatted --- theme/redbox.js | 34 +++++++++++++++++++--------------- 1 file changed, 19 insertions(+), 15 deletions(-) diff --git a/theme/redbox.js b/theme/redbox.js index 9c962851be8..96e25270320 100644 --- a/theme/redbox.js +++ b/theme/redbox.js @@ -39,26 +39,30 @@ function setCodeToPlayground() { var codes = JSON.parse(localStorage.getItem(window.location.href)); - if(codes){ + 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 - }) + 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; + }); } } setTimeout(setCodeToPlayground, 100); function getCodeFromPlayground() { - var codes = [] - Array.from(document.querySelectorAll(".playground")).forEach(function (pre_block) { + 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) + codes.push(code); + }); + localStorage.setItem(window.location.href, JSON.stringify(codes)); +} +setInterval(getCodeFromPlayground, 900); From 9a42d76e6579d532e4c9a5132d47c1f5ba00688c Mon Sep 17 00:00:00 2001 From: Manichand Date: Wed, 13 Mar 2024 22:34:37 +0530 Subject: [PATCH 05/17] updated setCodeToPlayground function call --- theme/redbox.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/theme/redbox.js b/theme/redbox.js index 96e25270320..fe02695b703 100644 --- a/theme/redbox.js +++ b/theme/redbox.js @@ -52,7 +52,7 @@ function setCodeToPlayground() { }); } } -setTimeout(setCodeToPlayground, 100); +setCodeToPlayground() function getCodeFromPlayground() { var codes = []; Array.from(document.querySelectorAll(".playground")).forEach(function ( From 23f7592454d3caaebdd3c5237882098396f821ea Mon Sep 17 00:00:00 2001 From: Manichand Date: Wed, 13 Mar 2024 22:38:28 +0530 Subject: [PATCH 06/17] code Formatted --- theme/redbox.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/theme/redbox.js b/theme/redbox.js index fe02695b703..480b3eae0c6 100644 --- a/theme/redbox.js +++ b/theme/redbox.js @@ -52,7 +52,7 @@ function setCodeToPlayground() { }); } } -setCodeToPlayground() +setCodeToPlayground(); function getCodeFromPlayground() { var codes = []; Array.from(document.querySelectorAll(".playground")).forEach(function ( From 5a2743345b99a05e7f4d49adad8138575fb8a514 Mon Sep 17 00:00:00 2001 From: Manichand Date: Thu, 14 Mar 2024 10:15:02 +0530 Subject: [PATCH 07/17] Renamed redbox.js to additional.js --- book.toml | 2 +- theme/{redbox.js => additional.js} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename theme/{redbox.js => additional.js} (100%) diff --git a/book.toml b/book.toml index f35932559f0..93d4515a2b8 100644 --- a/book.toml +++ b/book.toml @@ -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"] additional-css = [ "theme/css/svgbob.css", "theme/css/redbox.css", diff --git a/theme/redbox.js b/theme/additional.js similarity index 100% rename from theme/redbox.js rename to theme/additional.js From 7c51897c79a3cbef47e7ea94acd44bec15015a8c Mon Sep 17 00:00:00 2001 From: Manichand Date: Tue, 19 Mar 2024 09:53:47 +0530 Subject: [PATCH 08/17] Updated get and set code function for playground. --- book.toml | 2 +- theme/{additional.js => redbox.js} | 29 ---------------------------- theme/save-playgrounds.js | 31 ++++++++++++++++++++++++++++++ 3 files changed, 32 insertions(+), 30 deletions(-) rename theme/{additional.js => redbox.js} (66%) create mode 100644 theme/save-playgrounds.js diff --git a/book.toml b/book.toml index 93d4515a2b8..1700aecf03e 100644 --- a/book.toml +++ b/book.toml @@ -46,7 +46,7 @@ urlcolor = "red" [output.html] curly-quotes = true -additional-js = ["theme/speaker-notes.js", "theme/additional.js"] +additional-js = ["theme/speaker-notes.js", "theme/redbox.js", "theme/save-playgrounds.js"] additional-css = [ "theme/css/svgbob.css", "theme/css/redbox.css", diff --git a/theme/additional.js b/theme/redbox.js similarity index 66% rename from theme/additional.js rename to theme/redbox.js index 480b3eae0c6..1a6eb8461b7 100644 --- a/theme/additional.js +++ b/theme/redbox.js @@ -37,32 +37,3 @@ }); })(); -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(); -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); diff --git a/theme/save-playgrounds.js b/theme/save-playgrounds.js new file mode 100644 index 00000000000..abb1923376d --- /dev/null +++ b/theme/save-playgrounds.js @@ -0,0 +1,31 @@ +(function savePlaygrounds() { + 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; + }); + } + } + 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)); + } + setCodeToPlayground(); + addEventListener("pagehide", getCodeFromPlayground); + })() \ No newline at end of file From 8fea0af066c81b6b677c5035c8d5a66a34d43835 Mon Sep 17 00:00:00 2001 From: Manichand Date: Tue, 19 Mar 2024 09:56:17 +0530 Subject: [PATCH 09/17] code formatted --- theme/save-playgrounds.js | 60 +++++++++++++++++++-------------------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/theme/save-playgrounds.js b/theme/save-playgrounds.js index abb1923376d..45d9be05b25 100644 --- a/theme/save-playgrounds.js +++ b/theme/save-playgrounds.js @@ -1,31 +1,31 @@ -(function savePlaygrounds() { - 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; - }); - } +(function savePlaygrounds() { + 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; + }); } - 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)); - } - setCodeToPlayground(); - addEventListener("pagehide", getCodeFromPlayground); - })() \ No newline at end of file + } + 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)); + } + setCodeToPlayground(); + addEventListener("pagehide", getCodeFromPlayground); +})(); From 55729b0fe9e34b9df4c58a54b22cc5dbf90215bb Mon Sep 17 00:00:00 2001 From: Manichand Date: Tue, 19 Mar 2024 09:59:14 +0530 Subject: [PATCH 10/17] code formatted --- book.toml | 6 +++- theme/redbox.js | 1 - theme/save-playgrounds.js | 62 +++++++++++++++++++-------------------- 3 files changed, 36 insertions(+), 33 deletions(-) diff --git a/book.toml b/book.toml index 1700aecf03e..cc9552a4a33 100644 --- a/book.toml +++ b/book.toml @@ -46,7 +46,11 @@ urlcolor = "red" [output.html] curly-quotes = true -additional-js = ["theme/speaker-notes.js", "theme/redbox.js", "theme/save-playgrounds.js"] +additional-js = [ + "theme/speaker-notes.js", + "theme/redbox.js", + "theme/save-playgrounds.js", +] additional-css = [ "theme/css/svgbob.css", "theme/css/redbox.css", diff --git a/theme/redbox.js b/theme/redbox.js index 1a6eb8461b7..dd8a1c31380 100644 --- a/theme/redbox.js +++ b/theme/redbox.js @@ -36,4 +36,3 @@ } }); })(); - diff --git a/theme/save-playgrounds.js b/theme/save-playgrounds.js index 45d9be05b25..f0bc3b63459 100644 --- a/theme/save-playgrounds.js +++ b/theme/save-playgrounds.js @@ -1,31 +1,31 @@ -(function savePlaygrounds() { - 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; - }); - } - } - 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)); - } - setCodeToPlayground(); - addEventListener("pagehide", getCodeFromPlayground); -})(); +(function savePlaygrounds() { + 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; + }); + } + } + 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)); + } + setCodeToPlayground(); + addEventListener("pagehide", getCodeFromPlayground); +})(); From c12f27793f902c47a4a29c1fbbd0b6cd1396ad3a Mon Sep 17 00:00:00 2001 From: Manichand Date: Thu, 21 Mar 2024 00:14:09 +0530 Subject: [PATCH 11/17] added reset playground code function --- theme/redbox.js | 137 ++++++++++++++++++++++++++++---------- theme/save-playgrounds.js | 6 +- 2 files changed, 104 insertions(+), 39 deletions(-) diff --git a/theme/redbox.js b/theme/redbox.js index dd8a1c31380..1cf678925bb 100644 --- a/theme/redbox.js +++ b/theme/redbox.js @@ -1,38 +1,101 @@ -(function redBoxButton() { - // Create a new div element - var newDiv = document.createElement("div"); - // Set the id attribute of the new div - newDiv.id = "aspect-ratio-helper"; - // Create a nested div inside the new div - var nestedDiv = document.createElement("div"); - // Append the nested div to the new div - newDiv.appendChild(nestedDiv, newDiv.firstChild); - // Get the parent element where you want to append the new div - var parentElement = document.body; // Change this to your desired parent element - // Append the new div to the parent element - parentElement.insertBefore(newDiv, parentElement.firstChild); - // Create the button element - var hideShowButton = document.createElement("button"); - hideShowButton.innerHTML = ''; - hideShowButton.className = "icon-button"; - hideShowButton.type = "button"; - hideShowButton.title = - "Outline the area that fits on one screen while teaching the course."; - hideShowButton.id = "Dev"; - var navbarButtons = document.getElementsByClassName("left-buttons"); - navbarButtons[0].insertBefore(hideShowButton, navbarButtons.firstChild); - //Default hiding the redbox - document.getElementById("aspect-ratio-helper").style.display = "none"; - //Add Event listener to button to perform on click action. - hideShowButton.addEventListener("click", function () { - if ( - document.getElementById("aspect-ratio-helper").style.display === "none" - ) { - document.getElementById("aspect-ratio-helper").style.display = "block"; - hideShowButton.innerHTML = ''; - } else { - document.getElementById("aspect-ratio-helper").style.display = "none"; - hideShowButton.innerHTML = ''; - } - }); +(function handleInstructor(params) { + function handleInstructorMenu() { + let leftButtons = document.getElementsByClassName("left-buttons")[0]; + let instructorMenu = document.createElement("button"); + let instructorMenuList = document.createElement("ul"); + let redBoxItem = document.createElement("li"); + let redBoxButton = document.createElement("button"); + let playgroundStateItem = document.createElement("li"); + let playgroundStateButton = document.createElement("button"); + + leftButtons.insertBefore(instructorMenu, leftButtons.lastChild); + leftButtons.insertBefore(instructorMenuList, leftButtons.lastChild); + instructorMenuList.insertBefore(redBoxItem, instructorMenuList.lastChild); + instructorMenuList.insertBefore( + playgroundStateItem, + instructorMenuList.lastChild + ); + redBoxItem.insertBefore(redBoxButton, redBoxItem.lastChild); + playgroundStateItem.insertBefore( + playgroundStateButton, + playgroundStateItem.lastChild + ); + + instructorMenu.innerHTML = + ''; + redBoxButton.innerHTML = "redbox"; + playgroundStateButton.innerHTML = "reset code"; + + instructorMenu.className = "icon-button"; + instructorMenuList.className = "theme-popup"; + redBoxButton.className = "theme"; + playgroundStateButton.className = "theme"; + instructorMenuList.style.display = "none"; + + instructorMenuList.role = "menu"; + redBoxItem.role = "none"; + playgroundStateItem.role = "none"; + redBoxButton.role = "menuitem"; + playgroundStateButton.role = "menuitem"; + + redBoxButton.id = "redbox"; + + instructorMenuList.style.marginLeft = "55px"; + + instructorMenu.addEventListener("click", () => { + if (instructorMenuList.style.display === "none") { + instructorMenuList.style.display = "block"; + } else { + instructorMenuList.style.display = "none"; + } + }); + + playgroundStateButton.addEventListener("click", () => { + let keys = []; + for (var i = 0, len = localStorage.length; i < len; i++) { + if (localStorage.key(i).includes("₹code")) { + keys.push(localStorage.key(i)); + } + } + for (let j = 0; j < keys.length; j++) { + localStorage.removeItem(keys[j]); + } + }); + } + + function redBoxButton() { + // Create a new div element + var newDiv = document.createElement("div"); + // Set the id attribute of the new div + newDiv.id = "aspect-ratio-helper"; + // Create a nested div inside the new div + var nestedDiv = document.createElement("div"); + // Append the nested div to the new div + newDiv.appendChild(nestedDiv, newDiv.firstChild); + // Get the parent element where you want to append the new div + var parentElement = document.body; // Change this to your desired parent element + // Append the new div to the parent element + parentElement.insertBefore(newDiv, parentElement.firstChild); + // Create the button element + var hideShowButton = document.getElementById("redbox"); + hideShowButton.title = + "Outline the area that fits on one screen while teaching the course."; + //Default hiding the redbox + document.getElementById("aspect-ratio-helper").style.display = "none"; + //Add Event listener to button to perform on click action. + hideShowButton.addEventListener("click", function () { + if ( + document.getElementById("aspect-ratio-helper").style.display === "none" + ) { + document.getElementById("aspect-ratio-helper").style.display = "block"; + hideShowButton.innerHTML = "redbox"; + } else { + document.getElementById("aspect-ratio-helper").style.display = "none"; + hideShowButton.innerHTML = "redbox"; + } + }); + } + + handleInstructorMenu(); + redBoxButton(); })(); diff --git a/theme/save-playgrounds.js b/theme/save-playgrounds.js index f0bc3b63459..319c41e0f4c 100644 --- a/theme/save-playgrounds.js +++ b/theme/save-playgrounds.js @@ -1,6 +1,8 @@ (function savePlaygrounds() { function setCodeToPlayground() { - var codes = JSON.parse(localStorage.getItem(window.location.href)); + var codes = JSON.parse( + localStorage.getItem(`${window.location.href}₹code`) + ); if (codes) { var i = 0; Array.from(document.querySelectorAll(".playground")).forEach(function ( @@ -24,7 +26,7 @@ let code = editor.getValue(); codes.push(code); }); - localStorage.setItem(window.location.href, JSON.stringify(codes)); + localStorage.setItem(`${window.location.href}₹code`, JSON.stringify(codes)); } setCodeToPlayground(); addEventListener("pagehide", getCodeFromPlayground); From 9d030374f65a6e03315ee8449057ccec1ddee012 Mon Sep 17 00:00:00 2001 From: Manichand Date: Thu, 21 Mar 2024 10:36:27 +0530 Subject: [PATCH 12/17] Requested changes --- book.toml | 1 + theme/css/redbox.css | 4 ++ theme/instructor-menu.js | 80 ++++++++++++++++++++++++ theme/redbox.js | 131 +++++++++------------------------------ 4 files changed, 115 insertions(+), 101 deletions(-) create mode 100644 theme/instructor-menu.js diff --git a/book.toml b/book.toml index cc9552a4a33..bbf28db8425 100644 --- a/book.toml +++ b/book.toml @@ -50,6 +50,7 @@ additional-js = [ "theme/speaker-notes.js", "theme/redbox.js", "theme/save-playgrounds.js", + "theme/instructor-menu.js", ] additional-css = [ "theme/css/svgbob.css", diff --git a/theme/css/redbox.css b/theme/css/redbox.css index 79e9ed99078..6f4b280e936 100644 --- a/theme/css/redbox.css +++ b/theme/css/redbox.css @@ -18,3 +18,7 @@ div#aspect-ratio-helper div { of vertical space to borders. */ aspect-ratio: 16/8.5; } + +#instructor-menu-list{ + margin-left: 55px; +} diff --git a/theme/instructor-menu.js b/theme/instructor-menu.js new file mode 100644 index 00000000000..c97ed65ef79 --- /dev/null +++ b/theme/instructor-menu.js @@ -0,0 +1,80 @@ +(function handleInstructor() { + function handleInstructorMenu() { + let leftButtons = document.getElementsByClassName("left-buttons")[0]; + let instructorMenu = document.createElement("button"); + let instructorMenuList = document.createElement("ul"); + let redBoxItem = document.createElement("li"); + let redBoxButton = document.createElement("button"); + let playgroundStateItem = document.createElement("li"); + let playgroundStateButton = document.createElement("button"); + + leftButtons.insertBefore(instructorMenu, leftButtons.lastChild); + leftButtons.insertBefore(instructorMenuList, leftButtons.lastChild); + instructorMenuList.insertBefore(redBoxItem, instructorMenuList.lastChild); + instructorMenuList.insertBefore( + playgroundStateItem, + instructorMenuList.lastChild + ); + redBoxItem.insertBefore(redBoxButton, redBoxItem.lastChild); + playgroundStateItem.insertBefore( + playgroundStateButton, + playgroundStateItem.lastChild + ); + + instructorMenu.title = "Utilities for course instructors"; + instructorMenu.innerHTML = + ''; + redBoxButton.innerHTML = "aspect-ratio box"; + redBoxButton.title = + "Outline the area that fits on one screen while teaching the course."; + playgroundStateButton.innerHTML = "reset all playgrounds"; + playgroundStateButton.title = + "Reset code in all playgrounds to its original value."; + + instructorMenu.className = "icon-button"; + instructorMenuList.className = "theme-popup"; + redBoxButton.className = "theme"; + playgroundStateButton.className = "theme"; + instructorMenuList.style.display = "none"; + + instructorMenuList.role = "menu"; + redBoxItem.role = "none"; + playgroundStateItem.role = "none"; + redBoxButton.role = "menuitem"; + playgroundStateButton.role = "menuitem"; + + redBoxButton.id = "redbox"; + instructorMenuList.id = "instructor-menu-list"; + + instructorMenu.addEventListener("click", () => { + if (instructorMenuList.style.display === "none") { + instructorMenuList.style.display = "block"; + } else { + instructorMenuList.style.display = "none"; + } + }); + + playgroundStateButton.addEventListener("click", () => { + let keys = []; + for (var i = 0, len = localStorage.length; i < len; i++) { + if (localStorage.key(i).includes("₹code")) { + keys.push(localStorage.key(i)); + } + } + for (let j = 0; j < keys.length; j++) { + localStorage.removeItem(keys[j]); + } + }); + + document.addEventListener("click", (e) => { + if ( + !instructorMenu.contains(e.target) && + !instructorMenuList.contains(e.target) + ) { + instructorMenuList.style.display = "none"; + } + }); + } + handleInstructorMenu(); + window.redBoxButton(); +})(); diff --git a/theme/redbox.js b/theme/redbox.js index 1cf678925bb..8ed1a633c42 100644 --- a/theme/redbox.js +++ b/theme/redbox.js @@ -1,101 +1,30 @@ -(function handleInstructor(params) { - function handleInstructorMenu() { - let leftButtons = document.getElementsByClassName("left-buttons")[0]; - let instructorMenu = document.createElement("button"); - let instructorMenuList = document.createElement("ul"); - let redBoxItem = document.createElement("li"); - let redBoxButton = document.createElement("button"); - let playgroundStateItem = document.createElement("li"); - let playgroundStateButton = document.createElement("button"); - - leftButtons.insertBefore(instructorMenu, leftButtons.lastChild); - leftButtons.insertBefore(instructorMenuList, leftButtons.lastChild); - instructorMenuList.insertBefore(redBoxItem, instructorMenuList.lastChild); - instructorMenuList.insertBefore( - playgroundStateItem, - instructorMenuList.lastChild - ); - redBoxItem.insertBefore(redBoxButton, redBoxItem.lastChild); - playgroundStateItem.insertBefore( - playgroundStateButton, - playgroundStateItem.lastChild - ); - - instructorMenu.innerHTML = - ''; - redBoxButton.innerHTML = "redbox"; - playgroundStateButton.innerHTML = "reset code"; - - instructorMenu.className = "icon-button"; - instructorMenuList.className = "theme-popup"; - redBoxButton.className = "theme"; - playgroundStateButton.className = "theme"; - instructorMenuList.style.display = "none"; - - instructorMenuList.role = "menu"; - redBoxItem.role = "none"; - playgroundStateItem.role = "none"; - redBoxButton.role = "menuitem"; - playgroundStateButton.role = "menuitem"; - - redBoxButton.id = "redbox"; - - instructorMenuList.style.marginLeft = "55px"; - - instructorMenu.addEventListener("click", () => { - if (instructorMenuList.style.display === "none") { - instructorMenuList.style.display = "block"; - } else { - instructorMenuList.style.display = "none"; - } - }); - - playgroundStateButton.addEventListener("click", () => { - let keys = []; - for (var i = 0, len = localStorage.length; i < len; i++) { - if (localStorage.key(i).includes("₹code")) { - keys.push(localStorage.key(i)); - } - } - for (let j = 0; j < keys.length; j++) { - localStorage.removeItem(keys[j]); - } - }); - } - - function redBoxButton() { - // Create a new div element - var newDiv = document.createElement("div"); - // Set the id attribute of the new div - newDiv.id = "aspect-ratio-helper"; - // Create a nested div inside the new div - var nestedDiv = document.createElement("div"); - // Append the nested div to the new div - newDiv.appendChild(nestedDiv, newDiv.firstChild); - // Get the parent element where you want to append the new div - var parentElement = document.body; // Change this to your desired parent element - // Append the new div to the parent element - parentElement.insertBefore(newDiv, parentElement.firstChild); - // Create the button element - var hideShowButton = document.getElementById("redbox"); - hideShowButton.title = - "Outline the area that fits on one screen while teaching the course."; - //Default hiding the redbox - document.getElementById("aspect-ratio-helper").style.display = "none"; - //Add Event listener to button to perform on click action. - hideShowButton.addEventListener("click", function () { - if ( - document.getElementById("aspect-ratio-helper").style.display === "none" - ) { - document.getElementById("aspect-ratio-helper").style.display = "block"; - hideShowButton.innerHTML = "redbox"; - } else { - document.getElementById("aspect-ratio-helper").style.display = "none"; - hideShowButton.innerHTML = "redbox"; - } - }); - } - - handleInstructorMenu(); - redBoxButton(); -})(); +function redBoxButton() { + // Create a new div element + var newDiv = document.createElement("div"); + // Set the id attribute of the new div + newDiv.id = "aspect-ratio-helper"; + // Create a nested div inside the new div + var nestedDiv = document.createElement("div"); + // Append the nested div to the new div + newDiv.appendChild(nestedDiv, newDiv.firstChild); + // Get the parent element where you want to append the new div + var parentElement = document.body; // Change this to your desired parent element + // Append the new div to the parent element + parentElement.insertBefore(newDiv, parentElement.firstChild); + // Create the button element + var hideShowButton = document.getElementById("redbox"); + //Default hiding the redbox + document.getElementById("aspect-ratio-helper").style.display = "none"; + //Add Event listener to button to perform on click action. + hideShowButton.addEventListener("click", function () { + if ( + document.getElementById("aspect-ratio-helper").style.display === "none" + ) { + document.getElementById("aspect-ratio-helper").style.display = "block"; + hideShowButton.innerHTML = "aspect-ratio box"; + } else { + document.getElementById("aspect-ratio-helper").style.display = "none"; + hideShowButton.innerHTML = "aspect-ratio box"; + } + }); +} From ed057026608395f07c477359c6a01c769649d6e4 Mon Sep 17 00:00:00 2001 From: Manichand Kondapaka Date: Thu, 21 Mar 2024 05:32:27 +0000 Subject: [PATCH 13/17] disable instructor-menu in build.sh --- .github/workflows/build.sh | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/build.sh b/.github/workflows/build.sh index 6e91d19ebde..285dead8bf6 100755 --- a/.github/workflows/build.sh +++ b/.github/workflows/build.sh @@ -40,6 +40,7 @@ mdbook build -d "$dest_dir" # Disable the redbox button in built versions of the course echo '// Disabled in published builds, see build.sh' > "${dest_dir}/html/theme/redbox.js" +echo '// Disabled in published builds, see build.sh' > "${dest_dir}/html/theme/instructor-menu.js" mv "$dest_dir/pandoc/pdf/comprehensive-rust.pdf" "$dest_dir/html/" (cd "$dest_dir/exerciser" && zip --recurse-paths ../html/comprehensive-rust-exercises.zip comprehensive-rust-exercises/) From 138fbd7b07694c77c808e8605e98742450e83c69 Mon Sep 17 00:00:00 2001 From: Manichand Kondapaka Date: Thu, 21 Mar 2024 05:34:48 +0000 Subject: [PATCH 14/17] Formatted redbox css --- theme/css/redbox.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/theme/css/redbox.css b/theme/css/redbox.css index 6f4b280e936..633ed37b6b9 100644 --- a/theme/css/redbox.css +++ b/theme/css/redbox.css @@ -19,6 +19,6 @@ div#aspect-ratio-helper div { aspect-ratio: 16/8.5; } -#instructor-menu-list{ +#instructor-menu-list { margin-left: 55px; } From 28fbdd9c4ca07cb713627e0d76ffbd81a5976bb0 Mon Sep 17 00:00:00 2001 From: Manichand Date: Thu, 21 Mar 2024 21:32:24 +0530 Subject: [PATCH 15/17] Code formatted --- theme/instructor-menu.js | 160 +++++++++++++++++++-------------------- 1 file changed, 80 insertions(+), 80 deletions(-) diff --git a/theme/instructor-menu.js b/theme/instructor-menu.js index c97ed65ef79..974c975076e 100644 --- a/theme/instructor-menu.js +++ b/theme/instructor-menu.js @@ -1,80 +1,80 @@ -(function handleInstructor() { - function handleInstructorMenu() { - let leftButtons = document.getElementsByClassName("left-buttons")[0]; - let instructorMenu = document.createElement("button"); - let instructorMenuList = document.createElement("ul"); - let redBoxItem = document.createElement("li"); - let redBoxButton = document.createElement("button"); - let playgroundStateItem = document.createElement("li"); - let playgroundStateButton = document.createElement("button"); - - leftButtons.insertBefore(instructorMenu, leftButtons.lastChild); - leftButtons.insertBefore(instructorMenuList, leftButtons.lastChild); - instructorMenuList.insertBefore(redBoxItem, instructorMenuList.lastChild); - instructorMenuList.insertBefore( - playgroundStateItem, - instructorMenuList.lastChild - ); - redBoxItem.insertBefore(redBoxButton, redBoxItem.lastChild); - playgroundStateItem.insertBefore( - playgroundStateButton, - playgroundStateItem.lastChild - ); - - instructorMenu.title = "Utilities for course instructors"; - instructorMenu.innerHTML = - ''; - redBoxButton.innerHTML = "aspect-ratio box"; - redBoxButton.title = - "Outline the area that fits on one screen while teaching the course."; - playgroundStateButton.innerHTML = "reset all playgrounds"; - playgroundStateButton.title = - "Reset code in all playgrounds to its original value."; - - instructorMenu.className = "icon-button"; - instructorMenuList.className = "theme-popup"; - redBoxButton.className = "theme"; - playgroundStateButton.className = "theme"; - instructorMenuList.style.display = "none"; - - instructorMenuList.role = "menu"; - redBoxItem.role = "none"; - playgroundStateItem.role = "none"; - redBoxButton.role = "menuitem"; - playgroundStateButton.role = "menuitem"; - - redBoxButton.id = "redbox"; - instructorMenuList.id = "instructor-menu-list"; - - instructorMenu.addEventListener("click", () => { - if (instructorMenuList.style.display === "none") { - instructorMenuList.style.display = "block"; - } else { - instructorMenuList.style.display = "none"; - } - }); - - playgroundStateButton.addEventListener("click", () => { - let keys = []; - for (var i = 0, len = localStorage.length; i < len; i++) { - if (localStorage.key(i).includes("₹code")) { - keys.push(localStorage.key(i)); - } - } - for (let j = 0; j < keys.length; j++) { - localStorage.removeItem(keys[j]); - } - }); - - document.addEventListener("click", (e) => { - if ( - !instructorMenu.contains(e.target) && - !instructorMenuList.contains(e.target) - ) { - instructorMenuList.style.display = "none"; - } - }); - } - handleInstructorMenu(); - window.redBoxButton(); -})(); +(function handleInstructor() { + function handleInstructorMenu() { + let leftButtons = document.getElementsByClassName("left-buttons")[0]; + let instructorMenu = document.createElement("button"); + let instructorMenuList = document.createElement("ul"); + let redBoxItem = document.createElement("li"); + let redBoxButton = document.createElement("button"); + let playgroundStateItem = document.createElement("li"); + let playgroundStateButton = document.createElement("button"); + + leftButtons.insertBefore(instructorMenu, leftButtons.lastChild); + leftButtons.insertBefore(instructorMenuList, leftButtons.lastChild); + instructorMenuList.insertBefore(redBoxItem, instructorMenuList.lastChild); + instructorMenuList.insertBefore( + playgroundStateItem, + instructorMenuList.lastChild + ); + redBoxItem.insertBefore(redBoxButton, redBoxItem.lastChild); + playgroundStateItem.insertBefore( + playgroundStateButton, + playgroundStateItem.lastChild + ); + + instructorMenu.title = "Utilities for course instructors"; + instructorMenu.innerHTML = + ''; + redBoxButton.innerHTML = "aspect-ratio box"; + redBoxButton.title = + "Outline the area that fits on one screen while teaching the course."; + playgroundStateButton.innerHTML = "reset all playgrounds"; + playgroundStateButton.title = + "Reset code in all playgrounds to its original value."; + + instructorMenu.className = "icon-button"; + instructorMenuList.className = "theme-popup"; + redBoxButton.className = "theme"; + playgroundStateButton.className = "theme"; + instructorMenuList.style.display = "none"; + + instructorMenuList.role = "menu"; + redBoxItem.role = "none"; + playgroundStateItem.role = "none"; + redBoxButton.role = "menuitem"; + playgroundStateButton.role = "menuitem"; + + redBoxButton.id = "redbox"; + instructorMenuList.id = "instructor-menu-list"; + + instructorMenu.addEventListener("click", () => { + if (instructorMenuList.style.display === "none") { + instructorMenuList.style.display = "block"; + } else { + instructorMenuList.style.display = "none"; + } + }); + + playgroundStateButton.addEventListener("click", () => { + let keys = []; + for (var i = 0, len = localStorage.length; i < len; i++) { + if (localStorage.key(i).includes("₹code")) { + keys.push(localStorage.key(i)); + } + } + for (let j = 0; j < keys.length; j++) { + localStorage.removeItem(keys[j]); + } + }); + + document.addEventListener("click", (e) => { + if ( + !instructorMenu.contains(e.target) && + !instructorMenuList.contains(e.target) + ) { + instructorMenuList.style.display = "none"; + } + }); + } + handleInstructorMenu(); + window.redBoxButton(); +})(); From 8889a483aeca592810d8f130629cfc7868b5c80b Mon Sep 17 00:00:00 2001 From: Manichand Date: Fri, 22 Mar 2024 10:28:33 +0530 Subject: [PATCH 16/17] Requested changes --- .github/workflows/build.sh | 1 - theme/instructor-menu.js | 20 +++++++------------- theme/redbox.js | 29 ++++++++++++++--------------- theme/save-playgrounds.js | 13 +++++++++++++ 4 files changed, 34 insertions(+), 29 deletions(-) diff --git a/.github/workflows/build.sh b/.github/workflows/build.sh index 285dead8bf6..6e91d19ebde 100755 --- a/.github/workflows/build.sh +++ b/.github/workflows/build.sh @@ -40,7 +40,6 @@ mdbook build -d "$dest_dir" # Disable the redbox button in built versions of the course echo '// Disabled in published builds, see build.sh' > "${dest_dir}/html/theme/redbox.js" -echo '// Disabled in published builds, see build.sh' > "${dest_dir}/html/theme/instructor-menu.js" mv "$dest_dir/pandoc/pdf/comprehensive-rust.pdf" "$dest_dir/html/" (cd "$dest_dir/exerciser" && zip --recurse-paths ../html/comprehensive-rust-exercises.zip comprehensive-rust-exercises/) diff --git a/theme/instructor-menu.js b/theme/instructor-menu.js index 974c975076e..d25bf18ebf1 100644 --- a/theme/instructor-menu.js +++ b/theme/instructor-menu.js @@ -45,6 +45,7 @@ redBoxButton.id = "redbox"; instructorMenuList.id = "instructor-menu-list"; + playgroundStateButton.id = "playground-state"; instructorMenu.addEventListener("click", () => { if (instructorMenuList.style.display === "none") { @@ -54,18 +55,6 @@ } }); - playgroundStateButton.addEventListener("click", () => { - let keys = []; - for (var i = 0, len = localStorage.length; i < len; i++) { - if (localStorage.key(i).includes("₹code")) { - keys.push(localStorage.key(i)); - } - } - for (let j = 0; j < keys.length; j++) { - localStorage.removeItem(keys[j]); - } - }); - document.addEventListener("click", (e) => { if ( !instructorMenu.contains(e.target) && @@ -76,5 +65,10 @@ }); } handleInstructorMenu(); - window.redBoxButton(); + var redBoxButton = document.getElementById("redbox"); + var playgroundStateButton = document.getElementById("playground-state"); + redBoxButton.addEventListener("click", () => window.redboxButtonClicked()); + playgroundStateButton.addEventListener("click", () => + window.resetPlaygroundsClicked() + ); })(); diff --git a/theme/redbox.js b/theme/redbox.js index 8ed1a633c42..754baffed93 100644 --- a/theme/redbox.js +++ b/theme/redbox.js @@ -1,4 +1,4 @@ -function redBoxButton() { +(function redBoxButton() { // Create a new div element var newDiv = document.createElement("div"); // Set the id attribute of the new div @@ -11,20 +11,19 @@ function redBoxButton() { var parentElement = document.body; // Change this to your desired parent element // Append the new div to the parent element parentElement.insertBefore(newDiv, parentElement.firstChild); - // Create the button element - var hideShowButton = document.getElementById("redbox"); //Default hiding the redbox document.getElementById("aspect-ratio-helper").style.display = "none"; - //Add Event listener to button to perform on click action. - hideShowButton.addEventListener("click", function () { - if ( - document.getElementById("aspect-ratio-helper").style.display === "none" - ) { - document.getElementById("aspect-ratio-helper").style.display = "block"; - hideShowButton.innerHTML = "aspect-ratio box"; - } else { - document.getElementById("aspect-ratio-helper").style.display = "none"; - hideShowButton.innerHTML = "aspect-ratio box"; - } - }); +})(); + +//Create a function to button to perform on click action. +function redboxButtonClicked() { + var hideShowButton = document.getElementById("redbox"); + if (document.getElementById("aspect-ratio-helper").style.display === "none") { + document.getElementById("aspect-ratio-helper").style.display = "block"; + hideShowButton.innerHTML = "aspect-ratio box"; + } else { + document.getElementById("aspect-ratio-helper").style.display = "none"; + hideShowButton.innerHTML = "aspect-ratio box"; + } } +window.redboxButtonClicked = redboxButtonClicked; diff --git a/theme/save-playgrounds.js b/theme/save-playgrounds.js index 319c41e0f4c..bfe45e47be6 100644 --- a/theme/save-playgrounds.js +++ b/theme/save-playgrounds.js @@ -31,3 +31,16 @@ setCodeToPlayground(); addEventListener("pagehide", getCodeFromPlayground); })(); + +function resetPlaygroundsClicked() { + let keys = []; + for (var i = 0, len = localStorage.length; i < len; i++) { + if (localStorage.key(i).includes("₹code")) { + keys.push(localStorage.key(i)); + } + } + for (let j = 0; j < keys.length; j++) { + localStorage.removeItem(keys[j]); + } +} +window.resetPlaygroundsClicked = resetPlaygroundsClicked; From 7a0de16cabdebabcd5869923cf78b9362b2215d5 Mon Sep 17 00:00:00 2001 From: Manichand Date: Fri, 22 Mar 2024 18:31:03 +0530 Subject: [PATCH 17/17] instructor menu Hide event updated --- theme/instructor-menu.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/theme/instructor-menu.js b/theme/instructor-menu.js index d25bf18ebf1..7d742e5dcd0 100644 --- a/theme/instructor-menu.js +++ b/theme/instructor-menu.js @@ -56,10 +56,7 @@ }); document.addEventListener("click", (e) => { - if ( - !instructorMenu.contains(e.target) && - !instructorMenuList.contains(e.target) - ) { + if (!instructorMenu.contains(e.target)) { instructorMenuList.style.display = "none"; } });