Merge pull request #2514 from tf/logo-list-size-speed

Logo list size and speed

Author: tf

entry_types/scrolled/config/locales/de.yml

@@ -781,6 +781,10 @@ de:
             general: Video
         logoList:
           attributes:
+            logoHeight:
+              label: Logo-Höhe
+            marqueeSpeed:
+              label: Geschwindigkeit
             marquee:
               label: Endlos scrollen
               inline_help: |-
@@ -1569,6 +1573,12 @@ de:
           md: M
           lg: L
           xl: XL
+        logoListLogoHeight:
+          xs: XS
+          sm: S
+          md: M
+          lg: L
+          xl: XL
       content_element_text_inline_file_rights_attributes:
         showTextInlineFileRightsBackdrop:
           label: "Abblendung hinter Rechteangabe"

entry_types/scrolled/config/locales/en.yml

@@ -766,6 +766,10 @@ en:
             general: Video
         logoList:
           attributes:
+            logoHeight:
+              label: Logo height
+            marqueeSpeed:
+              label: Speed
             marquee:
               label: Scroll continuously
               inline_help: |-
@@ -1551,6 +1555,12 @@ en:
           md: M
           lg: L
           xl: XL
+        logoListLogoHeight:
+          xs: XS
+          sm: S
+          md: M
+          lg: L
+          xl: XL
       content_element_text_inline_file_rights_attributes:
         showTextInlineFileRightsBackdrop:
           label: "Backdrop behind inline file rights"

entry_types/scrolled/lib/pageflow_scrolled/plugin.rb

@@ -72,6 +72,32 @@ def configure(config)
           )
         )
 
+        c.themes.register_options_transform(
+          ThemeOptionsDefaultScale.new(
+            prefix: 'logo_list_logo_height',
+            values: {
+              'xs' => '2rem',
+              'sm' => '2.5rem',
+              'md' => '3rem',
+              'lg' => '4rem',
+              'xl' => '5rem'
+            }
+          )
+        )
+
+        c.themes.register_options_transform(
+          ThemeOptionsDefaultScale.new(
+            prefix: 'logo_list_marquee_speed',
+            values: {
+              'xs' => '0.5',
+              'sm' => '0.75',
+              'md' => '1',
+              'lg' => '1.5',
+              'xl' => '2'
+            }
+          )
+        )
+
         c.themes.register_default_options(
           properties: {
             root: {
@@ -81,6 +107,8 @@ def configure(config)
               'content_element_box_shadow_style_default' =>
                 '0 4px 6px -1px rgb(0 0 0 / 0.2), 0 2px 4px -2px rgb(0 0 0 / 0.15)',
               'box_shadow_clip_margin_bottom' => '3rem',
+              'logo_list_logo_height' => '3rem',
+              'logo_list_marquee_speed' => '1',
               'outline_color' => '#a0a0a080'
             },
             cards_appearance_section: {

entry_types/scrolled/package/spec/contentElements/logoList/LogoList/features/logoHeight-spec.js

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import {LogoList} from 'contentElements/logoList/LogoList';
+
+import {renderInContentElement} from 'pageflow-scrolled/testHelpers';
+import '@testing-library/jest-dom/extend-expect'
+
+describe('LogoList logo height', () => {
+  const seed = {
+    imageFileUrlTemplates: {medium: ':id_partition/medium/image.webp'},
+    imageFiles: [{id: 1, permaId: 100}]
+  };
+
+  const items = [{id: 1, image: 100}];
+
+  function renderLogoList(configuration) {
+    const result = renderInContentElement(
+      <LogoList configuration={configuration} contentElementId={1} />,
+      {seed}
+    );
+
+    result.simulateScrollPosition('near viewport');
+
+    return result;
+  }
+
+  it('uses theme scale property for logo height', () => {
+    const {container} = renderLogoList({items, logoHeight: 'lg'});
+
+    expect(container.querySelector('ul'))
+      .toHaveStyle('--logo-height: var(--theme-logo-list-logo-height-lg)');
+  });
+
+  it('does not set logo height by default', () => {
+    const {container} = renderLogoList({items});
+
+    expect(container.querySelector('ul').style.getPropertyValue('--logo-height'))
+      .toBe('');
+  });
+});

entry_types/scrolled/package/spec/contentElements/logoList/LogoList/features/marquee-spec.js

@@ -49,6 +49,20 @@ describe('LogoList marquee', () => {
       .toHaveStyle('--logo-count: 2');
   });
 
+  it('uses theme scale property for marquee speed', () => {
+    const {container} = renderLogoList({items, marquee: true, marqueeSpeed: 'xl'});
+
+    expect(container.querySelector(`.${styles.marquee}`))
+      .toHaveStyle('--marquee-speed: var(--theme-logo-list-marquee-speed-xl)');
+  });
+
+  it('does not set marquee speed by default', () => {
+    const {container} = renderLogoList({items, marquee: true});
+
+    expect(container.querySelector(`.${styles.marquee}`)
+                    .style.getPropertyValue('--marquee-speed')).toBe('');
+  });
+
   it('scrolls focused logo into view', () => {
     const {container} = renderLogoList({
       items,
@@ -98,6 +112,25 @@ describe('LogoList marquee', () => {
     expect(marquee.scrollLeft).toBe(100);
   });
 
+  it('renders marquee while selected in editor during preview', () => {
+    const {container, triggerEditorCommand} =
+      renderLogoList({items, marquee: true}, {inlineEditing: {isSelected: true}});
+
+    triggerEditorCommand({type: 'START_MARQUEE_PREVIEW'});
+
+    expect(container.querySelector(`.${styles.marquee}`)).not.toBeNull();
+  });
+
+  it('renders static list again when preview stops', () => {
+    const {container, triggerEditorCommand} =
+      renderLogoList({items, marquee: true}, {inlineEditing: {isSelected: true}});
+
+    triggerEditorCommand({type: 'START_MARQUEE_PREVIEW'});
+    triggerEditorCommand({type: 'STOP_MARQUEE_PREVIEW'});
+
+    expect(container.querySelector(`.${styles.marquee}`)).toBeNull();
+  });
+
   it('renders static list while selected in editor', () => {
     const {container} = renderLogoList({items, marquee: true},
                                        {inlineEditing: {isSelected: true}});

entry_types/scrolled/package/spec/contentElements/logoList/editor/configurationEditor-spec.js

@@ -0,0 +1,111 @@
+import 'contentElements/logoList/editor';
+
+import {SliderInput} from 'pageflow/testHelpers';
+import {renderContentElementConfigurationEditor, useEditorGlobals} from 'support';
+
+describe('logoList configuration editor', () => {
+  const {createEntry} = useEditorGlobals();
+
+  const marqueeSpeedScale = {
+    'logoListMarqueeSpeed-sm': '0.75',
+    'logoListMarqueeSpeed-md': '1'
+  };
+
+  function render({configuration = {}, themeProperties = {}, themeTranslations} = {}) {
+    const entry = createEntry({
+      themeOptions: {properties: {root: themeProperties}},
+      themeTranslations,
+      contentElements: [{id: 1, typeName: 'logoList', configuration}]
+    });
+    const contentElement = entry.contentElements.get(1);
+    const postCommand = jest.fn();
+    contentElement.on('postCommand', postCommand);
+
+    const configurationEditor = renderContentElementConfigurationEditor({
+      entry,
+      contentElement
+    });
+
+    return {configurationEditor, postCommand};
+  }
+
+  it('displays logo height input if theme defines scale', () => {
+    const {configurationEditor} = render({
+      themeProperties: {'logoListLogoHeight-sm': '2rem', 'logoListLogoHeight-md': '3rem'}
+    });
+
+    expect(configurationEditor.inputPropertyNames()).toContain('logoHeight');
+  });
+
+  it('hides logo height input if theme does not define scale', () => {
+    const {configurationEditor} = render();
+
+    expect(configurationEditor.inputPropertyNames()).not.toContain('logoHeight');
+  });
+
+  it('displays marquee speed input if marquee is enabled', () => {
+    const {configurationEditor} = render({
+      configuration: {marquee: true},
+      themeProperties: marqueeSpeedScale
+    });
+
+    expect(configurationEditor.visibleInputPropertyNames()).toContain('marqueeSpeed');
+  });
+
+  it('hides marquee speed input if marquee is disabled', () => {
+    const {configurationEditor} = render({themeProperties: marqueeSpeedScale});
+
+    expect(configurationEditor.visibleInputPropertyNames()).not.toContain('marqueeSpeed');
+  });
+
+  it('labels marquee speed steps with multipliers', () => {
+    const {configurationEditor} = render({
+      configuration: {marquee: true, marqueeSpeed: 'lg'},
+      themeProperties: {...marqueeSpeedScale, 'logoListMarqueeSpeed-lg': '1.5'}
+    });
+
+    expect(SliderInput.findByPropertyName('marqueeSpeed', {inView: configurationEditor})
+      .displayedValue()).toEqual('1.5×');
+  });
+
+  it('prefers translated marquee speed labels', () => {
+    const {configurationEditor} = render({
+      configuration: {marquee: true, marqueeSpeed: 'md'},
+      themeProperties: marqueeSpeedScale,
+      themeTranslations: {scales: {logoListMarqueeSpeed: {md: 'Normal'}}}
+    });
+
+    expect(SliderInput.findByPropertyName('marqueeSpeed', {inView: configurationEditor})
+      .displayedValue()).toEqual('Normal');
+  });
+
+  it('hides marquee speed input if theme does not define scale', () => {
+    const {configurationEditor} = render({configuration: {marquee: true}});
+
+    expect(configurationEditor.inputPropertyNames()).not.toContain('marqueeSpeed');
+  });
+
+  it('starts marquee preview when sliding speed slider', () => {
+    const {configurationEditor, postCommand} = render({
+      configuration: {marquee: true},
+      themeProperties: marqueeSpeedScale
+    });
+
+    SliderInput.findByPropertyName('marqueeSpeed', {inView: configurationEditor})
+      .startSliding();
+
+    expect(postCommand).toHaveBeenCalledWith(1, {type: 'START_MARQUEE_PREVIEW'});
+  });
+
+  it('stops marquee preview when releasing speed slider', () => {
+    const {configurationEditor, postCommand} = render({
+      configuration: {marquee: true},
+      themeProperties: marqueeSpeedScale
+    });
+
+    SliderInput.findByPropertyName('marqueeSpeed', {inView: configurationEditor})
+      .stopSliding();
+
+    expect(postCommand).toHaveBeenCalledWith(1, {type: 'STOP_MARQUEE_PREVIEW'});
+  });
+});

entry_types/scrolled/package/spec/editor/models/ScrolledEntry/getScale-spec.js

@@ -53,6 +53,29 @@ describe('ScrolledEntry', () => {
       expect(scale.texts).toEqual(['Small', 'Medium', 'Large']);
     });
 
+    it('returns css values of scale steps', () => {
+      const entry = factories.entry(
+        ScrolledEntry,
+        {},
+        {
+          entryTypeSeed: normalizeSeed({
+            themeOptions: {
+              properties: {
+                root: {
+                  'contentElementMargin-sm': '0.5rem',
+                  'contentElementMargin-md': '1rem'
+                }
+              }
+            }
+          })
+        }
+      );
+
+      const scale = entry.getScale('contentElementMargin');
+
+      expect(scale.cssValues).toEqual(['0.5rem', '1rem']);
+    });
+
     describe('defaultValue', () => {
       it('is undefined when no default is set', () => {
         const entry = factories.entry(
@@ -205,6 +228,32 @@ describe('ScrolledEntry', () => {
 
         expect(scale.defaultValue).toBeUndefined();
       });
+
+      it('supports passing default property name', () => {
+        const entry = factories.entry(
+          ScrolledEntry,
+          {},
+          {
+            entryTypeSeed: normalizeSeed({
+              themeOptions: {
+                properties: {
+                  root: {
+                    'someScale-sm': '2rem',
+                    'someScale-md': '3rem',
+                    'someScaleDefault': '3rem'
+                  }
+                }
+              }
+            })
+          }
+        );
+
+        const scale = entry.getScale('someScale', {
+          defaultValuePropertyName: 'someScaleDefault'
+        });
+
+        expect(scale.defaultValue).toEqual('md');
+      });
     });
   });
 });