-
Notifications
You must be signed in to change notification settings - Fork 32
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1436 from openeuropa/EWPP-4085
EWPP-4085: Add mega menu variant to navigation menu pattern.
- Loading branch information
Showing
9 changed files
with
446 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
189 changes: 189 additions & 0 deletions
189
templates/patterns/navigation_menu/pattern-navigation-menu--variant-mega-menu.html.twig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,189 @@ | ||
| {# | ||
| /** | ||
| * @file | ||
| * Mega menu variant implementation for the navigation menu pattern. | ||
| */ | ||
| #} | ||
|
|
||
| {# Process items as expected by ECL Mega menu. #} | ||
| {% set _items = [] %} | ||
| {% for item in items %} | ||
|
|
||
| {# Process children, if any. #} | ||
| {% set _children = [] %} | ||
| {% for child in item.children %} | ||
| {% set _child = { | ||
| path: child.href, | ||
| label: child.label, | ||
| see_all: child.see_all|default(false), | ||
| see_all_label: child.see_all_label|default('See all'), | ||
| see_all_attributes: child.see_all_attributes, | ||
| extra_attributes: child.extra_attributes, | ||
| } %} | ||
| {% if child.is_current is defined and child.is_current == true %} | ||
| {% set _child = _child|merge({ | ||
| is_current: child.is_current, | ||
| }) %} | ||
| {% endif %} | ||
| {% if child.external is defined and child.external == true %} | ||
| {% set _child = _child|merge({ | ||
| external: child.external, | ||
| icon_path: ecl_icon_path | ||
| }) %} | ||
| {% endif %} | ||
|
|
||
| {# Process grandchildren, if any. #} | ||
| {% set _grandchildren = [] %} | ||
| {% for grandchild in child.children %} | ||
| {% set _grandchild = { | ||
| path: grandchild.href, | ||
| label: grandchild.label, | ||
| extra_attributes: grandchild.extra_attributes, | ||
| } %} | ||
| {% if grandchild.is_current is defined and grandchild.is_current == true%} | ||
| {% set _grandchild = _grandchild|merge({ | ||
| is_current: grandchild.is_current, | ||
| }) %} | ||
| {% endif %} | ||
| {% if grandchild.external is defined and grandchild.external == true %} | ||
| {% set _grandchild = _grandchild|merge({ | ||
| external: grandchild.external, | ||
| icon_path: ecl_icon_path | ||
| }) %} | ||
| {% endif %} | ||
| {% set _grandchildren = _grandchildren|merge([_grandchild]) %} | ||
| {% endfor %} | ||
|
|
||
| {# Process featured column, if set. #} | ||
| {% set _featured = [] %} | ||
| {% if child.featured is not empty %} | ||
| {% set _featured = _featured|merge({ | ||
| title: child.featured.title|default(''), | ||
| content: child.featured.content|default(''), | ||
| }) %} | ||
| {% set _featured_items = [] %} | ||
| {% for featured_item in child.featured.items %} | ||
| {% set _featured_item = { | ||
| path: featured_item.href, | ||
| label: featured_item.label, | ||
| extra_attributes: featured_item.extra_attributes, | ||
| } %} | ||
| {% if featured_item.is_current is defined and featured_item.is_current == true%} | ||
| {% set _featured_item = _featured_item|merge({ | ||
| is_current: featured_item.is_current, | ||
| }) %} | ||
| {% endif %} | ||
| {% if featured_item.external is defined and featured_item.external == true %} | ||
| {% set _featured_item = _featured_item|merge({ | ||
| external: featured_item.external, | ||
| icon_path: ecl_icon_path | ||
| }) %} | ||
| {% endif %} | ||
| {% set _featured_items = _featured_items|merge([_featured_item]) %} | ||
| {% endfor %} | ||
| {% set _featured = _featured|merge({ | ||
| items: _featured_items, | ||
| }) %} | ||
| {% endif %} | ||
| {% set _child = _child|merge({ | ||
| children: _grandchildren, | ||
| featured: _featured, | ||
| see_all: child.see_all|default(false) | ||
| }) %} | ||
| {% set _children = _children|merge([_child]) %} | ||
| {% endfor %} | ||
|
|
||
| {# Process item's info. #} | ||
| {% set _info = [] %} | ||
| {% if item.info is not empty %} | ||
| {% set _info = _info|merge({ | ||
| 'title': item.info.title, | ||
| 'content': item.info.content, | ||
| }) %} | ||
| {% if item.info.link is not empty and item.info.link.href is not empty %} | ||
| {% set _info = _info|merge({ | ||
| 'link': { | ||
| 'link': { | ||
| 'label': item.info.link.label|default(item.info.link.href), | ||
| 'path': item.info.link.href|default(''), | ||
| }, | ||
| 'icon': { | ||
| name: "arrow-left", | ||
| path: ecl_icon_path, | ||
| transform: "flip-horizontal", | ||
| size: "xs" | ||
| }, | ||
| 'extra_classes': "ecl-mega-menu__info-link" | ||
| }, | ||
| }) %} | ||
| {% endif %} | ||
| {% endif %} | ||
|
|
||
| {# Process menu items. #} | ||
| {% set _item = { | ||
| path: item.href, | ||
| label: item.label, | ||
| info: _info|default([]), | ||
| children: _children, | ||
| link_aria_label: "Access item's children"|t, | ||
| extra_attributes: item.extra_attributes, | ||
| } %} | ||
| {% if _children is empty %} | ||
| {% if item.external is defined and item.external == true %} | ||
| {% set _item = _item|merge({ | ||
| external: item.external, | ||
| icon_path: ecl_icon_path | ||
| }) %} | ||
| {% endif %} | ||
| {% if item.container is defined and item.container is not empty %} | ||
| {% set _item = _item|merge({ | ||
| container: item.container, | ||
| }) %} | ||
| {% endif %} | ||
| {% endif %} | ||
| {% if item.is_current is defined and item.is_current == true %} | ||
| {% set _item = _item|merge({ | ||
| is_current: item.is_current, | ||
| }) %} | ||
| {% endif %} | ||
| {% set _items = _items|merge([_item]) %} | ||
| {% endfor %} | ||
|
|
||
| {% if _items %} | ||
| {# Add extra attributes. #} | ||
| {% set extra_attributes = [ | ||
| { | ||
| 'name': 'aria-label', | ||
| 'value': "Site navigation"|t, | ||
| } | ||
| ] %} | ||
| {% include '@ecl-twig/mega-menu' with { | ||
| title: label|default('Menu'|t), | ||
| toggle: { | ||
| link: { | ||
| label: label|default('Menu'|t), | ||
| hide_label: true | ||
| }, | ||
| icon: { | ||
| path: ecl_icon_path, | ||
| name: 'hamburger', | ||
| size: 'm', | ||
| } | ||
| }, | ||
| close: { | ||
| label: close.label|default('Close'|t), | ||
| icon: { | ||
| path: ecl_icon_path, | ||
| name: ecl_component_library == 'ec' ? 'close' : 'close-filled', | ||
| size: ecl_component_library == 'ec' ? 'm' : 's', | ||
| }, | ||
| hide_label: ecl_component_library == 'ec', | ||
| }, | ||
| back_label: back|default('Back'|t), | ||
| icon_path: ecl_icon_path, | ||
| items: _items, | ||
| see_all_label: see_all_label|default('Browse all'|t), | ||
| extra_attributes: extra_attributes|default([]), | ||
| } only %} | ||
| {% endif %} | ||
|
|
Oops, something went wrong.