Make the buttons remain when code example is clicked

This commit is contained in:
Guillaume Gomez 2024-07-29 13:58:15 +02:00
parent 80d8270d84
commit a7cb1a5352
2 changed files with 37 additions and 3 deletions

View File

@ -1474,7 +1474,20 @@ a.test-arrow:hover {
.example-wrap:hover > .test-arrow { .example-wrap:hover > .test-arrow {
padding: 2px 7px; padding: 2px 7px;
} }
.example-wrap:hover > .test-arrow, .example-wrap:hover > .button-holder { /*
On iPad, the ":hover" state sticks around, making things work not greatly. Do work around
it, we move it into this media query. More information can be found at:
https://css-tricks.com/solving-sticky-hover-states-with-media-hover-hover/
However, using `@media (hover: hover)` makes this rule never to be applied in GUI tests, so
instead, we check that it's not a "finger" cursor.
*/
@media not (pointer: coarse) {
.example-wrap:hover > .test-arrow, .example-wrap:hover > .button-holder {
visibility: visible;
}
}
.example-wrap .button-holder.keep-visible {
visibility: visible; visibility: visible;
} }
.example-wrap .button-holder .copy-button { .example-wrap .button-holder .copy-button {

View File

@ -1829,14 +1829,22 @@ href="https://doc.rust-lang.org/${channel}/rustdoc/read-documentation/search.htm
copyContentToClipboard(codeElem.textContent); copyContentToClipboard(codeElem.textContent);
} }
function addCopyButton(event) { function getExampleWrap(event) {
let elem = event.target; let elem = event.target;
while (!hasClass(elem, "example-wrap")) { while (!hasClass(elem, "example-wrap")) {
elem = elem.parentElement; elem = elem.parentElement;
if (elem.tagName === "body" || hasClass(elem, "docblock")) { if (elem.tagName === "body" || hasClass(elem, "docblock")) {
return; return null;
} }
} }
return elem;
}
function addCopyButton(event) {
const elem = getExampleWrap(event);
if (elem === null) {
return;
}
// Since the button will be added, no need to keep this listener around. // Since the button will be added, no need to keep this listener around.
elem.removeEventListener("mouseover", addCopyButton); elem.removeEventListener("mouseover", addCopyButton);
@ -1858,7 +1866,20 @@ href="https://doc.rust-lang.org/${channel}/rustdoc/read-documentation/search.htm
parent.appendChild(copyButton); parent.appendChild(copyButton);
} }
function showHideCodeExampleButtons(event) {
const elem = getExampleWrap(event);
if (elem === null) {
return;
}
const buttons = elem.querySelector(".button-holder");
if (buttons === null) {
return;
}
buttons.classList.toggle("keep-visible");
}
onEachLazy(document.querySelectorAll(".docblock .example-wrap"), elem => { onEachLazy(document.querySelectorAll(".docblock .example-wrap"), elem => {
elem.addEventListener("mouseover", addCopyButton); elem.addEventListener("mouseover", addCopyButton);
elem.addEventListener("click", showHideCodeExampleButtons);
}); });
}()); }());