Merge pull request #2239 from tf/backdrop-size

Allow scaling backdrop to cover section instead of viewport

Author: tf

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

@@ -0,0 +1,13 @@
+de:
+  pageflow:
+    backdrop_size:
+      feature_name: Hintergrundgröße-Option
+  pageflow_scrolled:
+    editor:
+      edit_section:
+        attributes:
+          backdropSize:
+            label: Hintergrund-Skalierung
+            values:
+              coverViewport: Viewport überdecken
+              coverSection: Abschnitt überdecken

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

@@ -0,0 +1,13 @@
+en:
+  pageflow:
+    backdrop_size:
+      feature_name: Backdrop size option
+  pageflow_scrolled:
+    editor:
+      edit_section:
+        attributes:
+          backdropSize:
+            label: Backdrop scaling
+            values:
+              coverViewport: Cover viewport
+              coverSection: Cover section

entry_types/scrolled/lib/pageflow_scrolled/plugin.rb

@@ -50,6 +50,7 @@ def configure(config)
         c.features.register('backdrop_content_elements')
         c.features.register('custom_palette_colors')
         c.features.register('decoration_effects')
+        c.features.register('backdrop_size')
 
         c.additional_frontend_seed_data.register(
           'frontendVersion',

entry_types/scrolled/package/src/editor/views/EditSectionView.js

@@ -46,6 +46,15 @@ export const EditSectionView = EditConfigurationView.extend({
         displayCheckedIfDisabled: true
       });
 
+      if (features.isEnabled('backdrop_size')) {
+        this.input('backdropSize', SelectInputView, {
+          visibleBinding: 'backdropType',
+          visible: backdropType => backdropType === 'image' ||
+                                 backdropType === 'video',
+          values: ['coverViewport', 'coverSection']
+        });
+      }
+
       this.input('backdropImage', FileInputView, {
         collection: 'image_files',
         fileSelectionHandler: 'sectionConfiguration',

entry_types/scrolled/package/src/frontend/Backdrop.module.css

@@ -7,6 +7,11 @@
   visibility: hidden;
 }
 
+.coverSection {
+  container-type: size;
+  --vh: 1cqh;
+}
+
 .defaultBackground {
   background-color: #333;
 }

entry_types/scrolled/package/src/frontend/Section.js

@@ -130,6 +130,7 @@ function SectionContents({
     <>
       <Backdrop backdrop={backdrop}
                 eagerLoad={section.sectionIndex === 0}
+                size={section.backdropSize}
 
                 motifAreaState={motifAreaState}
                 onMotifAreaUpdate={setMotifAreaRef}

entry_types/scrolled/package/src/frontend/__stories__/backdropSize-stories.js

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import {Entry, RootProviders} from 'pageflow-scrolled/frontend';
+
+import {
+  normalizeAndMergeFixture,
+  exampleHeading,
+  exampleTextBlock,
+  filePermaId
+} from 'pageflow-scrolled/spec/support/stories';
+
+import {storiesOf} from '@storybook/react';
+
+storiesOf(`Frontend`, module)
+  .add(
+    'Backdrop Size',
+    () =>
+      <RootProviders seed={exampleSeed()}>
+        <Entry />
+      </RootProviders>
+  )
+
+function exampleSeed() {
+  const sectionBaseConfiguration = {
+    backdrop: {
+      image: filePermaId('imageFiles', 'turtle')
+    },
+    backdropSize: 'coverSection',
+    transition: 'reveal',
+    fullHeight: false
+  };
+
+  return normalizeAndMergeFixture({
+    sections: [
+      {
+        id: 1,
+        configuration: {
+          ...sectionBaseConfiguration
+        }
+      }
+    ],
+    contentElements: exampleContentElements()
+  });
+
+  function exampleContentElements() {
+    return [
+      exampleHeading({sectionId: 1, text: 'Backdrop size cover section'}),
+      exampleTextBlock({sectionId: 1})
+    ];
+  }
+}

entry_types/scrolled/package/src/frontend/transitions/scrollInScrollOut.module.css

@@ -1,9 +1,11 @@
 .backdrop {
-  position: sticky;
+  position: absolute;
   top: 0;
-  height: 100vh;
+  bottom: 0;
 }
 
-.foreground {
-  margin-top: -100vh;
+.backdropInner {
+  position: sticky;
+  top: 0;
+  height: calc(100 * var(--vh));
 }

entry_types/scrolled/package/src/frontend/v1/Backdrop/index.js

@@ -17,6 +17,7 @@ export const Backdrop = withInlineEditingDecorator('BackdropDecorator', function
   return (
     <div className={classNames(styles.Backdrop,
                                {[styles.noCompositionLayer]: !shouldLoad && !props.eagerLoad},
+                               {[styles.coverSection]: props.size === 'coverSection'},
                                props.transitionStyles.backdrop,
                                props.transitionStyles[`backdrop-${props.state}`])}>
       <div className={classNames(props.transitionStyles.backdropInner,