From 5bf392df350231edfcfd61c878ba0f23441664f5 Mon Sep 17 00:00:00 2001
From: Gina Peter Banyard <girgias@php.net>
Date: Thu, 5 Dec 2024 00:17:14 +0000
Subject: [PATCH 1/2] Reuse existing output area for examples that support it

---
 js/interactive-examples.js | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

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;
     };
 

From 46b1e1f9a94ca7b4948a5358d3bffdc592751f76 Mon Sep 17 00:00:00 2001
From: Gina Peter Banyard <girgias@php.net>
Date: Thu, 5 Dec 2024 11:54:58 +0000
Subject: [PATCH 2/2] Review comments

---
 js/interactive-examples.js | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/js/interactive-examples.js b/js/interactive-examples.js
index dae67a741f..808bf2f858 100644
--- a/js/interactive-examples.js
+++ b/js/interactive-examples.js
@@ -1,10 +1,14 @@
 import phpBinary from "/js/php-web.mjs";
 
+function generateExampleOutputTitle(phpVersion) {
+  return "Output of the above example in PHP "+ phpVersion +":";
+}
+
 function createOutput(output) {
   const container = document.createElement("div");
   container.classList.add("screen", "example-contents");
   const title = document.createElement("p");
-  title.innerText = "Output of the above example in PHP "+ PHP.version +":";
+  title.innerText = generateExampleOutputTitle(PHP.version);
   container.appendChild(title);
   const div = document.createElement("div");
   div.classList.add("examplescode");
@@ -56,13 +60,12 @@ async function main() {
       return;
     }
 
-    let exampleTitleContainer = example.nextElementSibling;
+    const exampleTitleContainer = example.nextElementSibling;
     let exampleTitleParagraphElement = null;
-    let exampleScreenContainer = null;
     let exampleScreenPreElement = null;
     if (exampleTitleContainer !== null) {
       exampleTitleParagraphElement = exampleTitleContainer.querySelector("p")
-      exampleScreenContainer = exampleTitleContainer.nextElementSibling;
+      const exampleScreenContainer = exampleTitleContainer.nextElementSibling;
       exampleScreenPreElement = exampleScreenContainer.querySelector("pre");
     }
 
@@ -79,7 +82,7 @@ async function main() {
       const runPhp = await PHP.loadPhp();
       runPhp(phpcode.innerText);
       if (exampleScreenPreElement !== null) {
-        exampleTitleParagraphElement.innerText = "Output of the above example in PHP "+ PHP.version +":";
+        exampleTitleParagraphElement.innerText = generateExampleOutputTitle(PHP.version);
         exampleScreenPreElement.innerText = PHP.buffer.join("");
       } else {
         lastOutput = createOutput(PHP.buffer.join(""));