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