mirror of
https://github.com/roc-lang/roc.git
synced 2024-09-20 07:17:50 +03:00
fix mobile support for button container
This commit is contained in:
parent
128122d28a
commit
4756781f25
@ -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";
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
})();
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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";
|
||||
});
|
||||
}
|
||||
});
|
Loading…
Reference in New Issue
Block a user