@openeuropa/bcl-mega-menu 0.3694.202525081545 → 0.4029.202510071330
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/mega-menu-items.html.twig +35 -0
- package/mega-menu-submenu.html.twig +65 -0
- package/mega-menu.html.twig +43 -135
- package/package.json +5 -5
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
{% apply spaceless %}
|
|
2
|
+
|
|
3
|
+
{% set _label = label ?? null %}
|
|
4
|
+
{% set _items = items ?? [] %}
|
|
5
|
+
{% set _icon_path = icon_path ?? '' %}
|
|
6
|
+
{% set _level = level ?? 1 %}
|
|
7
|
+
{% set _see_all = see_all ?? null %}
|
|
8
|
+
|
|
9
|
+
<ul class="bcl-mega-menu__items __level-{{ _level }}">
|
|
10
|
+
{% for _item in _items %}
|
|
11
|
+
{% set _li_attributes = _item.li_attributes ?? create_attribute() %}
|
|
12
|
+
{% if _item.items is defined and _item.items is not empty %}
|
|
13
|
+
{# This is a parent item. #}
|
|
14
|
+
<li{{ _li_attributes.addClass('__parent') }}>
|
|
15
|
+
{% include '@oe-bcl/bcl-mega-menu/mega-menu-submenu.html.twig' with _item|merge({
|
|
16
|
+
icon_path: _icon_path,
|
|
17
|
+
level: _level + 1,
|
|
18
|
+
}) only %}
|
|
19
|
+
</li>
|
|
20
|
+
{% else %}
|
|
21
|
+
{# This is a leaf item. #}
|
|
22
|
+
<li{{ _li_attributes.addClass('__leaf') }}>
|
|
23
|
+
{% if _item.path is empty %}
|
|
24
|
+
{# This is a nolink item. #}
|
|
25
|
+
<span{{ _item.attributes ?? '' }}>{{ _item.label }}</span>
|
|
26
|
+
{% else %}
|
|
27
|
+
{# This is a link. #}
|
|
28
|
+
{% include '@oe-bcl/bcl-link/link.html.twig' with _item only %}
|
|
29
|
+
{% endif %}
|
|
30
|
+
</li>
|
|
31
|
+
{% endif %}
|
|
32
|
+
{% endfor %}
|
|
33
|
+
</ul>
|
|
34
|
+
|
|
35
|
+
{% endapply %}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
{% apply spaceless %}
|
|
2
|
+
|
|
3
|
+
{% set _items = items ?? [] %}
|
|
4
|
+
{% set _trigger = trigger ?? null %}
|
|
5
|
+
{% set _icon_path = icon_path ?? '' %}
|
|
6
|
+
{% set _level = level ?? 2 %}
|
|
7
|
+
{% set _see_all = see_all ?? null %}
|
|
8
|
+
|
|
9
|
+
{% set _trigger_id = _trigger.id|default('mm-trigger-' ~ random(10000)) %}
|
|
10
|
+
{% set _panel_id = 'mm-panel-' ~ _trigger_id %}
|
|
11
|
+
|
|
12
|
+
{% set _trigger_attributes = _trigger.attributes ?? create_attribute() %}
|
|
13
|
+
{% set _trigger = _trigger|merge({
|
|
14
|
+
attributes: _trigger_attributes
|
|
15
|
+
.setAttribute('id', _trigger_id)
|
|
16
|
+
.setAttribute('aria-controls', _panel_id)
|
|
17
|
+
.setAttribute('aria-expanded', 'false')
|
|
18
|
+
.setAttribute('aria-haspopup', 'menu'),
|
|
19
|
+
remove_icon_spacers: true,
|
|
20
|
+
clean_class: true,
|
|
21
|
+
}) %}
|
|
22
|
+
{% include '@oe-bcl/bcl-button/button.html.twig' with _trigger only %}
|
|
23
|
+
|
|
24
|
+
{# Add an optional "See all" link as last item. #}
|
|
25
|
+
{% if _see_all is not empty %}
|
|
26
|
+
{# Wrap the label for an ellipsis. #}
|
|
27
|
+
{% set _see_all_label %}
|
|
28
|
+
<span>{{- _see_all.label -}}</span>
|
|
29
|
+
{% endset %}
|
|
30
|
+
{% set _see_all_attr = (_see_all.attributes is defined ? _see_all.attributes : create_attribute()) %}
|
|
31
|
+
{% set _see_all = _see_all|merge({
|
|
32
|
+
label: _see_all_label,
|
|
33
|
+
icon: {
|
|
34
|
+
name: 'arrow-right',
|
|
35
|
+
path: _icon_path,
|
|
36
|
+
},
|
|
37
|
+
li_attributes: create_attribute()
|
|
38
|
+
.addClass('__see_all'),
|
|
39
|
+
attributes: _see_all_attr
|
|
40
|
+
.addClass(['see-all-button'])
|
|
41
|
+
.setAttribute('aria-label', 'See all items in ‘' ~ _trigger.label ~ '’')
|
|
42
|
+
}) %}
|
|
43
|
+
{% set _items = _items|merge([_see_all]) %}
|
|
44
|
+
{% endif %}
|
|
45
|
+
{% set submenu_attributes = create_attribute()
|
|
46
|
+
.setAttribute('id', _panel_id)
|
|
47
|
+
.setAttribute('hidden', '')
|
|
48
|
+
.setAttribute('role', 'group')
|
|
49
|
+
.setAttribute('aria-labelledby', _trigger_id)
|
|
50
|
+
.addClass('bcl-mega-menu__submenu', '__level-' ~ _level)
|
|
51
|
+
%}
|
|
52
|
+
<div{{ submenu_attributes }}>
|
|
53
|
+
{% if _trigger %}
|
|
54
|
+
<div class="__header">
|
|
55
|
+
<p class="__label">{{ _trigger.label }}</p>
|
|
56
|
+
</div>
|
|
57
|
+
{% endif %}
|
|
58
|
+
{% include '@oe-bcl/bcl-mega-menu/mega-menu-items.html.twig' with {
|
|
59
|
+
items: _items,
|
|
60
|
+
icon_path: _icon_path,
|
|
61
|
+
level: _level,
|
|
62
|
+
} only %}
|
|
63
|
+
</div>
|
|
64
|
+
|
|
65
|
+
{% endapply %}
|
package/mega-menu.html.twig
CHANGED
|
@@ -25,10 +25,10 @@
|
|
|
25
25
|
{% set _content_block = content_block|default('') %}
|
|
26
26
|
{% set _content_link = content_link|default({}) %}
|
|
27
27
|
{% set _icon_path = icon_path|default('') %}
|
|
28
|
-
{% set _min_height = min_height|default('300px') %}
|
|
29
28
|
{% set _items = items|default([]) %}
|
|
30
29
|
{% set _back_button_label = back_button_label|default('Back') %}
|
|
31
30
|
{% set _icon_path = icon_path|default('') %}
|
|
31
|
+
{% set _menu_id = 'mega-menu-' ~ _id %}
|
|
32
32
|
|
|
33
33
|
{% if attributes is empty %}
|
|
34
34
|
{% set attributes = create_attribute() %}
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
|
|
37
37
|
{% set _classes = ['bcl-mega-menu'] %}
|
|
38
38
|
|
|
39
|
-
{% set attributes = attributes.
|
|
39
|
+
{% set attributes = attributes.addClass(_classes) %}
|
|
40
40
|
|
|
41
41
|
{% if _trigger.attributes is empty %}
|
|
42
42
|
{% set _trigger = _trigger|merge({
|
|
@@ -46,27 +46,23 @@
|
|
|
46
46
|
{% set _trigger = _trigger|merge({
|
|
47
47
|
attributes: _trigger.attributes.addClass(['dropdown-toggle', 'nav-link'])
|
|
48
48
|
.setAttribute('aria-expanded', 'false')
|
|
49
|
+
.setAttribute('aria-haspopup', 'menu')
|
|
50
|
+
.setAttribute('aria-controls', _menu_id)
|
|
49
51
|
.setAttribute('data-bs-toggle', 'dropdown')
|
|
50
52
|
.setAttribute('data-bs-auto-close', 'outside')
|
|
51
53
|
.setAttribute('id', _id)
|
|
52
54
|
}) %}
|
|
53
|
-
{% if _link %}
|
|
54
|
-
{% set _trigger = _trigger|merge({
|
|
55
|
-
attributes: _trigger.attributes.setAttribute('role', 'button')
|
|
56
|
-
}) %}
|
|
57
|
-
{% else %}
|
|
58
|
-
{% set _trigger = _trigger|merge({
|
|
59
|
-
attributes: _trigger.attributes.setAttribute('autocomplete', 'off')
|
|
60
|
-
}) %}
|
|
61
|
-
{% endif %}
|
|
62
55
|
|
|
63
|
-
<div {{ attributes }}
|
|
56
|
+
<div {{ attributes }}>
|
|
64
57
|
{% include '@oe-bcl/bcl-button/button.html.twig' with _trigger|merge({
|
|
65
|
-
variant: 'link'
|
|
58
|
+
variant: 'link',
|
|
59
|
+
clean_class: true,
|
|
66
60
|
}) only %}
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
61
|
+
{# Mega menu panel. #}
|
|
62
|
+
<nav id="{{ _menu_id }}" class="bcl-mega-menu__container dropdown-menu" aria-labelledby="{{ _id }}" aria-label="Main mega menu">
|
|
63
|
+
<div class="container">
|
|
64
|
+
{# Mobile back button. #}
|
|
65
|
+
<div class="container d-lg-none bcl-mega-menu__back-button-block">
|
|
70
66
|
{% include '@oe-bcl/bcl-button/button.html.twig' with {
|
|
71
67
|
label: _back_button_label,
|
|
72
68
|
icon_position: "before",
|
|
@@ -75,133 +71,45 @@
|
|
|
75
71
|
path: _icon_path,
|
|
76
72
|
name: "arrow-left",
|
|
77
73
|
},
|
|
78
|
-
attributes: create_attribute().addClass(['back-button'])
|
|
74
|
+
attributes: create_attribute().addClass(['back-button']).setAttribute('aria-label', 'Back to main menu')
|
|
79
75
|
} only %}
|
|
80
76
|
</div>
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
<div class="
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
<div class="navigation-items" role="tablist" aria-orientation="vertical">
|
|
107
|
-
{% set _dropdown_panels = _dropdown_panels|default([]) %}
|
|
108
|
-
|
|
109
|
-
{% for _raw in _items %}
|
|
110
|
-
{% set _render_item = _raw %}
|
|
111
|
-
{% if _raw.items is defined and _raw.items is not empty %}
|
|
112
|
-
{% set _panel_id = 'mm-panel-' ~ _id ~ '-' ~ loop.index0 %}
|
|
113
|
-
{% set _trigger_id = 'mm-trigger-' ~ _id ~ '-' ~ loop.index0 %}
|
|
114
|
-
|
|
115
|
-
{% set _raw_items = _raw.items %}
|
|
116
|
-
|
|
117
|
-
{% if _raw.see_all is defined and _raw.see_all is not empty %}
|
|
118
|
-
{% set _see_all_attr = (_raw.see_all.attributes is defined ? _raw.see_all.attributes : create_attribute()) %}
|
|
119
|
-
{% set _see_all = _raw.see_all|merge({
|
|
120
|
-
icon: {
|
|
121
|
-
name: 'arrow-right',
|
|
122
|
-
path: _icon_path,
|
|
123
|
-
size: 'fluid'
|
|
124
|
-
},
|
|
125
|
-
attributes: _see_all_attr.addClass(['see-all-button'])
|
|
126
|
-
}) %}
|
|
127
|
-
|
|
128
|
-
{% set _raw_items = _raw_items|merge([ _see_all ]) %}
|
|
129
|
-
{% endif %}
|
|
130
|
-
|
|
131
|
-
{% set _dropdown_panels = _dropdown_panels|merge([{
|
|
132
|
-
id: _panel_id,
|
|
133
|
-
trigger_id: _trigger_id,
|
|
134
|
-
items: _raw_items,
|
|
135
|
-
title: _raw.trigger.label,
|
|
136
|
-
}]) %}
|
|
137
|
-
|
|
138
|
-
{% set _trigger_attributes = (_raw.trigger.attributes is defined ? _raw.trigger.attributes : create_attribute())
|
|
139
|
-
.addClass(['tab-toggle'])
|
|
140
|
-
.setAttribute('id', _trigger_id)
|
|
141
|
-
.setAttribute('role', 'tab')
|
|
142
|
-
.setAttribute('data-bs-toggle', 'tab')
|
|
143
|
-
.setAttribute('data-bs-target', '#' ~ _panel_id)
|
|
144
|
-
.setAttribute('aria-controls', _panel_id)
|
|
145
|
-
.setAttribute('aria-selected', 'false')
|
|
146
|
-
%}
|
|
147
|
-
|
|
148
|
-
{% set _render_item = _raw|merge({
|
|
149
|
-
trigger: _raw.trigger|merge({
|
|
150
|
-
icon: {
|
|
151
|
-
name: 'chevron-right',
|
|
152
|
-
path: _icon_path,
|
|
153
|
-
size: 'fluid'
|
|
154
|
-
},
|
|
155
|
-
attributes: _trigger_attributes.addClass('no-chevron')
|
|
156
|
-
})
|
|
157
|
-
}) %}
|
|
158
|
-
{% set _render_item = _render_item.trigger %}
|
|
159
|
-
{% endif %}
|
|
160
|
-
|
|
161
|
-
{% include '@oe-bcl/bcl-link/link.html.twig' with _render_item only %}
|
|
162
|
-
{% endfor %}
|
|
77
|
+
{# Info/summary and submenu columns. #}
|
|
78
|
+
<div class="position-relative">
|
|
79
|
+
<div class="row">
|
|
80
|
+
{# Content / summary column. #}
|
|
81
|
+
{% if content_block is defined %}
|
|
82
|
+
<div class="col-md-12 col-xl-3 position-relative bcl-mega-menu__info">
|
|
83
|
+
<div class="content-block">
|
|
84
|
+
{%- block content_block -%}
|
|
85
|
+
{{ _content_block }}
|
|
86
|
+
{%- endblock -%}
|
|
87
|
+
{% if _content_link.path is not empty %}
|
|
88
|
+
{% set _content_link = _content_link|merge({
|
|
89
|
+
icon: _content_link.icon|default({})|merge({
|
|
90
|
+
path: _icon_path
|
|
91
|
+
}),
|
|
92
|
+
attributes: (_content_link.attributes is defined
|
|
93
|
+
? _content_link.attributes
|
|
94
|
+
: create_attribute()
|
|
95
|
+
).addClass('content-link')
|
|
96
|
+
}) %}
|
|
97
|
+
<p class="m-0">{% include '@oe-bcl/bcl-link/link.html.twig' with _content_link only %}</p>
|
|
98
|
+
{% endif %}
|
|
99
|
+
</div>
|
|
100
|
+
<div class="shadow-container">
|
|
101
|
+
<span class="shadow-bg"></span>
|
|
163
102
|
</div>
|
|
164
103
|
</div>
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
<div
|
|
170
|
-
class="tab-pane p-0"
|
|
171
|
-
id="{{ _panel.id }}"
|
|
172
|
-
role="tabpanel"
|
|
173
|
-
aria-labelledby="{{ _panel.trigger_id }}"
|
|
174
|
-
>
|
|
175
|
-
<p class="panel-title">{{ _panel.title }}</p>
|
|
176
|
-
<ul class="list-unstyled m-0">
|
|
177
|
-
{% for _item in _panel.items %}
|
|
178
|
-
{% if _item.attributes is empty %}
|
|
179
|
-
{% set _item = _item|merge({
|
|
180
|
-
attributes: create_attribute()
|
|
181
|
-
}) %}
|
|
182
|
-
{% endif %}
|
|
183
|
-
{% if _item.active %}
|
|
184
|
-
{% set _item_classes = _item_classes|merge(['active']) %}
|
|
185
|
-
{% endif %}
|
|
186
|
-
{% set _item = _item|merge({
|
|
187
|
-
clean_class: true,
|
|
188
|
-
attributes: _item.attributes.addClass(_item_classes)
|
|
189
|
-
}) %}
|
|
190
|
-
<li>
|
|
191
|
-
{% include '@oe-bcl/bcl-link/link.html.twig' with _item only %}
|
|
192
|
-
</li>
|
|
193
|
-
{% endfor %}
|
|
194
|
-
</ul>
|
|
195
|
-
</div>
|
|
196
|
-
{% endif %}
|
|
197
|
-
{% endfor %}
|
|
198
|
-
</div>
|
|
199
|
-
</div>
|
|
104
|
+
{% endif %}
|
|
105
|
+
{# Submenu column. #}
|
|
106
|
+
<div class="col-md-12 col-lg-4 col-xl-3 bcl-mega-menu__menu">
|
|
107
|
+
{% include '@oe-bcl/bcl-mega-menu/mega-menu-items.html.twig' %}
|
|
200
108
|
</div>
|
|
201
109
|
</div>
|
|
202
110
|
</div>
|
|
203
111
|
</div>
|
|
204
|
-
</
|
|
112
|
+
</nav>
|
|
205
113
|
</div>
|
|
206
114
|
|
|
207
115
|
{% endapply %}
|
package/package.json
CHANGED
|
@@ -2,15 +2,15 @@
|
|
|
2
2
|
"name": "@openeuropa/bcl-mega-menu",
|
|
3
3
|
"author": "European Commission",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
|
-
"version": "0.
|
|
5
|
+
"version": "0.4029.202510071330",
|
|
6
6
|
"publishConfig": {
|
|
7
7
|
"access": "public"
|
|
8
8
|
},
|
|
9
9
|
"description": "OE - BCL mega menu",
|
|
10
10
|
"dependencies": {
|
|
11
|
-
"@openeuropa/bcl-button": "^0.
|
|
12
|
-
"@openeuropa/bcl-dropdown": "^0.
|
|
13
|
-
"@openeuropa/bcl-link": "^0.
|
|
11
|
+
"@openeuropa/bcl-button": "^0.4029.202510071330",
|
|
12
|
+
"@openeuropa/bcl-dropdown": "^0.4029.202510071330",
|
|
13
|
+
"@openeuropa/bcl-link": "^0.4029.202510071330"
|
|
14
14
|
},
|
|
15
15
|
"repository": {
|
|
16
16
|
"type": "git",
|
|
@@ -26,5 +26,5 @@
|
|
|
26
26
|
"design-system",
|
|
27
27
|
"twig"
|
|
28
28
|
],
|
|
29
|
-
"gitHead": "
|
|
29
|
+
"gitHead": "4b05cc3494323eeafb76cd1921e41f5256c7c7b1"
|
|
30
30
|
}
|