From 1ab8cbcf8f3aba5066cb7e7a6ccc8f7bf16fad9f Mon Sep 17 00:00:00 2001 From: emeryro Date: Thu, 13 Jun 2024 10:29:09 +0200 Subject: [PATCH 1/6] add grid --- .../twig/components/gallery/README.md | 3 ++ .../twig/components/gallery/gallery.html.twig | 18 +++++++ .../twig/components/gallery/gallery.story.js | 47 +++++++++++++++++-- .../vanilla/components/gallery/gallery.scss | 31 ++++++++++++ 4 files changed, 96 insertions(+), 3 deletions(-) diff --git a/src/implementations/twig/components/gallery/README.md b/src/implementations/twig/components/gallery/README.md index 97318852df7..1fc4a2343a4 100644 --- a/src/implementations/twig/components/gallery/README.md +++ b/src/implementations/twig/components/gallery/README.md @@ -8,6 +8,9 @@ npm install --save @ecl/twig-component-gallery ### Parameters +- **"grid"** (boolean) (default: false) Display gallery as a grid +- **"column"** (int) (default: 3) Number of columns. Grid display only +- **"ratio"** (string) (default: '3-2') Image aspect ratio. Grid dipslay only - **"id"**: (string) (default: random): Unique id for the gallery - **"overlay"** (object) (default: {}) - "close" (object) (default: {}): object of type button diff --git a/src/implementations/twig/components/gallery/gallery.html.twig b/src/implementations/twig/components/gallery/gallery.html.twig index 9cf176fbec1..9cec0c61c68 100644 --- a/src/implementations/twig/components/gallery/gallery.html.twig +++ b/src/implementations/twig/components/gallery/gallery.html.twig @@ -2,6 +2,9 @@ {# Parameters: + - "grid" (boolean) (default: false) Display gallery as a grid + - "column" (int) (default: 3) Number of columns. Grid display only + - "ratio" (string) (default: '3-2') Image aspect ratio. Grid dipslay only - "id": (string) (default: random): Unique id for the gallery - "counter_label" (string) (default: '') Label of the counter - "view_all_label" (string) (default: '') Label of the view all button @@ -39,6 +42,9 @@ {# variables #} +{% set _grid = grid|default(false) %} +{% set _column = column|default(3) %} +{% set _ratio = ratio|default('3-2') %} {% set _id = id|default(random()) %} {% set _css_class = 'ecl-gallery' %} {% set _extra_attributes = '' %} @@ -66,6 +72,18 @@ {% set _css_class = _css_class ~ ' ' ~ extra_classes %} {% endif %} +{% if _grid %} + {% set _css_class = _css_class ~ ' ecl-gallery--grid' %} +{% endif %} + +{% if _column is not empty %} + {% set _css_class = _css_class ~ ' ecl-gallery--col-' ~ _column %} +{% endif %} + +{% if _ratio is not empty %} + {% set _css_class = _css_class ~ ' ecl-gallery--ratio-' ~ _ratio %} +{% endif %} + {% if _full_width %} {% set _css_class = _css_class ~ ' ecl-gallery--full-width' %} {% endif %} diff --git a/src/implementations/twig/components/gallery/gallery.story.js b/src/implementations/twig/components/gallery/gallery.story.js index 3cc42da41cc..180ccf6cfee 100644 --- a/src/implementations/twig/components/gallery/gallery.story.js +++ b/src/implementations/twig/components/gallery/gallery.story.js @@ -2,11 +2,14 @@ import { withNotes } from '@ecl/storybook-addon-notes'; import withCode from '@ecl/storybook-addon-code'; import { correctPaths } from '@ecl/story-utils'; -import specs from '@ecl/specs-component-gallery/demo/data'; +import dataDefault from '@ecl/specs-component-gallery/demo/data'; import gallery from './gallery.html.twig'; import notes from './README.md'; const getArgs = () => ({ + grid: false, + column: 3, + ratio: '3-2', expandable: true, full_width: false, visible_items: 8, @@ -14,6 +17,44 @@ const getArgs = () => ({ }); const getArgTypes = () => ({ + grid: { + control: { type: 'boolean' }, + description: 'Grid display', + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: 'false' }, + }, + }, + column: { + name: 'columns', + control: { + type: 'range', + step: 1, + min: 2, + max: 4, + }, + description: 'Number of columns, for grid display', + table: { + type: { summary: 'integer' }, + defaultValue: { summary: '3' }, + }, + if: { arg: 'grid' }, + }, + ratio: { + name: 'Image ratio', + type: { name: 'select' }, + description: 'Image ratio, for grid display', + options: ['3-1', '3-2'], + mapping: { + '3-1': '3-1', + '3-2': '3-2', + }, + table: { + type: { summary: 'string' }, + defaultValue: { summary: '' }, + }, + if: { arg: 'grid' }, + }, expandable: { control: { type: 'boolean' }, description: 'expandable gallery', @@ -71,11 +112,11 @@ export const Default = (_, { loaded: { component } }) => component; Default.render = async (args) => { const renderedGallery = `
${await gallery( - prepareData(specs, args), + prepareData(dataDefault, args), )}
`; return renderedGallery; }; Default.storyName = 'default'; -Default.parameters = { notes: { markdown: notes, json: specs } }; +Default.parameters = { notes: { markdown: notes, json: dataDefault } }; Default.args = getArgs(); Default.argTypes = getArgTypes(); diff --git a/src/implementations/vanilla/components/gallery/gallery.scss b/src/implementations/vanilla/components/gallery/gallery.scss index 0dd308ddd95..ef44c3aa902 100644 --- a/src/implementations/vanilla/components/gallery/gallery.scss +++ b/src/implementations/vanilla/components/gallery/gallery.scss @@ -517,3 +517,34 @@ $_image-height-mobile: 260px; order: 4; } } + +// Variant: grid +@include breakpoints.up('m') { + .ecl-gallery--grid { + .ecl-gallery__item { + aspect-ratio: 3/2; + flex-grow: 0; + height: auto; + margin-inline-start: 0; + margin-top: 0; + } + + .ecl-gallery__image { + aspect-ratio: 3/2; + height: auto; + min-width: auto; + } + + .ecl-gallery__list { + display: grid; + grid-template-columns: repeat(3, 1fr); + row-gap: 2rem; + column-gap: 2rem; + margin-inline-start: 0; + } + + .ecl-gallery__image-container { + height: auto; + } + } +} From 7bf8b362bbb6331dfb9f0fd9a81feee59d16cbd9 Mon Sep 17 00:00:00 2001 From: emeryro Date: Thu, 13 Jun 2024 13:33:26 +0200 Subject: [PATCH 2/6] ratio and column --- .../components/gallery/gallery-print.scss | 50 +++++++++++++++++++ .../vanilla/components/gallery/gallery.js | 6 +++ .../vanilla/components/gallery/gallery.scss | 25 +++++++++- 3 files changed, 79 insertions(+), 2 deletions(-) diff --git a/src/implementations/vanilla/components/gallery/gallery-print.scss b/src/implementations/vanilla/components/gallery/gallery-print.scss index bd992464034..ecc74e01543 100644 --- a/src/implementations/vanilla/components/gallery/gallery-print.scss +++ b/src/implementations/vanilla/components/gallery/gallery-print.scss @@ -190,3 +190,53 @@ $gallery: null !default; display: flex; overflow: auto; } + +// 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--ratio-3-1 { + .ecl-gallery__item, + .ecl-gallery__image { + aspect-ratio: 3/1; + } +} + +.ecl-gallery--col-2 { + .ecl-gallery__list { + grid-template-columns: repeat(2, 1fr); + } +} + +.ecl-gallery--col-4 { + .ecl-gallery__list { + grid-template-columns: repeat(4, 1fr); + } +} diff --git a/src/implementations/vanilla/components/gallery/gallery.js b/src/implementations/vanilla/components/gallery/gallery.js index a82c2f762c0..4046f3643e9 100644 --- a/src/implementations/vanilla/components/gallery/gallery.js +++ b/src/implementations/vanilla/components/gallery/gallery.js @@ -605,6 +605,12 @@ export class Gallery { // Untrap focus this.focusTrap.deactivate(); + // Restore css class on item + const image = queryOne('img', this.selectedItem); + if (image) { + image.classList.add('ecl-gallery__image'); + } + // Focus item this.selectedItem.focus(); diff --git a/src/implementations/vanilla/components/gallery/gallery.scss b/src/implementations/vanilla/components/gallery/gallery.scss index 32ede75149f..23d8ec0befc 100644 --- a/src/implementations/vanilla/components/gallery/gallery.scss +++ b/src/implementations/vanilla/components/gallery/gallery.scss @@ -508,19 +508,21 @@ $_description-height-desktop: 108px; 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: 2rem; - column-gap: 2rem; + row-gap: 1rem; + column-gap: 1rem; margin-inline-start: 0; } @@ -528,4 +530,23 @@ $_description-height-desktop: 108px; height: auto; } } + + .ecl-gallery--ratio-3-1 { + .ecl-gallery__item, + .ecl-gallery__image { + aspect-ratio: 3/1; + } + } + + .ecl-gallery--col-2 { + .ecl-gallery__list { + grid-template-columns: repeat(2, 1fr); + } + } + + .ecl-gallery--col-4 { + .ecl-gallery__list { + grid-template-columns: repeat(4, 1fr); + } + } } From dbf2e73e096d8666ca874aa7bf314abd802a1121 Mon Sep 17 00:00:00 2001 From: emeryro Date: Thu, 13 Jun 2024 13:53:13 +0200 Subject: [PATCH 3/6] size and test --- .size-limit.json | 2 +- .../__snapshots__/gallery.test.js.snap | 863 ++++++++++++++++++ .../twig/components/gallery/gallery.html.twig | 14 +- .../twig/components/gallery/gallery.test.js | 16 + 4 files changed, 887 insertions(+), 8 deletions(-) diff --git a/.size-limit.json b/.size-limit.json index d2ec787248d..4f7f94b21ee 100644 --- a/.size-limit.json +++ b/.size-limit.json @@ -48,7 +48,7 @@ }, { "path": "dist/packages/eu/styles/ecl-eu-print.css", - "limit": "220 KB", + "limit": "225 KB", "webpack": false, "gzip": false, "brotli": false diff --git a/src/implementations/twig/components/gallery/__snapshots__/gallery.test.js.snap b/src/implementations/twig/components/gallery/__snapshots__/gallery.test.js.snap index 2f911c51b74..e36523ab09f 100644 --- a/src/implementations/twig/components/gallery/__snapshots__/gallery.test.js.snap +++ b/src/implementations/twig/components/gallery/__snapshots__/gallery.test.js.snap @@ -3453,3 +3453,866 @@ exports[`Gallery Default renders correctly with old data 1`] = ` `; + +exports[`Gallery Grid renders correctly 1`] = ` + +
+ +
+
+
+ + 0 + + Media files in this gallery +
+ +
+
+
+ + + Further media items + + + + Link to an external domain + + + + +
+
+ +
+ +
+
+
+
+ + +
+ +`; diff --git a/src/implementations/twig/components/gallery/gallery.html.twig b/src/implementations/twig/components/gallery/gallery.html.twig index b8596489677..a3117ec3184 100644 --- a/src/implementations/twig/components/gallery/gallery.html.twig +++ b/src/implementations/twig/components/gallery/gallery.html.twig @@ -4,7 +4,7 @@ Parameters: - "grid" (boolean) (default: false) Display gallery as a grid - "column" (int) (default: 3) Number of columns. Grid display only - - "ratio" (string) (default: '3-2') Image aspect ratio. Grid dipslay only + - "ratio" (string) (default: '3-2') Image aspect ratio. Grid display only - "id": (string) (default: random): Unique id for the gallery - "counter_label" (string) (default: '') Label of the counter - "view_all_label" (string) (default: '') Label of the view all button @@ -74,14 +74,14 @@ {% if _grid %} {% set _css_class = _css_class ~ ' ecl-gallery--grid' %} -{% endif %} -{% if _column is not empty %} - {% set _css_class = _css_class ~ ' ecl-gallery--col-' ~ _column %} -{% endif %} + {% if _column is not empty %} + {% set _css_class = _css_class ~ ' ecl-gallery--col-' ~ _column %} + {% endif %} -{% if _ratio is not empty %} - {% set _css_class = _css_class ~ ' ecl-gallery--ratio-' ~ _ratio %} + {% if _ratio is not empty %} + {% set _css_class = _css_class ~ ' ecl-gallery--ratio-' ~ _ratio %} + {% endif %} {% endif %} {% if _full_width %} diff --git a/src/implementations/twig/components/gallery/gallery.test.js b/src/implementations/twig/components/gallery/gallery.test.js index 5edbe75f127..30e79043667 100644 --- a/src/implementations/twig/components/gallery/gallery.test.js +++ b/src/implementations/twig/components/gallery/gallery.test.js @@ -8,6 +8,8 @@ import { axe, toHaveNoViolations } from 'jest-axe'; // Import data for tests import demoData from '@ecl/specs-component-gallery/demo/data'; +const demoDataGrid = { ...demoData, grid: true }; + expect.extend(toHaveNoViolations); describe('Gallery', () => { @@ -61,4 +63,18 @@ describe('Gallery', () => { ).toHaveNoViolations(); }); }); + + describe('Grid', () => { + test('renders correctly', () => { + expect.assertions(1); + return expect(render(demoDataGrid)).resolves.toMatchSnapshot(); + }); + + jest.setTimeout(15000); + test(`passes the accessibility tests`, async () => { + expect( + await axe(await renderTwigFileAsHtml(template, demoDataGrid, true)), + ).toHaveNoViolations(); + }); + }); }); From 249ed3c1f5f700e157b7a7250a8c03c1797b6e87 Mon Sep 17 00:00:00 2001 From: emeryro Date: Mon, 17 Jun 2024 08:43:02 +0200 Subject: [PATCH 4/6] improve mobile --- .../vanilla/components/gallery/gallery.js | 12 +-- .../vanilla/components/gallery/gallery.scss | 81 ++++++++++--------- 2 files changed, 51 insertions(+), 42 deletions(-) diff --git a/src/implementations/vanilla/components/gallery/gallery.js b/src/implementations/vanilla/components/gallery/gallery.js index 4046f3643e9..77c0e9cfdab 100644 --- a/src/implementations/vanilla/components/gallery/gallery.js +++ b/src/implementations/vanilla/components/gallery/gallery.js @@ -605,11 +605,13 @@ export class Gallery { // Untrap focus this.focusTrap.deactivate(); - // Restore css class on item - const image = queryOne('img', this.selectedItem); - if (image) { - image.classList.add('ecl-gallery__image'); - } + // Restore css class on items + this.galleryItems.forEach((galleryItem) => { + const image = queryOne('img', galleryItem); + if (image) { + image.classList.add('ecl-gallery__image'); + } + }); // Focus item this.selectedItem.focus(); diff --git a/src/implementations/vanilla/components/gallery/gallery.scss b/src/implementations/vanilla/components/gallery/gallery.scss index 23d8ec0befc..d3971b38e7c 100644 --- a/src/implementations/vanilla/components/gallery/gallery.scss +++ b/src/implementations/vanilla/components/gallery/gallery.scss @@ -500,53 +500,60 @@ $_description-height-desktop: 108px; } // Variant: grid -@include breakpoints.up('m') { - .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--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__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__list { + column-gap: 1rem; + display: grid; + grid-template-columns: repeat(1, 1fr); + margin-inline-start: 0; + row-gap: 1rem; + } - .ecl-gallery__image-container { - height: auto; - } + // stylelint-disable-next-line no-descending-specificity + .ecl-gallery__image-container { + height: auto; } +} - .ecl-gallery--ratio-3-1 { - .ecl-gallery__item, - .ecl-gallery__image { - aspect-ratio: 3/1; - } +.ecl-gallery--ratio-3-1 { + .ecl-gallery__item, + .ecl-gallery__image { + aspect-ratio: 3/1; } +} - .ecl-gallery--col-2 { +@include breakpoints.up('m') { + .ecl-gallery--grid { .ecl-gallery__list { - grid-template-columns: repeat(2, 1fr); + grid-template-columns: repeat(3, 1fr); } - } - .ecl-gallery--col-4 { - .ecl-gallery__list { - grid-template-columns: repeat(4, 1fr); + .ecl-gallery--col-2 { + .ecl-gallery__list { + grid-template-columns: repeat(2, 1fr); + } + } + + .ecl-gallery--col-4 { + .ecl-gallery__list { + grid-template-columns: repeat(4, 1fr); + } } } } From a4ceac0bc83c91d817dd8c1063a2b318a406e3a3 Mon Sep 17 00:00:00 2001 From: emeryro Date: Mon, 17 Jun 2024 13:50:16 +0200 Subject: [PATCH 5/6] scrollable links --- .../vanilla/components/gallery/gallery.js | 35 ++++++++++++------- .../vanilla/components/gallery/gallery.scss | 10 ++++++ 2 files changed, 33 insertions(+), 12 deletions(-) diff --git a/src/implementations/vanilla/components/gallery/gallery.js b/src/implementations/vanilla/components/gallery/gallery.js index 77c0e9cfdab..9c409f6d158 100644 --- a/src/implementations/vanilla/components/gallery/gallery.js +++ b/src/implementations/vanilla/components/gallery/gallery.js @@ -541,6 +541,22 @@ export class Gallery { +selectedItem.getAttribute('data-ecl-gallery-item-id') + 1; this.overlayCounterMax.innerHTML = this.galleryItems.length; + // Prepare display of links for mobile + const actionMobile = document.createElement('div'); + actionMobile.classList.add('ecl-gallery__detail-actions-mobile'); + + // Update download link + if (this.overlayDownload !== null && embeddedVideo === null) { + this.overlayDownload.href = this.selectedItem.href; + if (id) { + this.overlayDownload.setAttribute('aria-describedby', `${id}-title`); + } + this.overlayDownload.hidden = false; + actionMobile.appendChild(this.overlayDownload.cloneNode(true)); + } else if (this.overlayDownload !== null) { + this.overlayDownload.hidden = true; + } + // Update share link const shareHref = this.selectedItem.getAttribute( 'data-ecl-gallery-item-share', @@ -551,24 +567,19 @@ export class Gallery { this.overlayShare.setAttribute('aria-describedby', `${id}-title`); } this.overlayShare.hidden = false; + actionMobile.appendChild(this.overlayShare.cloneNode(true)); } else { this.overlayShare.hidden = true; } - // Update download link - if (this.overlayDownload !== null && embeddedVideo === null) { - this.overlayDownload.href = this.selectedItem.href; - if (id) { - this.overlayDownload.setAttribute('aria-describedby', `${id}-title`); - } - this.overlayDownload.hidden = false; - } else if (this.overlayDownload !== null) { - this.overlayDownload.hidden = true; - } - // Update description const description = queryOne(this.descriptionSelector, selectedItem); - this.overlayDescription.innerHTML = description.innerHTML; + if (description) { + this.overlayDescription.innerHTML = description.innerHTML; + } + if (actionMobile.childNodes.length > 0) { + this.overlayDescription.prepend(actionMobile); + } } /** diff --git a/src/implementations/vanilla/components/gallery/gallery.scss b/src/implementations/vanilla/components/gallery/gallery.scss index d3971b38e7c..42212f028ae 100644 --- a/src/implementations/vanilla/components/gallery/gallery.scss +++ b/src/implementations/vanilla/components/gallery/gallery.scss @@ -426,9 +426,14 @@ $_description-height-desktop: 108px; } .ecl-gallery__detail-actions { + display: none; margin-top: map.get($gallery, 'actions-margin'); } +.ecl-gallery__detail-actions-mobile { + margin-bottom: map.get($gallery, 'actions-margin'); +} + .ecl-gallery__download { margin-inline-end: var(--s-xl); } @@ -477,9 +482,14 @@ $_description-height-desktop: 108px; } .ecl-gallery__detail-actions { + display: block; margin-top: 0; } + .ecl-gallery__detail-actions-mobile { + display: none; + } + .ecl-gallery__detail-container { align-items: center; flex-direction: row-reverse; From 05f02c94f2119f8f6567c7778fd0383b4321302e Mon Sep 17 00:00:00 2001 From: emeryro Date: Tue, 18 Jun 2024 12:50:56 +0200 Subject: [PATCH 6/6] fix column --- src/implementations/vanilla/components/gallery/gallery.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/implementations/vanilla/components/gallery/gallery.scss b/src/implementations/vanilla/components/gallery/gallery.scss index 42212f028ae..b331b712d62 100644 --- a/src/implementations/vanilla/components/gallery/gallery.scss +++ b/src/implementations/vanilla/components/gallery/gallery.scss @@ -554,13 +554,13 @@ $_description-height-desktop: 108px; grid-template-columns: repeat(3, 1fr); } - .ecl-gallery--col-2 { + &.ecl-gallery--col-2 { .ecl-gallery__list { grid-template-columns: repeat(2, 1fr); } } - .ecl-gallery--col-4 { + &.ecl-gallery--col-4 { .ecl-gallery__list { grid-template-columns: repeat(4, 1fr); }