From c6f5127385e2cbd6cd3f5c29e7c49dcfa0d7b091 Mon Sep 17 00:00:00 2001
From: yuin <yuin@inforno.net>
Date: Tue, 6 Feb 2024 19:01:19 +0900
Subject: [PATCH] Support mobile devices

---
 docs/playground/index.html     | 25 +++++++++++++-
 docs/playground/playground.css | 61 ++++++++++++++++++++++++++--------
 src/playground/index.html      | 24 ++++++++++++-
 src/playground/playground.css  | 61 ++++++++++++++++++++++++++--------
 4 files changed, 143 insertions(+), 28 deletions(-)
diff --git a/docs/playground/index.html b/docs/playground/index.html
index 5f70924..7ebbf7d 100644
--- a/docs/playground/index.html
+++ b/docs/playground/index.html
@@ -2,6 +2,7 @@
 <head>
   <meta charset="utf-8">
   <title>goldmark playground</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="./playground.css">
   <script src="./wasm_exec.js"></script>
   <script>
@@ -99,6 +100,28 @@
           resp.arrayBuffer()
         ).then(bytes => WebAssembly.instantiate(bytes, go.importObject).then(onload));
       }
+
+      [...document.querySelectorAll('#container pre')]
+      .map(pre => {
+        const button = document.createElement('button');
+        pre.parentNode.insertBefore(button, pre);
+        button.textContent = 'copy';
+        button.classList.add('pre-copy');
+        let timer;
+        button.addEventListener('click', () => {
+          const textarea = document.createElement('textarea');
+          pre.appendChild(textarea);
+          textarea.value = pre.innerText;
+          textarea.select();
+          document.execCommand('copy');
+          pre.removeChild(textarea);
+          button.textContent = 'copied';
+          clearTimeout(timer);
+          timer = setTimeout(() => {
+            button.textContent = 'copy';
+          }, 500);
+        });
+      });
   
     });
 
@@ -113,7 +136,7 @@
       table:<input type="checkbox" name="optTableExtension"/ >&nbsp;
       strikethrough:<input type="checkbox" name="optStrikethroughExtension"/ >&nbsp;
       linkify:<input type="checkbox" name="optLinkifyExtension"/ >&nbsp;
-      taklist:<input type="checkbox" name="optTaskListExtension"/ >&nbsp;
+      tasklist:<input type="checkbox" name="optTaskListExtension"/ >&nbsp;
       definition list:<input type="checkbox" name="optDefinitionListExtension"/ >&nbsp;
       footnote:<input type="checkbox" name="optFootnoteExtension"/ >&nbsp;
       typographer:<input type="checkbox" name="optTypographerExtension"/ >&nbsp;
diff --git a/docs/playground/playground.css b/docs/playground/playground.css
index fdb9dee..e7b28c3 100644
--- a/docs/playground/playground.css
+++ b/docs/playground/playground.css
@@ -1036,25 +1036,47 @@ body ::-webkit-calendar-picker-indicator {
   filter: invert(50%);
 }
 
-#container {
-  display: flex;
+@media screen and (min-width: 768px) {
+  #container {
+    display: flex;
+    flex-direction: row;
+  }
+
+  #markdown {
+    flex-direction: column;
+    padding: 1em;
+    width: 50%;
+  }
+
+  #output {
+    flex-direction: column;
+    width: 50%;
+  }
 }
 
-#markdown {
-  flex-direction: column;
-  padding: 1em;
-  width: 50%;
+@media screen and (max-width: 768px) {
+  #container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  #markdown {
+    flex-direction: column;
+    padding: 1em;
+    width: 100%;
+  }
+
+  #output {
+    flex-direction: column;
+    width: 100%;
+  }
 }
 
+
 #markdown div {
   margin-bottom: 1em;
 }
 
-#output {
-  flex-direction: column;
-  width: 50%;
-}
-
 #clear {
   background-color: transparent;
   color: var(--color-accent-fg);
@@ -1087,8 +1109,7 @@ body ::-webkit-calendar-picker-indicator {
 }
 
 .tab-content {
-  width: 100%;
-  overflow: scroll;
+  width: 99%;
   display: none;
   margin-top: 1em;
 }
@@ -1113,3 +1134,17 @@ body ::-webkit-calendar-picker-indicator {
 .tab-switch {
     display: none;
 }
+
+#html pre {
+  margin-top: -2em;
+  padding-top: 1em;
+}
+
+button.pre-copy {
+  top: -1em;
+  left: calc( 100% - 3em );
+  position: relative;
+  padding: 0.1em;
+  font-size: .8em;
+  cursor: pointer;
+}
diff --git a/src/playground/index.html b/src/playground/index.html
index 05e9e44..67b19ef 100644
--- a/src/playground/index.html
+++ b/src/playground/index.html
@@ -2,6 +2,7 @@
 <head>
   <meta charset="utf-8">
   <title>goldmark playground</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="./playground.css">
   <script src="./wasm_exec.js"></script>
   <script>
@@ -99,6 +100,27 @@
           resp.arrayBuffer()
         ).then(bytes => WebAssembly.instantiate(bytes, go.importObject).then(onload));
       }
+
+      for(const pre of [...document.querySelectorAll('#container pre')]){
+        const button = document.createElement('button');
+        pre.parentNode.insertBefore(button, pre);
+        button.textContent = 'copy';
+        button.classList.add('pre-copy');
+        let timer;
+        button.addEventListener('click', () => {
+          const textarea = document.createElement('textarea');
+          pre.appendChild(textarea);
+          textarea.value = pre.innerText;
+          textarea.select();
+          document.execCommand('copy');
+          pre.removeChild(textarea);
+          button.textContent = 'copied';
+          clearTimeout(timer);
+          timer = setTimeout(() => {
+            button.textContent = 'copy';
+          }, 500);
+        });
+      }
   
     });
 
@@ -113,7 +135,7 @@
       table:<input type="checkbox" name="optTableExtension"/ >&nbsp;
       strikethrough:<input type="checkbox" name="optStrikethroughExtension"/ >&nbsp;
       linkify:<input type="checkbox" name="optLinkifyExtension"/ >&nbsp;
-      taklist:<input type="checkbox" name="optTaskListExtension"/ >&nbsp;
+      tasklist:<input type="checkbox" name="optTaskListExtension"/ >&nbsp;
       definition list:<input type="checkbox" name="optDefinitionListExtension"/ >&nbsp;
       footnote:<input type="checkbox" name="optFootnoteExtension"/ >&nbsp;
       typographer:<input type="checkbox" name="optTypographerExtension"/ >&nbsp;
diff --git a/src/playground/playground.css b/src/playground/playground.css
index fdb9dee..e7b28c3 100644
--- a/src/playground/playground.css
+++ b/src/playground/playground.css
@@ -1036,25 +1036,47 @@ body ::-webkit-calendar-picker-indicator {
   filter: invert(50%);
 }
 
-#container {
-  display: flex;
+@media screen and (min-width: 768px) {
+  #container {
+    display: flex;
+    flex-direction: row;
+  }
+
+  #markdown {
+    flex-direction: column;
+    padding: 1em;
+    width: 50%;
+  }
+
+  #output {
+    flex-direction: column;
+    width: 50%;
+  }
 }
 
-#markdown {
-  flex-direction: column;
-  padding: 1em;
-  width: 50%;
+@media screen and (max-width: 768px) {
+  #container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  #markdown {
+    flex-direction: column;
+    padding: 1em;
+    width: 100%;
+  }
+
+  #output {
+    flex-direction: column;
+    width: 100%;
+  }
 }
 
+
 #markdown div {
   margin-bottom: 1em;
 }
 
-#output {
-  flex-direction: column;
-  width: 50%;
-}
-
 #clear {
   background-color: transparent;
   color: var(--color-accent-fg);
@@ -1087,8 +1109,7 @@ body ::-webkit-calendar-picker-indicator {
 }
 
 .tab-content {
-  width: 100%;
-  overflow: scroll;
+  width: 99%;
   display: none;
   margin-top: 1em;
 }
@@ -1113,3 +1134,17 @@ body ::-webkit-calendar-picker-indicator {
 .tab-switch {
     display: none;
 }
+
+#html pre {
+  margin-top: -2em;
+  padding-top: 1em;
+}
+
+button.pre-copy {
+  top: -1em;
+  left: calc( 100% - 3em );
+  position: relative;
+  padding: 0.1em;
+  font-size: .8em;
+  cursor: pointer;
+}
