Merge pull request #2234 from tf/decoration-effect

Backdrop decoration effects

Author: tf

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

@@ -0,0 +1,9 @@
+de:
+  pageflow:
+    decoration_effects:
+      feature_name: Dekoration-Effekte
+  pageflow_scrolled:
+    editor:
+      backdrop_effects:
+        frame:
+          label: 'Rahmen'

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

@@ -0,0 +1,9 @@
+en:
+  pageflow:
+    decoration_effects:
+      feature_name: Decoration Effects
+  pageflow_scrolled:
+    editor:
+      backdrop_effects:
+        frame:
+          label: 'Frame'

entry_types/scrolled/lib/pageflow_scrolled/plugin.rb

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

entry_types/scrolled/package/spec/editor/collections/EffectsCollection-spec.js

@@ -1,8 +1,11 @@
 import {EffectsCollection} from 'editor/collections/EffectsCollection';
 
 import {useFakeTranslations} from 'pageflow/testHelpers';
+import {features} from 'pageflow/frontend';
 
 describe('EffectsCollection', () => {
+  beforeEach(() => features.enabledFeatureNames = []);
+
   describe('#getUnusedEffects', () => {
     useFakeTranslations({
       'pageflow_scrolled.editor.backdrop_effects.blur.label': 'Blur'
@@ -25,6 +28,23 @@ describe('EffectsCollection', () => {
       expect(unusedEffects.pluck('name')).not.toContain('brightness');
     });
 
+    it('does not include decoration effects by default', () => {
+      const effects = new EffectsCollection();
+
+      const unusedEffects = effects.getUnusedEffects();
+
+      expect(unusedEffects.pluck('name')).not.toContain('frame');
+    });
+
+    it('includes decoration effects if feature is enabled', () => {
+      const effects = new EffectsCollection();
+      features.enable('frontend', ['decoration_effects']);
+
+      const unusedEffects = effects.getUnusedEffects();
+
+      expect(unusedEffects.pluck('name')).toContain('frame');
+    });
+
     it('selecting an unused effects adds it to the collection', () => {
       const effects = new EffectsCollection();
 

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

@@ -25,4 +25,16 @@ describe('Effect', () => {
 
     expect(effect.get('value')).toEqual(50);
   });
+
+  it('defaults to slider inputType', () => {
+    const effect = new Effect({name: 'blur'});
+
+    expect(effect.inputType()).toEqual('slider');
+  });
+
+  it('supports colors inputType', () => {
+    const effect = new Effect({name: 'frame'});
+
+    expect(effect.inputType()).toEqual('color');
+  });
 });

entry_types/scrolled/package/spec/frontend/features/backdropDecorationEffects-spec.js

@@ -0,0 +1,86 @@
+import {renderEntry, usePageObjects} from 'support/pageObjects';
+import '@testing-library/jest-dom/extend-expect'
+
+import effectsStyles from 'frontend/BackdropFrameEffect.module.css';
+
+import {usePortraitOrientation} from 'frontend/usePortraitOrientation';
+jest.mock('frontend/usePortraitOrientation');
+
+describe('backdrop decoration effects', () => {
+  usePageObjects();
+
+  it('does not render Backdrop frame', () => {
+    const {container} = renderEntry({
+      seed: {
+        imageFiles: [{permaId: 100}],
+        sections: [
+          {
+            permaId: 1,
+            configuration: {
+              backdrop: {image: 100}
+            }
+          }
+        ]
+      }
+    });
+
+    expect(container.querySelector(`.${effectsStyles.outer}`)).not.toBeInTheDocument();
+  });
+
+  it('renders elements if effect is present', () => {
+    const {container} = renderEntry({
+      seed: {
+        imageFiles: [{permaId: 100}],
+        sections: [
+          {
+            permaId: 1,
+            configuration: {
+              backdrop: {image: 100},
+              backdropEffects: [
+                {
+                  name: 'frame',
+                  value: '#ff0'
+                }
+              ]
+            }
+          }
+        ]
+      }
+    });
+
+    expect(container.querySelector(`.${effectsStyles.outer}`)).toBeInTheDocument();
+  });
+
+  it('supports scroll parallax for mobile image', () => {
+    usePortraitOrientation.mockReturnValue(true);
+
+    const {container} = renderEntry({
+      seed: {
+        imageFiles: [
+          {permaId: 100},
+          {permaId: 101},
+        ],
+        sections: [
+          {
+            permaId: 1,
+            configuration: {
+              backdrop: {
+                image: 100,
+                imageMobile: 101
+              },
+              backdropEffectsMobile: [
+                {
+                  name: 'frame',
+                  value: '#ff0'
+                }
+              ]
+            }
+          }
+        ]
+      }
+    });
+
+    expect(container.querySelector(`.${effectsStyles.outer}`)).toBeInTheDocument();
+    expect(container.querySelector(`.${effectsStyles.outer}`)).toHaveStyle('--frame-color: #ff0');
+  });
+});

entry_types/scrolled/package/src/editor/collections/EffectsCollection.js

@@ -1,4 +1,5 @@
 import Backbone from 'backbone';
+import {features} from 'pageflow/frontend';
 import {Effect} from '../models/Effect';
 
 export const EffectsCollection = Backbone.Collection.extend({
@@ -8,6 +9,8 @@ export const EffectsCollection = Backbone.Collection.extend({
     const effects = this;
     const unusedEffects = new Backbone.Collection(
       Effect.names
+        .filter(name => features.isEnabled('decoration_effects') ||
+                        Effect.getKind(name) !== 'decoration')
         .filter(name => !this.findWhere({name}))
         .map(name => ({name})),
       {

entry_types/scrolled/package/src/editor/models/Effect.js

@@ -49,26 +49,39 @@ const TYPES = {
     maxValue: 100,
     defaultValue: 50,
     kind: 'animation'
+  },
+  frame: {
+    kind: 'decoration',
+    inputType: 'color',
+    defaultValue: '#ffffff'
   }
 }
 
 export const Effect = Backbone.Model.extend({
   initialize({name}) {
     if (!this.has('value')) {
-      this.set('value', TYPES[name].defaultValue);
+      this.set('value', this.defaultValue());
     }
   },
 
   label() {
     return Effect.getLabel(this.get('name'));
   },
 
+  defaultValue() {
+    return TYPES[this.get('name')].defaultValue;
+  },
+
   minValue() {
     return TYPES[this.get('name')].minValue;
   },
 
   maxValue() {
     return TYPES[this.get('name')].maxValue;
+  },
+
+  inputType() {
+    return TYPES[this.get('name')].inputType || 'slider';
   }
 });
 

entry_types/scrolled/package/src/editor/views/inputs/EffectListInputView.js

@@ -54,20 +54,20 @@ const EffectListItemView = Marionette.ItemView.extend({
 
   template: (data) => `
     <div class="${styles.label}">${data.label}</div>
-    <div class="${styles.value}"></div>
-    <div class="${styles.widget}"></div>
+    ${renderInput(data.inputType)}
     <button class="${styles.remove}"
             title="${I18n.t('pageflow_scrolled.editor.effect_list_input.remove')}">
     </button>
   `,
 
   serializeData() {
     return {
-      label: this.model.label()
+      label: this.model.label(),
+      inputType: this.model.inputType()
     };
   },
 
-  ui: cssModulesUtils.ui(styles, 'widget', 'value'),
+  ui: cssModulesUtils.ui(styles, 'widget', 'value', 'colorInput'),
 
   events: cssModulesUtils.events(styles, {
     'click remove': function() {
@@ -92,5 +92,25 @@ const EffectListItemView = Marionette.ItemView.extend({
     });
 
     this.ui.widget.slider('option', 'value', this.model.get('value') || 50);
+
+    this.ui.colorInput.minicolors({
+      defaultValue: this.model.defaultValue(),
+      position: 'bottom right',
+      changeDelay: 200,
+      change: color => {
+        this.model.set('value', color);
+      }
+    });
+
+    this.ui.colorInput.minicolors('value', this.model.get('value'));
   }
 });
+
+function renderInput(inputType) {
+  if (inputType === 'color') {
+    return `<input class="${styles.colorInput}" />`;
+  } else {
+    return `<div class="${styles.value}"></div>
+            <div class="${styles.widget}"></div>`;
+  }
+}

entry_types/scrolled/package/src/editor/views/inputs/EffectListInputView.module.css

@@ -86,6 +86,32 @@
   outline-width: 2px;
 }
 
+.item :global(.minicolors) {
+  flex: 1;
+  margin: -4px 0 -4px 2.6rem;
+}
+
+.colorInput {
+  border: 0;
+  width: 100% !important;
+  height: 22px !important;
+  box-sizing: border-box;
+  font-size: 12px;
+  padding-right: 0 !important;
+  padding-left: 20px !important;
+}
+
+.colorInput:focus {
+  outline: solid 1px transparent;
+}
+
+.item :global(.minicolors-input-swatch) {
+  top: 3px !important;
+  left: 0px !important;
+  width: 14px;
+  height: 14px;
+}
+
 .remove {
   composes: cancel from '../icons.module.css';
   padding: 0 space(2);