Add option to hide image gallery peeks

REDMINE-20988

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/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,25 @@ storiesOfContentElement(module, {
         }
       }
     },
+    {
+      name: 'Full width',
+      configuration: {
+        width: contentElementWidths.full
+      }
+    },
+    {
+      name: 'Hide peeks',
+      configuration: {
+        hidePeeks: true
+      }
+    },
+    {
+      name: 'Full widths, Hide peeks',
+      configuration: {
+        width: contentElementWidths.full,
+        hidePeeks: true
+      }
+    },
     {
       name: 'With Captions',
       configuration: {