Merge pull request #2216 from tf/hide-gallery-peeks

Add option to hide image gallery peeks

Author: tf

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."

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."

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)
   }));
 }

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})}>
       <div className={styles.leftButton}>
         <ScrollButton direction="left"

entry_types/scrolled/package/src/contentElements/imageGallery/ImageGallery.module.css

@@ -28,6 +28,14 @@
   justify-content: center;
 }
 
+.clip {
+  --overlap: 0px;
+}
+
+.full.clip {
+  --gutter: 0px;
+}
+
 .button {
   grid-row: 1;
   z-index: 2;
@@ -61,6 +69,10 @@
   scrollbar-width: none;
 }
 
+.clip .items {
+  clip-path: content-box;
+}
+
 .items::-webkit-scrollbar {
   display: none;
 }

entry_types/scrolled/package/src/contentElements/imageGallery/editor/index.js

@@ -18,6 +18,9 @@ editor.contentElementTypes.register('imageGallery', {
       this.view(ItemsListView, {
         collection: ItemsCollection.forContentElement(this.model.parent, entry)
       });
+      this.input('displayPeeks', CheckBoxInputView, {
+        storeInverted: 'hidePeeks'
+      });
       this.input('enableFullscreenOnDesktop', CheckBoxInputView, {
         disabledBinding: ['position', 'width'],
         disabled: () => contentElement.getWidth() === contentElementWidths.full,

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: {