From dd6c3d122b67fff384bfbed76dd3add650b01e14 Mon Sep 17 00:00:00 2001 From: Haroen Viaene Date: Wed, 9 Jun 2021 17:22:37 +0200 Subject: [PATCH 1/3] refactor(jquery): remove in prototype-nav --- core/js/prototype-nav.js | 105 +++++++++++++++++++++------------------ 1 file changed, 56 insertions(+), 49 deletions(-) diff --git a/core/js/prototype-nav.js b/core/js/prototype-nav.js index 350f1a9..97e2b7e 100644 --- a/core/js/prototype-nav.js +++ b/core/js/prototype-nav.js @@ -1,5 +1,3 @@ -import $ from 'jquery'; - import packageJson from '../../package.json'; import config from '../discovery/config'; @@ -14,9 +12,9 @@ let navState = { langSelected: config.languages && config.languages.find((lang) => lang.default).id }; -const $html = $('html'); -const $prototypeNav = $('#__prototype-nav'); -const $moduleLabels = $prototypeNav.find(`.br-tree-dir-title`); +const html = document.documentElement; +const prototypeNav = document.querySelector('#__prototype-nav'); +const moduleLabels = prototypeNav.querySelectorAll('.br-tree-dir-title'); try { const savedState = JSON.parse(localStorage.getItem(NAV_STATE_STORAGE_KEY)); @@ -26,32 +24,28 @@ try { } // Set up unique IDs for all module titles -$prototypeNav - .find('.br-tree-dir-title') - .each(function () { - let moduleIds = $(this) - .parentsUntil('.br-bordered-list') - .children('.br-tree-dir-title') - .map(function () { - return $(this).text(); - }) - .get(); - - // Replace space by - - moduleIds = moduleIds.map((moduleId) => { - return moduleId.split(" ").join("-") - }) - - $(this).attr('id', moduleIds.join('-')); - }); +moduleLabels.forEach(function (element) { + let moduleId = [].slice + .call( + element.parentElement.querySelectorAll('.br-tree-dir-title') + ) + .map(function (title) { + // Replace space by - + return title.innerText.split(' ').join('-'); + }); + + element.setAttribute('id', moduleId.join('-')); +}); /** * Closes a module based on ID. */ - function closeModule(moduleId) { - $(`#${moduleId}`).parents('.br-tree-dir').first() - .addClass('br-tree-dir--is-collapsed'); + document + .getElementById(moduleId) + .parentElement + .classList + .add('br-tree-dir--is-collapsed'); if(navState.closedModules.indexOf(moduleId) === -1) { navState.closedModules.push(moduleId); @@ -61,31 +55,41 @@ function closeModule(moduleId) { /** * Opens a module based on ID. */ - function openModule(moduleId) { - $(`#${moduleId}`).parents('.br-tree-dir').first() - .removeClass('br-tree-dir--is-collapsed'); - - navState.closedModules = navState.closedModules.filter(id => id !== moduleId); + document + .getElementById(moduleId) + .parentElement + .classList + .remove('br-tree-dir--is-collapsed'); + + navState.closedModules = navState.closedModules.filter( + (id) => id !== moduleId + ); } /** * Determines whether to close or open a module, and then saves the state. */ - function toggleModule(moduleId) { - const isClosed = $(`#${moduleId}`).parents('.br-tree-dir').first().hasClass('br-tree-dir--is-collapsed'); - isClosed ? openModule(moduleId) : closeModule(moduleId); + const isClosed = document + .getElementById(moduleId) + .parentElement.classList.contains('br-tree-dir--is-collapsed'); + + if (isClosed) { + openModule(moduleId); + } else { + closeModule(moduleId); + } saveNavState(); } /** * Set up listener for module title clicks. */ - -$moduleLabels.on('click', function () { - const moduleId = $(this).attr('id'); - toggleModule(moduleId); +moduleLabels.forEach(function (element) { + element.addEventListener('click', function () { + toggleModule(element.id); + }) }); // Handle state on page load: open/close nav and close saved modules @@ -102,17 +106,17 @@ function saveNavState() { } function openNavigation() { - $prototypeNav.addClass('br-prototype-nav-open'); - $prototypeNav.attr('aria-hidden', 'false'); - $html.addClass('br-prototype-nav-is-open'); + prototypeNav.classList.add('br-prototype-nav-open') + prototypeNav.setAttribute('aria-hidden', 'false'); + html.classList.add('br-prototype-nav-is-open'); navState.isOpen = true; saveNavState(); } function closeNavigation() { - $prototypeNav.removeClass('br-prototype-nav-open'); - $html.removeClass('br-prototype-nav-is-open'); - $prototypeNav.attr('aria-hidden', 'true'); + prototypeNav.classList.remove('br-prototype-nav-open'); + html.classList.remove('br-prototype-nav-is-open'); + prototypeNav.setAttribute('aria-hidden', 'true'); navState.isOpen = false; saveNavState(); } @@ -121,15 +125,18 @@ function toggleNavigation() { navState.isOpen ? closeNavigation() : openNavigation(); } -$('.br-prototype-close-nav').on('click',function(e) { - closeNavigation(); -}); +document.querySelectorAll('.br-prototype-close-nav').forEach(function(element) { + element.addEventListener('click', function(e) { + e.preventDefault(); + closeNavigation(); + }) +}) -$(window).on('keyup', function (e) { +window.addEventListener('keyup', function (e) { if (e.keyCode === ESC_KEYCODE ) { closeNavigation(); } else if (e.ctrlKey && (e.keyCode == ACTIVATION_KEYCODE || e.keyCode == ACTIVATION_KEYCODE_WINDOWS)) { toggleNavigation(); } -}); \ No newline at end of file +}); From 9b192ccaed606938bffd1fcbbe72d2d27cefa812 Mon Sep 17 00:00:00 2001 From: Haroen Viaene Date: Thu, 10 Jun 2021 09:06:47 +0200 Subject: [PATCH 2/3] Update core/js/prototype-nav.js --- core/js/prototype-nav.js | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/core/js/prototype-nav.js b/core/js/prototype-nav.js index 97e2b7e..0efa190 100644 --- a/core/js/prototype-nav.js +++ b/core/js/prototype-nav.js @@ -25,14 +25,7 @@ try { // Set up unique IDs for all module titles moduleLabels.forEach(function (element) { - let moduleId = [].slice - .call( - element.parentElement.querySelectorAll('.br-tree-dir-title') - ) - .map(function (title) { - // Replace space by - - return title.innerText.split(' ').join('-'); - }); + const moduleId = element.innerText.split(' ').join('-'); element.setAttribute('id', moduleId.join('-')); }); From 855f938453ad0fbec75edf2ce5e9284a96f4057e Mon Sep 17 00:00:00 2001 From: Haroen Viaene Date: Thu, 10 Jun 2021 09:07:39 +0200 Subject: [PATCH 3/3] Update core/js/prototype-nav.js --- core/js/prototype-nav.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/core/js/prototype-nav.js b/core/js/prototype-nav.js index 0efa190..3b37e81 100644 --- a/core/js/prototype-nav.js +++ b/core/js/prototype-nav.js @@ -25,9 +25,7 @@ try { // Set up unique IDs for all module titles moduleLabels.forEach(function (element) { - const moduleId = element.innerText.split(' ').join('-'); - - element.setAttribute('id', moduleId.join('-')); + element.setAttribute('id', element.innerText.split(' ').join('-')); }); /**