Add support for portrait images in image gallery

REDMINE-20988

Author: tf

entry_types/scrolled/config/locales/new/image_gallery_peeks.de.yml

@@ -13,6 +13,24 @@ de:
                 Zeigt die aktuelle Bildposition und die Gesamtzahl der
                 Bilder an, um die Navigation durch die Galerie zu
                 erleichtern.
+          edit_item:
+            back: Zurück
+            destroy: Löschen
+            confirm_delete_link: Soll der Bildergalerie-Eintrag wirklich gelöscht werden?
+            attributes:
+              image:
+                label: Bild
+              portraitImage:
+                inline_help: |-
+                  Wird verwendet, wenn der Browser-Viewport höher als
+                  breit ist - zum Beispiel auf Smartphones oder
+                  Tablets in Portrait-Ausrichtung. Kann als
+                  Alternative zu einem querformatigen Bild
+                  konfiguriert werden, das ansonsten zu klein
+                  dargestellt würde.
+                label: Bild (Hochkant)
+            tabs:
+              item: Bildergalerie-Eintrag
     public:
       image_gallery_pagination: "Bildergalerie-Paginierung"
       go_to_image_gallery_item: "Gehe zu Bild %{index}"

entry_types/scrolled/config/locales/new/image_gallery_peeks.en.yml

@@ -13,6 +13,23 @@ en:
                 Displays the current image position and the total
                 number of images to make navigating the gallery
                 easier.
+          edit_item:
+            back: Back
+            destroy: Delete
+            confirm_delete_link: Are you sure you want to delete this image gallery item?
+            attributes:
+              image:
+                label: Image
+              portraitImage:
+                inline_help: |-
+                  Displayed when the browser viewport is taller than
+                  wide, for example on phones or tablets in portrait
+                  orientation. Can be used to provide an alternative
+                  to a landscape image that would otherwise be
+                  displayed too small.
+                label: Image (Portrait)
+            tabs:
+              item: Image Gallery Item
     public:
       image_gallery_pagination: "Image gallery pagination"
       go_to_image_gallery_item: "Go to image %{index}"

entry_types/scrolled/package/src/contentElements/imageGallery/ImageGallery.js

@@ -14,6 +14,7 @@ import {
   ToggleFullscreenCornerButton,
   PaginationIndicator,
   usePhonePlatform,
+  usePortraitOrientation,
   contentElementWidths
 } from 'pageflow-scrolled/frontend';
 
@@ -189,18 +190,55 @@ function Scroller({
 }
 
 const Item = forwardRef(function({item, configuration, current, onClick, children}, ref) {
-  const updateConfiguration = useContentElementConfigurationUpdate();
-  const {shouldLoad} = useContentElementLifecycle();
-
-  const captions = configuration.captions || {};
-  const caption = captions[item.id];
-
   const imageFile = useFileWithInlineRights({
     configuration: item,
     collectionName: 'imageFiles',
     propertyName: 'image'
   });
 
+  const portraitImageFile = useFileWithInlineRights({
+    configuration: item,
+    collectionName: 'imageFiles',
+    propertyName: 'portraitImage'
+  });
+
+  const ItemImageComponent = portraitImageFile ? OrientationAwareItemImage : ItemImageWithCaption;
+
+  return (
+    <div className={classNames(styles.item, {[styles.current]: current,
+                                             [styles.placeholder]: item.placeholder})}
+         ref={ref}>
+      <div className={styles.figure}>
+        <ItemImageComponent item={item}
+                            imageFile={imageFile}
+                            portraitImageFile={portraitImageFile}
+                            configuration={configuration}
+                            current={current}
+                            onClick={onClick}
+                            children={children} />
+      </div>
+    </div>
+  );
+});
+
+function OrientationAwareItemImage({imageFile, portraitImageFile, ...props}) {
+  const portraitOrientation = usePortraitOrientation();
+
+  imageFile = portraitOrientation && portraitImageFile ?
+              portraitImageFile : imageFile;
+  return (
+    <ItemImageWithCaption imageFile={imageFile} {...props} />
+  );
+}
+
+function ItemImageWithCaption({item, imageFile, configuration, current, onClick, children}) {
+  const {shouldLoad} = useContentElementLifecycle();
+
+  const updateConfiguration = useContentElementConfigurationUpdate();
+
+  const captions = configuration.captions || {};
+  const caption = captions[item.id];
+
   const handleCaptionChange = function(caption) {
     updateConfiguration({
       captions: {
@@ -211,36 +249,30 @@ const Item = forwardRef(function({item, configuration, current, onClick, childre
   }
 
   return (
-    <div className={classNames(styles.item, {[styles.current]: current,
-                                             [styles.placeholder]: item.placeholder})}
-         ref={ref}>
-      <div className={styles.figure}>
-        <FitViewport file={imageFile}
-                     aspectRatio={imageFile ? undefined : 0.75}
-                     scale={0.8}
-                     opaque={!imageFile}>
-          <ContentElementBox>
-            <Figure caption={caption}
-                    variant={configuration.captionVariant}
-                    onCaptionChange={handleCaptionChange}
-                    addCaptionButtonVisible={current && !item.placeholder}
-                    addCaptionButtonPosition="inside">
-              <FitViewport.Content>
-                <div onClick={onClick}>
-                  <Image imageFile={imageFile} load={shouldLoad} />
-                </div>
-                {children}
-                <InlineFileRights configuration={configuration}
-                                  context="insideElement"
-                                  items={[{file: imageFile, label: 'image'}]} />
-              </FitViewport.Content>
-            </Figure>
-          </ContentElementBox>
-          <InlineFileRights configuration={configuration}
-                            context="afterElement"
-                            items={[{file: imageFile, label: 'image'}]} />
-        </FitViewport>
-      </div>
-    </div>
+    <FitViewport file={imageFile}
+                 aspectRatio={imageFile ? undefined : 0.75}
+                 scale={0.8}
+                 opaque={!imageFile}>
+      <ContentElementBox>
+        <Figure caption={caption}
+                variant={configuration.captionVariant}
+                onCaptionChange={handleCaptionChange}
+                addCaptionButtonVisible={current && !item.placeholder}
+                addCaptionButtonPosition="inside">
+          <FitViewport.Content>
+            <div onClick={onClick}>
+              <Image imageFile={imageFile} load={shouldLoad} />
+            </div>
+            {children}
+            <InlineFileRights configuration={configuration}
+                              context="insideElement"
+                              items={[{file: imageFile, label: 'image'}]} />
+          </FitViewport.Content>
+        </Figure>
+      </ContentElementBox>
+      <InlineFileRights configuration={configuration}
+                        context="afterElement"
+                        items={[{file: imageFile, label: 'image'}]} />
+    </FitViewport>
   );
-});
+}

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

@@ -1,5 +1,5 @@
 import Marionette from 'backbone.marionette';
-import {buttonStyles} from 'pageflow-scrolled/editor';
+import {editor, buttonStyles} from 'pageflow-scrolled/editor';
 import {ListView} from 'pageflow/editor';
 import {cssModulesUtils} from 'pageflow/ui';
 import I18n from 'i18n-js';
@@ -28,6 +28,12 @@ export const ItemsListView = Marionette.Layout.extend({
       collection: this.collection,
       sortable: true,
 
+      onEdit: (model) => {
+        editor.navigate(
+          `/scrolled/imageGalleries/${this.options.contentElement.id}/${model.id}`,
+          {trigger: true}
+        )
+      },
       onRemove: (model) => this.collection.remove(model)
     }));
   }

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

@@ -0,0 +1,22 @@
+import {SidebarEditItemView} from './SidebarEditItemView';
+import {ItemsCollection} from './models/ItemsCollection';
+import Marionette from 'backbone.marionette';
+
+export const SidebarController = Marionette.Controller.extend({
+  initialize: function(options) {
+    this.entry = options.entry;
+    this.region = options.region;
+  },
+
+  item: function(id, itemId) {
+    const contentElement = this.entry.contentElements.get(id);
+    const itemsCollection = ItemsCollection.forContentElement(contentElement, this.entry);
+
+    this.region.show(new SidebarEditItemView({
+      model: itemsCollection.get(itemId),
+      collection: itemsCollection,
+      entry: this.entry,
+      contentElement
+    }));
+  }
+});

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

@@ -0,0 +1,64 @@
+import {ConfigurationEditorView} from 'pageflow/ui';
+import {editor, FileInputView} from 'pageflow/editor';
+import Marionette from 'backbone.marionette';
+import I18n from 'i18n-js';
+
+export const SidebarEditItemView = Marionette.Layout.extend({
+  template: (data) => `
+    <a class="back">${I18n.t('pageflow_scrolled.editor.content_elements.imageGallery.edit_item.back')}</a>
+    <a class="destroy">${I18n.t('pageflow_scrolled.editor.content_elements.imageGallery.edit_item.destroy')}</a>
+
+    <div class='form_container'></div>
+  `,
+
+  regions: {
+    formContainer: '.form_container',
+  },
+
+  events: {
+    'click a.back': 'goBack',
+    'click a.destroy': 'destroyLink'
+  },
+
+  onRender: function () {
+    const options = this.options;
+
+    const configurationEditor = new ConfigurationEditorView({
+      model: this.model,
+      attributeTranslationKeyPrefixes: ['pageflow_scrolled.editor.content_elements.imageGallery.edit_item.attributes'],
+      tabTranslationKeyPrefix: 'pageflow_scrolled.editor.content_elements.imageGallery.edit_item.tabs',
+    });
+
+    configurationEditor.tab('item', function() {
+      this.input('image', FileInputView, {
+        collection: 'image_files',
+        fileSelectionHandler: 'imageGalleryItem',
+        fileSelectionHandlerOptions: {
+          contentElementId: options.contentElement.get('id')
+        },
+        positioning: false
+      });
+      this.input('portraitImage', FileInputView, {
+        collection: 'image_files',
+        fileSelectionHandler: 'imageGalleryItem',
+        fileSelectionHandlerOptions: {
+          contentElementId: options.contentElement.get('id')
+        },
+        positioning: false
+      });
+    });
+
+    this.formContainer.show(configurationEditor);
+  },
+
+  goBack: function() {
+    editor.navigate(`/scrolled/content_elements/${this.options.contentElement.get('id')}`, {trigger: true});
+  },
+
+  destroyLink: function () {
+    if (window.confirm(I18n.t('pageflow_scrolled.editor.content_elements.imageGallery.edit_item.confirm_delete_link'))) {
+      this.options.collection.remove(this.model);
+      this.goBack();
+    }
+  }
+});

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

@@ -0,0 +1,7 @@
+import Marionette from 'backbone.marionette';
+
+export const SidebarRouter = Marionette.AppRouter.extend({
+  appRoutes: {
+    'scrolled/imageGalleries/:id/:item_id': 'item'
+  }
+});

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

@@ -5,8 +5,16 @@ import {CheckBoxInputView, SeparatorView} from 'pageflow/editor';
 import {ItemsListView} from './ItemsListView';
 import {ItemsCollection} from './models/ItemsCollection';
 
+import {SidebarRouter} from './SidebarRouter';
+import {SidebarController} from './SidebarController';
+
 import pictogram from './pictogram.svg';
 
+editor.registerSideBarRouting({
+  router: SidebarRouter,
+  controller: SidebarController
+});
+
 editor.contentElementTypes.register('imageGallery', {
   pictogram,
   category: 'media',
@@ -16,7 +24,8 @@ editor.contentElementTypes.register('imageGallery', {
   configurationEditor({entry, contentElement}) {
     this.tab('general', function() {
       this.view(ItemsListView, {
-        collection: ItemsCollection.forContentElement(this.model.parent, entry)
+        contentElement,
+        collection: ItemsCollection.forContentElement(this.model.parent, entry),
       });
       this.input('displayPeeks', CheckBoxInputView, {
         storeInverted: 'hidePeeks'
@@ -36,3 +45,16 @@ editor.contentElementTypes.register('imageGallery', {
 
   defaultConfig: {displayPaginationIndicator: true}
 });
+
+editor.registerFileSelectionHandler('imageGalleryItem', function (options) {
+  const contentElement = options.entry.contentElements.get(options.contentElementId);
+  const items = ItemsCollection.forContentElement(contentElement, options.entry)
+
+  this.call = function(file) {
+    items.get(options.id).setReference(options.attributeName, file);
+  };
+
+  this.getReferer = function() {
+    return '/scrolled/imageGalleries/' + contentElement.id + '/' + options.id;
+  };
+});

entry_types/scrolled/package/src/contentElements/imageGallery/editor/models/ItemsCollection.js

@@ -11,7 +11,7 @@ export const ItemsCollection = Backbone.Collection.extend({
   initialize(models, options) {
     this.entry = options.entry;
     this.contentElement = options.contentElement;
-    this.listenTo(this, 'add remove sort', this.updateConfiguration);
+    this.listenTo(this, 'add change remove sort', this.updateConfiguration);
     this.listenTo(this, 'remove', this.pruneCaptions);
   },
 

entry_types/scrolled/package/src/contentElements/imageGallery/stories.js

@@ -34,6 +34,19 @@ storiesOfContentElement(module, {
   },
   inlineFileRights: true,
   variants: [
+    {
+      name: 'Portrait image',
+      configuration: {
+        items: [
+          {
+            id: 1,
+            image: filePermaId('imageFiles', 'turtle'),
+            portraitImage: filePermaId('imageFiles', 'churchBefore')
+          }
+        ]
+      },
+      viewport: 'phone'
+    },
     {
       name: 'Custom scroll button size',
       themeOptions: {