1
Fork 0

rustdoc: use consistent "popover" styling for notable traits

This commit is contained in:
Michael Howell 2022-11-08 18:00:22 -07:00
parent 42325c525b
commit 89ba71649f
7 changed files with 89 additions and 115 deletions

View file

@ -850,18 +850,33 @@ function loadCss(cssUrl) {
}
hideNotable();
const ty = e.getAttribute("data-ty");
const tooltip = e.getElementsByClassName("notable-traits-tooltip")[0];
const wrapper = document.createElement("div");
wrapper.innerHTML = "<div class=\"docblock\">" + window.NOTABLE_TRAITS[ty] + "</div>";
wrapper.className = "notable-traits-tooltiptext";
tooltip.appendChild(wrapper);
const pos = wrapper.getBoundingClientRect();
tooltip.removeChild(wrapper);
wrapper.style.top = (pos.top + window.scrollY) + "px";
wrapper.style.left = (pos.left + window.scrollX) + "px";
wrapper.style.width = pos.width + "px";
wrapper.className = "notable popover";
const focusCatcher = document.createElement("div");
focusCatcher.setAttribute("tabindex", "0");
focusCatcher.onfocus = hideNotable;
wrapper.appendChild(focusCatcher);
const pos = e.getBoundingClientRect();
// 5px overlap so that the mouse can easily travel from place to place
wrapper.style.top = (pos.top + window.scrollY + pos.height) + "px";
wrapper.style.left = 0;
wrapper.style.right = "auto";
wrapper.style.visibility = "hidden";
const body = document.getElementsByTagName("body")[0];
body.appendChild(wrapper);
const wrapperPos = wrapper.getBoundingClientRect();
// offset so that the arrow points at the center of the "(i)"
const finalPos = pos.left + window.scrollX - wrapperPos.width + 24;
if (finalPos > 0) {
wrapper.style.left = finalPos + "px";
} else {
wrapper.style.setProperty(
"--popover-arrow-offset",
(wrapperPos.right - pos.right + 4) + "px"
);
}
wrapper.style.visibility = "";
window.CURRENT_NOTABLE_ELEMENT = wrapper;
window.CURRENT_NOTABLE_ELEMENT.NOTABLE_BASE = e;
wrapper.onpointerleave = function(ev) {
@ -875,9 +890,23 @@ function loadCss(cssUrl) {
};
}
function notableBlurHandler(event) {
if (window.CURRENT_NOTABLE_ELEMENT &&
!elemIsInParent(document.activeElement, window.CURRENT_NOTABLE_ELEMENT) &&
!elemIsInParent(event.relatedTarget, window.CURRENT_NOTABLE_ELEMENT) &&
!elemIsInParent(document.activeElement, window.CURRENT_NOTABLE_ELEMENT.NOTABLE_BASE) &&
!elemIsInParent(event.relatedTarget, window.CURRENT_NOTABLE_ELEMENT.NOTABLE_BASE)
) {
hideNotable();
}
}
function hideNotable() {
if (window.CURRENT_NOTABLE_ELEMENT) {
window.CURRENT_NOTABLE_ELEMENT.NOTABLE_BASE.NOTABLE_FORCE_VISIBLE = false;
if (window.CURRENT_NOTABLE_ELEMENT.NOTABLE_BASE.NOTABLE_FORCE_VISIBLE) {
window.CURRENT_NOTABLE_ELEMENT.NOTABLE_BASE.focus();
window.CURRENT_NOTABLE_ELEMENT.NOTABLE_BASE.NOTABLE_FORCE_VISIBLE = false;
}
const body = document.getElementsByTagName("body")[0];
body.removeChild(window.CURRENT_NOTABLE_ELEMENT);
window.CURRENT_NOTABLE_ELEMENT = null;
@ -891,7 +920,11 @@ function loadCss(cssUrl) {
hideNotable();
} else {
showNotable(this);
window.CURRENT_NOTABLE_ELEMENT.setAttribute("tabindex", "0");
window.CURRENT_NOTABLE_ELEMENT.focus();
window.CURRENT_NOTABLE_ELEMENT.onblur = notableBlurHandler;
}
return false;
};
e.onpointerenter = function(ev) {
// If this is a synthetic touch event, ignore it. A click event will be along shortly.
@ -1018,6 +1051,7 @@ function loadCss(cssUrl) {
onEachLazy(document.querySelectorAll(".search-form .popover"), elem => {
elem.style.display = "none";
});
hideNotable();
};
/**