diff --git a/src/web/crate_details.rs b/src/web/crate_details.rs index 3610a47e1..1cfbe80d5 100644 --- a/src/web/crate_details.rs +++ b/src/web/crate_details.rs @@ -991,7 +991,7 @@ mod tests { let platform_links: Vec<(String, String)> = kuchiki::parse_html() .one(response.text()?) - .select(r#"a[aria-label="Platform"] + ul li a"#) + .select(r#"summary[aria-label="Platform"] + ul li a"#) .expect("invalid selector") .map(|el| { let attributes = el.attributes.borrow(); diff --git a/src/web/mod.rs b/src/web/mod.rs index 75898a86c..981fbe92c 100644 --- a/src/web/mod.rs +++ b/src/web/mod.rs @@ -952,7 +952,7 @@ mod test { let text = web.get("/foo/0.2.0/foo").send()?.text()?; let platform = kuchiki::parse_html() .one(text) - .select(r#"ul > li > a[aria-label="Platform"]"#) + .select(r#"form.landing-search-form-nav details > summary[aria-label="Platform"]"#) .unwrap() .count(); assert_eq!(platform, 1); diff --git a/src/web/rustdoc.rs b/src/web/rustdoc.rs index 19fe4fc99..dda2f15f3 100644 --- a/src/web/rustdoc.rs +++ b/src/web/rustdoc.rs @@ -861,7 +861,7 @@ mod test { let dom = kuchiki::parse_html().one(data); if let Some(elem) = dom - .select("form > ul > li > a.warn") + .select("form.landing-search-form-nav > a.warn.pure-menu-item") .expect("invalid selector") .next() { @@ -1257,7 +1257,7 @@ mod test { let data = web.get(path).send()?.text()?; Ok(kuchiki::parse_html() .one(data) - .select("form > ul > li > .warn") + .select("form.landing-search-form-nav > .warn.pure-menu-item") .expect("invalid selector") .any(|el| el.text_contents().contains("yanked"))) } @@ -1502,7 +1502,7 @@ mod test { let data = web.get(path).send()?.text()?; let dom = kuchiki::parse_html().one(data); Ok(dom - .select(r#"a[aria-label="Platform"] + ul li a"#) + .select(r#"summary[aria-label="Platform"] + ul li a"#) .expect("invalid selector") .map(|el| { let attributes = el.attributes.borrow(); diff --git a/static/menu.js b/static/menu.js index c82f808e6..db7ef076f 100644 --- a/static/menu.js +++ b/static/menu.js @@ -1,18 +1,15 @@ -const updateMenuPositionForSubMenu = (currentMenuSupplier) => { - const currentMenu = currentMenuSupplier(); - const subMenu = currentMenu?.getElementsByClassName('pure-menu-children')?.[0]; +// Improve interactions with dropdown menus. +(function() { + const OPEN_MENU_SELECTOR = ".nav-container details[open]"; - subMenu?.style.setProperty('--menu-x', `${currentMenu.getBoundingClientRect().x}px`); -} + function updateMenuPositionForSubMenu() { + const currentMenu = document.querySelector(OPEN_MENU_SELECTOR); + const subMenu = currentMenu?.getElementsByClassName('pure-menu-children')?.[0]; -// Allow menus to be open and used by keyboard. -(function() { - var currentMenu; - var backdrop = document.createElement("div"); - backdrop.style = "display:none;position:fixed;width:100%;height:100%;z-index:1"; - document.documentElement.insertBefore(backdrop, document.querySelector("body")); + subMenu?.style.setProperty('--menu-x', `${currentMenu.getBoundingClientRect().x}px`); + } - addEventListener('resize', () => updateMenuPositionForSubMenu(() => currentMenu)); + addEventListener('resize', updateMenuPositionForSubMenu); function previous(allItems, item) { var i = 1; @@ -37,216 +34,43 @@ const updateMenuPositionForSubMenu = (currentMenuSupplier) => { function last(allItems) { return allItems[allItems.length - 1]; } - function closeMenu() { - if (this === backdrop) { - document.documentElement.focus(); - } else if (currentMenu.querySelector(".pure-menu-link:focus")) { - currentMenu.firstElementChild.focus(); + function closeMenu(ignore) { + const menus = Array.prototype.slice.call( + document.querySelectorAll(OPEN_MENU_SELECTOR)); + for (const menu of menus) { + if (menu !== ignore) { + menu.open = false; + } } - currentMenu.className = currentMenu.className.replace("pure-menu-active", ""); - currentMenu = null; - backdrop.style.display = "none"; - } - backdrop.onclick = closeMenu; - function openMenu(newMenu) { - updateMenuPositionForSubMenu(() => newMenu); - currentMenu = newMenu; - newMenu.className += " pure-menu-active"; - backdrop.style.display = "block"; } function menuOnClick(e) { - if (this.getAttribute("href") != "#") { - return; - } - if (this.parentNode === currentMenu) { - closeMenu(); - this.blur(); + if (!this.open) { + this.focus(); } else { - if (currentMenu) closeMenu(); - - openMenu(this.parentNode); + closeMenu(this); + updateMenuPositionForSubMenu(); } - e.preventDefault(); - e.stopPropagation(); }; function menuKeyDown(e) { - if (currentMenu) { - var children = currentMenu.querySelector(".pure-menu-children"); - var currentLink = children.querySelector(".pure-menu-link:focus"); - var currentItem; - if (currentLink && currentLink.parentNode.className.indexOf("pure-menu-item") !== -1) { - currentItem = currentLink.parentNode; - } - var allItems = []; - if (children) { - allItems = children.querySelectorAll(".pure-menu-item .pure-menu-link"); - } - var switchTo = null; - switch (e.key.toLowerCase()) { - case "escape": - case "esc": - closeMenu(); - e.preventDefault(); - e.stopPropagation(); - return; - case "arrowdown": - case "down": - if (currentLink) { - // Arrow down when an item other than the last is focused: focus next item. - // Arrow down when the last item is focused: jump to top. - switchTo = (next(allItems, currentLink) || allItems[0]); - } else { - // Arrow down when a menu is open and nothing is focused: focus first item. - switchTo = allItems[0]; - } - break; - case "arrowup": - case "up": - if (currentLink) { - // Arrow up when an item other than the first is focused: focus previous item. - // Arrow up when the first item is focused: jump to bottom. - switchTo = (previous(allItems, currentLink) || last(allItems)); - } else { - // Arrow up when a menu is open and nothing is focused: focus last item. - switchTo = last(allItems); - } - break; - case "tab": - if (!currentLink) { - // if the menu is open, we should focus trap into it - // this is the behavior of the WAI example - // it is not the same as GitHub, but GitHub allows you to tab yourself out - // of the menu without closing it (which is horrible behavior) - switchTo = e.shiftKey ? last(allItems) : allItems[0]; - } else if (e.shiftKey && currentLink === allItems[0]) { - // if you tab your way out of the menu, close it - // this is neither what GitHub nor the WAI example do, - // but is a rationalization of GitHub's behavior: we don't want users who know how to - // use tab and enter, but don't know that they can close menus with Escape, - // to find themselves completely trapped in the menu - closeMenu(); - e.preventDefault(); - e.stopPropagation(); - } else if (!e.shiftKey && currentLink === last(allItems)) { - // same as above. - // if you tab your way out of the menu, close it - closeMenu(); - } - break; - case "enter": - case "return": - // enter and return have the default browser behavior, - // but they also close the menu - // this behavior is identical between both the WAI example, and GitHub's - setTimeout(function() { - closeMenu(); - }, 100); - break; - case "space": - case " ": - // space closes the menu, and activates the current link - // this behavior is identical between both the WAI example, and GitHub's - if (document.activeElement instanceof HTMLAnchorElement && !document.activeElement.hasAttribute("aria-haspopup")) { - // It's supposed to copy the behaviour of the WAI Menu Bar - // page, and of GitHub's menus. I've been using these two - // sources to judge what is basically "industry standard" - // behaviour for menu keyboard activity on the web. - // - // On GitHub, here's what I notice: - // - // 1 If you click open a menu, the menu button remains - // focused. If, in this stage, I press space, the menu will - // close. - // - // 2 If I use the arrow keys to focus a menu item, and then - // press space, the menu item will be activated. For - // example, clicking "+", then pressing down, then pressing - // space will open the New Repository page. - // - // Behaviour 1 is why the - // `!document.activeElement.hasAttribute("aria-haspopup")` - // condition is there. It's to make sure the menu-link on - // things like the About dropdown don't get activated. - // Behaviour 2 is why this code is required at all; I want to - // activate the currently highlighted menu item. - document.activeElement.click(); - } - setTimeout(function() { - closeMenu(); - }, 100); - e.preventDefault(); - e.stopPropagation(); - break; - case "home": - // home: focus first menu item. - // This is the behavior of WAI, while GitHub scrolls, - // but it's unlikely that a user will try to scroll the page while the menu is open, - // so they won't do it on accident. - switchTo = allItems[0]; - break; - case "end": - // end: focus last menu item. - // This is the behavior of WAI, while GitHub scrolls, - // but it's unlikely that a user will try to scroll the page while the menu is open, - // so they won't do it on accident. - switchTo = last(allItems); - break; - case "pageup": - // page up: jump five items up, stopping at the top - // the number 5 is used so that we go one page in the - // inner-scrolled Dependencies and Versions fields - switchTo = currentItem || allItems[0]; - for (var n = 0; n < 5; ++n) { - if (switchTo.previousElementSibling && switchTo.previousElementSibling.className == 'pure-menu-item') { - switchTo = switchTo.previousElementSibling; - } - } - break; - case "pagedown": - // page down: jump five items down, stopping at the bottom - // the number 5 is used so that we go one page in the - // inner-scrolled Dependencies and Versions fields - switchTo = currentItem || last(allItems); - for (var n = 0; n < 5; ++n) { - if (switchTo.nextElementSibling && switchTo.nextElementSibling.className == 'pure-menu-item') { - switchTo = switchTo.nextElementSibling; - } - } - break; - } - if (switchTo) { - var switchToLink = switchTo.querySelector("a"); - if (switchToLink) { - switchToLink.focus(); - } else { - switchTo.focus(); - } - e.preventDefault(); - e.stopPropagation(); - } - } else if (e.target.parentNode.className && e.target.parentNode.className.indexOf("pure-menu-has-children") !== -1) { - switch (e.key.toLowerCase()) { - case "arrowdown": - case "down": - case "space": - case " ": - openMenu(e.target.parentNode); - e.preventDefault(); - e.stopPropagation(); - break; - } + const key = e.key.toLowerCase(); + if ((key === "escape" || key === "esc") && + document.querySelector(OPEN_MENU_SELECTOR) !== null) + { + closeMenu(); + e.preventDefault(); + e.stopPropagation(); } - }; - var menus = Array.prototype.slice.call(document.querySelectorAll(".pure-menu-has-children")); - var menusLength = menus.length; - var menu; - for (var i = 0; i < menusLength; ++i) { - menu = menus[i]; - menu.firstElementChild.setAttribute("aria-haspopup", "menu"); - menu.firstElementChild.nextElementSibling.setAttribute("role", "menu"); - menu.firstElementChild.addEventListener("click", menuOnClick); } - document.documentElement.addEventListener("keydown", menuKeyDown); + + const setEvents = (menus) => { + menus = Array.prototype.slice.call(menus); + for (const menu of menus) { + menu.addEventListener("toggle", menuOnClick); + menu.addEventListener("keydown", menuKeyDown); + } + }; + setEvents(document.querySelectorAll(".nav-container details")); + document.documentElement.addEventListener("keydown", function(ev) { if (ev.key == "y" && ev.target.tagName != "INPUT") { let permalink = document.getElementById("permalink"); diff --git a/templates/header/topbar_end.html b/templates/header/topbar_end.html index 61e29dd27..b65eeccbb 100644 --- a/templates/header/topbar_end.html +++ b/templates/header/topbar_end.html @@ -4,13 +4,12 @@ {# The global alert, if there is one #} {% include "header/global_alert.html" -%} - + + {# The search bar #}
+ +{%- else -%} + + {{ "cube" | fas }} + {{ metadata.name }}-{{ metadata.version }} + +{%- endif -%}{# + +If this is the latest release and it's been yanked, just display a warning #} +{%- if is_latest_version and metadata.yanked -%} + + {{ "triangle-exclamation" | fas }} + This release has been yanked + {# + +If this isn't the most recent stable release, offer a link to the latest #} +{%- elif not is_latest_version -%} + {%- if metadata.yanked -%} + {%- set tooltip = "You are seeing a yanked version of the " ~ metadata.name ~ " crate. Click here to go to the latest version." -%} + {%- set title = "This release has been yanked, go to latest version" -%} + {%- elif is_prerelease -%} + {%- set tooltip = "You are seeing a pre-release version of the " ~ metadata.name ~ " crate. Click here to go to the latest stable version." -%} + {%- set title = "Go to latest stable release" -%} {%- else -%} -
  • - - {{ "cube" | fas }} - {{ metadata.name }}-{{ metadata.version }} - -
    • - {%- endif -%}{# - - If this is the latest release and it's been yanked, just display a warning #} - {%- if is_latest_version and metadata.yanked -%} -
  • - - {{ "triangle-exclamation" | fas }} - This release has been yanked - -
    • {# - - If this isn't the most recent stable release, offer a link to the latest #} - {%- elif not is_latest_version -%} - {%- if metadata.yanked -%} - {%- set tooltip = "You are seeing a yanked version of the " ~ metadata.name ~ " crate. Click here to go to the latest version." -%} - {%- set title = "This release has been yanked, go to latest version" -%} - {%- elif is_prerelease -%} - {%- set tooltip = "You are seeing a pre-release version of the " ~ metadata.name ~ " crate. Click here to go to the latest stable version." -%} - {%- set title = "Go to latest stable release" -%} - {%- else -%} - {%- set tooltip = "You are seeing an outdated version of the " ~ metadata.name ~ " crate. Click here to go to the latest version." -%} - {%- set title = "Go to latest version" -%} - {%- endif -%} - -
  • - - {{ "triangle-exclamation" | fas }} - {{ title }} - -
    • + {%- set tooltip = "You are seeing an outdated version of the " ~ metadata.name ~ " crate. Click here to go to the latest version." -%} + {%- set title = "Go to latest version" -%} {%- endif -%} - {# Display the platforms that the release has been built for #} - {%- if metadata.doc_targets -%} -
  • - - {{ "gears" | fas }} - Platform - - - {# Build the dropdown list showing available targets #} - -
    • {# - Display the features available in current build - #}
  • - - {{ "flag" | fas }} - Feature flags - -
    • - {% endif %} - + + {{ "triangle-exclamation" | fas }} + {{ title }} + +{%- endif -%} + +{# Display the platforms that the release has been built for #} +{%- if metadata.doc_targets -%} +
    + + {{ "gears" | fas }} + Platform + + + {# Build the dropdown list showing available targets #} + +
    {# +Display the features available in current build +#} + {{ "flag" | fas }} + Feature flags + +{% endif %} {%- include "header/topbar_end.html" -%} diff --git a/templates/style/_navbar.scss b/templates/style/_navbar.scss index b8a44a0ed..af4120433 100644 --- a/templates/style/_navbar.scss +++ b/templates/style/_navbar.scss @@ -34,25 +34,9 @@ div.nav-container { height: 100%; } - li { - border-left: 1px solid var(--color-border); - } - - .pure-menu-has-children > .pure-menu-link { - background-color: var(--color-background); - - &:hover { - background-color: var(--color-background); - } - &:after { - font-size: 12.8px; - content: "\25BC" - } - } - - .pure-menu-has-children.pure-menu-active > .pure-menu-link { - &:after { - content:"\25B2"; + .landing-search-form-nav { + > .pure-menu-item, li { + border-left: 1px solid var(--color-border); } } @@ -159,6 +143,35 @@ div.nav-container { } } + details.pure-menu-item { + > summary::-webkit-details-marker, + > .dropdown > summary::marker { + display: none; + } + + > summary { + padding: 6.4px 16px 6.4px 16px; + margin: 0; + font-size: 12.8px; + display: inline-block; + vertical-align: middle; + cursor: pointer; + } + + > summary::after { + content: "▼"; + padding-left: .5em; + } + + &[open] > summary::after { + content: "▲"; + } + + .pure-menu-children { + display: block; + } + } + // used for latest version warning .warn, .warn:hover {