docbrown/app/javascript/topNavigation/utilities.js
ludwiczakpawel 73e560f7a2
Updating navigation (especially mobile) (#10424)
* .

* .

* .

* .

* .

* specs

* specs

* .

* .

* merge

* moving cheese around

* layout

* .

* merge

* Fixed invalid selector for search.

* Fixed issue with URL not updating after a search.

* do things better

* kinda merge

* whoops

* whoops

* .

* .

* im a backend developer

* tooltips 1.0.1

* tooltips 1.0.1

* fix

* specs

* .

* reduce the spacing

* schema drop

* reverts

* revert

* reverts

* revert

* drop unused nav

* drop unused nav

* drop unused nav

* drop unused nav

* typos

* paths fixes

* speeding up JS

* js

* search

* Reworked initializeTopBarIcons.js

* Reworked initializeNavigation.js

* Small refactor and updated exported function API docs.

* Fixed a bug I created when refactoring the top navigation icons.

* sidebar nav links

* spec

* Fixed issues with logged out experience for top nav icons.

* Small refactor of top nav icons.

* Small refactor and added some API docs.

* Added @testing-library/dom

* Added tests for top navigation utilities.

* spec

* spec

Co-authored-by: Nick Taylor <nick@dev.to>
2020-12-08 15:59:21 +01:00

70 lines
1.9 KiB
JavaScript

function toggleBurgerMenu() {
document.body.classList.toggle('hamburger-open');
}
function showMoreMenu({ target }) {
target.nextElementSibling.classList.remove('hidden');
target.classList.add('hidden');
}
/**
* Gets a reference to InstantClick
*
* @param {number} [waitTime=2000] The amount of time to wait
* until giving up waiting for InstantClick to exist
*
* @returns {Promise<object>} The global instance of InstantClick.
*/
export async function getInstantClick(waitTime = 2000) {
return new Promise((resolve, reject) => {
const failTimer = setTimeout(() => {
clearInterval(timer);
reject(new Error('Unable to resolve InstantClick'));
}, waitTime);
const timer = setInterval(() => {
if (typeof InstantClick !== 'undefined') {
clearTimeout(failTimer);
clearInterval(timer);
resolve(InstantClick);
}
});
});
}
/**
* Initializes the hamburger menu for mobile navigation
*
* @param {HTMLElement[]} menus
* @param {HTMLElement[]} moreMenus
*/
export function initializeMobileMenu(menus, moreMenus) {
menus.forEach((trigger) => {
trigger.addEventListener('click', toggleBurgerMenu);
});
moreMenus.forEach((trigger) => {
trigger.addEventListener('click', showMoreMenu);
});
}
/**
* Sets the icon link visually for the current page if the current page
* is one of the main icon links of the top navigation.
*
* @param {string} currentPage
* @param {[string, HTMLElement][]} pageEntries
*/
export function setCurrentPageIconLink(currentPage, pageEntries) {
pageEntries
// Filter out nulls (means the user is logged out so most icons are not in the logged out view)
.filter(([, iconLink]) => iconLink)
.forEach(([page, iconLink]) => {
if (currentPage === page) {
iconLink.blur();
iconLink.classList.add('crayons-header__link--current');
} else {
iconLink.classList.remove('crayons-header__link--current');
}
});
}