@ecl/gallery 5.0.0-RC1

package/gallery-overlay.html.twig

@@ -0,0 +1,174 @@
+{% apply spaceless %}
+
+{#
+  Parameters:
+  - "overlay" (object) (default: {})
+    - "close" (object) (default: {}): object of type button
+    - "previous (object) (default: {}): object of type button
+    - "next" (object) (default: {}): object of type button
+    - "counter_separator" (string) (default: '')
+    - "full_screen_label" (string) (default: '')
+    - "download" (object) (default: {}): object of type link
+    - "share" (object) (default: {}): object of type link
+    - "sr_overlay_label" (string) (default: '') aria-label for the overlay
+  - "item" (object) (default: {}): object of type gallery-item
+  - "extra_classes" (string) (default: '')
+  - "extra_attributes" (optional) (array) (default: [])
+    - "name" (string) Attribute name, eg. 'data-test'
+    - "value" (string) Attribute value, eg: 'data-test-1'
+#}
+
+{# variables #}
+
+{% set _css_class = 'ecl-gallery__overlay' %}
+{% set _css_media_class = 'ecl-gallery__slider-media-container' %}
+{% set _extra_attributes = '' %}
+{% set _button_type = 'button' %}
+{% set _overlay = overlay|default({}) %}
+{% set _item = item|default({}) %}
+
+{# Internal logic - Process properties #}
+
+{% if extra_classes is defined and extra_classes is not empty %}
+  {% set _css_class = _css_class ~ ' ' ~ extra_classes %}
+{% endif %}
+
+{% if extra_attributes is defined and extra_attributes is not empty and extra_attributes is iterable %}
+  {% for attr in extra_attributes %}
+    {% if attr.value is defined %}
+      {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name|e('html_attr') ~ '="' ~ attr.value|e('html_attr') ~ '"' %}
+    {% else %}
+      {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name|e('html_attr') %}
+    {% endif %}
+  {% endfor %}
+{% endif %}
+
+{# Print the result #}
+
+<dialog
+  class="{{ _css_class }}"
+  {{ _extra_attributes|raw }}
+  data-ecl-gallery-overlay
+{% if _overlay.sr_overlay_label is defined and _overlay.sr_overlay_label is not empty %}
+  aria-label="{{ _overlay.sr_overlay_label }}"
+{% endif %}
+>
+  <header class="ecl-gallery__close" data-ecl-gallery-overlay-header>
+    {% include '@ecl/button/button.html.twig' with _overlay.close|merge({
+      extra_classes: 'ecl-gallery__close-button',
+      variant: 'tertiary',
+      style: 'inverted',
+      type: 'submit',
+      extra_attributes: [
+        { name: 'data-ecl-gallery-close' },
+      ],
+    }) only %}
+  </header>
+
+  <section class="ecl-gallery__slider">
+    <div class="{{ _css_media_class }}" data-ecl-gallery-overlay-media></div>
+  </section>
+
+  <footer class="ecl-gallery__detail" data-ecl-gallery-overlay-footer>
+    <div class="ecl-container">
+      <div class="ecl-gallery__detail-container">
+        <div class="ecl-gallery__pager">
+        {% if _overlay.counter_separator is defined and _overlay.counter_separator is not empty %}
+          <div class="ecl-gallery__detail-counter">
+            <span data-ecl-gallery-overlay-counter-current>0</span>{{- ' ' -}}
+              {{- _overlay.counter_separator }}{{- ' ' -}}
+            <span data-ecl-gallery-overlay-counter-max>0</span>
+          </div>
+        {% endif %}
+        {% if _overlay.previous is not empty or _overlay.next is not empty %}
+          <div class="ecl-gallery__controls">
+          {% if _overlay.previous is defined and _overlay.previous is not empty %}
+            {% include '@ecl/button/button.html.twig' with _overlay.previous|merge({
+              extra_classes: 'ecl-gallery__slider-previous',
+              type: _button_type,
+              variant: 'tertiary',
+              icon_position: 'before',
+              hide_label: true,
+              icon: _overlay.previous.icon|merge({
+                size: 'm',
+                transform: 'rotate-270',
+                name: 'corner-arrow',
+              }),
+              extra_attributes: [
+                { name: 'data-ecl-gallery-overlay-previous' },
+              ],
+            }) only %}
+          {% endif %}
+          {% if (_overlay.next is defined and _overlay.next is not empty) and
+            (_overlay.next.icon is defined and _overlay.next.icon is not empty) %}
+            {% include '@ecl/button/button.html.twig' with _overlay.next|merge({
+              extra_classes: 'ecl-gallery__slider-next',
+              type: _button_type,
+              variant: 'tertiary',
+              hide_label: true,
+              icon: _overlay.next.icon|merge({
+                size: 'm',
+                transform: 'rotate-90',
+                name: 'corner-arrow',
+              }),
+              extra_attributes: [
+                { name: 'data-ecl-gallery-overlay-next' },
+              ],
+            }) only %}
+          {% endif %}
+          </div>
+        {% endif %}
+        </div>
+        <div class="ecl-gallery__detail-actions">
+        {% if _overlay.full_screen_label is not empty %}
+          {% include '@ecl/link/link.html.twig' with {
+            link: {
+              icon_position: 'after',
+              type: 'standalone',
+              inverted: true,
+              label: _overlay.full_screen_label ?: _overlay.download.link.label|default(''),
+            },
+            icon: {
+              name: 'fullscreen',
+              size: 'fluid',
+            },
+            extra_classes: 'ecl-gallery__download',
+            extra_attributes: [
+              { name: 'target', value: '_blank' },
+              { name: 'data-ecl-gallery-overlay-download' },
+            ],
+          } only %}
+        {% endif %}
+        {% if (_overlay.share is defined and _overlay.share is not empty) and
+          (_overlay.share.link is defined and _overlay.share.link is not empty) %}
+          {% include '@ecl/link/link.html.twig' with _overlay.share|merge({
+            link: _overlay.share.link|merge({
+              icon_position: 'after',
+              type: 'standalone',
+              inverted: true,
+            }),
+            icon: _overlay.share.icon|merge({
+              name: 'share',
+              size: 'fluid',
+            }),
+            extra_classes: 'ecl-gallery__share',
+            extra_attributes: [
+              { name: 'data-ecl-gallery-overlay-share' },
+            ],
+          }) only %}
+        {% endif %}
+        </div>
+      </div>
+    {% if _item.description is defined and _item.description is not empty %}
+      <div
+        class="ecl-gallery__detail-description"
+        data-ecl-gallery-overlay-description
+      >
+        {{- _item.description -}}
+      </div>
+    {% endif %}
+    </div>
+  </footer>
+</dialog>
+
+{% endapply %}

package/gallery-print.scss

@@ -0,0 +1,365 @@
+/**
+ * Gallery print
+ * @define gallery
+*/
+
+@use 'sass:map';
+
+// Exposed variables
+$theme: null !default;
+$gallery: null !default;
+$gallery-print: null !default;
+
+.ecl-gallery {
+  margin: 0;
+}
+
+.ecl-gallery__list {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  list-style: none;
+  margin-bottom: 0;
+  margin-top: -#{map.get($theme, 'spacing-print', 'xs')};
+  padding-inline-start: 0;
+}
+
+.ecl-gallery__item {
+  display: block;
+  flex-grow: 1;
+  height: 5cm;
+  margin-bottom: 0;
+  margin-inline-start: map.get($theme, 'spacing-print', 'xs');
+  margin-top: map.get($theme, 'spacing-print', 'xs');
+  min-width: 7cm;
+  position: relative;
+}
+
+.ecl-gallery__item-icon {
+  display: none;
+}
+
+.ecl-gallery__image-container {
+  display: flex;
+  height: 5cm;
+  position: relative;
+  flex-grow: 1;
+  margin: 0;
+}
+
+.ecl-gallery__thumbnail {
+  display: none;
+  height: 100%;
+
+  &:not(.ecl-gallery__slider-image) {
+    display: flex;
+    flex-grow: 1;
+  }
+}
+
+.ecl-gallery__picture {
+  display: flex;
+  height: 100%;
+
+  &:not(.ecl-gallery__slider-image) {
+    display: none;
+    flex-grow: 1;
+  }
+}
+
+@supports (object-fit: cover) {
+  .ecl-gallery__image {
+    display: block;
+    min-width: 5cm;
+    flex-grow: 1;
+    object-fit: cover;
+  }
+}
+
+.ecl-gallery__description {
+  align-items: center;
+  background-color: rgb(0, 0, 0, 0.7);
+  color: #fff;
+  font: map.get($gallery-print, 'description-font');
+  padding: map.get($theme, 'spacing-print', '2xs')
+    map.get($theme, 'spacing-print', 'xs');
+  text-decoration: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: text-bottom;
+  width: calc(100% - (#{map.get($theme, 'spacing-print', 'xs')} * 2));
+  bottom: 0;
+  left: 0;
+  position: absolute;
+}
+
+.ecl-gallery--no-hover .ecl-gallery__description {
+  display: none;
+}
+
+.ecl-gallery__description-icon {
+  display: none;
+}
+
+.ecl-gallery__list .ecl-gallery__caption,
+.ecl-gallery__list .ecl-gallery__meta,
+.ecl-gallery__video-title {
+  display: none;
+}
+
+.ecl-gallery__footer {
+  display: none;
+}
+
+// Overlay
+
+.ecl-gallery__overlay {
+  background-color: map.get($gallery, 'overlay-background');
+  backdrop-filter: blur(25px);
+  border-width: 0;
+  display: none;
+  flex-direction: column;
+  height: 100%;
+  left: 0;
+  margin: 0;
+  max-height: 100vh;
+  max-width: 100%;
+  padding: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: map.get($theme, 'z-index', 'overlay');
+
+  .ecl-gallery__close,
+  .ecl-gallery__slider-previous,
+  .ecl-gallery__slider-next,
+  .ecl-gallery__detail-actions {
+    display: none;
+  }
+
+  .ecl-gallery__slider {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    flex-grow: 1;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .ecl-gallery__slider-image *,
+  .ecl-gallery__slider-video {
+    display: flex;
+    flex-basis: auto;
+    flex-grow: 0;
+    flex-shrink: 0;
+    height: 100%;
+    margin: 0;
+    object-fit: contain;
+    width: 100%;
+  }
+
+  .ecl-gallery__detail {
+    padding: map.get($theme, 'spacing-print', 'm');
+
+    * {
+      color: #fff;
+    }
+  }
+
+  .ecl-gallery__detail-counter {
+    display: none;
+  }
+
+  .ecl-gallery__meta,
+  .ecl-gallery__title {
+    height: 1px;
+    left: -10000px;
+    overflow: hidden;
+    position: absolute;
+    top: auto;
+    width: 1px;
+  }
+
+  .ecl-gallery__detail-meta {
+    margin-top: map.get($theme, 'spacing-print', 'xs');
+  }
+
+  .ecl-gallery__slider-embed-audio {
+    display: none;
+  }
+
+  .ecl-gallery__pager {
+    display: flex;
+    flex-direction: row-reverse;
+    margin-top: map.get($theme, 'spacing-print', 'xs');
+
+    * {
+      align-self: flex-end;
+      font: map.get($theme, 'font-print', 's');
+    }
+  }
+}
+
+.ecl-gallery__overlay[open] {
+  display: flex;
+  overflow: auto;
+}
+
+.ecl-gallery--ratio-3-1 {
+  .ecl-gallery__item,
+  .ecl-gallery__image {
+    aspect-ratio: 3/1;
+  }
+}
+
+// Variant: grid
+.ecl-gallery--grid {
+  .ecl-gallery__item {
+    aspect-ratio: 3/2;
+    flex-grow: 0;
+    height: auto;
+    margin-inline-start: 0;
+    margin-top: 0;
+    min-width: auto;
+  }
+
+  .ecl-gallery__image {
+    aspect-ratio: 3/2;
+    height: auto;
+    min-width: auto;
+    width: 100%;
+  }
+
+  .ecl-gallery__list {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    row-gap: 1rem;
+    column-gap: 1rem;
+    margin-inline-start: 0;
+  }
+
+  .ecl-gallery__image-container {
+    height: auto;
+  }
+
+  &.ecl-gallery--template-1 {
+    .ecl-gallery__list {
+      grid-template-columns: repeat(12, 1fr);
+
+      .ecl-gallery__item:nth-child(9n + 1),
+      .ecl-gallery__item:nth-child(9n + 2) {
+        grid-area: span 6 / span 6;
+      }
+
+      .ecl-gallery__item:nth-child(9n + 3),
+      .ecl-gallery__item:nth-child(9n + 4),
+      .ecl-gallery__item:nth-child(9n + 5) {
+        grid-area: span 4 / span 4;
+      }
+
+      .ecl-gallery__item:nth-child(9n + 6),
+      .ecl-gallery__item:nth-child(9n + 7),
+      .ecl-gallery__item:nth-child(9n + 8),
+      .ecl-gallery__item:nth-child(9n + 9) {
+        grid-area: span 3 / span 3;
+      }
+    }
+  }
+
+  &.ecl-gallery--template-2 {
+    .ecl-gallery__list {
+      grid-auto-flow: dense;
+      grid-auto-columns: 1fr;
+
+      .ecl-gallery__item:nth-child(10n + 1),
+      .ecl-gallery__item:nth-child(10n + 10) {
+        aspect-ratio: auto;
+        grid-area: span 2 / span 2;
+        height: 100%;
+
+        .ecl-gallery__image-container {
+          height: 100%;
+        }
+      }
+
+      .ecl-gallery__item:nth-child(10n + 2) {
+        grid-column: 3;
+      }
+
+      .ecl-gallery__item:nth-child(10n + 3) {
+        grid-column: 4;
+      }
+
+      .ecl-gallery__item:nth-child(10n + 8) {
+        grid-column: 1;
+      }
+
+      .ecl-gallery__item:nth-child(10n + 9) {
+        grid-column: 2;
+      }
+    }
+  }
+
+  &.ecl-gallery--template-3 {
+    .ecl-gallery__list {
+      grid-auto-flow: dense;
+      grid-auto-columns: 1fr;
+
+      .ecl-gallery__item:nth-child(9n + 2) {
+        grid-column: 1;
+      }
+
+      .ecl-gallery__item:nth-child(9n + 3) {
+        aspect-ratio: auto;
+        grid-area: span 2 / span 2;
+        height: 100%;
+
+        .ecl-gallery__image-container {
+          height: 100%;
+        }
+      }
+
+      .ecl-gallery__item:nth-child(9n + 5) {
+        grid-column: 4;
+      }
+    }
+  }
+
+  &.ecl-gallery--template-4 {
+    .ecl-gallery__list {
+      grid-template-columns: repeat(4, 1fr);
+
+      .ecl-gallery__item:nth-child(8n + 1) {
+        aspect-ratio: auto;
+        grid-area: span 3 / span 3;
+        height: 100%;
+
+        .ecl-gallery__image-container {
+          height: 100%;
+        }
+      }
+    }
+  }
+
+  &.ecl-gallery--template-0 {
+    &.ecl-gallery--col-2 {
+      .ecl-gallery__list {
+        grid-template-columns: repeat(2, 1fr);
+      }
+    }
+
+    &.ecl-gallery--col-3 {
+      .ecl-gallery__list {
+        grid-template-columns: repeat(3, 1fr);
+      }
+    }
+
+    &.ecl-gallery--col-4 {
+      .ecl-gallery__list {
+        grid-template-columns: repeat(4, 1fr);
+      }
+    }
+  }
+}