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 {
|
.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 {
|
||||||
|
@ -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);
|
||||||
});
|
});
|
||||||
}());
|
}());
|
||||||
|
Loading…
Reference in New Issue
Block a user