Make the buttons remain when code example is clicked
This commit is contained in:
parent
80d8270d84
commit
a7cb1a5352
@ -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 {
|
||||
|
@ -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);
|
||||
});
|
||||
}());
|
||||
|
Loading…
Reference in New Issue
Block a user