Merge pull request #2093 from tf/backdrop-content-elements

Backdrop content elements

entry_types/scrolled/config/locales/de.yml

@@ -394,9 +394,6 @@ de:
               inline_help: Farbe des Bereichs der Waveform, der den bereits abgespielten Teil der Audio-Datei repräsentiert.
               label: Waveform Farbe
           description: Wiedergabe einer Audiodatei mit Steuerelementen
-          name: Inline-Audio
-          tabs:
-            general: Inline-Audio
         inlineBeforeAfter:
           attributes:
             after_id:
@@ -433,9 +430,6 @@ de:
               inline_help: Wird gezeigt, 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)
           description: Einbindung von Bildern
-          name: Inline-Bild
-          tabs:
-            general: Inline-Bild
         inlineVideo:
           attributes:
             atmoDuringPlayback:
@@ -481,9 +475,6 @@ de:
               inline_help_html: Browser erlauben standardmäßig das Abspielen von Videos mit Ton nur nach einer Benutzer-Interaktion. Um Videos dennoch automatisch abspielen zu können, sind Beiträge zu Beginn stummgeschaltet.<br /><br />Die Stummschaltung kann z.B. über das Lautsprecher-Icon in der Navigationsleiste oder ein im Beitrag platziertes "Audio-Hinweis"-Element aufgehoben werden.
               label: Stummschaltung des Beitrags
           description: Wiedergabe einer Videodatei mit Steuerelementen
-          name: Inline-Video
-          tabs:
-            general: Inline-Video
         question:
           attributes:
             expandByDefault:
@@ -683,7 +674,6 @@ de:
             values:
               narrow: Schmal
               wide: Breit
-        edit_motif_area: Motivbereich markieren...
         tabs:
           section: Abschnitt
       edit_section_transition:

entry_types/scrolled/config/locales/en.yml

@@ -385,9 +385,6 @@ en:
               inline_help: Color of the waveform's parts that represents the already played part of the audio.
               label: Waveform Color
           description: Player or waveform with controls
-          name: Inline Audio
-          tabs:
-            general: Inline Audio
         inlineBeforeAfter:
           attributes:
             after_id:
@@ -424,9 +421,6 @@ en:
               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)
           description: Display an image
-          name: Inline Image
-          tabs:
-            general: Inline Image
         inlineVideo:
           attributes:
             atmoDuringPlayback:
@@ -472,9 +466,6 @@ en:
               inline_help_html: By default browsers only allow autoplaying videos with sound after a user interaction. To still be able to autoplay videos, entries therefore start muted.<br /><br />Sound can be activated using the speaker icon in the navigation bar or via an "Audio notice" element that has been placed in the entry.
               label: Unmute entry
           description: Player with controls
-          name: Inline Video
-          tabs:
-            general: Inline Video
         question:
           attributes:
             expandByDefault:
@@ -674,7 +665,6 @@ en:
             values:
               narrow: Narrow
               wide: Wide
-        edit_motif_area: Select motif area...
         tabs:
           section: Section
       edit_section_transition:

entry_types/scrolled/config/locales/new/backdrop-position.de.yml

@@ -0,0 +1,43 @@
+de:
+  pageflow:
+    backdrop_content_elements:
+      feature_name: "Inhaltselemente als Backdrop"
+  pageflow_scrolled:
+    editor:
+      common_content_element_attributes:
+        position:
+          values:
+            backdrop: 'Als Hintergrund'
+          item_inline_help_texts:
+            backdrop: ''
+      content_elements:
+        inlineVideo:
+          name: Video
+          tabs:
+            general: Video
+        inlineAudio:
+          name: Audio
+          tabs:
+            general: Audio
+        inlineImage:
+          name: Bild
+          tabs:
+            general: Bild
+      edit_section:
+        attributes:
+          backdropType:
+            values:
+              contentElement: Interaktives Element
+          fullHeight:
+            inline_help_disabled: |-
+              Interaktive Hintergrund-Elemente nutzen immer die volle Viewport-Höhe
+          backdropContentElement:
+            label: Element
+        edit_motif_area: DELETED
+      edit_motif_area_menu_item: Motivbereich markieren...
+      backdrop_content_element_input:
+        add: Neues Element
+        unset: Nicht mehr als Hintergrund verwenden
+    inline_editing:
+      select_backdrop_content_element: Hintergrund bearbeiten
+      back_to_section: Zurück zum Abschnitt

entry_types/scrolled/config/locales/new/backdrop-position.en.yml

@@ -0,0 +1,43 @@
+en:
+  pageflow:
+    backdrop_content_elements:
+      feature_name: "Backdrop content elements"
+  pageflow_scrolled:
+    editor:
+      common_content_element_attributes:
+        position:
+          values:
+            backdrop: 'As Backdrop'
+          item_inline_help_texts:
+            backdrop: ''
+      content_elements:
+        inlineVideo:
+          name: Video
+          tabs:
+            general: Video
+        inlineAudio:
+          name: Audio
+          tabs:
+            general: Audio
+        inlineImage:
+          name: Image
+          tabs:
+            general: Image
+      edit_section:
+        attributes:
+          backdropType:
+            values:
+              contentElement: Interactive Element
+          fullHeight:
+            inline_help_disabled: |-
+              Interactive backdrop elements always take up full viewport height.
+          backdropContentElement:
+            label: Element
+        edit_motif_area: DELETED
+      edit_motif_area_menu_item: Select motif area...
+      backdrop_content_element_input:
+        add: New element
+        unset: No longer use as backdrop
+    inline_editing:
+      select_backdrop_content_element: Edit backdrop
+      back_to_section: Back to section

entry_types/scrolled/lib/pageflow_scrolled/plugin.rb

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

entry_types/scrolled/package/spec/editor/api/ContentElementTypeRegistry-spec.js

@@ -11,6 +11,25 @@ describe('ContentElementTypeRegistry', () => {
     'pageflow_scrolled.editor.content_elements.inlineImage.description': 'An image'
   });
 
+  describe('findByTypeName', () => {
+    it('includes translated display name and description', () => {
+      const registry = new ContentElementTypeRegistry({features: new Features()});
+      registry.register('inlineImage', {
+        category: 'media',
+        supportedPositions: ['inline', 'full']
+      });
+
+      const contentElementType = registry.findByTypeName('inlineImage');
+
+      expect(contentElementType).toMatchObject({
+        category: 'media',
+        supportedPositions: ['inline', 'full'],
+        displayName: 'Inline image',
+        description: 'An image'
+      });
+    });
+  });
+
   describe('groupedByCategory', () => {
     it('returns options passed to register grouped by category', () => {
       const registry = new ContentElementTypeRegistry({features: new Features()});

entry_types/scrolled/package/spec/editor/controllers/PreviewMessageController-spec.js

@@ -71,8 +71,29 @@ describe('PreviewMessageController', () => {
           resolve(event.data);
         }
       });
-      entry.trigger('scrollToSection', entry.sections.at(2));
-    })).resolves.toMatchObject({type: 'SCROLL_TO_SECTION', payload: {index: 2}});
+      entry.trigger('scrollToSection', entry.sections.get(2));
+    })).resolves.toMatchObject({type: 'SCROLL_TO_SECTION', payload: {id: 2}});
+  });
+
+  it('supports sending SCROLL_TO_SECTION message with align property', async () => {
+    const entry = factories.entry(ScrolledEntry, {}, {
+      entryTypeSeed: normalizeSeed({
+        sections: [{id: 1}, {id: 2}, {id: 3}]
+      })
+    });
+    const iframeWindow = createIframeWindow();
+    controller = new PreviewMessageController({entry, iframeWindow});
+
+    await postReadyMessageAndWaitForAcknowledgement(iframeWindow);
+
+    return expect(new Promise(resolve => {
+      iframeWindow.addEventListener('message', event => {
+        if (event.data.type === 'SCROLL_TO_SECTION') {
+          resolve(event.data);
+        }
+      });
+      entry.trigger('scrollToSection', entry.sections.get(2), {align: 'start'});
+    })).resolves.toMatchObject({type: 'SCROLL_TO_SECTION', payload: {id: 2, align: 'start'}});
   });
 
   it('sends SELECT message to iframe on selectContentElement event on model', async () => {

entry_types/scrolled/package/spec/editor/models/ContentElement-spec.js

@@ -1,10 +1,13 @@
 import {editor} from 'pageflow-scrolled/editor';
 import {ScrolledEntry} from 'editor/models/ScrolledEntry';
 import {factories, normalizeSeed} from 'support';
+import {features} from 'pageflow/frontend';
 
 describe('ContentElement', () => {
   describe('getAvailablePositions', () => {
     beforeEach(() => {
+      features.enable('frontend', ['backdrop_content_elements']);
+
       editor.contentElementTypes.register('inlineImage', {});
       editor.contentElementTypes.register('soundDisclaimer', {supportedPositions: ['inline']});
     });
@@ -26,7 +29,9 @@ describe('ContentElement', () => {
       );
       const contentElement = entry.contentElements.get(5);
 
-      expect(contentElement.getAvailablePositions()).toEqual(['inline', 'sticky', 'standAlone']);
+      expect(contentElement.getAvailablePositions()).toEqual(
+        ['inline', 'sticky', 'standAlone', 'backdrop']
+      );
     });
 
     it('returns positions for left layout if parent section uses that', () => {
@@ -46,7 +51,9 @@ describe('ContentElement', () => {
       );
       const contentElement = entry.contentElements.get(5);
 
-      expect(contentElement.getAvailablePositions()).toEqual(['inline', 'sticky', 'standAlone']);
+      expect(contentElement.getAvailablePositions()).toEqual(
+        ['inline', 'sticky', 'standAlone', 'backdrop']
+      );
     });
 
     it('returns positions for center layout if parent section uses that', () => {
@@ -66,7 +73,9 @@ describe('ContentElement', () => {
       );
       const contentElement = entry.contentElements.get(5);
 
-      expect(contentElement.getAvailablePositions()).toEqual(['inline', 'left', 'right', 'standAlone']);
+      expect(contentElement.getAvailablePositions()).toEqual(
+        ['inline', 'left', 'right', 'standAlone', 'backdrop']
+      );
     });
 
     it('returns positions for centerRagged layout if parent section uses that', () => {
@@ -86,7 +95,9 @@ describe('ContentElement', () => {
       );
       const contentElement = entry.contentElements.get(5);
 
-      expect(contentElement.getAvailablePositions()).toEqual(['inline', 'left', 'right', 'standAlone']);
+      expect(contentElement.getAvailablePositions()).toEqual(
+        ['inline', 'left', 'right', 'standAlone', 'backdrop']
+      );
     });
 
     it('filters by positions supported by content element type', () => {
@@ -331,6 +342,27 @@ describe('ContentElement', () => {
       expect(contentElement.getAvailableMaxWidth()).toEqual(2);
     });
 
+    it('only offer md position in backdrop position', () => {
+      const entry = factories.entry(
+        ScrolledEntry,
+        {},
+        {
+          entryTypeSeed: normalizeSeed({
+            sections: [
+              {id: 1}
+            ],
+            contentElements: [
+              {id: 5, sectionId: 1, typeName: 'inlineImage', configuration: {position: 'backdrop'}}
+            ]
+          })
+        }
+      );
+      const contentElement = entry.contentElements.get(5);
+
+      expect(contentElement.getAvailableMinWidth()).toEqual(0);
+      expect(contentElement.getAvailableMaxWidth()).toEqual(0);
+    });
+
     it('does not exclude xxs/full if position is not supported by layout', () => {
       const entry = factories.entry(
         ScrolledEntry,