diff --git a/src/AppBundle/Resources/es6/ngsite.js b/src/AppBundle/Resources/es6/ngsite.js index 1d230fd48..3b8e2951c 100644 --- a/src/AppBundle/Resources/es6/ngsite.js +++ b/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 = $(''); 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')); diff --git a/src/AppBundle/Resources/views/themes/app/menu.html.twig b/src/AppBundle/Resources/views/themes/app/menu.html.twig index 1e683f2de..d1589ff23 100644 --- a/src/AppBundle/Resources/views/themes/app/menu.html.twig +++ b/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 %} +