@openeuropa/bcl-gallery 0.4230.202512021730 → 0.4360.202601141610

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