Skip to content

Commit

Permalink
find overview page for each folder
Browse files Browse the repository at this point in the history
  • Loading branch information
@webjsavella
webjsavella committed Dec 17, 2024
1 parent 6592ce1 commit 4cb7309
Show file tree
Hide file tree
Showing 2 changed files with 101 additions and 35 deletions.
45 changes: 32 additions & 13 deletions eds/blocks/local-navigation/local-navigation.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
block-size: 60px;
align-items: center;
white-space: nowrap;
font-size: var(--font-2);
font-size: var(--font-0);
}

.local-navigation .navigation-title a:hover {
Expand Down Expand Up @@ -50,15 +50,20 @@
align-items: center;
text-decoration: none;
background-color: #202020;
padding-inline: var(--space-8);
padding-inline: var(--space-6);
}

.local-navigation ul li a[aria-current='true']:hover, .local-navigation ul li.page-title a:hover {
.local-navigation ul li a[aria-current='true']:hover {
background-color: #2b2b2b;
}

.local-navigation ul li.page-title > button[aria-current='true'] {
background-color: #202020;
box-shadow: inset 3px 0 0 0 var(--calcite-ui-brand);
}

.local-navigation ul li a[aria-current='true'] {
box-shadow: inset 3px 0 0 0 var(--calcite-ui-brand-hover);
box-shadow: inset 3px 0 0 0 var(--calcite-ui-brand);
}

.local-navigation ul li button {
Expand All @@ -71,6 +76,7 @@
align-items: center;
margin-block-start: 0;
text-decoration: none;
font-size: var(--font-0);
background-color: #202020;
}

Expand Down Expand Up @@ -153,6 +159,15 @@
padding-inline: 0;
}

.local-navigation calcite-button {
display: flex;
inline-size: 100%;
padding-inline: 30%;
align-items: center;
background-color: #202020;
padding-block: var(--space-4);
}

@media (width >= 616px) {
.local-navigation ul.mobile-menu {
inline-size: 330px;
Expand Down Expand Up @@ -182,18 +197,22 @@

.local-navigation ul li a[aria-current='true'] {
background-color: #202020;
box-shadow: inset 0 -3px 0 0 var(--calcite-ui-brand-hover);
box-shadow: inset 0 -3px 0 0 var(--calcite-ui-brand);
}

.local-navigation ul li.page-title {
position: relative;
}

.local-navigation ul li.page-title > a:hover {
background-color: #2f2f2f;
.local-navigation ul li.page-title a:hover {
background-color: #202020;
box-shadow: inset 0 -3px 0 0 var(--calcite-link-blue-underline);
}

.local-navigation ul li.page-title > button[aria-current='true'] {
box-shadow: inset 0 -3px 0 0 var(--calcite-ui-brand);
}

.local-navigation ul.mobile-menu button::after {
position: relative;
inset-inline-start: var(--space-2);
Expand Down Expand Up @@ -228,13 +247,13 @@
background-color: #202020;
}

.local-navigation calcite-icon {
display: none;
}

.local-navigation calcite-button {
inline-size: auto;
padding-inline: 0;
padding-block: var(--space-3);
padding-inline: var(--space-4);
background-color: #2b2b2b;
}

.local-navigation calcite-icon {
display: none;
}
}
91 changes: 69 additions & 22 deletions eds/blocks/local-navigation/local-navigation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,13 +51,23 @@ function listenSubNav(subNavItems) {
subNavItems.nextElementSibling.setAttribute('aria-hidden', 'true');
}
});

document.addEventListener('click', (e) => {
let isClickInside = subNavItems.contains(e.target);

Check failure on line 56 in eds/blocks/local-navigation/local-navigation.js

View workflow job for this annotation

GitHub Actions / build 

'isClickInside' is never reassigned. Use 'const' instead

if (!isClickInside) { 

Check failure on line 58 in eds/blocks/local-navigation/local-navigation.js

View workflow job for this annotation

GitHub Actions / build 

Trailing spaces not allowed

Check failure on line 58 in eds/blocks/local-navigation/local-navigation.js

View workflow job for this annotation

GitHub Actions / build 

Irregular whitespace not allowed
subNavItems.setAttribute('aria-expanded', 'false');
subNavItems.nextElementSibling.setAttribute('aria-hidden', 'true');
}
});

Check failure on line 62 in eds/blocks/local-navigation/local-navigation.js

View workflow job for this annotation

GitHub Actions / build 

Expected indentation of 2 spaces but found 0
}

/**
* Create a new list item for page title and append to the nav tag ul
* Create subnavItems if exist and append to the li
* @param {Object, Element} pgObj The page title and page url.
*/
function appendPageTitle(pgObj, block, i) {
function appendPageTitle(pgObj, block, i, menuTitle) {
const updatedUrl = updateURL(pgObj.pageLink);
const navTagUL = block.querySelector('ul');
const li = domEl('li', { class: 'page-title', id: pgObj.pageTitle });
Expand All @@ -67,14 +77,17 @@ function appendPageTitle(pgObj, block, i) {
aHref.innerHTML = `${pgObj.pageTitle}`;
aHref.setAttribute('aria-current', 'false');

if (currPageTitle === pgObj.pageTitle.toLowerCase()) {
if ((currPageTitle === pgObj.pageTitle.toLowerCase() || menuTitle === pgObj.pageTitle) && !pgObj.subnavItems) {

Check failure on line 80 in eds/blocks/local-navigation/local-navigation.js

View workflow job for this annotation

GitHub Actions / build 

This line has a length of 113. Maximum allowed is 100
aHref.setAttribute('aria-current', 'true');
}

/* if subnavItems exist, create a button for the subnav and append to the li */
if (pgObj.subnavItems) {
const subNavItems = domEl('button', {
class: 'subnav-btn',
'aria-expanded': 'false',
'aria-controls': 'subnav',
'aria-current': 'false',
'attr-order': i,
});
const subNav = domEl('div', { class: 'subnav', id: 'subnav', 'aria-hidden': 'true' });
Expand All @@ -89,6 +102,9 @@ function appendPageTitle(pgObj, block, i) {
subNavA.innerHTML = `${item.pageTitle}`;
subNavLI.appendChild(subNavA);
subNavUL.appendChild(subNavLI);
if (currPageTitle === item.pageTitle.toLowerCase() || menuTitle === item.pageTitle) {
subNavItems.setAttribute('aria-current', 'true');
}
});
subNav.appendChild(subNavUL);
li.appendChild(subNav);
Expand Down Expand Up @@ -126,14 +142,14 @@ function decorateBlueButton(value, block) {
* Normalize url path, replace origin if different current origin.
* @param {JSON, Element} xmlData The api returned xmlData page folder json schema.
*/
function parseXML(xmlData, block) {
function parseXML(xmlData, block, menuTitle) {
for (let i = 0; i < xmlData.length; i += 1) {
Object.entries(xmlData[i]).forEach(([key, value]) => {
if (key === 'main') {
navigationTitle(value, block);
}
if (key === 'pageTitle') {
appendPageTitle(xmlData[i], block, i);
appendPageTitle(xmlData[i], block, i, menuTitle);
}
if (value.triallabel) {
decorateBlueButton(value, block);
Expand Down Expand Up @@ -196,6 +212,7 @@ function initNavWrapper(block) {
const trialBtn = btnWrapper.lastElementChild;
mobileButton.setAttribute('aria-label', 'menu');
htmlNavTag.setAttribute('aria-label', 'main');
htmlNavTag.setAttribute('class', 'calcite-mode-light');
htmlNavTag.id = 'main';
ul.classList.add('mobile-menu');
ul.setAttribute('aria-labelledby', 'nav-title');
Expand All @@ -211,7 +228,7 @@ function initNavWrapper(block) {
* toggle caret-up or caret-down mobile menu caret icon and aria-expanded attribute
* @param {Element} block The header block element
*/
function btnEventListener(block) {
function ctaEventListener(block) {
const mobileBtn = block.querySelector('calcite-icon.btn-mobile');
const mobileMenu = block.querySelector('ul.mobile-menu');

Expand All @@ -224,12 +241,6 @@ function btnEventListener(block) {
mobileMenu.setAttribute('aria-expanded', 'false');
}
});
window.addEventListener('resize', () => {
if (window.innerWidth > 768) {
mobileBtn.setAttribute('icon', 'caret-down');
mobileMenu.setAttribute('aria-expanded', 'false');
}
});
}

/**
Expand All @@ -240,28 +251,64 @@ function resetDropdown(block) {
const mobileBtn = block.querySelector('calcite-icon.btn-mobile');
const mobileMenu = block.querySelector('ul.mobile-menu');
window.addEventListener('resize', () => {
mobileBtn.setAttribute('icon', 'caret-down');
mobileMenu.setAttribute('aria-expanded', 'false');
}, 500);
if (window.innerWidth > 768) {
mobileBtn.setAttribute('icon', 'caret-down');
mobileMenu.setAttribute('aria-expanded', 'false');
}
});
}

/**
* Fetch local navigation api data. If on localhost, use cors-anywhere proxy to bypass CORS policy
* Read the id='breadcrumbs' script tag and append to the header block
* @param {Element} block The header block element
*/
export default async function decorate(block) {
function getBreadcrumb() {
if (!document.querySelector('script#breadcrumbs')) return;
const scriptTag = document.querySelector('script#breadcrumbs');
const jsonData = JSON.parse(scriptTag.textContent || scriptTag.innerText);
return jsonData.itemListElement[jsonData.itemListElement.length-1]

Check failure on line 269 in eds/blocks/local-navigation/local-navigation.js

View workflow job for this annotation

GitHub Actions / build 

Function 'getBreadcrumb' expected no return value

Check failure on line 269 in eds/blocks/local-navigation/local-navigation.js

View workflow job for this annotation

GitHub Actions / build 

Operator '-' must be spaced

Check failure on line 269 in eds/blocks/local-navigation/local-navigation.js

View workflow job for this annotation

GitHub Actions / build 

Missing semicolon
}

function fetchNavData(block) {
const ISLOCAL = /localhost/gm;
const PROXY = ISLOCAL.test(window.location.href) ? 'https://cors-anywhere.herokuapp.com/' : '';
const NAVAPI = 'https://www.esri.com/bin/esri/localnavigation';
const requestURL = `${PROXY}${NAVAPI}?path=/content/esri-sites${window.location.pathname}`;
await fetch(requestURL)
const pathURL = getBreadcrumb() || window.location.pathname;
const requestURL = `${PROXY}${NAVAPI}?path=/content/esri-sites${pathURL.item}`;
const breadcrumbs = getBreadcrumb();
const menuTitle = breadcrumbs.name;
fetch(requestURL)
.then((response) => response.json())
.then((data) => {
.then((jsonData) => {
initNavWrapper(block);
parseXML(data, block);
parseXML(jsonData, block, menuTitle);
docAuthPageTitle(block);
btnEventListener(block);
ctaEventListener(block);
resetDropdown(block);
})
.catch((error) => error);
.catch((error) => {
console.error('Error:', error);

Check warning on line 290 in eds/blocks/local-navigation/local-navigation.js

View workflow job for this annotation

GitHub Actions / build 

Unexpected console statement
});
}

/**
* Fetch local navigation api data. If on localhost, use cors-anywhere proxy to bypass CORS policy
* @param {Element} block The header block element
*/
export default async function decorate(block) {
if (!getBreadcrumb()) {
let count = 0;
const interval = setInterval(() => {
if (getBreadcrumb()) {
clearInterval(interval);
fetchNavData(block);
}
count += 1;
if (count === 20) {
clearInterval(interval);
}
}, 500);
} else {
fetchNavData(block);
}
}

0 comments on commit 4cb7309

Please sign in to comment.