Unverified Commit 55361f84 authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #3213074 by mherchel, Indrajith KB, Gauravmahlawat: Olivero: Refactor... 

Issue #3213074 by mherchel, Indrajith KB, Gauravmahlawat: Olivero: Refactor second-level-navigation.es6.js to meet Drupal's JavaScript coding standards
parent b1c2f226

core/themes/olivero/js/second-level-navigation.es6.js

+19 −17
Original line number Diff line number Diff line 
((Drupal) => {

  const { isDesktopNav } = Drupal.olivero;

  const secondLevelNavMenus = document.querySelectorAll(

    '.primary-nav__menu-item--has-children',

    '[data-drupal-selector="primary-nav-menu-item-has-children"]',

  );



  /**
@@ -12,7 +12,7 @@ 
   */

  function toggleSubNav(topLevelMenuItem, toState) {

    const buttonSelector =

      '.primary-nav__button-toggle, .primary-nav__menu-link--button';

      '[data-drupal-selector="primary-nav-submenu-toggle-button"]';

    const button = topLevelMenuItem.querySelector(buttonSelector);

    const state =

      toState !== undefined
@@ -27,29 +27,29 @@ 
            'aria-expanded',

            'false',

          );

          el.querySelector('.primary-nav__menu--level-2').classList.remove(

            'is-active-menu-parent',

          );

          el.querySelector('.primary-nav__menu-🥕').classList.remove(

            'is-active-menu-parent',

          );

          el.querySelector(

            '[data-drupal-selector="primary-nav-menu--level-2"]',

          ).classList.remove('is-active-menu-parent');

          el.querySelector(

            '[data-drupal-selector="primary-nav-menu-🥕"]',

          ).classList.remove('is-active-menu-parent');

        });

      }

      button.setAttribute('aria-expanded', 'true');

      topLevelMenuItem

        .querySelector('.primary-nav__menu--level-2')

        .querySelector('[data-drupal-selector="primary-nav-menu--level-2"]')

        .classList.add('is-active-menu-parent');

      topLevelMenuItem

        .querySelector('.primary-nav__menu-🥕')

        .querySelector('[data-drupal-selector="primary-nav-menu-🥕"]')

        .classList.add('is-active-menu-parent');

    } else {

      button.setAttribute('aria-expanded', 'false');

      topLevelMenuItem.classList.remove('is-touch-event');

      topLevelMenuItem

        .querySelector('.primary-nav__menu--level-2')

        .querySelector('[data-drupal-selector="primary-nav-menu--level-2"]')

        .classList.remove('is-active-menu-parent');

      topLevelMenuItem

        .querySelector('.primary-nav__menu-🥕')

        .querySelector('[data-drupal-selector="primary-nav-menu-🥕"]')

        .classList.remove('is-active-menu-parent');

    }

  }
@@ -67,7 +67,7 @@ 


    setTimeout(() => {

      const menuParentItem = e.target.closest(

        '.primary-nav__menu-item--has-children',

        '[data-drupal-selector="primary-nav-menu-item-has-children"]',

      );

      if (!menuParentItem.contains(document.activeElement)) {

        toggleSubNav(menuParentItem, false);
@@ -78,7 +78,7 @@ 
  // Add event listeners onto each sub navigation parent and button.

  secondLevelNavMenus.forEach((el) => {

    const button = el.querySelector(

      '.primary-nav__button-toggle, .primary-nav__menu-link--button',

      '[data-drupal-selector="primary-nav-submenu-toggle-button"]',

    );



    button.removeAttribute('aria-hidden');
@@ -136,7 +136,7 @@ 
      // Return focus to the toggle button if the submenu contains focus.

      if (el.contains(document.activeElement)) {

        el.querySelector(

          '.primary-nav__button-toggle, .primary-nav__menu-link--button',

          '[data-drupal-selector="primary-nav-submenu-toggle-button"]',

        ).focus();

      }

      toggleSubNav(el, false);
@@ -154,7 +154,7 @@ 


    secondLevelNavMenus.forEach((el) => {

      const button = el.querySelector(

        '.primary-nav__button-toggle, .primary-nav__menu-link--button',

        '[data-drupal-selector="primary-nav-submenu-toggle-button"]',

      );

      const state = button.getAttribute('aria-expanded') === 'true';
@@ -181,7 +181,9 @@ 
    (e) => {

      if (

        areAnySubNavsOpen() &&

        !e.target.matches('.header-nav, .header-nav *')

        !e.target.matches(

          '[data-drupal-selector="header-nav"], [data-drupal-selector="header-nav"] *',

        )

      ) {

        closeAllSubNav();

      }

core/themes/olivero/js/second-level-navigation.js

+13 −13
Original line number Diff line number Diff line
@@ -7,10 +7,10 @@ 


(function (Drupal) {

  var isDesktopNav = Drupal.olivero.isDesktopNav;

  var secondLevelNavMenus = document.querySelectorAll('.primary-nav__menu-item--has-children');

  var secondLevelNavMenus = document.querySelectorAll('[data-drupal-selector="primary-nav-menu-item-has-children"]');



  function toggleSubNav(topLevelMenuItem, toState) {

    var buttonSelector = '.primary-nav__button-toggle, .primary-nav__menu-link--button';

    var buttonSelector = '[data-drupal-selector="primary-nav-submenu-toggle-button"]';

    var button = topLevelMenuItem.querySelector(buttonSelector);

    var state = toState !== undefined ? toState : button.getAttribute('aria-expanded') !== 'true';
@@ -18,19 +18,19 @@ 
      if (isDesktopNav()) {

        secondLevelNavMenus.forEach(function (el) {

          el.querySelector(buttonSelector).setAttribute('aria-expanded', 'false');

          el.querySelector('.primary-nav__menu--level-2').classList.remove('is-active-menu-parent');

          el.querySelector('.primary-nav__menu-🥕').classList.remove('is-active-menu-parent');

          el.querySelector('[data-drupal-selector="primary-nav-menu--level-2"]').classList.remove('is-active-menu-parent');

          el.querySelector('[data-drupal-selector="primary-nav-menu-🥕"]').classList.remove('is-active-menu-parent');

        });

      }



      button.setAttribute('aria-expanded', 'true');

      topLevelMenuItem.querySelector('.primary-nav__menu--level-2').classList.add('is-active-menu-parent');

      topLevelMenuItem.querySelector('.primary-nav__menu-🥕').classList.add('is-active-menu-parent');

      topLevelMenuItem.querySelector('[data-drupal-selector="primary-nav-menu--level-2"]').classList.add('is-active-menu-parent');

      topLevelMenuItem.querySelector('[data-drupal-selector="primary-nav-menu-🥕"]').classList.add('is-active-menu-parent');

    } else {

      button.setAttribute('aria-expanded', 'false');

      topLevelMenuItem.classList.remove('is-touch-event');

      topLevelMenuItem.querySelector('.primary-nav__menu--level-2').classList.remove('is-active-menu-parent');

      topLevelMenuItem.querySelector('.primary-nav__menu-🥕').classList.remove('is-active-menu-parent');

      topLevelMenuItem.querySelector('[data-drupal-selector="primary-nav-menu--level-2"]').classList.remove('is-active-menu-parent');

      topLevelMenuItem.querySelector('[data-drupal-selector="primary-nav-menu-🥕"]').classList.remove('is-active-menu-parent');

    }

  }
@@ -39,7 +39,7 @@ 
  function handleBlur(e) {

    if (!Drupal.olivero.isDesktopNav()) return;

    setTimeout(function () {

      var menuParentItem = e.target.closest('.primary-nav__menu-item--has-children');

      var menuParentItem = e.target.closest('[data-drupal-selector="primary-nav-menu-item-has-children"]');



      if (!menuParentItem.contains(document.activeElement)) {

        toggleSubNav(menuParentItem, false);
@@ -48,7 +48,7 @@ 
  }



  secondLevelNavMenus.forEach(function (el) {

    var button = el.querySelector('.primary-nav__button-toggle, .primary-nav__menu-link--button');

    var button = el.querySelector('[data-drupal-selector="primary-nav-submenu-toggle-button"]');

    button.removeAttribute('aria-hidden');

    button.removeAttribute('tabindex');

    el.addEventListener('touchstart', function () {
@@ -81,7 +81,7 @@ 
  function closeAllSubNav() {

    secondLevelNavMenus.forEach(function (el) {

      if (el.contains(document.activeElement)) {

        el.querySelector('.primary-nav__button-toggle, .primary-nav__menu-link--button').focus();

        el.querySelector('[data-drupal-selector="primary-nav-submenu-toggle-button"]').focus();

      }



      toggleSubNav(el, false);
@@ -93,7 +93,7 @@ 
  function areAnySubNavsOpen() {

    var subNavsAreOpen = false;

    secondLevelNavMenus.forEach(function (el) {

      var button = el.querySelector('.primary-nav__button-toggle, .primary-nav__menu-link--button');

      var button = el.querySelector('[data-drupal-selector="primary-nav-submenu-toggle-button"]');

      var state = button.getAttribute('aria-expanded') === 'true';



      if (state) {
@@ -110,7 +110,7 @@ 
    }

  });

  document.addEventListener('touchstart', function (e) {

    if (areAnySubNavsOpen() && !e.target.matches('.header-nav, .header-nav *')) {

    if (areAnySubNavsOpen() && !e.target.matches('[data-drupal-selector="header-nav"], [data-drupal-selector="header-nav"] *')) {

      closeAllSubNav();

    }

  }, {

core/themes/olivero/templates/navigation/menu--primary-menu.html.twig

+21 −5
Original line number Diff line number Diff line
@@ -31,6 +31,7 @@ 


{% macro menu_links(items, attributes, menu_level) %}

  {% set primary_nav_level = 'primary-nav__menu--level-' ~ (menu_level + 1) %}

  {% set drupal_selector_primary_nav_level = 'primary-nav-menu--level-' ~ (menu_level + 1) %}

  {% import _self as menus %}

  {% if items %}
@@ -39,10 +40,10 @@ 
      has the overflow:hidden CSS rule applied.

    #}

    {% if menu_level == 1 %}

      <span class="primary-nav__menu-🥕"></span>

      <span data-drupal-selector="primary-nav-menu-🥕" class="primary-nav__menu-🥕"></span>

    {% endif %}



    <ul {{ attributes.addClass('primary-nav__menu', primary_nav_level) }}>

    <ul {{ attributes.addClass('primary-nav__menu', primary_nav_level).setAttribute('data-drupal-selector', drupal_selector_primary_nav_level) }}>

      {% set attributes = attributes.removeClass(primary_nav_level) %}

      {% for item in items %}
@@ -72,7 +73,7 @@ 
          ]

        %}



        <li{{ item.attributes.addClass(item_classes) }}>

        <li{{ item.attributes.addClass(item_classes).setAttribute('data-drupal-selector', item.below ? 'primary-nav-menu-item-has-children' : false) }}>

          {#

            A unique HTML ID should be used, but that isn't available through

            Twig yet, so the |clean_id filter is used for now.
@@ -84,7 +85,11 @@ 
          {% endset %}



          {% if menu_item_type == 'link' or menu_item_type == 'nolink' %}

            {{ link(menu_item_type == 'link' ? link_title : item.title, item.url, { 'class': link_classes }) }}

            {{ link(menu_item_type == 'link' ? link_title : item.title, item.url, {

              'class': link_classes,

              'data-drupal-selector': 'primary-nav-menu-link-has-children',

              })

            }}



            {% if item.below %}

              {#
@@ -92,7 +97,17 @@ 
                but still visible in non-JS environments so that chevron can indicate presence of

                drop menu).

              #}

              <button class="primary-nav__button-toggle" aria-controls="{{ aria_id }}" aria-expanded="false" aria-hidden="true" tabindex="-1">

              {%

                set toggle_button_attributes = create_attribute({

                  'class': 'primary-nav__button-toggle',

                  'data-drupal-selector': 'primary-nav-submenu-toggle-button',

                  'aria-controls': aria_id,

                  'aria-expanded': 'false',

                  'aria-hidden': 'true',

                  'tabindex': '-1',

                })

              %}

              <button{{ toggle_button_attributes }}>

                <span class="visually-hidden">{{ '@title sub-navigation'|t({'@title': item.title}) }}</span>

                <span class="icon--menu-toggle"></span>

              </button>
@@ -106,6 +121,7 @@ 
              'class': link_classes,

              'aria-controls': item.below ? aria_id : false,

              'aria-expanded': item.below ? 'false' : false,

              'data-drupal-selector': item.below ? 'primary-nav-submenu-toggle-button' : false,

              })

            }}