NGSTACK-448 Implement active state on main menu via JS

src/AppBundle/Resources/es6/ngsite.js

@@ -174,7 +174,7 @@ $(document).ready(() => {
       }
     });
 
-    /* toggle mobile sumbmenu */
+    /* toggle mobile submenu */
     const mainNav = $('.main-navigation').find('ul.navbar-nav');
     const submenuTrigContent = $('<i class="submenu-trigger"></i>');
     mainNav.find('.menu_level_1').before(submenuTrigContent).parent('li').attr('data-submenu', 'true');
@@ -185,6 +185,23 @@ $(document).ready(() => {
 
   /* /header actions */
 
+  /* set active state on location menu items */
+  if (page.dataset.path) {
+    const activeItemsList = JSON.parse(page.dataset.path);
+    const navigationList = document.querySelectorAll('ul.nav.navbar-nav');
+
+    navigationList.forEach((navigation) => {
+      activeItemsList.forEach((activeItemId) => {
+        const item = navigation.querySelector(`[data-location-id="${activeItemId}"]`);
+        if (item) {
+          item.classList.add('active', 'submenu-active');
+        }
+      });
+    });
+  }
+  /* /set active state on location menu items */
+
+
   /* lazy image loading */
   const lazyImageLoad = (image) => {
     if (image.hasAttribute('data-src')) image.setAttribute('src', image.getAttribute('data-src'));

src/AppBundle/Resources/views/themes/app/menu.html.twig

@@ -1,3 +1,57 @@
 {% extends '@KnpMenu/menu.html.twig' %}
 
 {# To override this template, copy and paste relevant blocks from '@KnpMenu/menu.html.twig' and 'knp_menu.html.twig' #}
+
+{% block item %}
+    {% if item.displayed %}
+        {# building the class of the item #}
+        {%- set classes = item.attribute('class') is not empty ? [item.attribute('class')] : [] %}
+        {# NGSTACK-448 comment out default matcher so it doesn't add current/active class on any items #}
+        {#{%- if matcher.isCurrent(item) %}#}
+            {#{%- set classes = classes|merge([options.currentClass]) %}#}
+        {#{%- elseif matcher.isAncestor(item, options.matchingDepth) %}#}
+        {# END NGSTACK-448 #}
+        {%- if matcher.isAncestor(item, options.matchingDepth) %}
+            {%- set classes = classes|merge([options.ancestorClass]) %}
+        {%- endif %}
+        {%- if item.actsLikeFirst %}
+            {%- set classes = classes|merge([options.firstClass]) %}
+        {%- endif %}
+        {%- if item.actsLikeLast %}
+            {%- set classes = classes|merge([options.lastClass]) %}
+        {%- endif %}
+
+        {# Mark item as "leaf" (no children) or as "branch" (has children that are displayed) #}
+        {%- if item.hasChildren and options.depth is not same as(0) %}
+            {%- if options.branch_class is not empty and item.displayChildren %}
+                {%- set classes = classes|merge([options.branch_class]) %}
+            {%- endif %}
+        {%- elseif options.leaf_class is not empty %}
+            {%- set classes = classes|merge([options.leaf_class]) %}
+        {%- endif %}
+
+        {%- set attributes = item.attributes %}
+        {%- if classes is not empty %}
+            {%- set attributes = attributes|merge({'class': classes|join(' ')}) %}
+        {%- endif %}
+        {# NGSTACK-448 add data-location-id parameter to all menu items with eZ location #}
+        {%- if item.extras.ezlocation is defined and item.extras.ezlocation is not empty %}
+            {%- set attributes = attributes|merge({'data-location-id': item.extras.ezlocation.id}) %}
+        {%- endif %}
+        {# END NGSTACK-448 #}
+        {# displaying the item #}
+        {% import _self as knp_menu %}
+        <li{{ knp_menu.attributes(attributes) }}>
+            {%- if item.uri is not empty and (not matcher.isCurrent(item) or options.currentAsLink) %}
+                {{ block('linkElement') }}
+            {%- else %}
+                {{ block('spanElement') }}
+            {%- endif %}
+            {# render the list of children#}
+            {%- set childrenClasses = item.childrenAttribute('class') is not empty ? [item.childrenAttribute('class')] : [] %}
+            {%- set childrenClasses = childrenClasses|merge(['menu_level_' ~ item.level]) %}
+            {%- set listAttributes = item.childrenAttributes|merge({'class': childrenClasses|join(' ') }) %}
+            {{ block('list') }}
+        </li>
+    {% endif %}
+{% endblock %}

src/AppBundle/Resources/views/themes/app/page_footer.html.twig

@@ -9,8 +9,7 @@
                 {{ render_esi(
                     controller(
                         'ngsite.controller.menu:renderMenu', {
-                            menuName: 'ngsite_additional_menu',
-                            activeItemId: main_category_location_id ?? 0
+                            menuName: 'ngsite_additional_menu'
                         }
                     )
                 ) }}

src/AppBundle/Resources/views/themes/app/page_topmenu.html.twig

@@ -3,8 +3,7 @@
         {{ render_esi(
             controller(
                 'ngsite.controller.menu:renderMenu', {
-                    menuName: 'ngsite_main_menu',
-                    activeItemId: main_category_location_id ?? 0
+                    menuName: 'ngsite_main_menu'
                 }
             )
         ) }}

src/AppBundle/Resources/views/themes/app/pagelayout.html.twig

@@ -32,7 +32,7 @@
 
 {% include '@NetgenSite/parts/facebook_api.html.twig' %}
 
-<div id="page"{% if page_css_class|default is not empty %} class="{{ page_css_class }}"{% endif %}>
+<div id="page"{% if page_css_class|default is not empty %} class="{{ page_css_class }}"{% endif %}{% if location is defined and location is not empty %} data-path='["{{ location.path|join('","') }}"]'{% endif %}>
     {% block layout %}
         {% block header %}
             {% include '@ezdesign/page_header.html.twig' %}