@openeuropa/bcl-navigation 1.10.9 → 1.10.10
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/navigation.html.twig +105 -110
- package/package.json +6 -6
package/navigation.html.twig
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
{% import _self as navigation %}
|
|
2
|
-
{% apply spaceless %}
|
|
3
2
|
|
|
4
|
-
{
|
|
3
|
+
{#- Parameters:
|
|
5
4
|
- id (string) (default: '')
|
|
6
5
|
- pills (boolean) (default: false)
|
|
7
6
|
- tabs (boolean) (default: false) - If tabs is set to true, the nav should also be set to true for accessibility reasons
|
|
@@ -25,120 +24,119 @@
|
|
|
25
24
|
- attributes (drupal attrs)
|
|
26
25
|
#}
|
|
27
26
|
|
|
28
|
-
{
|
|
27
|
+
{#- Define main macro #}
|
|
29
28
|
{% macro render(items, pills, tabs, tabs_content, vertical, full_width, alignment, id, nav, navbar, attributes) %}
|
|
30
|
-
{
|
|
31
|
-
{% import _self as navigation %}
|
|
29
|
+
{%- import _self as navigation %}
|
|
32
30
|
|
|
33
|
-
{
|
|
34
|
-
{
|
|
35
|
-
{
|
|
36
|
-
{
|
|
37
|
-
{
|
|
38
|
-
{
|
|
39
|
-
{
|
|
40
|
-
{
|
|
41
|
-
{
|
|
42
|
-
{
|
|
31
|
+
{%- set _id = id|default('') %}
|
|
32
|
+
{%- set _pills = pills ?? false %}
|
|
33
|
+
{%- set _tabs = tabs ?? false %}
|
|
34
|
+
{%- set _vertical = vertical ?? false %}
|
|
35
|
+
{%- set _full_width = full_width ?? false %}
|
|
36
|
+
{%- set _alignment = alignment|default('') %}
|
|
37
|
+
{%- set _tabs_content = tabs_content ?? false %}
|
|
38
|
+
{%- set _nav = nav ?? false %}
|
|
39
|
+
{%- set _navbar = navbar ?? false %}
|
|
40
|
+
{%- set _items = items|default([]) %}
|
|
43
41
|
|
|
44
|
-
{
|
|
45
|
-
{
|
|
46
|
-
{
|
|
47
|
-
{
|
|
48
|
-
{
|
|
49
|
-
{
|
|
50
|
-
{
|
|
51
|
-
{
|
|
52
|
-
{
|
|
53
|
-
{
|
|
54
|
-
{
|
|
55
|
-
{
|
|
56
|
-
{
|
|
57
|
-
{
|
|
58
|
-
{
|
|
59
|
-
{
|
|
60
|
-
{
|
|
61
|
-
{
|
|
62
|
-
{
|
|
63
|
-
{
|
|
42
|
+
{%- if _navbar %}
|
|
43
|
+
{%- set _classes = ['navbar-nav'] %}
|
|
44
|
+
{%- else %}
|
|
45
|
+
{%- set _classes = ['nav'] %}
|
|
46
|
+
{%- endif %}
|
|
47
|
+
{%- if _pills %}
|
|
48
|
+
{%- set _classes = _classes|merge(['nav-pills']) %}
|
|
49
|
+
{%- endif %}
|
|
50
|
+
{%- if _tabs %}
|
|
51
|
+
{%- set _classes = _classes|merge(['nav-tabs']) %}
|
|
52
|
+
{%- endif %}
|
|
53
|
+
{%- if _vertical %}
|
|
54
|
+
{%- set _classes = _classes|merge(['flex-column']) %}
|
|
55
|
+
{%- endif %}
|
|
56
|
+
{%- if _full_width %}
|
|
57
|
+
{%- set _classes = _classes|merge(['nav-fill']) %}
|
|
58
|
+
{%- endif %}
|
|
59
|
+
{%- if _alignment is not empty %}
|
|
60
|
+
{%- set _classes = _classes|merge(['justify-content-' ~ _alignment]) %}
|
|
61
|
+
{%- endif %}
|
|
64
62
|
|
|
65
|
-
{
|
|
66
|
-
{
|
|
67
|
-
{
|
|
63
|
+
{%- if attributes is empty %}
|
|
64
|
+
{%- set attributes = create_attribute() %}
|
|
65
|
+
{%- endif %}
|
|
68
66
|
|
|
69
|
-
{
|
|
70
|
-
{
|
|
71
|
-
{
|
|
67
|
+
{%- if _id is not empty %}
|
|
68
|
+
{%- set attributes = attributes.setAttribute('id', _id) %}
|
|
69
|
+
{%- endif %}
|
|
72
70
|
|
|
73
|
-
{
|
|
74
|
-
{
|
|
75
|
-
{
|
|
76
|
-
{
|
|
71
|
+
{%- if _tabs %}
|
|
72
|
+
{%- set attributes = attributes.setAttribute('role', 'tablist') %}
|
|
73
|
+
{%- endif %}
|
|
74
|
+
{%- set attributes = attributes.addClass(_classes) %}
|
|
77
75
|
|
|
78
|
-
{
|
|
76
|
+
{%- if _nav -%}
|
|
79
77
|
<nav
|
|
80
78
|
{{ attributes }}
|
|
81
79
|
>
|
|
82
|
-
{
|
|
80
|
+
{%- else -%}
|
|
83
81
|
<ul
|
|
84
82
|
{{ attributes }}
|
|
85
83
|
>
|
|
86
|
-
{
|
|
87
|
-
{
|
|
88
|
-
{
|
|
89
|
-
{
|
|
90
|
-
{
|
|
91
|
-
{
|
|
92
|
-
{
|
|
93
|
-
{
|
|
94
|
-
{
|
|
95
|
-
{
|
|
96
|
-
{
|
|
97
|
-
{
|
|
98
|
-
{
|
|
99
|
-
{
|
|
100
|
-
{
|
|
101
|
-
{
|
|
102
|
-
{
|
|
103
|
-
{
|
|
84
|
+
{%- endif %}
|
|
85
|
+
{%- if _items is not empty and _items is iterable %}
|
|
86
|
+
{%- for _item in items %}
|
|
87
|
+
{%- set _nav_class = 'nav-item' %}
|
|
88
|
+
{%- if _item.dropdown %}
|
|
89
|
+
{%- set _nav_class = _nav_class ~ ' dropdown' %}
|
|
90
|
+
{%- set _item = _item|merge({remove_wrapper: true}) %}
|
|
91
|
+
{%- endif %}
|
|
92
|
+
{%- if _item.dropdown or _item.mega_menu %}
|
|
93
|
+
{%- set _item_classes = [] %}
|
|
94
|
+
{%- else %}
|
|
95
|
+
{%- set _item_classes = ['nav-link'] %}
|
|
96
|
+
{%- endif %}
|
|
97
|
+
{%- if _item.active %}
|
|
98
|
+
{%- set _item_classes = _item_classes|merge(['active']) %}
|
|
99
|
+
{%- endif %}
|
|
100
|
+
{%- if _item.attributes is empty %}
|
|
101
|
+
{%- set _item = _item|merge({
|
|
104
102
|
attributes: create_attribute()
|
|
105
103
|
}) %}
|
|
106
|
-
{
|
|
107
|
-
{
|
|
104
|
+
{%- endif %}
|
|
105
|
+
{%- set _item = _item|merge({
|
|
108
106
|
attributes: _item.attributes.addClass(_item_classes),
|
|
109
107
|
clean_class: true}) %}
|
|
110
|
-
{
|
|
108
|
+
{%- if not _nav -%}
|
|
111
109
|
<li
|
|
112
110
|
class="{{ _nav_class }}"
|
|
113
111
|
{% if _tabs %}
|
|
114
112
|
role="tab"
|
|
115
113
|
{% endif %}
|
|
116
114
|
>
|
|
117
|
-
{
|
|
118
|
-
{
|
|
115
|
+
{%- elseif _tabs and _item.dropdown is not defined %}
|
|
116
|
+
{%- set _item = _item|merge({
|
|
119
117
|
attributes: _item.attributes.setAttribute("role", "tab"),
|
|
120
|
-
})
|
|
118
|
+
})
|
|
121
119
|
%}
|
|
122
|
-
{
|
|
123
|
-
{
|
|
124
|
-
{
|
|
125
|
-
{
|
|
120
|
+
{%- endif %}
|
|
121
|
+
{%- if _item.dropdown is defined %}
|
|
122
|
+
{%- if _tabs %}
|
|
123
|
+
{%- set _item = _item|merge({
|
|
126
124
|
inside_navigation: true,
|
|
127
125
|
trigger: _item.trigger|merge({
|
|
128
126
|
attributes: _item.trigger.attributes.setAttribute("role", "tab"),
|
|
129
127
|
}),
|
|
130
128
|
}) %}
|
|
131
|
-
{
|
|
132
|
-
{
|
|
133
|
-
{
|
|
134
|
-
{
|
|
135
|
-
{
|
|
136
|
-
{
|
|
137
|
-
{
|
|
138
|
-
{
|
|
139
|
-
{
|
|
140
|
-
{
|
|
141
|
-
{{ navigation.render(
|
|
129
|
+
{%- endif %}
|
|
130
|
+
{%- include '@oe-bcl/bcl-dropdown/dropdown.html.twig' with _item only %}
|
|
131
|
+
{%- elseif _item.button is defined %}
|
|
132
|
+
{%- include '@oe-bcl/bcl-button/button.html.twig' with _item only %}
|
|
133
|
+
{%- elseif _item.mega_menu is defined %}
|
|
134
|
+
{%- include '@oe-bcl/bcl-mega-menu/mega-menu.html.twig' with _item only %}
|
|
135
|
+
{%- else %}
|
|
136
|
+
{%- include '@oe-bcl/bcl-link/link.html.twig' with _item only %}
|
|
137
|
+
{%- endif %}
|
|
138
|
+
{%- if _item.navigation is defined and _item.navigation.items is not empty and _item.navigation.items is iterable %}
|
|
139
|
+
{{- navigation.render(
|
|
142
140
|
_item.navigation.items,
|
|
143
141
|
_item.navigation.pills,
|
|
144
142
|
_item.navigation.tabs,
|
|
@@ -151,39 +149,36 @@
|
|
|
151
149
|
_item.navigation.navbar,
|
|
152
150
|
_item.navigation.attributes
|
|
153
151
|
) }}
|
|
154
|
-
{
|
|
155
|
-
{
|
|
152
|
+
{%- endif %}
|
|
153
|
+
{%- if not _nav -%}
|
|
156
154
|
</li>
|
|
157
|
-
{
|
|
158
|
-
{
|
|
159
|
-
{
|
|
160
|
-
{
|
|
155
|
+
{%- endif %}
|
|
156
|
+
{%- endfor %}
|
|
157
|
+
{%- endif %}
|
|
158
|
+
{%- if _nav -%}
|
|
161
159
|
</nav>
|
|
162
|
-
{
|
|
160
|
+
{%- else -%}
|
|
163
161
|
</ul>
|
|
164
|
-
{
|
|
165
|
-
{
|
|
162
|
+
{%- endif %}
|
|
163
|
+
{%- if _tabs_content -%}
|
|
166
164
|
<div class="tab-content">
|
|
167
165
|
{%- block contents -%}
|
|
168
166
|
{% if _items is not empty and _items is iterable %}
|
|
169
|
-
{
|
|
170
|
-
{
|
|
171
|
-
{
|
|
172
|
-
{
|
|
173
|
-
{
|
|
174
|
-
{
|
|
167
|
+
{%- for _item in _items %}
|
|
168
|
+
{%- if _item.content is not empty %}
|
|
169
|
+
{%- set _content_class = 'tab-pane fade' %}
|
|
170
|
+
{%- if _item.active %}
|
|
171
|
+
{%- set _content_class = _content_class ~ ' show active' %}
|
|
172
|
+
{%- endif -%}
|
|
175
173
|
<div class="{{ _content_class }}" id="{{ _item.target }}" role="tabpanel" aria-labelledby="{{ _item.id }}">
|
|
176
174
|
{{- _item.content -}}
|
|
177
175
|
</div>
|
|
178
|
-
{
|
|
179
|
-
{
|
|
180
|
-
{
|
|
176
|
+
{%- endif %}
|
|
177
|
+
{%- endfor %}
|
|
178
|
+
{%- endif %}
|
|
181
179
|
{%- endblock -%}
|
|
182
180
|
</div>
|
|
183
|
-
{
|
|
184
|
-
{
|
|
185
|
-
{% endmacro %}
|
|
186
|
-
|
|
187
|
-
{{ navigation.render(items, pills, tabs, tabs_content, vertical, full_width, alignment, id, nav, navbar, attributes) }}
|
|
181
|
+
{%- endif %}
|
|
182
|
+
{%- endmacro %}
|
|
188
183
|
|
|
189
|
-
{
|
|
184
|
+
{{- navigation.render(items, pills, tabs, tabs_content, vertical, full_width, alignment, id, nav, navbar, attributes) -}}
|
package/package.json
CHANGED
|
@@ -2,16 +2,16 @@
|
|
|
2
2
|
"name": "@openeuropa/bcl-navigation",
|
|
3
3
|
"author": "European Commission",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
|
-
"version": "1.10.
|
|
5
|
+
"version": "1.10.10",
|
|
6
6
|
"publishConfig": {
|
|
7
7
|
"access": "public"
|
|
8
8
|
},
|
|
9
9
|
"description": "OE - BCL navigation",
|
|
10
10
|
"dependencies": {
|
|
11
|
-
"@openeuropa/bcl-button": "^1.10.
|
|
12
|
-
"@openeuropa/bcl-dropdown": "^1.10.
|
|
13
|
-
"@openeuropa/bcl-link": "^1.10.
|
|
14
|
-
"@openeuropa/bcl-mega-menu": "^1.10.
|
|
11
|
+
"@openeuropa/bcl-button": "^1.10.10",
|
|
12
|
+
"@openeuropa/bcl-dropdown": "^1.10.10",
|
|
13
|
+
"@openeuropa/bcl-link": "^1.10.10",
|
|
14
|
+
"@openeuropa/bcl-mega-menu": "^1.10.10"
|
|
15
15
|
},
|
|
16
16
|
"repository": {
|
|
17
17
|
"type": "git",
|
|
@@ -27,5 +27,5 @@
|
|
|
27
27
|
"design-system",
|
|
28
28
|
"twig"
|
|
29
29
|
],
|
|
30
|
-
"gitHead": "
|
|
30
|
+
"gitHead": "9f7c4a046e8f8f325e4de7e998f1c2a654f6eed1"
|
|
31
31
|
}
|