[PHP-WEBMASTER] [web-php] reuse-existing-output: Reuse existing output area for examples that support it

Author: Gina Peter Banyard (Girgias)
Date: 2024-12-05T00:17:14Z

Commit: Reuse existing output area for examples that support it · php/web-php@03078e4 · GitHub
Raw diff: https://github.com/php/web-php/commit/03078e4c464dd36cda04978c3b6508f58bf12b2a.diff

Reuse existing output area for examples that support it

Changed paths:
  M js/interactive-examples.js

Diff:

diff --git a/js/interactive-examples.js b/js/interactive-examples.js
index 4c711928cc..dae67a741f 100644
--- a/js/interactive-examples.js
+++ b/js/interactive-examples.js
@@ -4,7 +4,7 @@ function createOutput(output) {
   const container = document.createElement("div");
   container.classList.add("screen", "example-contents");
   const title = document.createElement("p");
- title.innerText = "Output (PHP "+ PHP.version +"):";
+ title.innerText = "Output of the above example in PHP "+ PHP.version +":";
   container.appendChild(title);
   const div = document.createElement("div");
   div.classList.add("examplescode");
@@ -56,6 +56,16 @@ async function main() {
       return;
     }

+ let exampleTitleContainer = example.nextElementSibling;
+ let exampleTitleParagraphElement = null;
+ let exampleScreenContainer = null;
+ let exampleScreenPreElement = null;
+ if (exampleTitleContainer !== null) {
+ exampleTitleParagraphElement = exampleTitleContainer.querySelector("p")
+ exampleScreenContainer = exampleTitleContainer.nextElementSibling;
+ exampleScreenPreElement = exampleScreenContainer.querySelector("pre");
+ }
+
     const code = phpcode.querySelector("code");
     code.spellcheck = false;
     code.setAttribute("contentEditable", true);
@@ -68,8 +78,13 @@ async function main() {

       const runPhp = await PHP.loadPhp();
       runPhp(phpcode.innerText);
- lastOutput = createOutput(PHP.buffer.join(""));
- phpcode.parentNode.appendChild(lastOutput);
+ if (exampleScreenPreElement !== null) {
+ exampleTitleParagraphElement.innerText = "Output of the above example in PHP "+ PHP.version +":";
+ exampleScreenPreElement.innerText = PHP.buffer.join("");
+ } else {
+ lastOutput = createOutput(PHP.buffer.join(""));
+ phpcode.parentNode.appendChild(lastOutput);
+ }
       PHP.buffer.length = 0;
     };