From 4756781f254d8a93d73d82ab920a663aa913ddcc Mon Sep 17 00:00:00 2001
From: Seth Workman <Saworkman1@gmail.com>
Date: Fri, 17 Mar 2023 15:27:13 -0500
Subject: [PATCH] fix mobile support for button container

---
 crates/docs/src/static/search.js  | 89 ++++++++++++++++++-------------
 crates/docs/src/static/styles.css | 13 +++--
 www/public/site.css               | 15 +++---
 www/public/site.js                | 30 ++++++++---
 4 files changed, 92 insertions(+), 55 deletions(-)

diff --git a/crates/docs/src/static/search.js b/crates/docs/src/static/search.js
index 5c0c929ac0..7fced7e2d9 100644
--- a/crates/docs/src/static/search.js
+++ b/crates/docs/src/static/search.js
@@ -65,45 +65,60 @@
     }
   });
 
+  const isTouchSupported = () => {
+    try{ document.createEvent("TouchEvent"); return true; }
+    catch(e){ return false; }
+  }
+  
   // Select all <samp> elements that are children of <pre> elements
-const codeBlocks = document.querySelectorAll("pre > samp");
-
-// Iterate over each code block
-codeBlocks.forEach((codeBlock) => {
-  // Create a "Copy" button
-  const copyButton = document.createElement("button");
-  copyButton.classList.add("copy-button");
-  copyButton.textContent = "Copy";
-
-  // Add event listener to copy button
-  copyButton.addEventListener("click", () => {
-    const codeText = codeBlock.innerText;
-    navigator.clipboard.writeText(codeText);
-    copyButton.textContent = "Copied!";
-    copyButton.classList.add("copy-button-copied");
-    copyButton.addEventListener("mouseleave", () => {
-        copyButton.textContent = "Copy";
-        copyButton.classList.remove('copy-button-copied');
+  const codeBlocks = document.querySelectorAll("pre > samp");
+  
+  // Iterate over each code block
+  codeBlocks.forEach((codeBlock) => {
+    // Create a "Copy" button
+    const copyButton = document.createElement("button");
+    copyButton.classList.add("copy-button");
+    copyButton.textContent = "Copy";
+  
+    // Add event listener to copy button
+    copyButton.addEventListener("click", () => {
+      const codeText = codeBlock.innerText;
+      navigator.clipboard.writeText(codeText);
+      copyButton.textContent = "Copied!";
+      copyButton.classList.add("copy-button-copied");
+      copyButton.addEventListener("mouseleave", () => {
+          copyButton.textContent = "Copy";
+          copyButton.classList.remove('copy-button-copied');
+      });
     });
-  });
-
-  // Create a container for the copy button and append it to the document
-  const buttonContainer = document.createElement("div");
-  buttonContainer.classList.add("button-container");
-  buttonContainer.appendChild(copyButton);
-  codeBlock.parentNode.insertBefore(buttonContainer, codeBlock);
-
-  // Hide the button container by default
-  buttonContainer.style.display = "none";
-
-  // Show the button container on hover
-  codeBlock.parentNode.addEventListener("mouseenter", () => {
-    buttonContainer.style.display = "block";
-  });
-
-  codeBlock.parentNode.addEventListener("mouseleave", () => {
+  
+    // Create a container for the copy button and append it to the document
+    const buttonContainer = document.createElement("div");
+    buttonContainer.classList.add("button-container");
+    buttonContainer.appendChild(copyButton);
+    codeBlock.parentNode.insertBefore(buttonContainer, codeBlock);
+  
+    // Hide the button container by default
     buttonContainer.style.display = "none";
+  
+    if (isTouchSupported()) {
+      // Show the button container on click for touch support (e.g. mobile)
+      document.addEventListener("click", (event) => {
+        if (event.target.closest("pre > samp") !== codeBlock) {
+          buttonContainer.style.display = "none";
+        } else {
+          buttonContainer.style.display = "block";
+        }
+      });
+    } else {
+      // Show the button container on hover for non-touch support (e.g. desktop)
+      codeBlock.parentNode.addEventListener("mouseenter", () => {
+        buttonContainer.style.display = "block";
+      });
+  
+      codeBlock.parentNode.addEventListener("mouseleave", () => {
+        buttonContainer.style.display = "none";
+      });  
+    }
   });
-});
-
 })();
diff --git a/crates/docs/src/static/styles.css b/crates/docs/src/static/styles.css
index 20ccdf5c3d..b4552ce11c 100644
--- a/crates/docs/src/static/styles.css
+++ b/crates/docs/src/static/styles.css
@@ -389,7 +389,14 @@ pre {
   padding: 8px 16px;
   box-sizing: border-box;
   background-color: var(--code-bg);
+  overflow-x: hidden;
+  position: relative;
+  word-wrap: normal;
+}
+
+pre>samp {
   overflow-x: auto;
+  display: block;
 }
 
 .hidden {
@@ -657,10 +664,6 @@ code .dim {
   opacity: 0.55;
 }
 
-pre {
-  position: relative;
-}
-
 .button-container {
   position: absolute;
   top: 0;
@@ -668,7 +671,7 @@ pre {
 }
 
 .copy-button {
-  background: none;
+  background: var(--code-bg);
   border: 1px solid var(--magenta);
   color: var(--magenta);
   border-radius: 3px;
diff --git a/www/public/site.css b/www/public/site.css
index 78dedfc180..2f725ce4b3 100644
--- a/www/public/site.css
+++ b/www/public/site.css
@@ -145,17 +145,24 @@ a:visited code {
 }
 
 pre {
+    position: relative;
     margin-bottom: 16px;
     padding: 8px 16px;
     box-sizing: border-box;
     border-radius: 8px;
     background-color: var(--code-bg);
-    overflow-x: auto;
+    overflow-x: hidden;
+    word-wrap: normal;
     font-size: 1.2rem;
     line-height: 1.76em;
     white-space: pre;
 }
 
+pre>samp {
+    overflow-x: auto;
+    display: block;
+}
+
 .repl-prompt:before {
     /* Add this using CSS so it isn't selectable, which would be annoying when trying to copy/paste! */
     color: var(--repl-prompt);
@@ -675,10 +682,6 @@ code .dim {
     opacity: 0.55;
 }
 
-pre {
-    position: relative;
-}
-
 .button-container {
     position: absolute;
     top: 0;
@@ -686,7 +689,7 @@ pre {
 }
 
 .copy-button {
-    background: none;
+    background: var(--code-bg);
     border: 1px solid var(--magenta);
     color: var(--magenta);
     border-radius: 3px;
diff --git a/www/public/site.js b/www/public/site.js
index 067f909d54..89da8ce7b5 100644
--- a/www/public/site.js
+++ b/www/public/site.js
@@ -14,6 +14,11 @@ document.addEventListener("keydown", (event) => {
     }
 });
 
+const isTouchSupported = () => {
+  try{ document.createEvent("TouchEvent"); return true; }
+  catch(e){ return false; }
+}
+
 // Select all <samp> elements that are children of <pre> elements
 const codeBlocks = document.querySelectorAll("pre > samp");
 
@@ -45,12 +50,23 @@ codeBlocks.forEach((codeBlock) => {
   // Hide the button container by default
   buttonContainer.style.display = "none";
 
-  // Show the button container on hover
-  codeBlock.parentNode.addEventListener("mouseenter", () => {
-    buttonContainer.style.display = "block";
-  });
+  if (isTouchSupported()) {
+    // Show the button container on click for touch support (e.g. mobile)
+    document.addEventListener("click", (event) => {
+      if (event.target.closest("pre > samp") !== codeBlock) {
+        buttonContainer.style.display = "none";
+      } else {
+        buttonContainer.style.display = "block";
+      }
+    });
+  } else {
+    // Show the button container on hover for non-touch support (e.g. desktop)
+    codeBlock.parentNode.addEventListener("mouseenter", () => {
+      buttonContainer.style.display = "block";
+    });
 
-  codeBlock.parentNode.addEventListener("mouseleave", () => {
-    buttonContainer.style.display = "none";
-  });
+    codeBlock.parentNode.addEventListener("mouseleave", () => {
+      buttonContainer.style.display = "none";
+    });  
+  }
 });
\ No newline at end of file