Skip to content

Commit

Permalink
Nojs meganav (#13141)
Browse files Browse the repository at this point in the history 
* add global nav

* add tabbed content js to main js

* fix global nav chevron position on reduced view

* Add second view for mobile

* Refactor to work with new sliding nav

* Fix css issues from refactoring html structure

* lint-scss

* Update with design usggestions from initial ux review

* Further ux review changes

* Make user dropdown work wit sliding nav

* Fix bug in account dropdown where clicking outside the made navigation would cause it to open

* Format prettier

* revert use-cases changes for demo

* Increase default grid width

* Implemened redesigned use-cases

* Lint-scss

* Further ux changes for demo purpose - global nav not working on mobile

* Implement new global nav for desktop

* Implement new global nav for mobile view

* Changes based on code and QA

* Content QA

Shorten line on Products > Featured
Fix capitalisation
Fix consistency issues

* Reposition search icon

* Add content fixes

Hyphenation for "enterprise-grade"
Replace Cloud Native Operations Survey link
Sort and tweak quick links under K8s, Juju and snaps

* Some final ux improvement and a small bug fix

* Fix spacing issue and highlight not appearing on account dropdown

* Fix global nav item alignment

* Implement global-nav 3.5.0 changes

* Changes based on Hans feedback

* Tweak bubble labels

Fix "Sign in" hyphenation typo

* Remove redundant headings ("Products")

* Visual design review changes

* Fix navigation padding bug

* Remove second 'skip to main content'

* Update with UX suggestions

* Bump grid-max-width to 90rem

* Fix logo alignment in primary navigation

* Refactor to use event delegation

* Update alignment in reduced nav

* Add failsafe to prevent dropdowns being fetched multiple times

* Bump global-nav version to 3.6.1

* Align logos far left

* Make reduced nav not sticky

* Allow dropdowns to be scrollable if viewport height is smaller than the dropdown height

* Add missing links to mobile dropdowns

* Align top level mobile items with logo

* Add fallback for hover loading on touchscreen devices

* Use variables for repeated values

* Handle resize events

* Close meganav on any resize event

* Use grid-max-width variable

* Handle resize event on secondary nav

* Fix highlighted page alignment

* Delete unused 'navigation-meganav-base.html file

* Only closeAll on resize event if mobile-breakpoint threshold is crossed

* Create basic static nojs-meganav

* Apply style changes from UX mockup

* Enable nojs-meganav when JS is not enabled

* Apply changes from U review and make a basic mobile view mockup

* Format prettier

* Hide chevrons and implement fallbacks for 'menu' and 'search'

* Fix search not working on nojs mobile view

* Ux updates

* Fix prettier errors

* Lint JS

* Format prettier

---------

Co-authored-by: Scott Mason Nash <[email protected]>
Co-authored-by: Juan Ruitiña <[email protected]>
  • Loading branch information
@petesfrench @sowasred2012 @juanruitina
3 people committed Nov 9, 2023
1 parent a889e47 commit 7b5c545
Show file tree
Hide file tree
Showing 11 changed files with 489 additions and 199 deletions.
63 changes: 32 additions & 31 deletions static/js/src/navigation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,12 @@ const topLevelNavDropdowns = Array.from(
);
const nav = navigation.querySelector(".js-show-nav");
const menuButtons = document.querySelectorAll(".js-menu-button");
const skipLink = document.querySelector(".p-link--skip");
const jsBackbuttons = document.querySelectorAll(".js-back");
const reducedNav = document.querySelector(".p-navigation--sliding.is-reduced ");
let dropdowns = [];
const mainList = document.querySelector(
"nav.p-navigation__nav > .p-navigation__items"
);
const currentBubble = window.location.pathname.split("/")[1];

navigation.classList.add("js-enabled");
nav.classList.remove("u-hide");

//Helper functions
Expand Down Expand Up @@ -52,7 +49,8 @@ function getAllElements(queryString) {
}

// Attach initial event listeners
mainList.addEventListener("click", function(e) {
mainList.addEventListener("click", function (e) {
e.preventDefault();
let target = e.target;
if (target.classList.contains("p-navigation__link")) {
if (target.classList.contains("js-back")) {
Expand All @@ -61,11 +59,11 @@ mainList.addEventListener("click", function(e) {
handleDropdownClick(e.target.parentNode);
}
}
})
});

window.addEventListener("load", closeAll);
let wasBelowSpecificWidth = window.innerWidth < MOBILE_VIEW_BREAKPOINT;
window.addEventListener("resize", function() {
window.addEventListener("resize", function () {
// Only closeAll if the resize event crosses the MOBILE_VIEW_BREAKPOINT threshold
const currentViewportWidth = window.innerWidth;
const isBelowSpecificWidth = currentViewportWidth < MOBILE_VIEW_BREAKPOINT;
Expand All @@ -75,7 +73,6 @@ window.addEventListener("resize", function() {
wasBelowSpecificWidth = isBelowSpecificWidth;
});


dropdownWindowOverlay?.addEventListener("click", () => {
if (dropdownWindow.classList.contains("is-active")) {
closeAll();
Expand All @@ -98,7 +95,9 @@ document.addEventListener("global-nav-opened", () => {

function toggleSecondaryMobileNavDropdown(e) {
const mobileNavDropdown = secondaryNav.querySelector(".p-navigation__nav");
const mobileNavDropdownToggle = secondaryNav.querySelector(".p-navigation__toggle--open");
const mobileNavDropdownToggle = secondaryNav.querySelector(
".p-navigation__toggle--open"
);
let isDropdownOpen;
if (e && e.type == "click") {
e.preventDefault();
Expand Down Expand Up @@ -161,22 +160,23 @@ function updateNavMenu(dropdown, show) {
dropdown.id + "-content-mobile"
);
let isAccountDropdown = dropdown.classList.contains("js-account");


function handleMutation(mutationsList, observer) {
mutationsList.forEach((mutation) => {
if (mutation.type === "childList") {
handleDropdownClick(mutation.target);
observer.disconnect();
}
});
}

if ((dropdownContent && dropdownContentMobile) || isAccountDropdown) {
if (!show) updateDropdownStates(dropdown, show, ANIMATION_DELAY);
else updateDropdownStates(dropdown, show);
showDesktopDropdown(show);
} else if (dropdownContentMobile) {
updateMobileDropdownState(dropdown, show);
} else {
function handleMutation(mutationsList, observer) {
mutationsList.forEach(mutation => {
if (mutation.type === 'childList') {
handleDropdownClick(mutation.target);
observer.disconnect();
}
});
}
const observer = new MutationObserver(handleMutation);
const observerConfig = { childList: true, subtree: true };
observer.observe(dropdown, observerConfig);
Expand All @@ -200,9 +200,7 @@ function updateDropdownStates(dropdown, show, delay) {
}

function updateDesktopDropdownStates(dropdown, show, delay) {
let dropdownContent = document.getElementById(
dropdown.id + "-content"
);
let dropdownContent = document.getElementById(dropdown.id + "-content");
toggleIsActiveState(dropdown, show);
if (dropdownContent) {
toggleDropdownContentVisibility(dropdownContent, show, delay);
Expand Down Expand Up @@ -286,7 +284,7 @@ function fetchDropdown(url, id) {
const key = `${url}-${id}`;
if (fetchedMap[key] === true) return;
fetchedMap[key] = true;

const desktopContainer = document.getElementById(id + "-content");
const mobileContainer = document.getElementById(id);

Expand All @@ -312,10 +310,7 @@ function fetchDropdown(url, id) {
const activeCTAs = mobileContainer.querySelectorAll("a.is-active");
activeCTAs.forEach(deactivateActiveCTA);
});
} else {
resolve();
}
isFetching = false;
}

/**
Expand Down Expand Up @@ -373,7 +368,10 @@ function closeMobileDropdown() {
const dropdownElements = getAllElements(
".p-navigation__item--dropdown-toggle"
);
removeClassesFromElements([navigation, mainList], ["has-menu-open", "is-active"]);
removeClassesFromElements(
[navigation, mainList],
["has-menu-open", "is-active"]
);
if (secondaryNav) {
toggleSecondaryMobileNavDropdown();
}
Expand Down Expand Up @@ -407,7 +405,9 @@ function openMenu(e) {

// Setup and functions for navigaiton search
function initNavigationSearch() {
searchButtons.forEach((searchButton) => searchButton.addEventListener("click", toggleSearch));
searchButtons.forEach((searchButton) =>
searchButton.addEventListener("click", toggleSearch)
);

searchOverlay.addEventListener("click", toggleSearch);

Expand Down Expand Up @@ -467,8 +467,11 @@ function setUpGlobalNav() {
const globalNavMainTab = globalNavTab.querySelector("ul.p-navigation__items");

globalNavMainTab.classList.replace("u-hide", "dropdown-content-mobile");
globalNavMainTab.classList.replace("p-navigation__items", "p-navigation__dropdown",);

globalNavMainTab.classList.replace(
"p-navigation__items",
"p-navigation__dropdown"
);

globalNavMainTab.setAttribute("id", "all-canonical-content-mobile");

globalNavTab
Expand All @@ -485,7 +488,6 @@ function setUpGlobalNav() {
dropdownToggle
.querySelector("button.p-navigation__link")
.setAttribute("href", `#${newDropdownId}-content-mobile`);

}
const tempHTMLContainer = document.createElement("div");
tempHTMLContainer.innerHTML = `<li class="p-navigation__item--dropdown-close" id="${dropdown.id}-back">
Expand Down Expand Up @@ -534,7 +536,6 @@ if (accountContainer) {
<a class="p-link--inverted" href="/logout" onclick="event.stopPropagation()">Logout</a>
</li>
</ul>`;

}
});
}
Expand Down
40 changes: 21 additions & 19 deletions static/sass/_pattern_navigation-dropdown.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,10 @@
box-shadow: 0 1px 32px 1px transparentize($color-dark, 0.8);
flex-direction: column;
height: auto;
max-height: calc(100vh - 3rem);
overflow-y: auto;
position: fixed;
width: 100%;
overflow-y: auto;
max-height: calc(100vh - 3rem);
z-index: 11;
}

Expand Down Expand Up @@ -112,23 +112,6 @@
}
}

.dropdown-window__side-panel {
margin: 2.5rem 0;
padding: 0;

.p-list__item {
padding-left: 0.5rem;

a {
color: #69c;

&:visited {
color: #a679d2;
}
}
}
}

.dropdown-window__main-panel,
.dropdown-window__side-panel {
margin: 2.5rem 0;
Expand Down Expand Up @@ -184,6 +167,25 @@
}
}

.dropdown-window__side-panel {
margin: 2.5rem 0;
padding: 0;

.p-list {
.p-list__item {
padding-left: 0.5rem;

a.dropdown-window__side-panel-link {
color: #69c;

&:visited {
color: #a679d2;
}
}
}
}
}

.dropdown-window__sidenav-back {
color: $color-light;
display: block;
Expand Down
Loading

0 comments on commit 7b5c545

Please sign in to comment.