language-servers/roc
1
0
Fork 0
mirror of https://github.com/roc-lang/roc.git synced 2025-07-24 06:55:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

fix mobile support for button container

Browse source
This commit is contained in:
Seth Workman 2023-03-17 15:27:13 -05:00
parent 128122d28a
commit 4756781f25
No known key found for this signature in database
GPG key ID: A98500D7EB33BA4F
4 changed files with 92 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

29
crates/docs/src/static/search.js
View file

@ -65,11 +65,16 @@
}
});
// Select all <samp> elements that are children of <pre> elements
const codeBlocks = document.querySelectorAll("pre > samp");
const isTouchSupported = () => {
try{ document.createEvent("TouchEvent"); return true; }
catch(e){ return false; }
}
// Iterate over each code block
codeBlocks.forEach((codeBlock) => {
// 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");
@ -96,7 +101,17 @@ codeBlocks.forEach((codeBlock) => {
// Hide the button container by default
buttonContainer.style.display = "none";
// Show the button container on hover
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";
});
@ -104,6 +119,6 @@ codeBlocks.forEach((codeBlock) => {
codeBlock.parentNode.addEventListener("mouseleave", () => {
buttonContainer.style.display = "none";
});
});
}
});
})();

13
crates/docs/src/static/styles.css
View file

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

15
www/public/site.css
View file

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

18
www/public/site.js
View file

@ -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,7 +50,17 @@ codeBlocks.forEach((codeBlock) => {
// Hide the button container by default
buttonContainer.style.display = "none";
// Show the button container on hover
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";
});
@ -53,4 +68,5 @@ codeBlocks.forEach((codeBlock) => {
codeBlock.parentNode.addEventListener("mouseleave", () => {
buttonContainer.style.display = "none";
});
}
});