Merge pull request #2173 from tf/ext-link-options

Alternative text positions and sizing options for external links

app/assets/stylesheets/pageflow/editor/background_positioning.scss

@@ -18,6 +18,11 @@
     margin: 35px;
   }
 
+  h3 {
+    border-bottom: solid 1px var(--ui-on-surface-color-lightest);
+    margin: 40px 0;
+  }
+
   .previews {
     overflow: scroll;
     overflow-x: auto;
@@ -27,6 +32,7 @@
     > div {
       height: 100%;
       white-space: nowrap;
+      text-align: center;
     }
   }
 

entry_types/scrolled/config/locales/new/ext-link-options.de.yml

@@ -0,0 +1,63 @@
+de:
+  pageflow:
+    external_links_options:
+      feature_name: "External Links Optionen"
+  pageflow_scrolled:
+    editor:
+      content_elements:
+        externalLinkList:
+          attributes:
+            thumbnailAspectRatio:
+              label: "Thumbnail Seitenverhältnis"
+              inline_help: |-
+                Bestimme die Proportion der Thumbnails. Wird der Text
+                neben dem Bild gezeigt, kann längerer Text dazu
+                führen, dass ein hochformatigeres Seitenverähltnis
+                gewählt wird, damit das Thumbnail die gesamte Höhe des
+                Links überdeckt.
+              values:
+                narrow: Landscape (4:3)
+                portrait: Portrait (3:4)
+                square: Quadratisch (1:1)
+                wide: Landscape (16:9)
+                original: Original
+            textPosition:
+              label: "Textposition"
+              inline_help: |-
+                Anordnung von Bild und Text innerhalb von Links.
+              values:
+                below: "Unter dem Bild"
+                right: "Rechts neben dem Bild"
+                title: "Nur Bild"
+            thumbnailSize:
+              label: "Thumbnail-Breite"
+              inline_help: |-
+                Anteil der Thumbnail-Breite im Verhältnis zur
+                Gesamtbreite des Links.
+              values:
+                small: "Klein"
+                medium: "Mittel"
+                large: "Groß"
+            linkWidth:
+              label: "Link-Breite"
+              inline_help: |-
+                Wähle eine schmalere Breite, um mehr Links
+                nebeneinander anzuordnen.
+            linkAlignment:
+              label: "Link-Ausrichtung"
+              inline_help: |-
+                Bestimmt die Ausrichtung in Zeilen, die nicht
+                vollständig mit Links gefüllt sind.
+              values:
+                spaceEvenly: Gleichmäßig verteilt
+                left: Links
+                right: Rechts
+                center: Mittig
+            textSize:
+              label: "Schriftgröße"
+              inline_help: |
+                Legt die Schriftgröße für Titel und Beschreibung der Links fest.
+              values:
+                small: Klein
+                medium: Mittel
+                large: Groß

entry_types/scrolled/config/locales/new/ext-link-options.en.yml

@@ -0,0 +1,62 @@
+en:
+  pageflow:
+    external_links_options:
+      feature_name: "External Links Options"
+  pageflow_scrolled:
+    editor:
+      content_elements:
+        externalLinkList:
+          attributes:
+            thumbnailAspectRatio:
+              label: "Thumbnail aspect ratio"
+              inline_help: |-
+                Determine the proportions of the thumbnails. If the
+                text is displayed next to the image, longer text may
+                result in a more portrait-like aspect ratio so that
+                the thumbnail covers the entire height of the link.
+              values:
+                narrow: Landscape (4:3)
+                portrait: Portrait (3:4)
+                square: Square (1:1)
+                wide: Landscape (16:9)
+                original: Original
+            textPosition:
+              label: "Text position"
+              inline_help: |-
+                Arrangement of image and text within links.
+              values:
+                below: "Below image"
+                right: "Right from image"
+                title: "Image only"
+            thumbnailSize:
+              label: "Thumbnail width"
+              inline_help: |-
+                Proportion of the thumbnail width relative to the
+                overall width of the link.
+              values:
+                small: "Small"
+                medium: "Medium"
+                large: "Large"
+            linkWidth:
+              label: "Link width"
+              inline_help: |-
+                Choose a narrower width to arrange more links
+                side by side.
+            linkAlignment:
+              label: "Link alignment"
+              inline_help: |-
+                Determines the alignment in rows that are not
+                completely filled with links.
+              values:
+                spaceEvenly: Space evenly
+                left: Left
+                right: Right
+                center: Center
+            textSize:
+              label: "Text size"
+              inline_help: |-
+                Defines the font size for the title and description of the links.
+              values:
+                small: Small
+                medium: Medium
+                large: Large

entry_types/scrolled/lib/pageflow_scrolled/plugin.rb

@@ -42,6 +42,7 @@ def configure(config)
         c.features.register('frontend_v2')
         c.features.register('scrolled_entry_fragment_caching')
         c.features.register('backdrop_content_elements')
+        c.features.register('external_links_options')
 
         c.additional_frontend_seed_data.register(
           'frontendVersion',

entry_types/scrolled/package/spec/contentElements/externalLinkList/frontend/ExternalLink-spec.js

@@ -29,4 +29,86 @@ describe('ExternalLink', () => {
 
     expect(getByRole('link')).toHaveAttribute('href', 'https://example.com');
   });
+
+  it('renders linkThumbnailLarge image by default', () => {
+    const {getByRole} = renderInEntry(
+      <ExternalLink url=""
+                    loadImages={true}
+                    thumbnail={5} />,
+      {
+        seed: {
+          imageFiles: [{permaId: 5}],
+          imageFileUrlTemplates: {
+            linkThumbnailLarge: ':id_partition/linkThumbnailLarge/image.jpg'
+          },
+        }
+      }
+    )
+
+    expect(getByRole('img')).toHaveAttribute('src', expect.stringContaining('linkThumbnailLarge'));
+    expect(getByRole('img').parentNode).not.toHaveAttribute('style');
+  });
+
+  it('uses medium image as thumbnail with alternative aspect ratio', () => {
+    const {getByRole} = renderInEntry(
+      <ExternalLink url=""
+                    loadImages={true}
+                    thumbnail={5}
+                    thumbnailAspectRatio="square" />,
+      {
+        seed: {
+          imageFiles: [{permaId: 5}],
+          imageFileUrlTemplates: {
+            linkThumbnailLarge: ':id_partition/linkThumbnailLarge/image.jpg',
+            medium: ':id_partition/medium/image.jpg'
+          },
+        }
+      }
+    )
+
+    expect(getByRole('img')).toHaveAttribute('src', expect.stringContaining('medium'));
+    expect(getByRole('img').parentNode).toHaveStyle('paddingTop: 100%');
+  });
+
+  it('uses medium image as thumbnail with alternative crop position', () => {
+    const {getByRole} = renderInEntry(
+      <ExternalLink url=""
+                    loadImages={true}
+                    thumbnail={5}
+                    thumbnailCropPosition={{x: 100, y: 20}} />,
+      {
+        seed: {
+          imageFiles: [{permaId: 5}],
+          imageFileUrlTemplates: {
+            linkThumbnailLarge: ':id_partition/linkThumbnailLarge/image.jpg',
+            medium: ':id_partition/medium/image.jpg'
+          },
+        }
+      }
+    )
+
+    expect(getByRole('img')).toHaveAttribute('src', expect.stringContaining('medium'));
+    expect(getByRole('img')).toHaveStyle('object-position: 100% 20%');
+  });
+
+  it('uses medium image as thumbnail with original aspect ratio', () => {
+    const {getByRole} = renderInEntry(
+      <ExternalLink url=""
+                    loadImages={true}
+                    thumbnail={5}
+                    thumbnailAspectRatio="original" />,
+      {
+        seed: {
+          imageFiles: [{permaId: 5, width: 1000, height: 500}],
+          imageFileUrlTemplates: {
+            linkThumbnailLarge: ':id_partition/linkThumbnailLarge/image.jpg',
+            medium: ':id_partition/medium/image.jpg'
+          },
+        }
+      }
+    )
+
+    expect(getByRole('img')).toHaveAttribute('src', expect.stringContaining('medium'));
+    expect(getByRole('img').parentNode).toHaveStyle('paddingTop: 50%');
+  });
 });

entry_types/scrolled/package/src/contentElements/externalLinkList/editor/SidebarEditLinkView.js

@@ -4,6 +4,13 @@ import {InlineFileRightsMenuItem} from 'pageflow-scrolled/editor';
 import Marionette from 'backbone.marionette';
 import I18n from 'i18n-js';
 
+const previewAspectRatios = {
+  wide: 16 / 9,
+  narrow: 4 / 3,
+  square: 1,
+  portrait: 3 / 4
+};
+
 export const SidebarEditLinkView = Marionette.Layout.extend({
   template: (data) => `
     <a class="back">${I18n.t('pageflow_scrolled.editor.content_elements.externalLinkList.back')}</a>
@@ -27,6 +34,8 @@ export const SidebarEditLinkView = Marionette.Layout.extend({
       tabTranslationKeyPrefix: 'pageflow_scrolled.editor.content_elements.externalLinkList.tabs'
     });
     var self = this;
+    var thumbnailAspectRatio = this.options.contentElement.configuration.get('thumbnailAspectRatio');
+
     configurationEditor.tab('edit_link', function () {
       this.input('url', TextInputView, {
         required: true
@@ -38,13 +47,18 @@ export const SidebarEditLinkView = Marionette.Layout.extend({
         fileSelectionHandlerOptions: {
           contentElementId: self.options.contentElement.get('id')
         },
-        positioning: false,
+        positioning: !!previewAspectRatios[thumbnailAspectRatio],
+        positioningOptions: {
+          preview: previewAspectRatios[thumbnailAspectRatio]
+        },
         dropDownMenuItems: [InlineFileRightsMenuItem]
       });
       this.input('title', TextInputView, {
         required: true
       });
-      this.input('description', TextInputView);
+      this.input('description', TextInputView, {
+        maxLength: 10000
+      });
     });
     this.formContainer.show(configurationEditor);
   },

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

@@ -1,9 +1,12 @@
 import {editor} from 'pageflow-scrolled/editor';
+import {features} from 'pageflow/frontend';
+import {SelectInputView, SliderInputView, SeparatorView} from 'pageflow/ui';
 
 import {SidebarRouter} from './SidebarRouter';
 import {SidebarController} from './SidebarController';
 import {SidebarListView} from './SidebarListView';
 import {ExternalLinkCollection} from './models/ExternalLinkCollection';
+import {maxLinkWidth} from '../linkWidths';
 
 import pictogram from './pictogram.svg';
 
@@ -18,16 +21,57 @@ editor.registerSideBarRouting({
 editor.contentElementTypes.register('externalLinkList', {
   pictogram,
   category: 'links',
-  supportedPositions: ['inline'],
+  supportedPositions: ['inline', 'standAlone'],
+  supportedWidthRange: ['m', 'xl'],
 
-  configurationEditor({entry}) {
+  configurationEditor({entry, contentElement}) {
     this.tab('general', function() {
-      this.group('ContentElementVariant', {entry});
+      const layout = contentElement.section.configuration.get('layout');
+
+      if (!features.isEnabled('external_links_options')) {
+        this.group('ContentElementVariant', {entry});
+      }
 
       this.view(SidebarListView, {
         contentElement: this.model.parent,
         collection: ExternalLinkCollection.forContentElement(this.model.parent, entry)
       });
+
+      if (features.isEnabled('external_links_options')) {
+        this.input('textPosition', SelectInputView, {
+          values: ['below', 'right', 'title']
+        });
+        this.group('ContentElementVariant', {entry});
+        this.view(SeparatorView);
+        this.group('ContentElementPosition');
+        this.view(SeparatorView);
+        this.input('linkWidth', SliderInputView, {
+          displayText: value => [
+            'XS', 'S', 'M', 'L', 'XL', 'XXL'
+          ][value + 2],
+          saveOnSlide: true,
+          minValue: -2,
+          maxValueBinding: ['width', 'textPosition'],
+          maxValue: ([width, textPosition]) => maxLinkWidth({width, layout, textPosition}),
+          defaultValue: -1
+        });
+        this.input('linkAlignment', SelectInputView, {
+          values: ['spaceEvenly', 'left', 'right', 'center'],
+          visibleBinding: 'textPosition',
+          visible: textPosition => textPosition !== 'right'
+        });
+        this.input('thumbnailSize', SelectInputView, {
+          values: ['small', 'medium', 'large'],
+          visibleBinding: 'textPosition',
+          visibleBindingValue: 'right'
+        });
+        this.input('thumbnailAspectRatio', SelectInputView, {
+          values: ['wide', 'narrow', 'square', 'portrait', 'original']
+        });
+        this.input('textSize', SelectInputView, {
+          values: ['small', 'medium', 'large']
+        });
+      }
     });
   }
 });

entry_types/scrolled/package/src/contentElements/externalLinkList/editor/models/ExternalLinkModel.js

@@ -14,4 +14,20 @@ export const ExternalLinkModel = Backbone.Model.extend({
   title: function() {
     return this.get('title');
   },
+
+  getFilePosition: function(attribute, coord) {
+    const cropPosition = this.get('thumbnailCropPosition');
+    return cropPosition ? cropPosition[coord] : 50;
+  },
+
+  setFilePosition: function(attribute, coord, value) {
+    this.set('thumbnailCropPosition', {
+      ...this.get('thumbnailCropPosition'),
+      [coord]: value
+    });
+  },
+
+  setFilePositions: function(attribute, x, y) {
+    this.set('thumbnailCropPosition', {x, y});
+  },
 });