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 {
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;
}
.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);
}
function addCopyButton(event) {
function getExampleWrap(event) {
let elem = event.target;
while (!hasClass(elem, "example-wrap")) {
elem = elem.parentElement;
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.
elem.removeEventListener("mouseover", addCopyButton);
@ -1858,7 +1866,20 @@ href="https://doc.rust-lang.org/${channel}/rustdoc/read-documentation/search.htm
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 => {
elem.addEventListener("mouseover", addCopyButton);
elem.addEventListener("click", showHideCodeExampleButtons);
});
}());