From 52a743957a6b547bd18bb9ebec6a95ec7b5a3e59 Mon Sep 17 00:00:00 2001 From: Tim Fischbach Date: Mon, 31 Mar 2025 14:22:13 +0200 Subject: [PATCH] Add option to hide image gallery peeks REDMINE-20988 --- .../locales/new/image_gallery_peeks.de.yml | 9 ++++++ .../locales/new/image_gallery_peeks.en.yml | 9 ++++++ .../scrolled/package/spec/support/stories.js | 28 ++++++++++--------- .../imageGallery/ImageGallery.js | 3 ++ .../imageGallery/ImageGallery.module.css | 12 ++++++++ .../imageGallery/editor/index.js | 3 ++ .../contentElements/imageGallery/stories.js | 22 +++++++++++++++ 7 files changed, 73 insertions(+), 13 deletions(-) create mode 100644 entry_types/scrolled/config/locales/new/image_gallery_peeks.de.yml create mode 100644 entry_types/scrolled/config/locales/new/image_gallery_peeks.en.yml diff --git a/entry_types/scrolled/config/locales/new/image_gallery_peeks.de.yml b/entry_types/scrolled/config/locales/new/image_gallery_peeks.de.yml new file mode 100644 index 0000000000..4575a80ffa --- /dev/null +++ b/entry_types/scrolled/config/locales/new/image_gallery_peeks.de.yml @@ -0,0 +1,9 @@ +de: + pageflow_scrolled: + editor: + content_elements: + imageGallery: + attributes: + displayPeeks: + label: "Anrisse benachbarter Bilder zeigen" + inline_help: "Teile der benachbarten Bilder als Hinweis auf weitere Inhalte anzeigen." diff --git a/entry_types/scrolled/config/locales/new/image_gallery_peeks.en.yml b/entry_types/scrolled/config/locales/new/image_gallery_peeks.en.yml new file mode 100644 index 0000000000..67dab244a8 --- /dev/null +++ b/entry_types/scrolled/config/locales/new/image_gallery_peeks.en.yml @@ -0,0 +1,9 @@ +en: + pageflow_scrolled: + editor: + content_elements: + imageGallery: + attributes: + displayPeeks: + label: "Display peeks of neighboring images" + inline_help: "Show partial adjacent image previews as navigation cues." diff --git a/entry_types/scrolled/package/spec/support/stories.js b/entry_types/scrolled/package/spec/support/stories.js index 1b489d256b..2571863fbd 100644 --- a/entry_types/scrolled/package/spec/support/stories.js +++ b/entry_types/scrolled/package/spec/support/stories.js @@ -74,7 +74,7 @@ export function storiesOfContentElement(module, options) { } exampleStories(options).forEach(({ - title, seed, requireConsentOptIn, cssRules, parameters = {} + title, seed, requireConsentOptIn, cssRules, parameters }) => { const consent = Consent.create(); @@ -189,13 +189,15 @@ function variantsExampleStories({typeName, baseConfiguration, variants}) { typeName, name: 'Variants', examples: variants.map(({ - name, permaId, configuration, themeOptions, sectionConfiguration, inlineFileRightsWidgetTypeName + name, permaId, configuration, themeOptions, sectionConfiguration, viewport, + inlineFileRightsWidgetTypeName }) => ({ name: name, permaId, contentElementConfiguration: {...baseConfiguration, ...configuration}, themeOptions, sectionConfiguration, + viewport, inlineFileRightsFor: inlineFileRightsWidgetTypeName ? ['audioFiles', 'imageFiles', 'videoFiles'] : [], widgets: inlineFileRightsWidgetTypeName ? [{ role: 'inlineFileRights', @@ -242,16 +244,9 @@ function mobileExampleStories({typeName, baseConfiguration}) { { name: 'Default', contentElementConfiguration: baseConfiguration, + viewport: 'phone' } - ], - parameters: { - viewport: { - defaultViewport: 'iphone6' - }, - percy: { - widths: [320] - } - } + ] }); } @@ -308,7 +303,7 @@ function inlineFileRightsStories({typeName, inlineFileRights, baseConfiguration} } function exampleStoryGroup({ - name, typeName, examples, parameters, consentVendors, inlineFileRightsFor, widgets + name, typeName, examples, viewport, consentVendors, inlineFileRightsFor, widgets }) { const defaultSectionConfiguration = {transition: 'scroll', backdrop: {image: '#000'}, fullHeight: false}; @@ -347,7 +342,14 @@ function exampleStoryGroup({ ) }), requireConsentOptIn: !!consentVendors, - parameters, + parameters: examples[index].viewport === 'phone' ? { + viewport: { + defaultViewport: 'iphone6' + }, + percy: { + widths: [320] + } + } : {}, cssRules: themeOptionsCssRules(examples[index].themeOptions) })); } diff --git a/entry_types/scrolled/package/src/contentElements/imageGallery/ImageGallery.js b/entry_types/scrolled/package/src/contentElements/imageGallery/ImageGallery.js index d894ca53ec..349d02a4d0 100644 --- a/entry_types/scrolled/package/src/contentElements/imageGallery/ImageGallery.js +++ b/entry_types/scrolled/package/src/contentElements/imageGallery/ImageGallery.js @@ -140,6 +140,9 @@ function Scroller({ {[styles.wide]: contentElementWidth === contentElementWidths.lg || contentElementWidth === contentElementWidths.xl}, + {[styles.full]: + contentElementWidth === contentElementWidths.full}, + {[styles.clip]: configuration.hidePeeks}, {[styles.customMargin]: customMargin})}>
contentElement.getWidth() === contentElementWidths.full, diff --git a/entry_types/scrolled/package/src/contentElements/imageGallery/stories.js b/entry_types/scrolled/package/src/contentElements/imageGallery/stories.js index ab0259fdc3..02d6ec41a7 100644 --- a/entry_types/scrolled/package/src/contentElements/imageGallery/stories.js +++ b/entry_types/scrolled/package/src/contentElements/imageGallery/stories.js @@ -1,4 +1,5 @@ import './frontend'; +import {contentElementWidths} from 'pageflow-scrolled/frontend'; import {storiesOfContentElement, filePermaId} from 'pageflow-scrolled/spec/support/stories'; storiesOfContentElement(module, { @@ -43,6 +44,27 @@ storiesOfContentElement(module, { } } }, + { + name: 'Full width', + configuration: { + width: contentElementWidths.full + }, + viewport: 'phone' + }, + { + name: 'Hide peeks', + configuration: { + hidePeeks: true + } + }, + { + name: 'Full widths, Hide peeks', + configuration: { + width: contentElementWidths.full, + hidePeeks: true + }, + viewport: 'phone' + }, { name: 'With Captions', configuration: {