rustdoc: use consistent "popover" styling for notable traits
This commit is contained in:
parent
42325c525b
commit
89ba71649f
7 changed files with 89 additions and 115 deletions
|
@ -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();
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue