refactor(jquery): remove in prototype-nav

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,21 @@ 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) {
+  const moduleId = element.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 +48,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 +99,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 +118,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();
   }
-});
+});