zhanshi/goldmark
1
0
Fork 0
mirror of https://github.com/yuin/goldmark synced 2025-03-04 23:04:52 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Support mobile devices

Browse source
This commit is contained in:
yuin 2024-02-06 19:01:19 +09:00
parent ba73e86db0
commit c6f5127385
4 changed files with 143 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
docs/playground/index.html
View file

@ -2,6 +2,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>goldmark playground</title> <title>goldmark playground</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./playground.css"> <link rel="stylesheet" href="./playground.css">
<script src="./wasm_exec.js"></script> <script src="./wasm_exec.js"></script>
<script> <script>
@ -100,6 +101,28 @@
).then(bytes => WebAssembly.instantiate(bytes, go.importObject).then(onload)); ).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);
});
});
}); });
</script> </script>
@ -113,7 +136,7 @@
table:<input type="checkbox" name="optTableExtension"/ >&nbsp; table:<input type="checkbox" name="optTableExtension"/ >&nbsp;
strikethrough:<input type="checkbox" name="optStrikethroughExtension"/ >&nbsp; strikethrough:<input type="checkbox" name="optStrikethroughExtension"/ >&nbsp;
linkify:<input type="checkbox" name="optLinkifyExtension"/ >&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; definition list:<input type="checkbox" name="optDefinitionListExtension"/ >&nbsp;
footnote:<input type="checkbox" name="optFootnoteExtension"/ >&nbsp; footnote:<input type="checkbox" name="optFootnoteExtension"/ >&nbsp;
typographer:<input type="checkbox" name="optTypographerExtension"/ >&nbsp; typographer:<input type="checkbox" name="optTypographerExtension"/ >&nbsp;

45
docs/playground/playground.css
View file

@ -1036,8 +1036,10 @@ body ::-webkit-calendar-picker-indicator {
filter: invert(50%); filter: invert(50%);
} }
@media screen and (min-width: 768px) {
#container { #container {
display: flex; display: flex;
flex-direction: row;
} }
#markdown { #markdown {
@ -1046,13 +1048,33 @@ body ::-webkit-calendar-picker-indicator {
width: 50%; width: 50%;
} }
#markdown div { #output {
margin-bottom: 1em; flex-direction: column;
width: 50%;
}
}
@media screen and (max-width: 768px) {
#container {
display: flex;
flex-direction: column;
}
#markdown {
flex-direction: column;
padding: 1em;
width: 100%;
} }
#output { #output {
flex-direction: column; flex-direction: column;
width: 50%; width: 100%;
}
}
#markdown div {
margin-bottom: 1em;
} }
#clear { #clear {
@ -1087,8 +1109,7 @@ body ::-webkit-calendar-picker-indicator {
} }
.tab-content { .tab-content {
width: 100%; width: 99%;
overflow: scroll;
display: none; display: none;
margin-top: 1em; margin-top: 1em;
} }
@ -1113,3 +1134,17 @@ body ::-webkit-calendar-picker-indicator {
.tab-switch { .tab-switch {
display: none; 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;
}

24
src/playground/index.html
View file

@ -2,6 +2,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>goldmark playground</title> <title>goldmark playground</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./playground.css"> <link rel="stylesheet" href="./playground.css">
<script src="./wasm_exec.js"></script> <script src="./wasm_exec.js"></script>
<script> <script>
@ -100,6 +101,27 @@
).then(bytes => WebAssembly.instantiate(bytes, go.importObject).then(onload)); ).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);
});
}
}); });
</script> </script>
@ -113,7 +135,7 @@
table:<input type="checkbox" name="optTableExtension"/ >&nbsp; table:<input type="checkbox" name="optTableExtension"/ >&nbsp;
strikethrough:<input type="checkbox" name="optStrikethroughExtension"/ >&nbsp; strikethrough:<input type="checkbox" name="optStrikethroughExtension"/ >&nbsp;
linkify:<input type="checkbox" name="optLinkifyExtension"/ >&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; definition list:<input type="checkbox" name="optDefinitionListExtension"/ >&nbsp;
footnote:<input type="checkbox" name="optFootnoteExtension"/ >&nbsp; footnote:<input type="checkbox" name="optFootnoteExtension"/ >&nbsp;
typographer:<input type="checkbox" name="optTypographerExtension"/ >&nbsp; typographer:<input type="checkbox" name="optTypographerExtension"/ >&nbsp;

45
src/playground/playground.css
View file

@ -1036,8 +1036,10 @@ body ::-webkit-calendar-picker-indicator {
filter: invert(50%); filter: invert(50%);
} }
@media screen and (min-width: 768px) {
#container { #container {
display: flex; display: flex;
flex-direction: row;
} }
#markdown { #markdown {
@ -1046,13 +1048,33 @@ body ::-webkit-calendar-picker-indicator {
width: 50%; width: 50%;
} }
#markdown div { #output {
margin-bottom: 1em; flex-direction: column;
width: 50%;
}
}
@media screen and (max-width: 768px) {
#container {
display: flex;
flex-direction: column;
}
#markdown {
flex-direction: column;
padding: 1em;
width: 100%;
} }
#output { #output {
flex-direction: column; flex-direction: column;
width: 50%; width: 100%;
}
}
#markdown div {
margin-bottom: 1em;
} }
#clear { #clear {
@ -1087,8 +1109,7 @@ body ::-webkit-calendar-picker-indicator {
} }
.tab-content { .tab-content {
width: 100%; width: 99%;
overflow: scroll;
display: none; display: none;
margin-top: 1em; margin-top: 1em;
} }
@ -1113,3 +1134,17 @@ body ::-webkit-calendar-picker-indicator {
.tab-switch { .tab-switch {
display: none; 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;
}