@openeuropa/bcl-gallery 0.27.0 → 0.28.1

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.
@@ -0,0 +1,63 @@
1
+ {% apply spaceless %}
2
+
3
+ {#
4
+ Parameters:
5
+ - item (object) (default: '')
6
+ format: {
7
+ thumbnails (string) img path
8
+ media: (string) <img> tag
9
+ caption (string)
10
+ caption_title (string)
11
+ caption_classes (string)
12
+ interval (integer) (default: 0)
13
+ }
14
+ - carousel_id (string) (default: '')
15
+ - modal_id (string) (default: '')
16
+ - icon_path (string) (default: '')
17
+ - attributes (drupal attrs)
18
+ #}
19
+
20
+ {% set _item = item|default({}) %}
21
+ {% set _carousel_id = carousel_id|default('') %}
22
+ {% set _modal_id = modal_id|default('') %}
23
+ {% set _icon_path = icon_path|default('') %}
24
+
25
+ {% if attributes is empty %}
26
+ {% set attributes = create_attribute() %}
27
+ {% endif %}
28
+
29
+ {% set attributes = attributes.addClass(['bcl-gallery__item', 'd-block', 'w-100', 'img-fluid'])
30
+ .setAttribute('data-bs-target', '#' ~ _carousel_id)
31
+ .setAttribute('data-bs-slide-to', loop.index - 1)
32
+ %}
33
+
34
+ <a
35
+ {{ attributes }}
36
+ >
37
+ <div class="bcl-gallery__item-overlay" data-bs-target="#{{ _modal_id }}" data-bs-toggle="modal">
38
+ {% if '<iframe' in _item.media or '<video' in _item.media %}
39
+ <span class="bcl-gallery__item-play-icon">
40
+ {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
41
+ name: 'play-fill',
42
+ size: 's',
43
+ path: _icon_path,
44
+ } only %}
45
+ </span>
46
+ {% endif %}
47
+ {% if _item.caption is not empty or item.caption_title is not empty %}
48
+ <div class="bcl-gallery__item-caption">
49
+ {% if _item.caption_title is not empty %}
50
+ <p class="fs-5">{{ _item.caption_title }}</p>
51
+ {% endif %}
52
+ {% if _item.caption is not empty %}
53
+ <div class="bcl-gallery__item-description">
54
+ {{ _item.caption }}
55
+ </div>
56
+ {% endif %}
57
+ </div>
58
+ {% endif %}
59
+ </div>
60
+ {{ _item.thumbnail }}
61
+ </a>
62
+
63
+ {% endapply %}
@@ -0,0 +1,105 @@
1
+ {% apply spaceless %}
2
+
3
+ {#
4
+ Parameters:
5
+ - id (string) (default: '')
6
+ - title (string) (default: '')
7
+ - title_tag (string) (default: 'h2')
8
+ - title_link: (link object) (default: {})
9
+ - title_attributes (drupal attrs)
10
+ - items (array of objects) format: [
11
+ {
12
+ thumbnails (string) img path
13
+ media: (string) <img> tag
14
+ caption (string)
15
+ caption_title (string)
16
+ caption_classes (string)
17
+ interval (integer) (default: 0)
18
+ }
19
+ ]
20
+ - carousel_id (string) (default: '')
21
+ - next_label (string) (default: '')
22
+ - prev_label (string) (default: '')
23
+ - icon_path (string) (default: '')
24
+ - attributes (drupal attrs)
25
+ #}
26
+
27
+ {% set _id = id|default('') %}
28
+ {% set _title = title|default('') %}
29
+ {% set _title_tag = title_tag|default('h3') %}
30
+ {% set _title_link = title_link|default({}) %}
31
+ {% set _title_attributes = title_attributes ?: create_attribute() %}
32
+ {% set _items = items|default([]) %}
33
+ {% set _carousel_id = carousel_id|default('') %}
34
+ {% set _next_label = next_label|default('Next') %}
35
+ {% set _prev_label = prev_label|default('Previous') %}
36
+ {% set _icon_path = icon_path|default('') %}
37
+ {% set _carousel_items = [] %}
38
+
39
+ {% if attributes is empty %}
40
+ {% set attributes = create_attribute() %}
41
+ {% endif %}
42
+
43
+ {% set attributes = attributes.addClass('modal')
44
+ .setAttribute('id', _id)
45
+ .setAttribute('tabindex', '-1')
46
+ .setAttribute('aria-labelledby', _id)
47
+ .setAttribute('aria-hidden', 'true')
48
+ .setAttribute('data-bs-backdrop', 'false')
49
+ %}
50
+
51
+ <div
52
+ {{ attributes }}
53
+ >
54
+ <div class="modal-dialog modal-dialog-centered modal-fullscreen">
55
+ <div class="modal-content">
56
+ <div class="modal-header border-0 justify-content-between">
57
+ {% if _title is not empty %}
58
+ <div class="modal-title">
59
+ {% if _title is not empty %}
60
+ {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
61
+ title: _title,
62
+ title_tag: _title_tag,
63
+ title_link: _title_link,
64
+ attributes: _title_attributes.addClass(['d-sm-block', 'd-none']),
65
+ } only %}
66
+ {% endif %}
67
+ </div>
68
+ {% endif %}
69
+ <div class="carousel-pager">
70
+ <span>1</span> / {{ _items|length -}}
71
+ </div>
72
+ <div class="modal-close">
73
+ {% set button_attributes = create_attribute()
74
+ .addClass('btn-close')
75
+ .setAttribute('aria-label', 'Close')
76
+ .setAttribute('data-bs-dismiss', 'modal')
77
+ %}
78
+ {% include '@oe-bcl/bcl-button/button.html.twig' with {
79
+ clean_class: true,
80
+ attributes: button_attributes
81
+ } only %}
82
+ </div>
83
+ </div>
84
+ <div class="modal-body d-flex align-items-center justify-content-center">
85
+ {% for _item in _items %}
86
+ {% set _carousel_items = _carousel_items|merge([_item|merge({
87
+ caption: ('<iframe' in _item.media or '<video' in _item.media) ? '' : _item.caption,
88
+ image: ('<iframe' in _item.media or '<img' in _item.media) ? _item.media|replace({'src=': 'data-src='}) : _item.media,
89
+ })]) %}
90
+ {% endfor %}
91
+ {% include '@oe-bcl/bcl-carousel/carousel.html.twig' with {
92
+ id: _carousel_id,
93
+ with_controls: true,
94
+ with_indicators: false,
95
+ prev_label: _prev_label,
96
+ next_label: _next_label,
97
+ autoplay: false,
98
+ items: _carousel_items,
99
+ } only %}
100
+ </div>
101
+ </div>
102
+ </div>
103
+ </div>
104
+
105
+ {% endapply %}
package/gallery.html.twig CHANGED
@@ -40,11 +40,9 @@ Parameters:
40
40
  {% set _max_visible_thumbnails = max_visible_thumbnails|default(5) %}
41
41
  {% set _items = items|default([]) %}
42
42
  {% set _icon_path = icon_path|default('') %}
43
-
44
- {% set _carousel_items = [] %}
45
43
  {% set _carousel_id = "carousel" ~ _id|capitalize %}
46
44
  {% set _modal_id = "modal" ~ _id|capitalize %}
47
- {% set _collpase_id = "collapse" ~ _id|capitalize %}
45
+ {% set _collapse_id = "collapse" ~ _id|capitalize %}
48
46
  {% set _max_visible_thumbnails = _max_visible_thumbnails + 1 %}
49
47
 
50
48
  {% if attributes is empty %}
@@ -53,155 +51,104 @@ Parameters:
53
51
 
54
52
  {% set attributes = attributes.addClass('bcl-gallery') %}
55
53
 
56
- {# Print the result #}
57
-
58
- {% if _items is not empty %}
59
-
60
- <div {{ attributes }}>
61
- {% if _items is iterable %}
62
- <div class="d-sm-flex flex-sm-row align-items-sm-center">
63
- <div class="flex-sm-grow-1">
64
- {% if _title is not empty %}
65
- {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
66
- title: _title,
67
- title_tag: _title_tag,
68
- title_link: _title_link,
69
- attributes: _title_attributes,
70
- } only %}
71
- {% endif %}
72
- </div>
73
- <div class="mb-3 mb-sm-0 fw-bold">
74
- {%- if _counter is not empty -%}
75
- {{ _counter|replace({'%d': _items|length}) }}
76
- {%- endif -%}
77
- </div>
78
- </div>
79
-
80
- {% for _item in _items %}
81
- {% if loop.first %}
82
- <div class="bcl-gallery__thumbnails">
83
- {% endif %}
84
- {% if loop.index == _max_visible_thumbnails %}
85
- <div class="bcl-gallery__thumbnails-collaspe collapse" id="{{ _collpase_id }}">
86
- {% endif %}
87
- {% if loop.index % _max_visible_thumbnails == 0 or loop.first %}
88
- <ul class="bcl-gallery__grid">
89
- {% endif %}
90
- <li>
91
- <a href="#" data-bs-target="#{{ _carousel_id }}" data-bs-slide-to="{{ loop.index - 1 }}" class="bcl-gallery__item d-block w-100 img-fluid">
92
- <div class="bcl-gallery__item-overlay" data-bs-target="#{{ _modal_id }}" data-bs-toggle="modal">
93
- {% if '<iframe' in _item.media or '<video' in _item.media %}
94
- <span class="bcl-gallery__item-play-icon">
95
- {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
96
- name: 'play-fill',
97
- size: 's',
98
- path: _icon_path,
99
- } only %}
100
- </span>
101
- {% endif %}
102
- {% if _item.caption is not empty or item.caption_title is not empty %}
103
- <div class="bcl-gallery__item-caption">
104
- {% if _item.caption_title is not empty %}
105
- <p class="fs-5">{{ _item.caption_title }}</p>
106
- {% endif %}
107
- {% if _item.caption is not empty %}
108
- <div class="bcl-gallery__item-description">
109
- {{ _item.caption }}
110
- </div>
111
- {% endif %}
112
- </div>
113
- {% endif %}
114
- </div>
115
- {{ _item.thumbnail }}
116
- </a>
117
- </li>
118
- {% if loop.index % 5 == 0 or loop.last %}
119
- </ul>
120
- {% endif %}
121
- {% if loop.last %}
122
- </div>
123
- {% endif %}
124
- {% if loop.index > _max_visible_thumbnails and loop.last %}
125
- </div>
126
- <div class="bg-lighter py-3 px-4 mt-2 rounded text-center">
127
- <a
128
- class="bcl-gallery__collapse standalone d-none d-sm-inline-block"
129
- aria-controls="{{ _collpase_id }}"
130
- data-bs-toggle="collapse"
131
- aria-expanded="false"
132
- role="button"
133
- href="#{{ _collpase_id }}"
134
- >
135
- <span class="label-collapsed">{{ _toggle_collapsed|replace({'%d': _items|length}) }}</span>
136
- <span class="label-expanded">{{ _toggle_expanded }}</span>
137
- {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
138
- name: 'caret-down-fill',
139
- size: '2xs',
140
- path: _icon_path,
141
- attributes: create_attribute().addClass('ms-2-5'),
142
- } only %}
143
- </a>
144
- <a
145
- class="bcl-gallery__mobile-view-more standalone d-inline-block d-sm-none"
146
- data-bs-target="#{{ _carousel_id }}"
147
- data-bs-slide-to="{{ _max_visible_thumbnails - 1 }}"
148
- role="button"
149
- href="#"
150
- >
151
- <span data-bs-target="#{{ _modal_id }}" data-bs-toggle="modal">
152
- <span class="label-collapsed">{{ _toggle_collapsed|replace({'%d': _items|length}) }}</span>
153
- {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
154
- name: 'caret-down-fill',
155
- size: '2xs',
156
- path: _icon_path,
157
- attributes: create_attribute().addClass('ms-2-5'),
158
- } only %}
159
- <span>
160
- </a>
161
- </div>
162
- {% endif %}
163
- {% endfor %}
54
+ <div
55
+ {{ attributes }}
56
+ >
57
+ {% if _title is not empty or _counter is not empty %}
58
+ <div class="d-sm-flex flex-sm-row align-items-sm-center">
59
+ {% if _title is not empty %}
60
+ <div class="flex-sm-grow-1">
61
+ {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
62
+ title: _title,
63
+ title_tag: _title_tag,
64
+ title_link: _title_link,
65
+ attributes: _title_attributes,
66
+ } only %}
67
+ </div>
68
+ {% endif %}
69
+ {%- if _counter is not empty -%}
70
+ <div class="mb-3 mb-sm-0 fw-bold">
71
+ {{- _counter|replace({'%d': _items|length}) -}}
72
+ </div>
73
+ {%- endif -%}
74
+ </div>
75
+ {% endif %}
76
+ {% if _items is not empty and _items is iterable %}
77
+ {% for _item in _items %}
78
+ {% if loop.first %}
79
+ <div class="bcl-gallery__thumbnails">
80
+ {% endif %}
81
+ {% if loop.index == _max_visible_thumbnails %}
82
+ <div class="bcl-gallery__thumbnails-collaspe collapse" id="{{ _collapse_id }}">
83
+ {% endif %}
84
+ {% if loop.index % _max_visible_thumbnails == 0 or loop.first %}
85
+ <ul class="bcl-gallery__grid">
164
86
  {% endif %}
165
-
166
- <div class="modal" id="{{ _modal_id }}" tabindex="-1" aria-labelledby="{{ _modal_id }}" aria-hidden="true" data-bs-backdrop="false">
167
- <div class="modal-dialog modal-dialog-centered modal-fullscreen">
168
- <div class="modal-content">
169
- <div class="modal-header border-0 justify-content-between">
170
- {% if _title is not empty %}
171
- <div class="modal-title">
172
- <h3 class="d-none d-sm-block">{{- _title -}}</h3>
173
- </div>
174
- {% endif %}
175
- <div class="carousel-pager">
176
- <span>1</span> / {{ _items|length }}
177
- </div>
178
- <div class="modal-close">
179
- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
180
- </div>
181
- </div>
182
-
183
- <div class="modal-body d-flex align-items-center justify-content-center">
184
- {% for _item in _items %}
185
- {% set _carousel_items = _carousel_items|merge([_item|merge({
186
- caption: ('<iframe' in _item.media or '<video' in _item.media) ? '' : _item.caption,
187
- image: ('<iframe' in _item.media or '<img' in _item.media) ? _item.media|replace({'src=': 'data-src='}) : _item.media,
188
- })]) %}
189
- {% endfor %}
190
- {% include '@oe-bcl/bcl-carousel/carousel.html.twig' with {
191
- id: _carousel_id,
192
- with_controls: true,
193
- with_indicators: false,
194
- prev_label: _prev_label,
195
- next_label: _next_label,
196
- autoplay: false,
197
- items: _carousel_items,
198
- } only %}
199
- </div>
200
- </div>
201
- </div>
87
+ <li>
88
+ {% include '@oe-bcl/bcl-gallery/gallery-item.html.twig' with {
89
+ item: _item,
90
+ carousel_id: _carousel_id,
91
+ modal_id: _modal_id,
92
+ icon_path: _icon_path,
93
+ loop: loop,
94
+ } only %}
95
+ </li>
96
+ {% if loop.index % 5 == 0 or loop.last %}
97
+ </ul>
98
+ {% endif %}
99
+ {% if loop.last %}
202
100
  </div>
101
+ {% endif %}
102
+ {% if loop.index > _max_visible_thumbnails and loop.last %}
103
+ </div>
104
+ <div class="bg-lighter py-3 px-4 mt-2 rounded text-center">
105
+ <a
106
+ class="bcl-gallery__collapse standalone d-none d-sm-inline-block"
107
+ aria-controls="{{ _collapse_id }}"
108
+ data-bs-toggle="collapse"
109
+ aria-expanded="false"
110
+ role="button"
111
+ href="#{{ _collapse_id }}"
112
+ >
113
+ <span class="label-collapsed">{{ _toggle_collapsed|replace({'%d': _items|length}) }}</span>
114
+ <span class="label-expanded">{{ _toggle_expanded }}</span>
115
+ {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
116
+ name: 'caret-down-fill',
117
+ size: '2xs',
118
+ path: _icon_path,
119
+ attributes: create_attribute().addClass('ms-2-5'),
120
+ } only %}
121
+ </a>
122
+ <a
123
+ class="bcl-gallery__mobile-view-more standalone d-inline-block d-sm-none"
124
+ data-bs-target="#{{ _carousel_id }}"
125
+ data-bs-slide-to="{{ _max_visible_thumbnails - 1 }}"
126
+ role="button"
127
+ href="#"
128
+ >
129
+ <span data-bs-target="#{{ _modal_id }}" data-bs-toggle="modal">
130
+ <span class="label-collapsed">{{ _toggle_collapsed|replace({'%d': _items|length}) }}</span>
131
+ {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
132
+ name: 'caret-down-fill',
133
+ size: '2xs',
134
+ path: _icon_path,
135
+ attributes: create_attribute().addClass('ms-2-5'),
136
+ } only %}
137
+ <span>
138
+ </a>
203
139
  </div>
204
-
140
+ {% endif %}
141
+ {% endfor %}
205
142
  {% endif %}
143
+ {% include '@oe-bcl/bcl-gallery/gallery-modal.html.twig' with {
144
+ id: _modal_id,
145
+ carousel_id: _carousel_id,
146
+ next_label: _next_label,
147
+ prev_label: _prev_label,
148
+ title: _title,
149
+ items: _items,
150
+ icon_path: _icon_path
151
+ } only %}
152
+ </div>
206
153
 
207
154
  {% endapply %}
package/package.json CHANGED
@@ -2,15 +2,16 @@
2
2
  "name": "@openeuropa/bcl-gallery",
3
3
  "author": "European Commission",
4
4
  "license": "EUPL-1.2",
5
- "version": "0.27.0",
5
+ "version": "0.28.1",
6
6
  "description": "OE - BCL gallery",
7
7
  "publishConfig": {
8
8
  "access": "public"
9
9
  },
10
10
  "dependencies": {
11
- "@openeuropa/bcl-carousel": "^0.27.0",
12
- "@openeuropa/bcl-heading": "^0.27.0",
13
- "@openeuropa/bcl-icon": "^0.27.0"
11
+ "@openeuropa/bcl-button": "^0.28.1",
12
+ "@openeuropa/bcl-carousel": "^0.28.1",
13
+ "@openeuropa/bcl-heading": "^0.28.1",
14
+ "@openeuropa/bcl-icon": "^0.28.1"
14
15
  },
15
16
  "repository": {
16
17
  "type": "git",
@@ -26,5 +27,5 @@
26
27
  "design-system",
27
28
  "twig"
28
29
  ],
29
- "gitHead": "1ab38cd93a2d4c52119fcc6a2f7cc56ceaa95dbf"
30
+ "gitHead": "3b0d2f4a85c727f38ae4e3403110c98302d09117"
30
31
  }