From 293728aa08dbea3d24f95a4e9f239b356b7e4f8e Mon Sep 17 00:00:00 2001 From: wbamberg Date: Tue, 14 Nov 2023 23:29:12 -0800 Subject: [PATCH 1/2] Fix issue 29421: use more iframes (#29477) * Fix issue 29421: use more iframes * Update index.md --------- Co-authored-by: Joshua Chen Co-authored-by: Brian Thomas Smith --- .../building_blocks/conditionals/index.md | 208 ++++++++++-------- 1 file changed, 112 insertions(+), 96 deletions(-) diff --git a/files/en-us/learn/javascript/building_blocks/conditionals/index.md b/files/en-us/learn/javascript/building_blocks/conditionals/index.md index 73d3290ae52253d..36e5ece4f467e59 100644 --- a/files/en-us/learn/javascript/building_blocks/conditionals/index.md +++ b/files/en-us/learn/javascript/building_blocks/conditionals/index.md @@ -438,27 +438,7 @@ If you make a mistake, you can always reset the example with the "Reset" button. ```html hidden

Live output

-
- - - -

- -
    -
    +

    Editable code

    @@ -488,7 +468,7 @@ function createCalendar(days, choice) { } } -createCalendar(31,'January'); +createCalendar(31, 'January');

    @@ -498,25 +478,6 @@ createCalendar(31,'January'); ``` ```css hidden -.output * { - box-sizing: border-box; -} - -.output ul { - padding-left: 0; -} - -.output li { - display: block; - float: left; - width: 25%; - border: 2px solid white; - padding: 5px; - height: 40px; - background-color: #4a2db6; - color: white; -} - html { font-family: sans-serif; } @@ -539,46 +500,29 @@ body { ``` ```js hidden -const textarea = document.getElementById("code"); const reset = document.getElementById("reset"); const solution = document.getElementById("solution"); -let code = textarea.value; -let userEntry = textarea.value; - -function updateCode() { - eval(textarea.value); -} - -reset.addEventListener("click", function () { - textarea.value = code; - userEntry = textarea.value; - solutionEntry = jsSolution; - solution.value = "Show solution"; - updateCode(); -}); - -solution.addEventListener("click", function () { - if (solution.value === "Show solution") { - textarea.value = solutionEntry; - solution.value = "Hide solution"; - } else { - textarea.value = userEntry; - solution.value = "Show solution"; - } - updateCode(); -}); +const outputIFrame = document.querySelector("#output"); +const textarea = document.getElementById("code"); +const initialCode = textarea.value; +let userCode = textarea.value; -const jsSolution = `const select = document.querySelector('select'); -const list = document.querySelector('ul'); -const h1 = document.querySelector('h1'); +const solutionCode = `const select = document.querySelector("select"); +const list = document.querySelector("ul"); +const h1 = document.querySelector("h1"); -select.addEventListener('change', () => { +select.addEventListener("change", () => { const choice = select.value; let days = 31; - if (choice === 'February') { + if (choice === "February") { days = 28; - } else if (choice === 'April' || choice === 'June' || choice === 'September'|| choice === 'November') { + } else if ( + choice === "April" || + choice === "June" || + choice === "September" || + choice === "November" + ) { days = 30; } @@ -586,26 +530,112 @@ select.addEventListener('change', () => { }); function createCalendar(days, choice) { - list.innerHTML = ''; + list.innerHTML = ""; h1.textContent = choice; for (let i = 1; i <= days; i++) { - const listItem = document.createElement('li'); + const listItem = document.createElement("li"); listItem.textContent = i; list.appendChild(listItem); } } -createCalendar(31,'January');`; +createCalendar(31, "January");`; -let solutionEntry = jsSolution; +function outputDocument(code) { + const outputBody = ` +
    + + -textarea.addEventListener("input", updateCode); -window.addEventListener("load", updateCode); +

    + +
      +
      `; + + const outputStyle = ` +.output * { + box-sizing: border-box; +} + +.output ul { + padding-left: 0; +} + +.output li { + display: block; + float: left; + width: 25%; + border: 2px solid white; + padding: 5px; + height: 40px; + background-color: #4a2db6; + color: white; +} +html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +}`; + return ` + + + + + + + ${outputBody} + + +`; +} + +function update() { + output.setAttribute("srcdoc", outputDocument(textarea.value)); +} + +update(); + +textarea.addEventListener("input", update); + +reset.addEventListener("click", () => { + textarea.value = initialCode; + userEntry = textarea.value; + solution.value = "Show solution"; + update(); +}); + +solution.addEventListener("click", () => { + if (solution.value === "Show solution") { + // remember the state of the user's code + // so we can restore it + userCode = textarea.value; + textarea.value = solutionCode; + solution.value = "Hide solution"; + } else { + textarea.value = userCode; + solution.value = "Show solution"; + } + update(); +}); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead - -textarea.onkeydown = function (e) { +textarea.onkeydown = (e) => { if (e.keyCode === 9) { e.preventDefault(); insertAtCaret("\t"); @@ -632,23 +662,9 @@ function insertAtCaret(text) { textarea.focus(); textarea.scrollTop = scrollPos; } - -// Update the saved userCode every time the user updates the text area code - -textarea.onkeyup = function () { - // We only want to save the state when the user code is being shown, - // not the solution, so that solution is not saved over the user code - if (solution.value === "Show solution") { - userEntry = textarea.value; - } else { - solutionEntry = textarea.value; - } - - updateCode(); -}; ``` -{{ EmbedLiveSample('Active_learning_A_simple_calendar', '100%', 1110) }} +{{ EmbedLiveSample('Active_learning_A_simple_calendar', '100%', 1210) }} ## Active learning: More color choices From 851465d04457f6cf874742ac9313d4a6d60b7002 Mon Sep 17 00:00:00 2001 From: Onkar Ruikar <87750369+OnkarRuikar@users.noreply.github.com> Date: Wed, 15 Nov 2023 14:40:48 +0530 Subject: [PATCH 2/2] fix(ci): pr-test.yml throws error for non .md files (#30286) --- .github/workflows/pr-test.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/pr-test.yml b/.github/workflows/pr-test.yml index bcfc3c47c1a3135..59b5f3afae237db 100644 --- a/.github/workflows/pr-test.yml +++ b/.github/workflows/pr-test.yml @@ -56,14 +56,14 @@ jobs: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - name: Setup Node.js environment - if: ${{ env.GIT_DIFF_CONTENT }} + if: ${{ env.GIT_DIFF_CONTENT }} || ${{ env.GIT_DIFF_FILES }} uses: actions/setup-node@v4 with: node-version-file: ".nvmrc" cache: yarn - name: Install all yarn packages - if: ${{ env.GIT_DIFF_CONTENT }} + if: ${{ env.GIT_DIFF_CONTENT }} || ${{ env.GIT_DIFF_FILES }} run: yarn --frozen-lockfile env: # https://github.com/microsoft/vscode-ripgrep#github-api-limit-note