From f5af8787c47921af160f47a3f6e0b369a99bc7ba Mon Sep 17 00:00:00 2001 From: Tim Fischbach Date: Thu, 2 Apr 2026 16:07:15 +0200 Subject: [PATCH 1/2] Flatten v1 dir into frontend With the v2 experiment removed, the v1 indirection no longer serves a purpose. Move Backdrop, MotifArea, useBackdrop, useBackgroundFile, useMotifAreaState and their specs directly into frontend/. --- .../spec/frontend/{v1 => }/Backdrop-spec.js | 4 +- .../{v1 => }/Backdrop/Effects-spec.js | 2 +- .../package/spec/frontend/Image-spec.js | 2 +- .../spec/frontend/{v1 => }/MotifArea-spec.js | 4 +- .../package/spec/frontend/VideoPlayer-spec.js | 2 +- .../features/backdropAnimationEffects-spec.js | 2 +- .../features/backdropEagerLoading-spec.js | 48 -- .../features/constrainContentWidth-spec.js | 4 +- .../features/paddingIndicator-spec.js | 4 +- .../frontend/features/sectionPadding-spec.js | 4 +- .../spec/frontend/features/v2Toggle-spec.js | 37 -- .../{v1 => }/useBackgroundFile-spec.js | 2 +- .../{v1 => }/useMotifAreaState-spec.js | 2 +- .../package/spec/frontend/v2/Backdrop-spec.js | 422 ---------------- .../spec/frontend/v2/Backdrop/Effects-spec.js | 30 -- .../spec/frontend/v2/MotifArea-spec.js | 56 --- .../spec/frontend/v2/useBackdrop-spec.js | 254 ---------- .../v2/useBackdropSectionClassNames-spec.js | 352 ------------- ...useBackdropSectionCustomProperties-spec.js | 119 ----- .../frontend/v2/useBackgroundFile-spec.js | 51 -- .../frontend/v2/useMotifAreaState-spec.js | 157 ------ .../{v1 => }/Backdrop/BackgroundAsset.js | 6 +- .../Backdrop/BackgroundContentElement.js | 6 +- .../{v1 => }/Backdrop/BackgroundImage.js | 4 +- .../{v1 => }/Backdrop/BackgroundVideo.js | 10 +- .../src/frontend/{v1 => }/Backdrop/Effects.js | 12 +- .../{v1 => }/Backdrop/Effects.module.css | 0 .../src/frontend/{v1 => }/Backdrop/index.js | 10 +- .../src/frontend/{v1 => }/MotifArea.js | 4 +- .../scrolled/package/src/frontend/Section.js | 32 +- .../{v1 => }/__mocks__/useMotifAreaState.js | 0 .../scrolled/package/src/frontend/index.js | 2 +- .../src/frontend/{v1 => }/useBackdrop.js | 4 +- .../frontend/{v1 => }/useBackgroundFile.js | 0 .../frontend/{v1 => }/useMotifAreaState.js | 6 +- .../scrolled/package/src/frontend/v1/index.js | 6 - .../frontend/v2/Backdrop/BackgroundAsset.js | 42 -- .../frontend/v2/Backdrop/BackgroundImage.js | 26 - .../frontend/v2/Backdrop/BackgroundVideo.js | 67 --- .../src/frontend/v2/Backdrop/Effects.js | 32 -- .../frontend/v2/Backdrop/Effects.module.css | 10 - .../src/frontend/v2/Backdrop/Positioner.js | 11 - .../v2/Backdrop/Positioner.module.css | 6 - .../package/src/frontend/v2/Backdrop/index.js | 28 -- .../package/src/frontend/v2/MotifArea.js | 18 - .../src/frontend/v2/MotifArea.module.css | 6 - .../src/frontend/v2/Section.module.css | 476 ------------------ .../scrolled/package/src/frontend/v2/index.js | 5 - .../package/src/frontend/v2/useBackdrop.js | 53 -- .../v2/useBackdropSectionClassNames.js | 118 ----- .../v2/useBackdropSectionCustomProperties.js | 29 -- .../src/frontend/v2/useBackgroundFile.js | 33 -- .../src/frontend/v2/useMotifAreaState.js | 108 ---- .../package/src/testHelpers/normalizeSeed.js | 4 +- 54 files changed, 53 insertions(+), 2679 deletions(-) rename entry_types/scrolled/package/spec/frontend/{v1 => }/Backdrop-spec.js (99%) rename entry_types/scrolled/package/spec/frontend/{v1 => }/Backdrop/Effects-spec.js (95%) rename entry_types/scrolled/package/spec/frontend/{v1 => }/MotifArea-spec.js (98%) delete mode 100644 entry_types/scrolled/package/spec/frontend/features/backdropEagerLoading-spec.js delete mode 100644 entry_types/scrolled/package/spec/frontend/features/v2Toggle-spec.js rename entry_types/scrolled/package/spec/frontend/{v1 => }/useBackgroundFile-spec.js (98%) rename entry_types/scrolled/package/spec/frontend/{v1 => }/useMotifAreaState-spec.js (99%) delete mode 100644 entry_types/scrolled/package/spec/frontend/v2/Backdrop-spec.js delete mode 100644 entry_types/scrolled/package/spec/frontend/v2/Backdrop/Effects-spec.js delete mode 100644 entry_types/scrolled/package/spec/frontend/v2/MotifArea-spec.js delete mode 100644 entry_types/scrolled/package/spec/frontend/v2/useBackdrop-spec.js delete mode 100644 entry_types/scrolled/package/spec/frontend/v2/useBackdropSectionClassNames-spec.js delete mode 100644 entry_types/scrolled/package/spec/frontend/v2/useBackdropSectionCustomProperties-spec.js delete mode 100644 entry_types/scrolled/package/spec/frontend/v2/useBackgroundFile-spec.js delete mode 100644 entry_types/scrolled/package/spec/frontend/v2/useMotifAreaState-spec.js rename entry_types/scrolled/package/src/frontend/{v1 => }/Backdrop/BackgroundAsset.js (91%) rename entry_types/scrolled/package/src/frontend/{v1 => }/Backdrop/BackgroundContentElement.js (86%) rename entry_types/scrolled/package/src/frontend/{v1 => }/Backdrop/BackgroundImage.js (89%) rename entry_types/scrolled/package/src/frontend/{v1 => }/Backdrop/BackgroundVideo.js (86%) rename entry_types/scrolled/package/src/frontend/{v1 => }/Backdrop/Effects.js (87%) rename entry_types/scrolled/package/src/frontend/{v1 => }/Backdrop/Effects.module.css (100%) rename entry_types/scrolled/package/src/frontend/{v1 => }/Backdrop/index.js (82%) rename entry_types/scrolled/package/src/frontend/{v1 => }/MotifArea.js (93%) rename entry_types/scrolled/package/src/frontend/{v1 => }/__mocks__/useMotifAreaState.js (100%) rename entry_types/scrolled/package/src/frontend/{v1 => }/useBackdrop.js (92%) rename entry_types/scrolled/package/src/frontend/{v1 => }/useBackgroundFile.js (100%) rename entry_types/scrolled/package/src/frontend/{v1 => }/useMotifAreaState.js (97%) delete mode 100644 entry_types/scrolled/package/src/frontend/v1/index.js delete mode 100644 entry_types/scrolled/package/src/frontend/v2/Backdrop/BackgroundAsset.js delete mode 100644 entry_types/scrolled/package/src/frontend/v2/Backdrop/BackgroundImage.js delete mode 100644 entry_types/scrolled/package/src/frontend/v2/Backdrop/BackgroundVideo.js delete mode 100644 entry_types/scrolled/package/src/frontend/v2/Backdrop/Effects.js delete mode 100644 entry_types/scrolled/package/src/frontend/v2/Backdrop/Effects.module.css delete mode 100644 entry_types/scrolled/package/src/frontend/v2/Backdrop/Positioner.js delete mode 100644 entry_types/scrolled/package/src/frontend/v2/Backdrop/Positioner.module.css delete mode 100644 entry_types/scrolled/package/src/frontend/v2/Backdrop/index.js delete mode 100644 entry_types/scrolled/package/src/frontend/v2/MotifArea.js delete mode 100644 entry_types/scrolled/package/src/frontend/v2/MotifArea.module.css delete mode 100644 entry_types/scrolled/package/src/frontend/v2/Section.module.css delete mode 100644 entry_types/scrolled/package/src/frontend/v2/index.js delete mode 100644 entry_types/scrolled/package/src/frontend/v2/useBackdrop.js delete mode 100644 entry_types/scrolled/package/src/frontend/v2/useBackdropSectionClassNames.js delete mode 100644 entry_types/scrolled/package/src/frontend/v2/useBackdropSectionCustomProperties.js delete mode 100644 entry_types/scrolled/package/src/frontend/v2/useBackgroundFile.js delete mode 100644 entry_types/scrolled/package/src/frontend/v2/useMotifAreaState.js diff --git a/entry_types/scrolled/package/spec/frontend/v1/Backdrop-spec.js b/entry_types/scrolled/package/spec/frontend/Backdrop-spec.js similarity index 99% rename from entry_types/scrolled/package/spec/frontend/v1/Backdrop-spec.js rename to entry_types/scrolled/package/spec/frontend/Backdrop-spec.js index 62ea8cb8f7..1097fa080a 100644 --- a/entry_types/scrolled/package/spec/frontend/v1/Backdrop-spec.js +++ b/entry_types/scrolled/package/spec/frontend/Backdrop-spec.js @@ -5,8 +5,8 @@ import {renderInEntryWithSectionLifecycle} from 'support'; import {useFakeMedia, fakeMediaRenderQueries} from 'support/fakeMedia'; import {frontend} from 'pageflow-scrolled/frontend'; -import {Backdrop} from 'frontend/v1/Backdrop'; -import {useBackdrop} from 'frontend/v1/useBackdrop'; +import {Backdrop} from 'frontend/Backdrop'; +import {useBackdrop} from 'frontend/useBackdrop'; import styles from 'frontend/Backdrop.module.css'; import {usePortraitOrientation} from 'frontend/usePortraitOrientation'; diff --git a/entry_types/scrolled/package/spec/frontend/v1/Backdrop/Effects-spec.js b/entry_types/scrolled/package/spec/frontend/Backdrop/Effects-spec.js similarity index 95% rename from entry_types/scrolled/package/spec/frontend/v1/Backdrop/Effects-spec.js rename to entry_types/scrolled/package/spec/frontend/Backdrop/Effects-spec.js index 341c08b0d1..c95c14ed71 100644 --- a/entry_types/scrolled/package/spec/frontend/v1/Backdrop/Effects-spec.js +++ b/entry_types/scrolled/package/spec/frontend/Backdrop/Effects-spec.js @@ -1,4 +1,4 @@ -import {getFilter} from 'frontend/v1/Backdrop/Effects'; +import {getFilter} from 'frontend/Backdrop/Effects'; describe('Backdrop Effects getFilter', () => { it('uses normalized range for brightness, contrast and saturate', () => { diff --git a/entry_types/scrolled/package/spec/frontend/Image-spec.js b/entry_types/scrolled/package/spec/frontend/Image-spec.js index f92aa17d2e..ad466c3cb1 100644 --- a/entry_types/scrolled/package/spec/frontend/Image-spec.js +++ b/entry_types/scrolled/package/spec/frontend/Image-spec.js @@ -5,7 +5,7 @@ import {renderInEntry} from 'support'; import * as jsonLdQueries from 'support/jsonLdQueries'; import {Image} from 'frontend/Image'; -import {useBackgroundFile} from 'frontend/v1/useBackgroundFile'; +import {useBackgroundFile} from 'frontend/useBackgroundFile'; import {useFile} from 'entryState'; describe('Image', () => { diff --git a/entry_types/scrolled/package/spec/frontend/v1/MotifArea-spec.js b/entry_types/scrolled/package/spec/frontend/MotifArea-spec.js similarity index 98% rename from entry_types/scrolled/package/spec/frontend/v1/MotifArea-spec.js rename to entry_types/scrolled/package/spec/frontend/MotifArea-spec.js index f7ae4b4426..b629ea7203 100644 --- a/entry_types/scrolled/package/spec/frontend/v1/MotifArea-spec.js +++ b/entry_types/scrolled/package/spec/frontend/MotifArea-spec.js @@ -4,8 +4,8 @@ import '@testing-library/jest-dom/extend-expect' import {renderInEntry} from 'support'; import {useFile} from 'entryState'; -import {useBackgroundFile} from 'frontend/v1/useBackgroundFile'; -import {MotifArea} from 'frontend/v1/MotifArea'; +import {useBackgroundFile} from 'frontend/useBackgroundFile'; +import {MotifArea} from 'frontend/MotifArea'; import {MotifAreaVisibilityProvider} from 'frontend/MotifAreaVisibilityProvider'; import styles from 'frontend/MotifArea.module.css'; diff --git a/entry_types/scrolled/package/spec/frontend/VideoPlayer-spec.js b/entry_types/scrolled/package/spec/frontend/VideoPlayer-spec.js index 3ce711bc11..15f5fc0b0a 100644 --- a/entry_types/scrolled/package/spec/frontend/VideoPlayer-spec.js +++ b/entry_types/scrolled/package/spec/frontend/VideoPlayer-spec.js @@ -4,7 +4,7 @@ import 'support/mediaElementStub'; import {getInitialPlayerState, getPlayerActions} from 'support/fakePlayerState'; import {renderInEntry} from "../support"; -import {useBackgroundFile} from 'frontend/v1/useBackgroundFile'; +import {useBackgroundFile} from 'frontend/useBackgroundFile'; import {useFile} from 'entryState'; import {VideoPlayer} from 'frontend/VideoPlayer'; import {media, settings} from 'pageflow/frontend'; diff --git a/entry_types/scrolled/package/spec/frontend/features/backdropAnimationEffects-spec.js b/entry_types/scrolled/package/spec/frontend/features/backdropAnimationEffects-spec.js index 9d3f0d1cd9..1d6a7e4fcd 100644 --- a/entry_types/scrolled/package/spec/frontend/features/backdropAnimationEffects-spec.js +++ b/entry_types/scrolled/package/spec/frontend/features/backdropAnimationEffects-spec.js @@ -3,7 +3,7 @@ import {viewTimelineStub} from 'support/viewTimelineStub'; import {animateStub} from 'support/animateStub'; import '@testing-library/jest-dom/extend-expect' -import effectsStyles from 'frontend/v1/Backdrop/Effects.module.css'; +import effectsStyles from 'frontend/Backdrop/Effects.module.css'; import {usePortraitOrientation} from 'frontend/usePortraitOrientation'; jest.mock('frontend/usePortraitOrientation'); diff --git a/entry_types/scrolled/package/spec/frontend/features/backdropEagerLoading-spec.js b/entry_types/scrolled/package/spec/frontend/features/backdropEagerLoading-spec.js deleted file mode 100644 index 1a339db9fc..0000000000 --- a/entry_types/scrolled/package/spec/frontend/features/backdropEagerLoading-spec.js +++ /dev/null @@ -1,48 +0,0 @@ -import {renderEntry, useInlineEditingPageObjects} from 'support/pageObjects'; -import {within} from '@testing-library/react'; -import '@testing-library/jest-dom/extend-expect' - -describe('backdrop eager loading', () => { - useInlineEditingPageObjects(); - - it('loads image of first section in SSR', () => { - const {getSectionByPermaId} = renderEntry({ - seed: { - sections: [ - {permaId: 1, configuration: {backdrop: {image: 100}}} - ], - fileUrlTemplates: { - imageFiles: {large: ':basename.jpg'} - }, - imageFiles: [{permaId: 100, basename: 'image'}], - additionalSeedData: { - frontendVersion: 2 - } - } - }); - - const {getByRole} = within(getSectionByPermaId(1).el); - expect(getByRole('img')).toHaveAttribute('src', expect.stringContaining('image.jpg')); - }); - - it('does not load image of section section in SSR', () => { - const {getSectionByPermaId} = renderEntry({ - seed: { - sections: [ - {}, - {permaId: 2, configuration: {backdrop: {image: 100}}} - ], - fileUrlTemplates: { - imageFiles: {large: ':basename.jpg'} - }, - imageFiles: [{permaId: 100, basename: 'image'}], - additionalSeedData: { - frontendVersion: 2 - } - } - }); - - const {queryByRole} = within(getSectionByPermaId(2).el); - expect(queryByRole('img')).toBeNull(); - }); -}); diff --git a/entry_types/scrolled/package/spec/frontend/features/constrainContentWidth-spec.js b/entry_types/scrolled/package/spec/frontend/features/constrainContentWidth-spec.js index 5399bed89b..66396fc0ad 100644 --- a/entry_types/scrolled/package/spec/frontend/features/constrainContentWidth-spec.js +++ b/entry_types/scrolled/package/spec/frontend/features/constrainContentWidth-spec.js @@ -4,8 +4,8 @@ import '@testing-library/jest-dom/extend-expect'; import {api} from 'frontend/api'; -import {useMotifAreaState} from 'frontend/v1/useMotifAreaState'; -jest.mock('frontend/v1/useMotifAreaState'); +import {useMotifAreaState} from 'frontend/useMotifAreaState'; +jest.mock('frontend/useMotifAreaState'); describe('constrainContentWidth', () => { usePageObjects(); diff --git a/entry_types/scrolled/package/spec/frontend/features/paddingIndicator-spec.js b/entry_types/scrolled/package/spec/frontend/features/paddingIndicator-spec.js index e9cec751ca..75ce0cb454 100644 --- a/entry_types/scrolled/package/spec/frontend/features/paddingIndicator-spec.js +++ b/entry_types/scrolled/package/spec/frontend/features/paddingIndicator-spec.js @@ -1,9 +1,9 @@ import {useInlineEditingPageObjects, renderEntry} from 'support/pageObjects'; import {fakeParentWindow} from 'support'; -import {useMotifAreaState} from 'frontend/v1/useMotifAreaState'; +import {useMotifAreaState} from 'frontend/useMotifAreaState'; import '@testing-library/jest-dom/extend-expect'; -jest.mock('frontend/v1/useMotifAreaState'); +jest.mock('frontend/useMotifAreaState'); describe('PaddingIndicator', () => { useInlineEditingPageObjects(); diff --git a/entry_types/scrolled/package/spec/frontend/features/sectionPadding-spec.js b/entry_types/scrolled/package/spec/frontend/features/sectionPadding-spec.js index 27db28b1f2..94060f391a 100644 --- a/entry_types/scrolled/package/spec/frontend/features/sectionPadding-spec.js +++ b/entry_types/scrolled/package/spec/frontend/features/sectionPadding-spec.js @@ -4,9 +4,9 @@ import {act} from '@testing-library/react'; import '@testing-library/jest-dom/extend-expect'; import {usePortraitOrientation} from 'frontend/usePortraitOrientation'; -import {useMotifAreaState} from 'frontend/v1/useMotifAreaState'; +import {useMotifAreaState} from 'frontend/useMotifAreaState'; jest.mock('frontend/usePortraitOrientation'); -jest.mock('frontend/v1/useMotifAreaState'); +jest.mock('frontend/useMotifAreaState'); describe('section padding', () => { useInlineEditingPageObjects(); diff --git a/entry_types/scrolled/package/spec/frontend/features/v2Toggle-spec.js b/entry_types/scrolled/package/spec/frontend/features/v2Toggle-spec.js deleted file mode 100644 index 601cd9659b..0000000000 --- a/entry_types/scrolled/package/spec/frontend/features/v2Toggle-spec.js +++ /dev/null @@ -1,37 +0,0 @@ -import {renderEntry, usePageObjects} from 'support/pageObjects'; -import '@testing-library/jest-dom/extend-expect' - -describe('v2 toggle', () => { - usePageObjects(); - - it('does not set backdrop section attributes by default ', () => { - const {container} = renderEntry({ - seed: { - sections: [ - {permaId: 10, configuration: {backdrop: {image: 1}}} - ], - imageFiles: [{permaId: 1}] - } - }); - - expect(container.querySelector('[style*="--backdrop-w"]')).toBeNull(); - expect(container.querySelector('[class*=apsectRatio]')).toBeNull(); - }); - - it('renders v2 backdrop section attributes from seed data is 2', () => { - const {container} = renderEntry({ - seed: { - sections: [ - {permaId: 10, configuration: {backdrop: {image: 1}}} - ], - imageFiles: [{permaId: 1}], - additionalSeedData: { - frontendVersion: 2 - } - } - }); - - expect(container.querySelector('[style*="--backdrop-w"]')).not.toBeNull(); - expect(container.querySelector('[class*=aspectRatio]')).not.toBeNull(); - }); -}); diff --git a/entry_types/scrolled/package/spec/frontend/v1/useBackgroundFile-spec.js b/entry_types/scrolled/package/spec/frontend/useBackgroundFile-spec.js similarity index 98% rename from entry_types/scrolled/package/spec/frontend/v1/useBackgroundFile-spec.js rename to entry_types/scrolled/package/spec/frontend/useBackgroundFile-spec.js index 3003cd7ac1..329a757397 100644 --- a/entry_types/scrolled/package/spec/frontend/v1/useBackgroundFile-spec.js +++ b/entry_types/scrolled/package/spec/frontend/useBackgroundFile-spec.js @@ -1,4 +1,4 @@ -import {useBackgroundFile} from 'frontend/v1/useBackgroundFile'; +import {useBackgroundFile} from 'frontend/useBackgroundFile'; import {useFile} from 'entryState'; import {renderHookInEntry} from 'support'; diff --git a/entry_types/scrolled/package/spec/frontend/v1/useMotifAreaState-spec.js b/entry_types/scrolled/package/spec/frontend/useMotifAreaState-spec.js similarity index 99% rename from entry_types/scrolled/package/spec/frontend/v1/useMotifAreaState-spec.js rename to entry_types/scrolled/package/spec/frontend/useMotifAreaState-spec.js index b31e73e7f1..08b95b0e0f 100644 --- a/entry_types/scrolled/package/spec/frontend/v1/useMotifAreaState-spec.js +++ b/entry_types/scrolled/package/spec/frontend/useMotifAreaState-spec.js @@ -1,4 +1,4 @@ -import {useMotifAreaState} from 'frontend/v1/useMotifAreaState'; +import {useMotifAreaState} from 'frontend/useMotifAreaState'; import {renderHook, act} from '@testing-library/react-hooks'; import {fireEvent} from '@testing-library/dom' diff --git a/entry_types/scrolled/package/spec/frontend/v2/Backdrop-spec.js b/entry_types/scrolled/package/spec/frontend/v2/Backdrop-spec.js deleted file mode 100644 index dde76f9924..0000000000 --- a/entry_types/scrolled/package/spec/frontend/v2/Backdrop-spec.js +++ /dev/null @@ -1,422 +0,0 @@ -import React from 'react'; -import '@testing-library/jest-dom/extend-expect' - -import {renderInEntryWithSectionLifecycle} from 'support'; -import {useFakeMedia, fakeMediaRenderQueries} from 'support/fakeMedia'; - -import {Backdrop} from 'frontend/v2/Backdrop'; -import {useBackdrop} from 'frontend/v2/useBackdrop'; -import {FullscreenDimensionProvider} from 'frontend/Fullscreen'; - -import {usePortraitOrientation} from 'frontend/usePortraitOrientation'; -jest.mock('frontend/usePortraitOrientation') - -describe('Backdrop', () => { - useFakeMedia(); - - it('does not render image when outside viewport', () => { - const {queryByRole} = - renderInEntryWithSectionLifecycle( - () => , - { - seed: { - fileUrlTemplates: { - imageFiles: { - large: ':basename.jpg' - } - }, - imageFiles: [ - {permaId: 100, basename: 'image'} - ] - } - } - ); - - expect(queryByRole('img')).toBeNull() - }); - - it('render image when backdrop is active and eagerLoad is true', () => { - const {getByRole} = - renderInEntryWithSectionLifecycle( - () => , - { - seed: { - fileUrlTemplates: { - imageFiles: { - large: ':basename.jpg' - } - }, - imageFiles: [ - {permaId: 100, basename: 'image'} - ] - } - } - ); - - expect(getByRole('img')).toHaveAttribute('src', expect.stringContaining('image.jpg')); - }); - - it('does not render image when backdrop is not active event when eagerLoad is true', () => { - const {queryByRole} = - renderInEntryWithSectionLifecycle( - () => , - { - seed: { - fileUrlTemplates: { - imageFiles: { - large: ':basename.jpg' - } - }, - imageFiles: [ - {permaId: 100, basename: 'image'} - ] - } - } - ); - - expect(queryByRole('img')).toBeNull() - }); - - it('renders image when near viewport', () => { - const {simulateScrollPosition, getByRole} = - renderInEntryWithSectionLifecycle( - () => , - { - seed: { - fileUrlTemplates: { - imageFiles: { - large: ':basename.jpg' - } - }, - imageFiles: [ - {permaId: 100, basename: 'image'} - ] - } - } - ); - - simulateScrollPosition('near viewport'); - - expect(getByRole('img')).toHaveAttribute('src', expect.stringContaining('image.jpg')); - }); - - it('supports applying effects to image', () => { - const {container} = - renderInEntryWithSectionLifecycle( - () => , - { - seed: { - fileUrlTemplates: { - imageFiles: { - large: ':basename.jpg' - } - }, - imageFiles: [ - {permaId: 100, basename: 'image'} - ] - } - } - ); - - expect( - container.querySelector('[style*="--filter"]') - .style.getPropertyValue('--filter') - ).toEqual('blur(10px)'); - }); - - it('supports rendering mobile image given by id in portrait orientation', () => { - const {simulateScrollPosition, container, getByRole} = - renderInEntryWithSectionLifecycle( - () => , - { - seed: { - fileUrlTemplates: { - imageFiles: { - large: ':basename.jpg' - } - }, - imageFiles: [ - {permaId: 100, basename: 'landscape'}, - {permaId: 200, basename: 'portrait'}, - ] - } - } - ) - - simulateScrollPosition('near viewport'); - - expect(getByRole('img')) - .toHaveAttribute('src', expect.stringContaining('landscape.jpg')); - expect(container.querySelector('source')) - .toHaveAttribute('srcset', expect.stringContaining('portrait.jpg')); - }); - - it('ignores mobile image when rendered with custom fullscreen dimensions', () => { - const {simulateScrollPosition, container} = - renderInEntryWithSectionLifecycle( - () => , - { - wrapper: ({children}) => - - {children} - , - seed: { - fileUrlTemplates: { - imageFiles: { - large: ':basename.jpg' - } - }, - imageFiles: [ - {permaId: 100, basename: 'landscape'}, - {permaId: 200, basename: 'portrait'}, - ] - } - } - ) - - simulateScrollPosition('near viewport'); - - expect(container.querySelector('source')).toBeNull(); - }); - - it('supports applying effects to portrait image', () => { - const {container} = - renderInEntryWithSectionLifecycle( - () => , - { - seed: { - fileUrlTemplates: { - imageFiles: { - large: ':basename.jpg' - } - }, - imageFiles: [ - {permaId: 100, basename: 'landscape'}, - {permaId: 200, basename: 'portrait'}, - ] - } - } - ) - - expect( - container.querySelector('[style*="--mobile-filter"]') - .style - .getPropertyValue('--mobile-filter') - ).toEqual('blur(10px)'); - }); - - it('does not set portrait effects style if not configured', () => { - const {container} = - renderInEntryWithSectionLifecycle( - () => , - { - seed: { - fileUrlTemplates: { - imageFiles: { - large: ':basename.jpg' - } - }, - imageFiles: [ - {permaId: 100, basename: 'landscape'}, - {permaId: 200, basename: 'portrait'}, - ] - } - } - ) - - expect(container.querySelector('[style*="--mobile-filter"]')).toBeNull(); - }); - - it('invokes onMotifAreaUpdate callback', () => { - const callback = jest.fn(); - renderInEntryWithSectionLifecycle( - () => , - { - seed: { - imageFiles: [ - {permaId: 100, basename: 'image'} - ] - } - } - ); - - expect(callback).toHaveBeenCalled() - }); - - it('supports rendering color as background', () => { - usePortraitOrientation.mockReturnValue(false); - - const {container} = - renderInEntryWithSectionLifecycle( - () => - ) - - expect(container.querySelector('div[style]')) - .toHaveAttribute('style', expect.stringContaining('rgb(255, 0, 0)')); - }); - - describe('with video', () => { - it('does not render video when outside viewport', () => { - const {queryPlayerByFilePermaId} = - renderInEntryWithSectionLifecycle( - () => , - { - queries: fakeMediaRenderQueries, - seed: { - videoFiles: [{permaId: 100}] - } - } - ); - - expect(queryPlayerByFilePermaId(100)).toBeNull(); - }); - - it('renders video when near viewport', () => { - const {simulateScrollPosition, queryPlayerByFilePermaId} = - renderInEntryWithSectionLifecycle( - () => , - { - queries: fakeMediaRenderQueries, - seed: { - videoFiles: [{permaId: 100}] - } - } - ); - - simulateScrollPosition('near viewport'); - - expect(queryPlayerByFilePermaId(100)).not.toBeNull(); - }); - - it('plays without volume when scrolled into viewport', () => { - const {simulateScrollPosition, getPlayerByFilePermaId} = - renderInEntryWithSectionLifecycle( - () => , - { - queries: fakeMediaRenderQueries, - seed: { - videoFiles: [{permaId: 100}] - } - } - ); - - simulateScrollPosition('in viewport'); - const player = getPlayerByFilePermaId(100); - - expect(player.changeVolumeFactor).toHaveBeenCalledWith(0, 0); - expect(player.playOrPlayOnLoad).toHaveBeenCalled(); - }); - - it('fades in volume when section becomes active', () => { - const {simulateScrollPosition, getPlayerByFilePermaId} = - renderInEntryWithSectionLifecycle( - () => , - { - queries: fakeMediaRenderQueries, - seed: { - videoFiles: [{permaId: 100}] - } - } - ); - - simulateScrollPosition('in viewport'); - const player = getPlayerByFilePermaId(100); - simulateScrollPosition('center of viewport'); - - expect(player.changeVolumeFactor).toHaveBeenCalledWith(1, 1000); - }); - - it('fades out volume when section becomes inactive', () => { - const {simulateScrollPosition, getPlayerByFilePermaId} = - renderInEntryWithSectionLifecycle( - () => , - { - queries: fakeMediaRenderQueries, - seed: { - videoFiles: [{permaId: 100}] - } - } - ); - - simulateScrollPosition('in viewport'); - const player = getPlayerByFilePermaId(100); - simulateScrollPosition('center of viewport'); - simulateScrollPosition('in viewport'); - - expect(player.changeVolumeFactor).toHaveBeenCalledWith(0, 1000); - }); - - it('pauses when scrolled outside viewport', () => { - const {simulateScrollPosition, getPlayerByFilePermaId} = - renderInEntryWithSectionLifecycle( - () => , - { - queries: fakeMediaRenderQueries, - seed: { - videoFiles: [{permaId: 100}] - } - } - ); - - simulateScrollPosition('in viewport'); - simulateScrollPosition('near viewport'); - const player = getPlayerByFilePermaId(100); - - expect(player.pause).toHaveBeenCalled(); - }); - - it('invokes onMotifAreaUpdate callback', () => { - const callback = jest.fn(); - renderInEntryWithSectionLifecycle( - () => , - { - seed: { - videoFiles: [{permaId: 100}] - } - } - ); - - expect(callback).toHaveBeenCalled(); - }); - - it('supports applying effects', () => { - const {container} = - renderInEntryWithSectionLifecycle( - () => , - { - queries: fakeMediaRenderQueries, - seed: { - videoFiles: [{permaId: 100}] - } - } - ); - - expect( - container.querySelector('[style*="--filter"]') - .style.getPropertyValue('--filter') - ).toEqual('blur(10px)'); - }); - }); -}); diff --git a/entry_types/scrolled/package/spec/frontend/v2/Backdrop/Effects-spec.js b/entry_types/scrolled/package/spec/frontend/v2/Backdrop/Effects-spec.js deleted file mode 100644 index d7af209dd3..0000000000 --- a/entry_types/scrolled/package/spec/frontend/v2/Backdrop/Effects-spec.js +++ /dev/null @@ -1,30 +0,0 @@ -import {getFilter} from 'frontend/v2/Backdrop/Effects'; - -describe('Backdrop Effects getFilter', () => { - it('uses normalized range for brightness, contrast and saturate', () => { - const result = getFilter([ - {name: 'brightness', value: -100}, - {name: 'contrast', value: 20}, - {name: 'saturate', value: 50} - ]); - - expect(result).toEqual('brightness(40%) contrast(120%) saturate(150%)'); - }); - - it('uses pixel unit for blur', () => { - const result = getFilter([ - {name: 'blur', value: 50} - ]); - - expect(result).toEqual('blur(5px)'); - }); - - it('uses percent for grayscale and sepia', () => { - const result = getFilter([ - {name: 'sepia', value: 70}, - {name: 'grayscale', value: 20} - ]); - - expect(result).toEqual('sepia(70%) grayscale(20%)'); - }); -}); diff --git a/entry_types/scrolled/package/spec/frontend/v2/MotifArea-spec.js b/entry_types/scrolled/package/spec/frontend/v2/MotifArea-spec.js deleted file mode 100644 index 68a27625ae..0000000000 --- a/entry_types/scrolled/package/spec/frontend/v2/MotifArea-spec.js +++ /dev/null @@ -1,56 +0,0 @@ -import React from 'react'; -import '@testing-library/jest-dom/extend-expect' - -import {renderInEntry} from 'support'; - -import {MotifArea} from 'frontend/v2/MotifArea'; -import {MotifAreaVisibilityProvider} from 'frontend/MotifAreaVisibilityProvider'; -import styles from 'frontend/MotifArea.module.css'; - -describe('MotifArea', () => { - it('calls onUpdate callback with DOM element', () => { - const callback = jest.fn(); - const {container} = - renderInEntry( - , - { - seed: { - imageFiles: [ - { - permaId: 100, - width: 200, - height: 100 - } - ] - } - } - ); - - expect(callback).toHaveBeenCalledWith(container.firstChild); - }); - - it('makes motif area visible if rendered inside MotifAreaVisibilityProvider', () => { - const {container} = - renderInEntry( - , - { - wrapper: ({children}) => ( - - {children} - - ), - seed: { - imageFiles: [ - { - permaId: 100, - width: 200, - height: 100 - } - ] - } - } - ); - - expect(container.firstChild).toHaveClass(styles.visible); - }); -}); diff --git a/entry_types/scrolled/package/spec/frontend/v2/useBackdrop-spec.js b/entry_types/scrolled/package/spec/frontend/v2/useBackdrop-spec.js deleted file mode 100644 index 435c69610c..0000000000 --- a/entry_types/scrolled/package/spec/frontend/v2/useBackdrop-spec.js +++ /dev/null @@ -1,254 +0,0 @@ -import {useBackdrop} from 'frontend/v2/useBackdrop'; - -import {renderHookInEntry} from 'support'; - -describe('useBackdrop', () => { - it('sets files to null by default', () => { - const {result} = renderHookInEntry( - () => useBackdrop({ - backdrop: {} - }) - ); - - expect(result.current.file).toBeNull(); - expect(result.current.mobileFile).toBeNull(); - }); - - it('looks up image file', () => { - const {result} = renderHookInEntry( - () => useBackdrop({ - backdrop: {image: 10} - }), - { - seed: { - imageFiles: [{id: 100, permaId: 10}] - } - } - ); - - expect(result.current.type).toEqual('image'); - expect(result.current.file.id).toEqual(100); - }); - - it('looks up mobile image file', () => { - const {result} = renderHookInEntry( - () => useBackdrop({ - backdrop: {image: 10, imageMobile: 11} - }), - { - seed: { - imageFiles: [ - {id: 100, permaId: 10}, - {id: 101, permaId: 11} - ] - } - } - ); - - expect(result.current.file.id).toEqual(100); - expect(result.current.mobileFile.id).toEqual(101); - }); - - it('falls back to mobile image if main image file is not present', () => { - const {result} = renderHookInEntry( - () => useBackdrop({ - backdrop: {imageMobile: 11} - }), - { - seed: { - imageFiles: [ - {id: 101, permaId: 11} - ] - } - } - ); - - expect(result.current.file.id).toEqual(101); - expect(result.current.mobileFile).toBeNull(); - }); - - it('passes motif area as part of main image file', () => { - const {result} = renderHookInEntry( - () => useBackdrop({ - backdrop: { - image: 10, - imageMotifArea: {top: 0, left: 20, width: 30, height: 10} - } - }), - { - seed: { - imageFiles: [{permaId: 10}] - } - } - ); - - expect(result.current.file.motifArea).toEqual( - {top: 0, left: 20, width: 30, height: 10} - ); - }); - - it('passes motif area as part of mobile image file', () => { - const {result} = renderHookInEntry( - () => useBackdrop({ - backdrop: { - image: 10, - imageMotifArea: {top: 0, left: 20, width: 30, height: 10}, - imageMobile: 11, - imageMobileMotifArea: {top: 10, left: 0, width: 50, height: 15} - } - }), - { - seed: { - imageFiles: [ - {permaId: 10}, - {permaId: 11} - ] - } - } - ); - - expect(result.current.mobileFile.motifArea).toEqual( - {top: 10, left: 0, width: 50, height: 15} - ); - }); - - it('uses mobile motif area when falling back to mobile image file', () => { - const {result} = renderHookInEntry( - () => useBackdrop({ - backdrop: { - imageMobile: 11, - imageMobileMotifArea: {top: 10, left: 0, width: 50, height: 15} - } - }), - { - seed: { - imageFiles: [ - {permaId: 11} - ] - } - } - ); - - expect(result.current.file.motifArea).toEqual( - {top: 10, left: 0, width: 50, height: 15} - ); - }); - - it('passes effects as part of main image file', () => { - const {result} = renderHookInEntry( - () => useBackdrop({ - backdrop: { - image: 10 - }, - backdropEffects: [{name: 'blur', value: 50}] - }), - { - seed: { - imageFiles: [{permaId: 10}] - } - } - ); - - expect(result.current.file.effects).toEqual( - [{name: 'blur', value: 50}] - ); - }); - - it('passes effects as part of mobile image file', () => { - const {result} = renderHookInEntry( - () => useBackdrop({ - backdrop: { - image: 10, - imageMobile: 11 - }, - backdropEffectsMobile: [{name: 'blur', value: 50}] - }), - { - seed: { - imageFiles: [ - {permaId: 10}, - {permaId: 11} - ] - } - } - ); - - expect(result.current.mobileFile.effects).toEqual( - [{name: 'blur', value: 50}] - ); - }); - - it('supports color as backdrop', () => { - const {result} = renderHookInEntry( - () => useBackdrop({backdrop: {color: '#f00'}}) - ); - - expect(result.current.color).toEqual('#f00'); - expect(result.current.type).toEqual('color'); - }); - - it('supports color via legacy image prop', () => { - const {result} = renderHookInEntry( - () => useBackdrop({backdrop: {image: '#f00'}}) - ); - - expect(result.current.color).toEqual('#f00'); - expect(result.current.type).toEqual('color'); - }); - - it('looks up video file', () => { - const {result} = renderHookInEntry( - () => useBackdrop({ - backdrop: {video: 10} - }), - { - seed: { - videoFiles: [{id: 100, permaId: 10}] - } - } - ); - - expect(result.current.type).toEqual('video'); - expect(result.current.file.id).toEqual(100); - }); - - it('passes motif area as part of video file', () => { - const {result} = renderHookInEntry( - () => useBackdrop({ - backdrop: { - video: 10, - videoMotifArea: {top: 0, left: 20, width: 30, height: 10} - } - }), - { - seed: { - videoFiles: [{permaId: 10}] - } - } - ); - - expect(result.current.file.motifArea).toEqual( - {top: 0, left: 20, width: 30, height: 10} - ); - }); - - it('passes effects as part of video file', () => { - const {result} = renderHookInEntry( - () => useBackdrop({ - backdrop: { - video: 10 - }, - backdropEffects: [{name: 'blur', value: 50}] - }), - { - seed: { - videoFiles: [{permaId: 10}] - } - } - ); - - expect(result.current.file.effects).toEqual( - [{name: 'blur', value: 50}] - ); - }); -}); diff --git a/entry_types/scrolled/package/spec/frontend/v2/useBackdropSectionClassNames-spec.js b/entry_types/scrolled/package/spec/frontend/v2/useBackdropSectionClassNames-spec.js deleted file mode 100644 index 7517715790..0000000000 --- a/entry_types/scrolled/package/spec/frontend/v2/useBackdropSectionClassNames-spec.js +++ /dev/null @@ -1,352 +0,0 @@ -import React from 'react'; - -import {useBackdropSectionClassNames} from 'frontend/v2/useBackdropSectionClassNames'; -import {useBackdropFile} from 'frontend/v2/useBackdrop'; -import {FullscreenDimensionProvider} from 'frontend/Fullscreen'; - -import {renderHookInEntry} from 'support'; - -import styles from 'frontend/v2/Section.module.css'; - -describe('useBackdropSectionClassNames', () => { - beforeEach(() => { - document.head.innerHTML = ''; - global.pageflowScrolledSSRAspectRatioMediaQueries = false; - }); - - it('returns section, orientation and left layout class by default', () => { - const {result} = renderHookInEntry( - () => useBackdropSectionClassNames({ - file: null - }) - ); - - expect(result.current).toEqual([ - styles.section, - styles.orientation, - styles['layout-left']]); - }); - - it('uses other layout class when passed', () => { - const {result} = renderHookInEntry( - () => useBackdropSectionClassNames({ - file: null - }, { - layout: 'right' - }) - ); - - expect(result.current).toEqual([ - styles.section, - styles.orientation, - styles['layout-right'] - ]); - }); - - it('sets exposeMotifArea class if exposeMotifArea setting is true and not empty', () => { - const {result} = renderHookInEntry( - () => useBackdropSectionClassNames({ - file: null - }, { - exposeMotifArea: true, - empty: false - }) - ); - - expect(result.current).toContain(styles.exposeMotifArea); - }); - - it('includes aspect ratio class name for file', () => { - const {result} = renderHookInEntry( - () => useBackdropSectionClassNames({ - file: useBackdropFile({collectionName: 'imageFiles', permaId: 10}) - }), - { - seed: { - imageFiles: [{id: 100, permaId: 10, width: 400, height: 300}] - } - } - ); - - expect(result.current).toContain('aspectRatio1333'); - }); - - it('does not include aspect ratio class name if file is not ready', () => { - const {result} = renderHookInEntry( - () => useBackdropSectionClassNames({ - file: useBackdropFile({collectionName: 'imageFiles', permaId: 10}) - }), - { - seed: { - imageFiles: [{permaId: 10, isReady: false, width: 0, height: 0}] - } - } - ); - - expect(result.current).not.toContain(/aspectRatio/); - }); - - it('includes aspect ratio class name for mobile file', () => { - const {result} = renderHookInEntry( - () => useBackdropSectionClassNames({ - file: useBackdropFile({collectionName: 'imageFiles', permaId: 10}), - mobileFile: useBackdropFile({collectionName: 'imageFiles', permaId: 11}) - }), - { - seed: { - imageFiles: [ - {id: 100, permaId: 10, width: 400, height: 300}, - {id: 101, permaId: 11, width: 300, height: 400} - ] - } - } - ); - - expect(result.current).toContain('aspectRatio1333'); - expect(result.current).toContain('aspectRatioMobile750'); - }); - - it('appends style tag with media query for aspect ratio class to head ', () => { - renderHookInEntry( - () => useBackdropSectionClassNames({ - file: useBackdropFile({collectionName: 'imageFiles', permaId: 10}) - }), - { - seed: { - imageFiles: [{id: 100, permaId: 10, width: 400, height: 300}] - } - } - ); - - expect(document.head).toHaveStyleTagIncluding( - '@media (min-aspect-ratio: 1333/1000) {', - 'aspectRatio1333 {' - ); - }); - - it('appends style tag with media query for mobile aspect ratio class', () => { - renderHookInEntry( - () => useBackdropSectionClassNames({ - file: useBackdropFile({collectionName: 'imageFiles', permaId: 10}), - mobileFile: useBackdropFile({collectionName: 'imageFiles', permaId: 11}) - }), - { - seed: { - imageFiles: [ - {id: 100, permaId: 10, width: 400, height: 300}, - {id: 101, permaId: 11, width: 300, height: 400} - ] - } - } - ); - - expect(document.head).toHaveStyleTagIncluding( - '@media (orientation: portrait) and (min-aspect-ratio: 750/1000) {', - 'aspectRatioMobile750 {' - ); - }); - - it('does not append duplicate style tags', () => { - renderHookInEntry( - () => { - useBackdropSectionClassNames({ - file: useBackdropFile({collectionName: 'imageFiles', permaId: 10}) - }); - useBackdropSectionClassNames({ - file: useBackdropFile({collectionName: 'imageFiles', permaId: 10}) - }); - }, - { - seed: { - imageFiles: [{id: 100, permaId: 10, width: 400, height: 300}] - } - } - ); - - expect(document.head.querySelectorAll('style').length).toEqual(1); - }); - - it('does not append style tag if file is blank', () => { - renderHookInEntry( - () => { - useBackdropSectionClassNames({ - file: null - }); - } - ); - - expect(document.head.querySelectorAll('style').length).toEqual(0); - }); - - it('does not append style tag to head if media queries are generated in SSR', () => { - global.pageflowScrolledSSRAspectRatioMediaQueries = true; - - renderHookInEntry( - () => useBackdropSectionClassNames({ - file: useBackdropFile({collectionName: 'imageFiles', permaId: 10}) - }), - { - seed: { - imageFiles: [{id: 100, permaId: 10, width: 400, height: 300}] - } - } - ); - - expect(document.head.querySelectorAll('style').length).toEqual(0); - }); - - describe('when wrapped in FullscreenDimensionProvider', () => { - describe('with fullscreen aspect ratio > backdrop aspect ratio', () => { - it('includes media-query-independant aspect ratio class name', () => { - const {result} = renderHookInEntry( - () => useBackdropSectionClassNames({ - file: useBackdropFile({collectionName: 'imageFiles', permaId: 10}) - }), - { - wrapper: ({children}) => - - {children} - , - seed: { - imageFiles: [{id: 100, permaId: 10, width: 400, height: 300}] - } - } - ); - - expect(result.current).not.toContain(/aspectRatio/); - expect(result.current).toContain('minAspectRatio'); - }); - }); - - describe('with fullscreen aspect ratio < backdrop aspect ratio', () => { - it('includes no aspect ratio class name', () => { - const {result} = renderHookInEntry( - () => useBackdropSectionClassNames({ - file: useBackdropFile({collectionName: 'imageFiles', permaId: 10}) - }), - { - wrapper: ({children}) => - - {children} - , - seed: { - imageFiles: [{id: 100, permaId: 10, width: 400, height: 300}] - } - } - ); - - expect(result.current).not.toContain(/aspectRatio/); - }); - }); - - describe('with fullscreen aspect ratio > mobile backdrop aspect ratio', () => { - it('include aspect ratio class name if fullscreen is portrait', () => { - const {result} = renderHookInEntry( - () => useBackdropSectionClassNames({ - file: useBackdropFile({collectionName: 'imageFiles', permaId: 10}), - mobileFile: useBackdropFile({collectionName: 'imageFiles', permaId: 11}) - }), - { - wrapper: ({children}) => - - {children} - , - seed: { - imageFiles: [{id: 100, permaId: 10, width: 400, height: 300}, - {id: 101, permaId: 11, width: 200, height: 400}] - } - } - ); - - expect(result.current).not.toContain(/aspectRatio/); - expect(result.current).toContain('minAspectRatio'); - }); - - it('does not include aspect ratio class name if fullscreen is landscape', () => { - const {result} = renderHookInEntry( - () => useBackdropSectionClassNames({ - file: useBackdropFile({collectionName: 'imageFiles', permaId: 10}), - mobileFile: useBackdropFile({collectionName: 'imageFiles', permaId: 11}) - }), - { - wrapper: ({children}) => - - {children} - , - seed: { - imageFiles: [{id: 100, permaId: 10, width: 400, height: 300}, - {id: 101, permaId: 11, width: 200, height: 400}] - } - } - ); - - expect(result.current).not.toContain(/aspectRatio/); - expect(result.current).not.toContain('minAspectRatio'); - }); - }); - - it('does not include orientation class', () => { - const {result} = renderHookInEntry( - () => useBackdropSectionClassNames({ - file: null - }), - { - wrapper: ({children}) => - - {children} - , - } - ); - - expect(result.current).not.toContain(styles.orientation); - }); - - it('appends style tag with media-query-independant aspect ratio class', () => { - renderHookInEntry( - () => useBackdropSectionClassNames({ - file: useBackdropFile({collectionName: 'imageFiles', permaId: 10}) - }), - { - wrapper: ({children}) => - - {children} - , - seed: { - imageFiles: [ - {id: 100, permaId: 10, width: 400, height: 300}, - ] - } - } - ); - - expect(document.head).toHaveStyleTagIncluding( - '.minAspectRatio {' - ); - }); - }); -}); - -expect.extend({ - toHaveStyleTagIncluding(received, ...fragments) { - const styleElements = [...received.querySelectorAll('style')]; - const styleElement = styleElements.find(el => - fragments.every(fragment => el.innerHTML.includes(fragment)) - ); - - return styleElement - ? { - pass: true, - - message() { - return `Expected ${received} not to have matching style tag, ` + - `but found:\n${styleElement.innerHTML}`; - } - } : { - pass: false, - - message() { - return `Expected to find matching style tag in:\n ${received.innerHTML}`; - } - }; - } -}); diff --git a/entry_types/scrolled/package/spec/frontend/v2/useBackdropSectionCustomProperties-spec.js b/entry_types/scrolled/package/spec/frontend/v2/useBackdropSectionCustomProperties-spec.js deleted file mode 100644 index c48190d53c..0000000000 --- a/entry_types/scrolled/package/spec/frontend/v2/useBackdropSectionCustomProperties-spec.js +++ /dev/null @@ -1,119 +0,0 @@ -import { - useBackdropSectionCustomProperties -} from 'frontend/v2/useBackdropSectionCustomProperties'; -import {useBackdropFile} from 'frontend/v2/useBackdrop'; - -import {renderHookInEntry} from 'support'; - -describe('useBackdropSectionCustomProperties', () => { - it('returns empty object by default', () => { - const {result} = renderHookInEntry( - () => useBackdropSectionCustomProperties({}) - ); - - expect(result.current).toEqual({}); - }); - - it('returns empty object if file is not ready', () => { - const {result} = renderHookInEntry( - () => useBackdropSectionCustomProperties({ - file: useBackdropFile({ - permaId: 10, - collectionName: 'imageFiles' - }) - }), - { - seed: { - imageFiles: [{permaId: 10, isReady: false}] - } - } - ); - - expect(result.current).toEqual({}); - }); - - it('includes dimension properties for main file', () => { - const {result} = renderHookInEntry( - () => useBackdropSectionCustomProperties({ - file: useBackdropFile({ - permaId: 10, - collectionName: 'imageFiles' - }) - }), - { - seed: { - imageFiles: [{permaId: 10, width: 1024, height: 768}] - } - } - ); - - expect(result.current).toMatchObject({ - '--backdrop-w': 1024, - '--backdrop-h': 768 - }); - }); - - it('includes motif area properties for main file', () => { - const {result} = renderHookInEntry( - () => useBackdropSectionCustomProperties({ - file: useBackdropFile({ - permaId: 10, - collectionName: 'imageFiles', - motifArea: {top: 0, left: 20, width: 30, height: 10} - }) - }), - { - seed: { - imageFiles: [{permaId: 10}] - } - } - ); - - expect(result.current).toMatchObject({ - '--motif-t': 0, - '--motif-l': 20, - '--motif-w': 30, - '--motif-h': 10 - }); - }); - - it('includes properties for mobile file', () => { - const {result} = renderHookInEntry( - () => useBackdropSectionCustomProperties({ - file: useBackdropFile({ - permaId: 10, - collectionName: 'imageFiles', - motifArea: {top: 0, left: 20, width: 30, height: 10} - }), - mobileFile: useBackdropFile({ - permaId: 11, - collectionName: 'imageFiles', - motifArea: {top: 10, left: 0, width: 40, height: 15} - }), - }), - { - seed: { - imageFiles: [ - {permaId: 10, width: 1024, height: 768}, - {permaId: 11, width: 768, height: 1024} - ], - } - } - ); - - expect(result.current).toMatchObject({ - '--backdrop-w': 1024, - '--backdrop-h': 768, - '--motif-t': 0, - '--motif-l': 20, - '--motif-w': 30, - '--motif-h': 10, - '--mobile-backdrop-w': 768, - '--mobile-backdrop-h': 1024, - '--mobile-motif-t': 10, - '--mobile-motif-l': 0, - '--mobile-motif-w': 40, - '--mobile-motif-h': 15 - }); - }); -}); diff --git a/entry_types/scrolled/package/spec/frontend/v2/useBackgroundFile-spec.js b/entry_types/scrolled/package/spec/frontend/v2/useBackgroundFile-spec.js deleted file mode 100644 index 75ff46f1c5..0000000000 --- a/entry_types/scrolled/package/spec/frontend/v2/useBackgroundFile-spec.js +++ /dev/null @@ -1,51 +0,0 @@ -import {useBackgroundFile} from 'frontend/v2/useBackgroundFile'; -import {useFile} from 'entryState'; - -import {renderHookInEntry} from 'support'; - -describe('useBackgroundFile', () => { - it('returns null if file is null', () => { - const {result} = renderHookInEntry(() => useBackgroundFile({ - file: null, - containerDimension: {width: 200, height: 100} - })); - - expect(result.current).toBeNull(); - }); - - it('includes passed effects in result', () => { - const {result} = renderHookInEntry( - () => useBackgroundFile({ - file: useFile({collectionName: 'imageFiles', permaId: 10}), - effects: [{name: 'blur', value: 50}] - }), - { - seed: { - imageFiles: [{permaId: 10}] - } - } - ); - - expect(result.current.effects).toEqual([{name: 'blur', value: 50}]); - }); - - it('sets motif area image based on passed motif area', () => { - const {result} = renderHookInEntry( - () => useBackgroundFile({ - file: useFile({collectionName: 'imageFiles', permaId: 10}), - motifArea: {left: 20, top: 10, width: 50, height: 60}, - }), - { - seed: { - imageFiles: [{ - permaId: 10, - configuration: { - motifArea: {left: 30, top: 20, width: 60, height: 70} - } - }] - } - }); - - expect(result.current.motifArea).toEqual({left: 20, top: 10, width: 50, height: 60}); - }); -}); diff --git a/entry_types/scrolled/package/spec/frontend/v2/useMotifAreaState-spec.js b/entry_types/scrolled/package/spec/frontend/v2/useMotifAreaState-spec.js deleted file mode 100644 index 76f3020237..0000000000 --- a/entry_types/scrolled/package/spec/frontend/v2/useMotifAreaState-spec.js +++ /dev/null @@ -1,157 +0,0 @@ -import {useMotifAreaState} from 'frontend/v2/useMotifAreaState'; - -import {renderHook, act} from '@testing-library/react-hooks'; -import {fireEvent} from '@testing-library/dom' -import {createElementWithDimension} from 'support/createElementWithDimension'; - -describe('useMotifAreaState', () => { - function getMotifAreaState({ - contentArea, - motifArea, - empty, - updateOnScrollAndResize, - exposeMotifArea - }) { - const {result} = renderHook(() => useMotifAreaState({ - transitions: ['scrollIn', 'scrollOut'], - empty, - updateOnScrollAndResize, - exposeMotifArea - })); - - // Since there is no horizontal scrolling in Pageflow, `offsetLeft` - // and `viewportLeft` coincide and can thus be captured in a - // single `left` property to make the below tests more concise. - const contentAreaEl = createElementWithDimension({ - offsetLeft: contentArea.left, - viewportLeft: contentArea.left, - ...contentArea, - }); - const motifAreaEl = createElementWithDimension({ - offsetLeft: motifArea.left, - viewportLeft: motifArea.left, - ...motifArea - }); - - const [, setMotifAreaRect, setContentAreaRef] = result.current; - - act(() => { - setMotifAreaRect(motifAreaEl); - setContentAreaRef(contentAreaEl); - }); - - return result; - } - - describe('intersectionRatioY', () => { - describe('when exposeMotifArea is false', () => { - it('equals 0 even if motif area is intersected by content area', () => { - const [{intersectionRatioY}] = getMotifAreaState({ - contentArea: {left: 100, viewportTop: 400, width: 300}, - motifArea: {left: 200, viewportTop: 100, width: 500, height: 400}, - empty: false, - exposeMotifArea: false - }).current; - - expect(intersectionRatioY).toEqual(0); - }); - }); - - describe('when exposeMotifArea is true', () => { - it('equals ratio of motif area that is intersected by content area', () => { - const [{intersectionRatioY}] = getMotifAreaState({ - contentArea: {left: 100, viewportTop: 400, width: 300}, - motifArea: {left: 200, viewportTop: 100, width: 500, height: 400}, - empty: false, - exposeMotifArea: true - }).current; - - expect(intersectionRatioY).toEqual(0.25); - }); - - it('equals 0 if section does not have content elements', () => { - const [{intersectionRatioY}] = getMotifAreaState({ - contentArea: {left: 100, viewportTop: 400, width: 300}, - motifArea: {left: 200, viewportTop: 100, width: 500, height: 400}, - empty: true, - exposeMotifArea: true - }).current; - - expect(intersectionRatioY).toEqual(0); - }); - - it('equals 0 content intersects with zero height motif area', () => { - const [{intersectionRatioY}] = getMotifAreaState({ - contentArea: {left: 100, viewportTop: 400, width: 300}, - motifArea: {left: 200, viewportTop: 100, width: 500, height: 0}, - empty: false, - exposeMotifArea: true - }).current; - - expect(intersectionRatioY).toEqual(0); - }); - - it('equals 0 if content area does not yet intersect with motif area vertically', () => { - const [{intersectionRatioY}] = getMotifAreaState({ - contentArea: {left: 100, viewportTop: 1000, width: 300}, - motifArea: {left: 200, viewportTop: 100, width: 500, height: 400}, - empty: false, - exposeMotifArea: true - }).current; - - expect(intersectionRatioY).toEqual(0); - }); - - it('equals 1 if content area has moved past motif area vertically', () => { - const [{intersectionRatioY}] = getMotifAreaState({ - contentArea: {left: 100, viewportTop: 0, width: 300}, - motifArea: {left: 200, viewportTop: 100, width: 500, height: 400}, - empty: false, - exposeMotifArea: true - }).current; - - expect(intersectionRatioY).toEqual(1); - }); - - it('is updated on scroll event when updateOnScrollAndResize is true', () => { - let contentAreaViewportTop = 500; - const result = getMotifAreaState({ - contentArea: {left: 100, viewportTop: () => contentAreaViewportTop, width: 300}, - motifArea: {left: 200, viewportTop: 100, width: 500, height: 400}, - empty: false, - exposeMotifArea: true, - updateOnScrollAndResize: true - }); - - let [{intersectionRatioY}] = result.current; - expect(intersectionRatioY).toEqual(0); - - contentAreaViewportTop = 300 - act(() => { fireEvent.scroll(window); }); - - [{intersectionRatioY}] = result.current; - expect(intersectionRatioY).toEqual(0.5); - }); - - it('is not updated on scroll event when updateOnScrollAndResize is false', () => { - let contentAreaViewportTop = 500; - const result = getMotifAreaState({ - contentArea: {left: 100, viewportTop: () => contentAreaViewportTop, width: 300}, - motifArea: {left: 200, viewportTop: 100, width: 500, height: 400}, - empty: false, - exposeMotifArea: true, - updateOnScrollAndResize: false - }); - - let [{intersectionRatioY}] = result.current; - expect(intersectionRatioY).toEqual(0); - - contentAreaViewportTop = 300 - act(() => { fireEvent.scroll(window); }); - - [{intersectionRatioY}] = result.current; - expect(intersectionRatioY).toEqual(0); - }); - }); - }); -}); diff --git a/entry_types/scrolled/package/src/frontend/v1/Backdrop/BackgroundAsset.js b/entry_types/scrolled/package/src/frontend/Backdrop/BackgroundAsset.js similarity index 91% rename from entry_types/scrolled/package/src/frontend/v1/Backdrop/BackgroundAsset.js rename to entry_types/scrolled/package/src/frontend/Backdrop/BackgroundAsset.js index 677f391cee..50145c06b3 100644 --- a/entry_types/scrolled/package/src/frontend/v1/Backdrop/BackgroundAsset.js +++ b/entry_types/scrolled/package/src/frontend/Backdrop/BackgroundAsset.js @@ -1,8 +1,8 @@ import React from 'react'; -import Fullscreen from './../../Fullscreen'; -import FillColor from './../../FillColor'; -import {useBackgroundFile} from './../useBackgroundFile'; +import Fullscreen from '../Fullscreen'; +import FillColor from '../FillColor'; +import {useBackgroundFile} from '../useBackgroundFile'; import {BackgroundVideo} from './BackgroundVideo'; import {BackgroundImage} from './BackgroundImage'; diff --git a/entry_types/scrolled/package/src/frontend/v1/Backdrop/BackgroundContentElement.js b/entry_types/scrolled/package/src/frontend/Backdrop/BackgroundContentElement.js similarity index 86% rename from entry_types/scrolled/package/src/frontend/v1/Backdrop/BackgroundContentElement.js rename to entry_types/scrolled/package/src/frontend/Backdrop/BackgroundContentElement.js index 7497903569..88d038d81e 100644 --- a/entry_types/scrolled/package/src/frontend/v1/Backdrop/BackgroundContentElement.js +++ b/entry_types/scrolled/package/src/frontend/Backdrop/BackgroundContentElement.js @@ -1,9 +1,9 @@ import React, {useMemo} from 'react'; -import {ContentElement} from '../../ContentElement'; -import {useSectionLifecycle} from '../../useSectionLifecycle'; +import {ContentElement} from '../ContentElement'; +import {useSectionLifecycle} from '../useSectionLifecycle'; -import {withInlineEditingDecorator} from '../../inlineEditing'; +import {withInlineEditingDecorator} from '../inlineEditing'; export const BackgroundContentElement = withInlineEditingDecorator( 'BackgroundContentElementDecorator', diff --git a/entry_types/scrolled/package/src/frontend/v1/Backdrop/BackgroundImage.js b/entry_types/scrolled/package/src/frontend/Backdrop/BackgroundImage.js similarity index 89% rename from entry_types/scrolled/package/src/frontend/v1/Backdrop/BackgroundImage.js rename to entry_types/scrolled/package/src/frontend/Backdrop/BackgroundImage.js index 3ae1baa781..c157390ae0 100644 --- a/entry_types/scrolled/package/src/frontend/v1/Backdrop/BackgroundImage.js +++ b/entry_types/scrolled/package/src/frontend/Backdrop/BackgroundImage.js @@ -1,8 +1,8 @@ import React from 'react'; -import {Image} from '../../Image'; +import {Image} from '../Image'; import {MotifArea} from '../MotifArea'; -import {useSectionLifecycle} from '../../useSectionLifecycle'; +import {useSectionLifecycle} from '../useSectionLifecycle'; import {Effects} from './Effects'; import {features} from 'pageflow/frontend'; diff --git a/entry_types/scrolled/package/src/frontend/v1/Backdrop/BackgroundVideo.js b/entry_types/scrolled/package/src/frontend/Backdrop/BackgroundVideo.js similarity index 86% rename from entry_types/scrolled/package/src/frontend/v1/Backdrop/BackgroundVideo.js rename to entry_types/scrolled/package/src/frontend/Backdrop/BackgroundVideo.js index b3b9d51711..3b4a40b7bb 100644 --- a/entry_types/scrolled/package/src/frontend/v1/Backdrop/BackgroundVideo.js +++ b/entry_types/scrolled/package/src/frontend/Backdrop/BackgroundVideo.js @@ -1,12 +1,12 @@ import React, { useEffect } from 'react'; -import {VideoPlayer} from './../../VideoPlayer'; -import {MotifArea} from './../MotifArea'; -import {usePlayerState} from './../../MediaPlayer/usePlayerState'; -import {useSectionLifecycle} from './../../useSectionLifecycle'; +import {VideoPlayer} from '../VideoPlayer'; +import {MotifArea} from '../MotifArea'; +import {usePlayerState} from '../MediaPlayer/usePlayerState'; +import {useSectionLifecycle} from '../useSectionLifecycle'; import {Effects} from './Effects'; import {documentHiddenState} from 'pageflow/frontend'; -import {PlayerEventContextDataProvider} from '../../useEventContextData'; +import {PlayerEventContextDataProvider} from '../useEventContextData'; export function BackgroundVideo({video, onMotifAreaUpdate, containerDimension}) { const [playerState, playerActions] = usePlayerState(); diff --git a/entry_types/scrolled/package/src/frontend/v1/Backdrop/Effects.js b/entry_types/scrolled/package/src/frontend/Backdrop/Effects.js similarity index 87% rename from entry_types/scrolled/package/src/frontend/v1/Backdrop/Effects.js rename to entry_types/scrolled/package/src/frontend/Backdrop/Effects.js index d525001469..cc02044800 100644 --- a/entry_types/scrolled/package/src/frontend/v1/Backdrop/Effects.js +++ b/entry_types/scrolled/package/src/frontend/Backdrop/Effects.js @@ -1,14 +1,14 @@ import React, {useRef, useState} from 'react'; import classNames from 'classnames'; -import {useIsomorphicLayoutEffect} from '../../useIsomorphicLayoutEffect'; +import {useIsomorphicLayoutEffect} from '../useIsomorphicLayoutEffect'; import styles from './Effects.module.css'; -import {useSectionViewTimeline} from '../../SectionViewTimelineProvider'; -import {useSectionLifecycle} from '../../useSectionLifecycle'; -import {useIsStaticPreview} from '../../useScrollPositionLifecycle'; -import {prefersReducedMotion} from '../../prefersReducedMotion'; -import {getEffectValue} from '../../getEffectValue'; +import {useSectionViewTimeline} from '../SectionViewTimelineProvider'; +import {useSectionLifecycle} from '../useSectionLifecycle'; +import {useIsStaticPreview} from '../useScrollPositionLifecycle'; +import {prefersReducedMotion} from '../prefersReducedMotion'; +import {getEffectValue} from '../getEffectValue'; export function Effects({file, children}) { const ref = useRef(); diff --git a/entry_types/scrolled/package/src/frontend/v1/Backdrop/Effects.module.css b/entry_types/scrolled/package/src/frontend/Backdrop/Effects.module.css similarity index 100% rename from entry_types/scrolled/package/src/frontend/v1/Backdrop/Effects.module.css rename to entry_types/scrolled/package/src/frontend/Backdrop/Effects.module.css diff --git a/entry_types/scrolled/package/src/frontend/v1/Backdrop/index.js b/entry_types/scrolled/package/src/frontend/Backdrop/index.js similarity index 82% rename from entry_types/scrolled/package/src/frontend/v1/Backdrop/index.js rename to entry_types/scrolled/package/src/frontend/Backdrop/index.js index 6b71bfba13..4ad4034415 100644 --- a/entry_types/scrolled/package/src/frontend/v1/Backdrop/index.js +++ b/entry_types/scrolled/package/src/frontend/Backdrop/index.js @@ -1,14 +1,14 @@ import React from 'react'; import classNames from 'classnames'; -import {withInlineEditingDecorator} from '../../inlineEditing'; -import useDimension from './../../useDimension'; -import {useSectionLifecycle} from './../../useSectionLifecycle'; +import {withInlineEditingDecorator} from '../inlineEditing'; +import useDimension from '../useDimension'; +import {useSectionLifecycle} from '../useSectionLifecycle'; import {BackgroundAsset} from './BackgroundAsset'; -import styles from '../../Backdrop.module.css'; -import sharedTransitionStyles from '../../transitions/shared.module.css'; +import styles from '../Backdrop.module.css'; +import sharedTransitionStyles from '../transitions/shared.module.css'; export const Backdrop = withInlineEditingDecorator('BackdropDecorator', function Backdrop(props) { const [containerDimension, setContainerRef] = useDimension(); diff --git a/entry_types/scrolled/package/src/frontend/v1/MotifArea.js b/entry_types/scrolled/package/src/frontend/MotifArea.js similarity index 93% rename from entry_types/scrolled/package/src/frontend/v1/MotifArea.js rename to entry_types/scrolled/package/src/frontend/MotifArea.js index 4978e48efa..22dbd9fe6c 100644 --- a/entry_types/scrolled/package/src/frontend/v1/MotifArea.js +++ b/entry_types/scrolled/package/src/frontend/MotifArea.js @@ -1,9 +1,9 @@ import React, {useRef, useEffect, useCallback, useContext} from 'react'; import classNames from 'classnames'; -import styles from '../MotifArea.module.css'; +import styles from './MotifArea.module.css'; -import {MotifAreaVisibilityContext} from '../MotifAreaVisibilityProvider'; +import {MotifAreaVisibilityContext} from './MotifAreaVisibilityProvider'; export const MotifArea = function MotifArea(props) { const lastPosition = useRef(); diff --git a/entry_types/scrolled/package/src/frontend/Section.js b/entry_types/scrolled/package/src/frontend/Section.js index a2211d5ea5..25ae3d9c96 100644 --- a/entry_types/scrolled/package/src/frontend/Section.js +++ b/entry_types/scrolled/package/src/frontend/Section.js @@ -5,7 +5,6 @@ import { SectionAtmo } from './SectionAtmo'; import { useSectionForegroundContentElements, - useAdditionalSeedData, useFileWithInlineRights } from '../entryState'; @@ -24,8 +23,9 @@ import {useSectionPadding} from './useSectionPaddingCustomProperties'; import {SectionIntersectionProbe} from './SectionIntersectionObserver'; import {getAppearanceComponents, getAppearanceSectionScopeName, useAppearanceOverlayStyle} from './appearance'; -import * as v1 from './v1'; -import * as v2 from './v2'; +import {Backdrop} from './Backdrop'; +import {useMotifAreaState} from './useMotifAreaState'; +import {useBackdrop} from './useBackdrop'; import styles from './Section.module.css'; import {getTransitionStyles, getEnterAndExitTransitions} from './transitions' @@ -33,22 +33,11 @@ import {getTransitionStyles, getEnterAndExitTransitions} from './transitions' const Section = withInlineEditingDecorator('SectionDecorator', function Section({ section, transitions, backdrop, contentElements, state, onActivate, domIdPrefix }) { - const { - useBackdropSectionClassNames, - useBackdropSectionCustomProperties - } = (useAdditionalSeedData('frontendVersion') === 2 ? v2 : v1); - const ref = useScrollTarget(section.id); const sectionOverlayStyle = useAppearanceOverlayStyle(section); const transitionStyles = getTransitionStyles(section, sectionOverlayStyle); - const backdropSectionClassNames = useBackdropSectionClassNames(backdrop, { - layout: section.layout, - exposeMotifArea: section.exposeMotifArea, - empty: !contentElements.length, - }); - const atmoAudioFile = useFileWithInlineRights({ configuration: section, collectionName: 'audioFiles', @@ -62,15 +51,11 @@ const Section = withInlineEditingDecorator('SectionDecorator', function Section( ref={ref} className={classNames(styles.Section, transitionStyles.section, - backdropSectionClassNames, {[styles.first]: section.sectionIndex === 0 && !section.chapter?.isExcursion}, {[styles.narrow]: section.width === 'narrow'}, `scope-${getAppearanceSectionScopeName(section.appearance)}`, section.invert ? styles.darkContent : styles.lightContent)} - style={{ - ...useBackdropSectionCustomProperties(backdrop), - ...sectionPadding.styles - }}> + style={sectionPadding.styles}> @@ -109,11 +94,6 @@ Section.defaultProps = { function SectionContents({ section, backdrop, contentElements, state, transitions, transitionStyles, sectionOverlayStyle, sectionPadding }) { - const { - Backdrop, - useMotifAreaState - } = (useAdditionalSeedData('frontendVersion') === 2 ? v2 : v1); - const {shouldPrepare} = useSectionLifecycle(); const [, exitTransition] = transitions; @@ -206,10 +186,6 @@ function ConnectedSection(props) { phoneLayout: usePhoneLayout() }); - const { - useBackdrop, - } = (useAdditionalSeedData('frontendVersion') === 2 ? v2 : v1); - const backdrop = useBackdrop(props.section); const transitions = getEnterAndExitTransitions(props.section); diff --git a/entry_types/scrolled/package/src/frontend/v1/__mocks__/useMotifAreaState.js b/entry_types/scrolled/package/src/frontend/__mocks__/useMotifAreaState.js similarity index 100% rename from entry_types/scrolled/package/src/frontend/v1/__mocks__/useMotifAreaState.js rename to entry_types/scrolled/package/src/frontend/__mocks__/useMotifAreaState.js diff --git a/entry_types/scrolled/package/src/frontend/index.js b/entry_types/scrolled/package/src/frontend/index.js index 9cdc2c583c..74c7c1a4b6 100644 --- a/entry_types/scrolled/package/src/frontend/index.js +++ b/entry_types/scrolled/package/src/frontend/index.js @@ -62,7 +62,7 @@ export * from './SectionThumbnail'; export {Entry} from './Entry'; export {useAudioFocus} from './useAudioFocus'; export {useDarkBackground} from './backgroundColor'; -export {useBackgroundFile} from './v1/useBackgroundFile'; +export {useBackgroundFile} from './useBackgroundFile'; export { useAdditionalSeedData, diff --git a/entry_types/scrolled/package/src/frontend/v1/useBackdrop.js b/entry_types/scrolled/package/src/frontend/useBackdrop.js similarity index 92% rename from entry_types/scrolled/package/src/frontend/v1/useBackdrop.js rename to entry_types/scrolled/package/src/frontend/useBackdrop.js index e92f589fec..879e381c25 100644 --- a/entry_types/scrolled/package/src/frontend/v1/useBackdrop.js +++ b/entry_types/scrolled/package/src/frontend/useBackdrop.js @@ -1,5 +1,5 @@ -import {useContentElement, useFileWithInlineRights} from '../../entryState'; -import {usePortraitOrientation} from '../usePortraitOrientation'; +import {useContentElement, useFileWithInlineRights} from '../entryState'; +import {usePortraitOrientation} from './usePortraitOrientation'; export function useBackdrop(section) { const videoBackdrop = useFileBackdrop({ diff --git a/entry_types/scrolled/package/src/frontend/v1/useBackgroundFile.js b/entry_types/scrolled/package/src/frontend/useBackgroundFile.js similarity index 100% rename from entry_types/scrolled/package/src/frontend/v1/useBackgroundFile.js rename to entry_types/scrolled/package/src/frontend/useBackgroundFile.js diff --git a/entry_types/scrolled/package/src/frontend/v1/useMotifAreaState.js b/entry_types/scrolled/package/src/frontend/useMotifAreaState.js similarity index 97% rename from entry_types/scrolled/package/src/frontend/v1/useMotifAreaState.js rename to entry_types/scrolled/package/src/frontend/useMotifAreaState.js index 266f9d591a..a3b8c76811 100644 --- a/entry_types/scrolled/package/src/frontend/v1/useMotifAreaState.js +++ b/entry_types/scrolled/package/src/frontend/useMotifAreaState.js @@ -1,8 +1,8 @@ import {useCallback, useState, useEffect} from 'react'; -import isIntersectingX from '../isIntersectingX'; -import useBoundingClientRect from '../useBoundingClientRect'; -import useDimension from '../useDimension'; +import isIntersectingX from './isIntersectingX'; +import useBoundingClientRect from './useBoundingClientRect'; +import useDimension from './useDimension'; /** * Handles the state of the section layout based on the current diff --git a/entry_types/scrolled/package/src/frontend/v1/index.js b/entry_types/scrolled/package/src/frontend/v1/index.js deleted file mode 100644 index a17d4c50ed..0000000000 --- a/entry_types/scrolled/package/src/frontend/v1/index.js +++ /dev/null @@ -1,6 +0,0 @@ -export {Backdrop} from './Backdrop'; -export {useMotifAreaState} from './useMotifAreaState'; -export {useBackdrop} from './useBackdrop'; - -export function useBackdropSectionCustomProperties() {} -export function useBackdropSectionClassNames() {} diff --git a/entry_types/scrolled/package/src/frontend/v2/Backdrop/BackgroundAsset.js b/entry_types/scrolled/package/src/frontend/v2/Backdrop/BackgroundAsset.js deleted file mode 100644 index 921ac39cc2..0000000000 --- a/entry_types/scrolled/package/src/frontend/v2/Backdrop/BackgroundAsset.js +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react'; - -import Fullscreen from './../../Fullscreen'; -import FillColor from './../../FillColor'; - -import {Positioner} from './Positioner'; -import {BackgroundImage} from './BackgroundImage'; -import {BackgroundVideo} from './BackgroundVideo'; - -export function BackgroundAsset({backdrop, eagerLoad, state, onMotifAreaUpdate}) { - if (backdrop.type === 'video') { - return ( - - - - - - ); - } - if (backdrop.type === 'color') { - return ( - - ); - } - else { - return ( - - - - - - ); - } -} - -BackgroundAsset.defaultProps = { - eagerLoad: false -}; diff --git a/entry_types/scrolled/package/src/frontend/v2/Backdrop/BackgroundImage.js b/entry_types/scrolled/package/src/frontend/v2/Backdrop/BackgroundImage.js deleted file mode 100644 index 4de84e58a1..0000000000 --- a/entry_types/scrolled/package/src/frontend/v2/Backdrop/BackgroundImage.js +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; - -import {Picture} from '../../Picture'; -import {MotifArea} from '../MotifArea'; -import {useSectionLifecycle} from '../../useSectionLifecycle'; -import {useFullscreenDimensions} from '../../Fullscreen'; -import {Effects} from './Effects'; - -export function BackgroundImage({backdrop, eagerLoad, onMotifAreaUpdate}) { - const {shouldLoad} = useSectionLifecycle(); - const renderedInSectionThumbnail = !!useFullscreenDimensions().height; - - return ( - <> - - - - - - ); -} diff --git a/entry_types/scrolled/package/src/frontend/v2/Backdrop/BackgroundVideo.js b/entry_types/scrolled/package/src/frontend/v2/Backdrop/BackgroundVideo.js deleted file mode 100644 index 4ceb78ea40..0000000000 --- a/entry_types/scrolled/package/src/frontend/v2/Backdrop/BackgroundVideo.js +++ /dev/null @@ -1,67 +0,0 @@ -import React, { useEffect } from 'react'; - -import {VideoPlayer} from './../../VideoPlayer'; -import {MotifArea} from './../MotifArea'; -import {usePlayerState} from './../../MediaPlayer/usePlayerState'; -import {useSectionLifecycle} from './../../useSectionLifecycle'; -import {Effects} from './Effects'; -import {documentHiddenState} from 'pageflow/frontend'; -import {PlayerEventContextDataProvider} from '../../useEventContextData'; - -export function BackgroundVideo({video, onMotifAreaUpdate}) { - const [playerState, playerActions] = usePlayerState(); - const {shouldLoad, shouldPrepare} = useSectionLifecycle({ - onVisible() { - playerActions.changeVolumeFactor(0, 0); - playerActions.play() - }, - - onActivate() { - playerActions.changeVolumeFactor(1, 1000); - }, - - onDeactivate() { - playerActions.changeVolumeFactor(0, 1000); - }, - - onInvisible() { - playerActions.pause() - } - }); - - useEffect(() => { - let documentState = documentHiddenState((visibilityState) => { - if (visibilityState === 'hidden') { - playerActions.pause(); - } - else{ - playerActions.play(); - } - }); - return () => { - documentState.removeCallback(); - } - }, [playerActions]) - - return ( - <> - - - - - - - - ); -} diff --git a/entry_types/scrolled/package/src/frontend/v2/Backdrop/Effects.js b/entry_types/scrolled/package/src/frontend/v2/Backdrop/Effects.js deleted file mode 100644 index 7ec0464d8a..0000000000 --- a/entry_types/scrolled/package/src/frontend/v2/Backdrop/Effects.js +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; - -import styles from './Effects.module.css'; - -export function Effects({file, mobileFile, children}) { - return ( -
- {children} -
- ); -} - -export function getFilter(effects) { - return effects.map(effect => { - if (effect.name === 'blur') { - return `blur(${effect.value / 100 * 10}px)`; - } - else if (['brightness', 'contrast', 'saturate'].includes(effect.name)) { - const value = Math.round(effect.value < 0 ? - 100 + effect.value * 0.6 : - 100 + effect.value); - return `${effect.name}(${value}%)`; - } - else { - return `${effect.name}(${effect.value}%)`; - } - }).join(' '); -} diff --git a/entry_types/scrolled/package/src/frontend/v2/Backdrop/Effects.module.css b/entry_types/scrolled/package/src/frontend/v2/Backdrop/Effects.module.css deleted file mode 100644 index 780b795ea3..0000000000 --- a/entry_types/scrolled/package/src/frontend/v2/Backdrop/Effects.module.css +++ /dev/null @@ -1,10 +0,0 @@ -.effects { - height: 100%; - filter: var(--filter); -} - -@media (orientation: portrait) { - .effects { - filter: var(--mobile-filter); - } -} diff --git a/entry_types/scrolled/package/src/frontend/v2/Backdrop/Positioner.js b/entry_types/scrolled/package/src/frontend/v2/Backdrop/Positioner.js deleted file mode 100644 index 1d6c52fa5d..0000000000 --- a/entry_types/scrolled/package/src/frontend/v2/Backdrop/Positioner.js +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; - -import styles from './Positioner.module.css'; - -export function Positioner({children}) { - return ( -
- {children} -
- ); -} diff --git a/entry_types/scrolled/package/src/frontend/v2/Backdrop/Positioner.module.css b/entry_types/scrolled/package/src/frontend/v2/Backdrop/Positioner.module.css deleted file mode 100644 index 3504640f13..0000000000 --- a/entry_types/scrolled/package/src/frontend/v2/Backdrop/Positioner.module.css +++ /dev/null @@ -1,6 +0,0 @@ -.wrapper { - position: relative; - transform: var(--backdrop-positioner-transform); - width: var(--backdrop-positioner-width); - height: var(--backdrop-positioner-height); -} diff --git a/entry_types/scrolled/package/src/frontend/v2/Backdrop/index.js b/entry_types/scrolled/package/src/frontend/v2/Backdrop/index.js deleted file mode 100644 index 55a3dd9f15..0000000000 --- a/entry_types/scrolled/package/src/frontend/v2/Backdrop/index.js +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react'; -import classNames from 'classnames'; - -import {BackgroundAsset} from './BackgroundAsset'; - -import styles from '../../Backdrop.module.css'; - -export function Backdrop(props) { - return ( -
-
-
- {props.children( - - )} -
-
-
- ); -} - -Backdrop.defaultProps = { - children: children => children, - transitionStyles: {} -}; diff --git a/entry_types/scrolled/package/src/frontend/v2/MotifArea.js b/entry_types/scrolled/package/src/frontend/v2/MotifArea.js deleted file mode 100644 index 3fcdba8cc7..0000000000 --- a/entry_types/scrolled/package/src/frontend/v2/MotifArea.js +++ /dev/null @@ -1,18 +0,0 @@ -import React, {useContext} from 'react'; -import classNames from 'classnames'; - -import styles from '../MotifArea.module.css'; -import v2Styles from './MotifArea.module.css'; - -import {MotifAreaVisibilityContext} from '../MotifAreaVisibilityProvider'; - -export const MotifArea = function MotifArea(props) { - const visible = useContext(MotifAreaVisibilityContext); - - return ( -
- ); -}; diff --git a/entry_types/scrolled/package/src/frontend/v2/MotifArea.module.css b/entry_types/scrolled/package/src/frontend/v2/MotifArea.module.css deleted file mode 100644 index 73faff51b6..0000000000 --- a/entry_types/scrolled/package/src/frontend/v2/MotifArea.module.css +++ /dev/null @@ -1,6 +0,0 @@ -.root { - left: calc(var(--motif-left) * 1%); - top: calc(var(--motif-top) * 1%); - width: calc(var(--motif-width) * 1%); - height: calc(var(--motif-height) * 1%); -} diff --git a/entry_types/scrolled/package/src/frontend/v2/Section.module.css b/entry_types/scrolled/package/src/frontend/v2/Section.module.css deleted file mode 100644 index 8e18b40b51..0000000000 --- a/entry_types/scrolled/package/src/frontend/v2/Section.module.css +++ /dev/null @@ -1,476 +0,0 @@ -.section { - /* - Properties like --backdrop-w are set as inline styles via - useBackdropSectionCustomProperties. Assign to separate properties - to allow overriding with mobile backdrop properties below. - */ - --backdrop-width: var(--backdrop-w); - --backdrop-height: var(--backdrop-h); - - --motif-left: var(--motif-l); - --motif-top: var(--motif-t); - --motif-width: var(--motif-w); - --motif-height: var(--motif-h); -} - -@media (orientation: portrait) { - /* - Use dimensions of mobile image in portrait orientation if one has - been assigned. This class is not set for sections in section - thumbnails since those always have landscape orientation. - */ - .orientation { - --backdrop-width: var(--mobile-backdrop-w, var(--backdrop-w)); - --backdrop-height: var(--mobile-backdrop-h, var(--backdrop-h)); - - --motif-left: var(--mobile-motif-l, var(--motif-l)); - --motif-top: var(--mobile-motif-t, var(--motif-t)); - --motif-width: var(--mobile-motif-w, var(--motif-w)); - --motif-height: var(--mobile-motif-h, var(--motif-h)); - } -} - -.section { - /* - The following calculations use `var(--vw)` and `var(--vh)`instead - of using viewport units directly. The variables default to 1vw and - 1vh respectively (see global.module.css). SectionThumbnail - overrides these with measured pixel sizes of the thumbnail, to - generate correct section previews. - - # Derived motif area dimensions - */ - - --motif-right: calc(100 - var(--motif-width) - var(--motif-left)); - --motif-bottom: calc(100 - var(--motif-height) - var(--motif-top)); - - --motif-center-x: calc(var(--motif-left, 50) + var(--motif-width, 0) / 2); - --motif-center-y: calc(var(--motif-top, 50) + var(--motif-height, 0) / 2); - - /* - # Backdrop position - - Our goal is to scale the backdrop to cover the whole viewport and - position it such that the motif area is centered in the viewport - as much as possible. - - We could have given the backdrop viewport-size and controlled its - position via `background-size: cover` and `background-position`. - Since `calc` only allows dividing by (unit-less) numbers, we could - not find a way to calculate the (unit-less) background position - from our pixel-based backdrop dimensions. - - Instead, we handle two cases: - - (A) The aspect ratio of the viewport (= width / height) is _smaller_ - than the aspect ratio of the backdrop image or video. - - (B) The aspect ratio of the viewport (= width / height) is _greater_ - than the aspect ratio of the backdrop image or video. - - Note that, in case (A) the backdrop's height has to be equal to - the viewport height: - - bbvvvvvvbb v = viewport - bbvvvvvvbb b = backdrop - bbvvvvvvbb - bbvvvvvvbb - bbvvvvvvbb - - In case (B) the backdrop's width has to be equal to the viewport - width: - - bbbbbbbbbb v = viewport - vvvvvvvvvv b = backdrop - vvvvvvvvvv - vvvvvvvvvv - bbbbbbbbbb - - In both cases, we want to set the other dimension of the backdrop - such that the backdrop's aspect ratio is preserved, wrap the - backdrop in an `overflow: hidden` container and use CSS - `translate` transforms to position the backdrop inside that - container. - - We can calculate the desired backdrop dimensions and translation - based only on the size of the viewport (using viewport units) and - the backdrops aspect ratio (which we read from custom properties - set in inline styles). - - We'll end up with two sets of custom properties: - - --backdrop-positioner-transform - --backdrop-positioner-width - --backdrop-positioner-height - - and - - --backdrop-positioner-min-ar-transform - --backdrop-positioner-min-ar-width - --backdrop-positioner-min-ar-height - - where `min-ar` stands for `min-aspect-ratio`, i.e. case (B). - - In `useBackdropSectionClassNames`, we set a CSS class on each - section which corresponds to the aspect ratio of its backdrop - image or video. For example, with a 4:3 image, we set the class - `apsectRatio1333` (4 / 3 * 1000 = 1333). - - In server side rendering (see - PageflowScrolled::GeneratedMediaQueriesHelper), we generate an - aspect-ratio media query for each such class, which re-assigns the - custom properties to use the `min-ar` values instead to switch - between cases: - - @media (min-aspect-ratio: 1333/1000) { - section.aspectRatio1333 { - --backdrop-positioner-transform: var(--backdrop-positioner-min-ar-transform); - --backdrop-positioner-width: var(--backdrop-positioner-min-ar-width); - --backdrop-positioner-height: var(--backdrop-positioner-min-ar-height); - } - } - - We can then use these media query dependant properties in further - calculations. - - ## Small viewport aspect ratio (A) - - Since we know that the backdrop will be 100vh high, we can - calculate its width based on the backdrop's aspect ratio: - */ - - --backdrop-display-width: calc(var(--backdrop-width) * 100 * var(--vh) / - var(--backdrop-height)); - --motif-display-center-x: calc(var(--motif-center-x) / 100 * - var(--backdrop-display-width)); - - /* - We'll give the backdrop the calculated width, causing it to - overflow to the right. Our goal is to center the (center of the) - motif area in the viewport. If we did not care about covering the - viewport, translating by - - X = var(--motif-display-center-x) * -1 + 50vw - - would be enough. If we translate by a positive value, though, the - backdrop will no longer cover the viewport on the left. If, we - translate by a value smaller than - - M = 100vw - var(--backdrop-display-width) - - it will not cover on the right. Overall this gives us a - translation of: - */ - - --backdrop-translate-x: min( - 0px, - max( - /* M: */ 100 * var(--vw) - var(--backdrop-display-width), - /* X: */ var(--motif-display-center-x) * -1 + 50 * var(--vw) - ) - ); - - --backdrop-positioner-transform: translateX(var(--backdrop-translate-x)); - --backdrop-positioner-width: var(--backdrop-display-width); - --backdrop-positioner-height: 100%; - - /* - ## Large viewport aspect ratio (B) - - The following calculations follow exactly the same pattern as - above, only with width and height interchanged. - */ - - --backdrop-display-height: calc(var(--backdrop-height) * 100 * var(--vw) / - var(--backdrop-width)); - --motif-display-center-y: calc(var(--motif-center-y) / 100 * - var(--backdrop-display-height)); - - --backdrop-translate-y: min( - 0px, - max( - /* M: */ calc(100 * var(--vh) - var(--backdrop-display-height)), - /* Y: */ calc(var(--motif-display-center-y) * -1 + 50 * var(--vh)) - ) - ); - - --backdrop-positioner-min-ar-transform: translateY(var(--backdrop-translate-y)); - --backdrop-positioner-min-ar-width: calc(100 * var(--vw)); - --backdrop-positioner-min-ar-height: var(--backdrop-display-height); - - /* - # Motif Area Display Position - - Following the same approach, we calculate height, top and bottom - of the motif area as it is displayed in the backdrop. We again - distinguish between cases (A) and (B) with separate `min-ar` - properties, which again will be assigned in the generated media - queries. - */ - - --motif-display-height: calc(var(--motif-height) * var(--vh)); - --motif-display-min-ar-height: calc( - var(--motif-height) / 100 * var(--backdrop-display-height) - ); - - /* - In the first section, there might already be a padding to prevent - the foreground from being hidden behind a navigation widget. By by - accounting for this padding, we translate values into the - coordinate system of the section. - */ - - --motif-display-top: calc(var(--motif-top) * var(--vh) - - var(--foreground-padding-top)); - --motif-display-min-ar-top: calc( - var(--motif-top) / 100 * var(--backdrop-display-height) + - var(--backdrop-translate-y) - - var(--foreground-padding-top) - ); - - --motif-display-bottom: calc(var(--motif-bottom) * var(--vh) + - var(--foreground-padding-top)); - --motif-display-min-ar-bottom: calc( - var(--motif-bottom) / 100 * var(--backdrop-display-height) - - var(--backdrop-display-height) + 100 * var(--vh) - - var(--backdrop-translate-y) + - var(--foreground-padding-top) - ); - - /* - # Section min-height - - For sections with dynamic height, we want to ensure, that the - section is tall enough, such that the motif area can become - visible. The required height, depends on the configured enter and - exit transitions. The resulting properties are used in - `useMotifAreaState`. - - ## Reveal/Conceal - - Ensure section is tall enough to reveal the full height of the - motif area once the section passes it: - */ - --motif-min-height-reveal-conceal: var(--motif-display-height); - - /* - ## Reveal - - Ensure backdrop can be revealed far enough before the section - starts scrolling: - */ - --motif-min-height-reveal: calc(var(--motif-display-bottom) + - var(--motif-display-height)); - - /* - ## Scroll In - - Ensure motif is visible in scrolled in section: - */ - --motif-min-height-scroll-in: calc(var(--motif-display-top) + - var(--motif-display-height)); -} - -@supports not (transform: translateX(min(0px, 5px))) { - /* - If the browser does not support min/max functions, position - background based on motif center. - */ - .section { - --backdrop-translate-x: calc( - (100 * var(--vw) - var(--backdrop-display-width)) * - var(--motif-center-x) / 100 - ); - - --backdrop-translate-y: calc( - (100 * var(--vh) - var(--backdrop-display-height)) * - var(--motif-center-y) / 100 - ); - } -} - -.exposeMotifArea { - /* - ## Content padding - - If the section has content and the `exposeMotifArea` option has - been activated, we want to shift the content down to prevent it - from overlaying the motif area once we enter the section. - - Depending on which enter and exit transitions have been - configured, different amounts of padding make sense. See below. - - Still, if the section uses layout `left` or `right` and the - viewport is wide enough to allow displaying the motif area next to - the content, we do not want to apply a padding. - - We, therefore, compute a value that is zero if there is enough - space for a two-column layout and has an arbitrary large value - otherwise. Applying the `min` function, we can use this value to - reset the padding to 0 in two-column layouts - - Since we never want to reset the padding in a centered layout, we - set default widths, which ensure that there is never a remaining - width. These properties are overridden by layout-specific classes - below. - */ - --inline-content-max-width: calc(100 * var(--vw)); - --motif-placeholder-width: calc(100 * var(--vw)); - --motif-placeholder-min-ar-width: calc(100 * var(--vw)); - - /* Motif fits next to inline content if remaining-width is positive. - - Example for layout "left": - - 100vw - |-----------------------| - |-|========| |xxxxx...| - ^ ^ ^ ^ - | | | | - | | | motif-placeholder-width - | | remaining-width - | inline-content-max-width - 8% section padding - */ - --remaining-width: calc( - 100 * var(--vw) - - var(--inline-content-max-width) - - 8 * var(--vw) - - var(--motif-placeholder-width) - ); - - /* - If --remaining-width is non-negative, this will be 0, causing the - motif paddings below to be 0 as well. If --remaining-width is - negative, this will be a large value, causing the motif paddings - to be controlled by the motif display dimensions. - */ - --zero-if-two-column: max(0px, var(--remaining-width) * -10000); - - /* - If --remaining-width is negative, this will be 0. If - --remaining-width is non-negative, this will be large value. This - value hide the static shadow by resetting its height to 0 if motif - is displayed before the content. - */ - --zero-if-motif-intersecting: max(0px, (var(--remaining-width) + 1px) * 10000); - - /* - We now compute appropriate paddings for different enter - transitions. The resulting properties are used in - `useMotifAreaState`. - - ## Fade In - - Once the section has become active, the backdrop becomes visible - all at once. Motif area aware background positioning ensures that - the motif area is within the viewport. Still, when scrolling fast, - the top of the section will already have reached the top of the - viewport once the fade transitions ends. - - If the motif area is at the top of the backdrop, adding its height - as padding is enough to ensure that the content does not - immediately start intersecting. - - If the motif area is at the bottom of the backdrop, additional - padding is needed to prevent the content from hiding the motif - right at the start. Adding the full top distance of the motif - area, though, means a full viewport height has to be scrolled by - after the content of the previous section has been faded out - before the content of the section enters the viewport. - Subjectively, this feels like to little feedback that more content - is coming. We therefore reduce the additional distance by a third. - */ - --motif-padding-fade-in: min(var(--zero-if-two-column), - var(--motif-display-top) * 2 / 3 - + var(--motif-display-height)); - /* - ## Reveal - - The backdrop remains in a fixed position while the content is - being scrolled in. Shifting the content down by the height of the - motif area means the motif area will be completely visible when - the top of the section aligns with the top of the motif area. - - For exit transition `scrollOut`, the min height determined below, - ensures that the top of the section can actually reach that - position before the section begins to scroll. - */ - --motif-padding-reveal: min(var(--zero-if-two-column), - var(--motif-display-height)); - - /* - ## Scroll In - - In the remaining `scrollIn` case, content and backdrop move in - together. We need to shift content down below the motif. - */ - --motif-padding-scroll-in: min(var(--zero-if-two-column), - var(--motif-display-top) + var(--motif-display-height)); -} - -@supports not (transform: translateX(min(0px, 5px))) { - /* - If the browser does not support min/max functions, fallback to - never using two column layout. - */ - .exposeMotifArea { - --zero-if-two-column: none; - --zero-if-motif-intersecting: 0px; - - --motif-padding-fade-in: calc(var(--motif-display-top) * 2 / 3 + - var(--motif-display-height)); - --motif-padding-reveal: var(--motif-display-height); - --motif-padding-scroll-in: calc(var(--motif-display-top) + - var(--motif-display-height)); - } -} - -.layout-left, -.layout-right { - --inline-content-max-width: var(--two-column-inline-content-max-width, 500px); -} - -.layout-left { - --backdrop-overflow-h: calc(var(--backdrop-display-width) - 100 * var(--vw)); - - /* - With layout `left`, we want to know how much space the motif takes - up on the right side of the viewport. If the backdrop overflows - horizontally (A), we can calculate this value as: - - ......oooooooXXXooooooo...... - |--------| <-- motif-placeholder-width - |--------------| <-- (motif-right + motif-width) * - backdrop-display-width - |----| |----| <-- backdrop-overflow-h - |----| <-- -(backdrop-translate-x) - - Legend: - .: Part of the backdrop image outside viewport - o: Part of the backdrop image inside viewport - X: Motif area - */ - --motif-placeholder-width: calc((var(--motif-right) + var(--motif-width)) / 100 * - var(--backdrop-display-width) - - var(--backdrop-overflow-h) - - var(--backdrop-translate-x)); - - /* - If the backdrop overflows vertically (B), things are simpler: - */ - --motif-placeholder-min-ar-width: calc((var(--motif-right) + var(--motif-width)) * - var(--vw)); -} - -.layout-right { - /* - With layout `right`, we want to know how much space the motif - takes up on the left side of the viewport. - */ - --motif-placeholder-width: calc((var(--motif-left) + var(--motif-width)) / 100 * - var(--backdrop-display-width) + - var(--backdrop-translate-x)); - --motif-placeholder-min-ar-width: calc((var(--motif-left) + var(--motif-width)) * - var(--vw)); -} diff --git a/entry_types/scrolled/package/src/frontend/v2/index.js b/entry_types/scrolled/package/src/frontend/v2/index.js deleted file mode 100644 index 1c56de1453..0000000000 --- a/entry_types/scrolled/package/src/frontend/v2/index.js +++ /dev/null @@ -1,5 +0,0 @@ -export {Backdrop} from './Backdrop'; -export {useMotifAreaState} from './useMotifAreaState'; -export {useBackdrop} from './useBackdrop'; -export {useBackdropSectionCustomProperties} from './useBackdropSectionCustomProperties'; -export {useBackdropSectionClassNames} from './useBackdropSectionClassNames'; diff --git a/entry_types/scrolled/package/src/frontend/v2/useBackdrop.js b/entry_types/scrolled/package/src/frontend/v2/useBackdrop.js deleted file mode 100644 index 8b99ca6c61..0000000000 --- a/entry_types/scrolled/package/src/frontend/v2/useBackdrop.js +++ /dev/null @@ -1,53 +0,0 @@ -import {useFile} from '../../entryState'; - -export function useBackdrop({backdrop, backdropEffects, backdropEffectsMobile}) { - const videoFile = useBackdropFile({ - permaId: backdrop.video, - collectionName: 'videoFiles', - motifArea: backdrop.videoMotifArea, - effects: backdropEffects - }); - const imageFile = useBackdropFile({ - permaId: backdrop.image, - collectionName: 'imageFiles', - motifArea: backdrop.imageMotifArea, - effects: backdropEffects - }); - const mobileImageFile = useBackdropFile({ - permaId: backdrop.imageMobile, - collectionName: 'imageFiles', - motifArea: backdrop.imageMobileMotifArea, - effects: backdropEffectsMobile - }); - - if (videoFile) { - return { - type: 'video', - file: videoFile - }; - } - if (backdrop.color || - (backdrop.image && backdrop.image.toString().startsWith('#'))) { - return { - type: 'color', - color: backdrop.color || backdrop.image - }; - } - else { - return { - type: 'image', - file: imageFile || mobileImageFile, - mobileFile: imageFile && mobileImageFile - }; - } -} - -export function useBackdropFile({permaId, collectionName, motifArea, effects}) { - const file = useFile({permaId, collectionName}); - - return file && { - ...file, - motifArea, - effects - }; -} diff --git a/entry_types/scrolled/package/src/frontend/v2/useBackdropSectionClassNames.js b/entry_types/scrolled/package/src/frontend/v2/useBackdropSectionClassNames.js deleted file mode 100644 index bc0bb878ec..0000000000 --- a/entry_types/scrolled/package/src/frontend/v2/useBackdropSectionClassNames.js +++ /dev/null @@ -1,118 +0,0 @@ -import {useIsomorphicLayoutEffect} from '../useIsomorphicLayoutEffect'; -import {useFullscreenDimensions} from '../Fullscreen'; - -import styles from './Section.module.css'; - -export function useBackdropSectionClassNames( - backdrop, - {layout, exposeMotifArea, empty} = {} -) { - const fullscreenDimensions = useFullscreenDimensions(); - - return [ - styles.section, - !fullscreenDimensions.height && styles.orientation, - styles[`layout-${layout || 'left'}`], - exposeMotifArea && !empty && styles.exposeMotifArea, - useAspectRatioClassName(backdrop.file, - fullscreenDimensions), - useAspectRatioClassName(backdrop.mobileFile, - fullscreenDimensions, - {mobile: true}) - ].filter(Boolean); -} - -function useAspectRatioClassName( - file, fullscreenDimensions, {mobile} = {} -) { - const aspectRatio = file && file.isReady && getAspectRatio(file); - const className = getAspectRatioClassName(aspectRatio, - fullscreenDimensions, - mobile); - - useAspectRatioStyleTag( - aspectRatio, - className, - {orientation: mobile ? '(orientation: portrait) and ' : ''} - ); - - return className; -} - -function getAspectRatioClassName(aspectRatio, fullscreenDimensions, mobile) { - if (fullscreenDimensions.height) { - return (!mobile || isPortrait(fullscreenDimensions)) && - hasAspectRatio(fullscreenDimensions, {min: aspectRatio}) && - 'minAspectRatio'; - } - else { - const suffix = mobile ? 'Mobile' : ''; - return aspectRatio && `aspectRatio${suffix}${aspectRatio}`; - } -} - -function hasAspectRatio(rect, {min}) { - return min && (getAspectRatio(rect) > min); -} - -function isPortrait(rect) { - return rect.width < rect.height; -} - -function getAspectRatio(rect) { - return Math.round(rect.width / rect.height * 1000); -} - -function useAspectRatioStyleTag(aspectRatio, className, {orientation}) { - useIsomorphicLayoutEffect(() => { - // global variable is set in script tag inserted by - // GeneratedMediaQueriesHelper when style tags have been rendered - // on the server - if (!global.pageflowScrolledSSRAspectRatioMediaQueries && - aspectRatio && - className) { - ensureAspectRatioStyleTag(aspectRatio, className, orientation) - } - }, [aspectRatio, className]); -} - -function ensureAspectRatioStyleTag(aspectRatio, className, orientation) { - if (!document.head.querySelector(`[data-for="${className}"]`)) { - const el = document.createElement('style'); - el.setAttribute('data-for', className); - el.innerHTML = getAspectRatioCSS(aspectRatio, className, orientation); - - document.head.appendChild(el); - } -} - -function getAspectRatioCSS(aspectRatio, className, orientation) { - if (className === 'minAspectRatio') { - return getAspectRatioRule('minAspectRatio'); - } - else { - return ` - @media ${orientation}(min-aspect-ratio: ${aspectRatio}/1000) { - ${getAspectRatioRule(className)} - } - `; - } -} - -function getAspectRatioRule(className) { - // WARNING: This CSS snippet needs to be kept in sync with the - // corresponding snippet in GeneratedMediaQueriesHelper - return ` - section.${className} { - --backdrop-positioner-transform: var(--backdrop-positioner-min-ar-transform); - --backdrop-positioner-width: var(--backdrop-positioner-min-ar-width); - --backdrop-positioner-height: var(--backdrop-positioner-min-ar-height); - - --motif-placeholder-width: var(--motif-placeholder-min-ar-width); - - --motif-display-top: var(--motif-display-min-ar-top); - --motif-display-bottom: var(--motif-display-min-ar-bottom); - --motif-display-height: var(--motif-display-min-ar-height); - } - `; -} diff --git a/entry_types/scrolled/package/src/frontend/v2/useBackdropSectionCustomProperties.js b/entry_types/scrolled/package/src/frontend/v2/useBackdropSectionCustomProperties.js deleted file mode 100644 index 0cbb949b2b..0000000000 --- a/entry_types/scrolled/package/src/frontend/v2/useBackdropSectionCustomProperties.js +++ /dev/null @@ -1,29 +0,0 @@ -export function useBackdropSectionCustomProperties(backdrop) { - return { - ...backdropFileCustomProperties(backdrop.file), - ...backdropFileCustomProperties(backdrop.mobileFile, 'mobile'), - } -} - -function backdropFileCustomProperties(backdropFile, prefix) { - if (!backdropFile || !backdropFile.isReady) { - return {} - } - - prefix = prefix ? `${prefix}-` : ''; - - return backdropFile ? { - [`--${prefix}backdrop-w`]: backdropFile.width, - [`--${prefix}backdrop-h`]: backdropFile.height, - ...motifAreaCustomProperties(backdropFile.motifArea, prefix) - } : {}; -} - -function motifAreaCustomProperties(motifArea, prefix) { - return motifArea ? { - [`--${prefix}motif-t`]: motifArea.top, - [`--${prefix}motif-l`]: motifArea.left, - [`--${prefix}motif-w`]: motifArea.width, - [`--${prefix}motif-h`]: motifArea.height - } : {}; -} diff --git a/entry_types/scrolled/package/src/frontend/v2/useBackgroundFile.js b/entry_types/scrolled/package/src/frontend/v2/useBackgroundFile.js deleted file mode 100644 index d9d703b4d7..0000000000 --- a/entry_types/scrolled/package/src/frontend/v2/useBackgroundFile.js +++ /dev/null @@ -1,33 +0,0 @@ -/** - * Extend image or video file with position/motif area related - * properties that are needed to use the file as a section backdrop. - * - * The added properties are: - * - * `motifArea`: Either the passed motif area object or the motif area - * from the legacy file configuration if no motif area has been - * passed. - * - * `effects`: List of backdrop effects to apply. - * - * @param {Object} options - * @param {Object} options.file - Image or video file obtained via - * `useFile`. - * @param {Object} options.motifArea - Section specific setting - * specifying motif area rect in percent. - * @param {Object[]} options.effects - List of backdrop effects. - * - * @private - */ -export function useBackgroundFile({file, motifArea, effects}) { - if (!file) { - return null ; - } - - return { - ...file, - cropPosition: {x: 0, y: 0}, - motifArea, - effects - }; -} diff --git a/entry_types/scrolled/package/src/frontend/v2/useMotifAreaState.js b/entry_types/scrolled/package/src/frontend/v2/useMotifAreaState.js deleted file mode 100644 index b67648db37..0000000000 --- a/entry_types/scrolled/package/src/frontend/v2/useMotifAreaState.js +++ /dev/null @@ -1,108 +0,0 @@ -import useBoundingClientRect from '../useBoundingClientRect'; - -/** - * Handles the state of the section layout based on the current - * position of content and motif area. Returns an array of the form: - * - * [ - * { - * isContentPadded, // true if motif and content will - * // not fit side by side. - * - * intersectionRatioY, // Ratio of the motif area that is - * // covered by the content given the - * // current scroll position if motif - * // is exposed. - * - * paddingTop, // Distance to shift down the content - * // to ensure the motif area can be - * // seen when entering the section. - * - * minHeight, // Min Height of the section to ensure - * // the motif area can be seen. - * }, - * setMotifAreaRectRef, // Assign motif area element that shall be - * // measured. - * - * setContentAreaRef // Assign content area element that - * // shall be measured. - * ] - * - * @param {Object} options - * @param {string[]} transitions - Names of the section's enter and exit - * transitions. - * @param {boolean} fullHeight - Whether the section has full or dynamic - * height. - * @param {boolean} empty - Whether the section contains content - * elements. - * @param {boolean} exposeMotifArea - Whether to pad content down if it - * would otherwise intersect with the motif area. - * - * @private - */ -export function useMotifAreaState({ - transitions, fullHeight, empty, exposeMotifArea, updateOnScrollAndResize -} = {}) { - const [motifAreaRect, setMotifAreaRectRef] = useBoundingClientRect({ - updateOnScrollAndResize - }); - - const [contentAreaRect, setContentAreaRef] = useBoundingClientRect({ - updateOnScrollAndResize - }); - - const isContentPadded = exposeMotifArea && - motifAreaRect.height > 0 && - !empty; - - return [ - { - paddingTop: getMotifAreaPadding(transitions), - minHeight: getMotifAreaMinHeight(fullHeight, transitions), - intersectionRatioY: getIntersectionRatioY( - isContentPadded, motifAreaRect, contentAreaRect - ) - }, - setMotifAreaRectRef, - setContentAreaRef - ]; -} - -function getMotifAreaPadding(transitions) { - if (transitions[0] === 'fadeIn' || transitions[0] === 'fadeInBg') { - return 'var(--motif-padding-fade-in)'; - } - if (transitions[0] === 'reveal') { - return 'var(--motif-padding-reveal)'; - } - else { - return 'var(--motif-padding-scroll-in)'; - } -} - -function getMotifAreaMinHeight(fullHeight, transitions) { - if (fullHeight) { - return; - } - - if (transitions[0] === 'reveal') { - if (transitions[1] === 'conceal') { - return 'var(--motif-min-height-reveal-conceal)'; - } - else { - return 'var(--motif-min-height-reveal)'; - } - } - else { - return 'var(--motif-min-height-scroll-in)'; - } -} - -function getIntersectionRatioY(isContentPadded, motifAreaRect, contentAreaRect) { - const motifAreaOverlap = Math.max( - 0, - Math.min(motifAreaRect.height, - motifAreaRect.bottom - contentAreaRect.top) - ); - return isContentPadded ? motifAreaOverlap / motifAreaRect.height : 0; -} diff --git a/entry_types/scrolled/package/src/testHelpers/normalizeSeed.js b/entry_types/scrolled/package/src/testHelpers/normalizeSeed.js index a725ec4938..2829db9ad9 100644 --- a/entry_types/scrolled/package/src/testHelpers/normalizeSeed.js +++ b/entry_types/scrolled/package/src/testHelpers/normalizeSeed.js @@ -94,9 +94,7 @@ export function normalizeSeed({ defaultFileRights: defaultFileRights, legalInfo: normalizeLegalInfo(legalInfo), theme: normalizeTheme({themeOptions, themeAssets, themeTranslations}), - additionalSeedData: additionalSeedData || { - frontendVersion: 1 - }, + additionalSeedData: additionalSeedData || {}, consentVendors: consentVendors || [], contentElementConsentVendors: contentElementConsentVendors || {}, cutOff, From 06da21c1ecaff216988ee0708fb882b87332cc0e Mon Sep 17 00:00:00 2001 From: Tim Fischbach Date: Thu, 2 Apr 2026 16:28:20 +0200 Subject: [PATCH 2/2] Remove frontend_v2 feature flag from Ruby The frontend v2 experiment has been removed from the JS side. Clean up the corresponding Ruby feature registration, seed data lambda, SSR media query generation, translations and specs. REDMINE-21261 --- .../generated_media_queries_helper.rb | 55 ------------ .../pageflow_scrolled/entries/show.html.erb | 3 - entry_types/scrolled/config/locales/de.yml | 2 - entry_types/scrolled/config/locales/en.yml | 2 - .../scrolled/lib/pageflow_scrolled/plugin.rb | 14 --- .../entries_controller_spec.rb | 11 --- .../editor/seed_html_helper_spec.rb | 13 --- .../generated_media_queries_helper_spec.rb | 87 ------------------- .../spec/pageflow_scrolled/plugin_spec.rb | 35 -------- 9 files changed, 222 deletions(-) delete mode 100644 entry_types/scrolled/app/helpers/pageflow_scrolled/generated_media_queries_helper.rb delete mode 100644 entry_types/scrolled/spec/helpers/pageflow_scrolled/generated_media_queries_helper_spec.rb diff --git a/entry_types/scrolled/app/helpers/pageflow_scrolled/generated_media_queries_helper.rb b/entry_types/scrolled/app/helpers/pageflow_scrolled/generated_media_queries_helper.rb deleted file mode 100644 index 24b3313156..0000000000 --- a/entry_types/scrolled/app/helpers/pageflow_scrolled/generated_media_queries_helper.rb +++ /dev/null @@ -1,55 +0,0 @@ -module PageflowScrolled - # @api private - module GeneratedMediaQueriesHelper - def generated_media_queries_tags_for(html) - safe_join( - [ - content_tag(:script, - 'window.pageflowScrolledSSRAspectRatioMediaQueries = true;'), - content_tag(:style, - generated_media_queries_css_for(html)) - ] - ) - end - - def generated_media_queries_css_for(html) - aspect_ratio_class_strings = html.scan(/class="[^"]*aspectRatio[^"]*"/) - - ratio_classes = - aspect_ratio_class_strings - .flat_map { |s| s.scan(/aspectRatio(Mobile)?([0-9]+)/) } - .uniq - - ratio_classes.map { |match| - generated_aspec_ratio_media_query( - mobile_suffix: match[0], - numerator: match[1] - ) - }.join - end - - private - - def generated_aspec_ratio_media_query(numerator:, mobile_suffix:) - orientation = mobile_suffix ? '(orientation: portrait) and ' : '' - - # WARNING: This CSS snippet needs to be kept in sync with the - # corresponding snippet in useBackdropSectionClassName hook - <<-CSS - @media #{orientation}(min-aspect-ratio: #{numerator}/1000) { - section.aspectRatio#{mobile_suffix}#{numerator} { - --backdrop-positioner-transform: var(--backdrop-positioner-min-ar-transform); - --backdrop-positioner-width: var(--backdrop-positioner-min-ar-width); - --backdrop-positioner-height: var(--backdrop-positioner-min-ar-height); - - --motif-placeholder-width: var(--motif-placeholder-min-ar-width); - - --motif-display-top: var(--motif-display-min-ar-top); - --motif-display-bottom: var(--motif-display-min-ar-bottom); - --motif-display-height: var(--motif-display-min-ar-height); - } - } - CSS - end - end -end diff --git a/entry_types/scrolled/app/views/pageflow_scrolled/entries/show.html.erb b/entry_types/scrolled/app/views/pageflow_scrolled/entries/show.html.erb index 998bb99ef2..c00a751438 100644 --- a/entry_types/scrolled/app/views/pageflow_scrolled/entries/show.html.erb +++ b/entry_types/scrolled/app/views/pageflow_scrolled/entries/show.html.erb @@ -37,9 +37,6 @@ <% ssr_html = local_assigns[:skip_ssr] ? '' : render_scrolled_entry(entry, local_assigns[:seed_options] || {}) %> - <% if !local_assigns[:skip_ssr] && (params[:frontend] == 'v2' || entry.feature_state('frontend_v2')) %> - <%= generated_media_queries_tags_for(ssr_html) %> - <% end %> <%= structured_data_for_entry(entry) unless local_assigns[:skip_structured_data] %> diff --git a/entry_types/scrolled/config/locales/de.yml b/entry_types/scrolled/config/locales/de.yml index 0afa3c57b3..10ad075a44 100644 --- a/entry_types/scrolled/config/locales/de.yml +++ b/entry_types/scrolled/config/locales/de.yml @@ -67,8 +67,6 @@ de: values: large: Groß small: Klein - frontend_v2: - feature_name: Frontend v2 hls_instead_of_dash: feature_name: HLS statt DASH für Videos verwenden iconInlineFileRights: diff --git a/entry_types/scrolled/config/locales/en.yml b/entry_types/scrolled/config/locales/en.yml index d67631e39b..8bbc8d3281 100644 --- a/entry_types/scrolled/config/locales/en.yml +++ b/entry_types/scrolled/config/locales/en.yml @@ -67,8 +67,6 @@ en: values: large: Large small: Small - frontend_v2: - feature_name: Frontend v2 hls_instead_of_dash: feature_name: Use HLS instead of DASH for videos iconInlineFileRights: diff --git a/entry_types/scrolled/lib/pageflow_scrolled/plugin.rb b/entry_types/scrolled/lib/pageflow_scrolled/plugin.rb index eceba02c95..a63ec1e719 100644 --- a/entry_types/scrolled/lib/pageflow_scrolled/plugin.rb +++ b/entry_types/scrolled/lib/pageflow_scrolled/plugin.rb @@ -208,7 +208,6 @@ def configure(config) c.features.register('iframe_embed_content_element') c.features.register('social_embed_content_element') c.features.register('legacy_social_embed_content_elements') - c.features.register('frontend_v2') c.features.register('scrolled_entry_fragment_caching') c.features.register('backdrop_content_elements') c.features.register('custom_palette_colors') @@ -224,11 +223,6 @@ def configure(config) ) end - c.additional_frontend_seed_data.register( - 'frontendVersion', - FRONTEND_VERSION_SEED_DATA - ) - c.content_element_consent_vendors.register( IFRAME_EMBED_CONSENT_VENDOR, content_element_type_name: 'iframeEmbed' @@ -260,13 +254,5 @@ def configure(config) valid_providers.include?(provider) ? provider : nil end - - FRONTEND_VERSION_SEED_DATA = lambda do |request:, entry:, **| - if request.params[:frontend] == 'v2' || entry.feature_state('frontend_v2') - 2 - else - 1 - end - end end end diff --git a/entry_types/scrolled/spec/controllers/pageflow_scrolled/entries_controller_spec.rb b/entry_types/scrolled/spec/controllers/pageflow_scrolled/entries_controller_spec.rb index 9939dcc17c..0174d34408 100644 --- a/entry_types/scrolled/spec/controllers/pageflow_scrolled/entries_controller_spec.rb +++ b/entry_types/scrolled/spec/controllers/pageflow_scrolled/entries_controller_spec.rb @@ -62,17 +62,6 @@ module PageflowScrolled expect(response.body).to have_selector('a[href="https://example.com"][target="_top"]') end - it 'renders generated media queries if frontend v2' do - entry = create(:entry, :published, type_name: 'scrolled') - - get_with_entry_env(:show, entry:, params: {frontend: 'v2'}) - - expect(response.body) - .to have_selector('script', - visible: false, - text: 'pageflowScrolledSSRAspectRatioMediaQueries') - end - it 'renders widget head fragments' do widget_type = Pageflow::TestWidgetType .new(name: 'test_widget', diff --git a/entry_types/scrolled/spec/helpers/pageflow_scrolled/editor/seed_html_helper_spec.rb b/entry_types/scrolled/spec/helpers/pageflow_scrolled/editor/seed_html_helper_spec.rb index 288c8bb217..3fd827a1fc 100644 --- a/entry_types/scrolled/spec/helpers/pageflow_scrolled/editor/seed_html_helper_spec.rb +++ b/entry_types/scrolled/spec/helpers/pageflow_scrolled/editor/seed_html_helper_spec.rb @@ -65,19 +65,6 @@ module Editor visible: false) end - it 'does not render generated media queries if frontend v2' do - entry = create(:published_entry, - type_name: 'scrolled', - with_feature: 'frontend_v2') - - result = helper.scrolled_editor_iframe_seed_html_script_tag(entry) - - expect(result) - .not_to have_selector('script', - visible: false, - text: 'pageflowScrolledSSRAspectRatioMediaQueries') - end - it 'does not render collections seed data' do entry = create(:published_entry, type_name: 'scrolled') create(:section, revision: entry.revision) diff --git a/entry_types/scrolled/spec/helpers/pageflow_scrolled/generated_media_queries_helper_spec.rb b/entry_types/scrolled/spec/helpers/pageflow_scrolled/generated_media_queries_helper_spec.rb deleted file mode 100644 index 1dfe454fca..0000000000 --- a/entry_types/scrolled/spec/helpers/pageflow_scrolled/generated_media_queries_helper_spec.rb +++ /dev/null @@ -1,87 +0,0 @@ -require 'spec_helper' - -module PageflowScrolled - RSpec.describe GeneratedMediaQueriesHelper, type: :helper do - describe 'generated_media_queries_tags_for' do - it 'includes script tag that sets global js variable' do - html = helper.generated_media_queries_tags_for('
') - - expect(html) - .to( - have_selector( - 'script', - visible: false, - text: 'window.pageflowScrolledSSRAspectRatioMediaQueries = true' - ) - ) - end - - it 'includes style tag with generated media queries' do - ssr_html = '
' - - html = helper.generated_media_queries_tags_for(ssr_html) - - expect(html) - .to( - have_selector( - 'style', - visible: false, - text: '.aspectRatio1333 {' - ) - ) - end - end - - describe 'generated_media_queries_css_for' do - it 'generates rule in media queries for aspectRatio classes' do - html = '
' - - css = helper.generated_media_queries_css_for(html) - - expect(css).to include('@media (min-aspect-ratio: 1333/1000)') - expect(css).to include('.aspectRatio1333 {') - expect(css).to include('--backdrop-positioner-transform: ' \ - 'var(--backdrop-positioner-min-ar-transform);') - end - - it 'generates mobile rule in media queries for aspectRatio classes' do - html = '
' - - css = helper.generated_media_queries_css_for(html) - - expect(css) - .to include('@media (orientation: portrait) and (min-aspect-ratio: 1333/1000)') - expect(css).to include('.aspectRatioMobile1333 {') - expect(css).to include('--backdrop-positioner-transform: ' \ - 'var(--backdrop-positioner-min-ar-transform);') - end - - it 'generates mutliple rules for element with multiple classes' do - html = '
' - - css = helper.generated_media_queries_css_for(html) - - expect(css) - .to include('@media (min-aspect-ratio: 750/1000)') - expect(css) - .to include('@media (orientation: portrait) and (min-aspect-ratio: 1333/1000)') - end - - it 'does not generate duplicate rules' do - html = '
' - - css = helper.generated_media_queries_css_for(html) - - expect(css.scan('@media (min-aspect-ratio: 750/1000)').size).to eq(1) - end - - it 'ignores strings outside class attributes' do - html = '
aspectRatio1333
' - - css = helper.generated_media_queries_css_for(html) - - expect(css).to be_empty - end - end - end -end diff --git a/entry_types/scrolled/spec/pageflow_scrolled/plugin_spec.rb b/entry_types/scrolled/spec/pageflow_scrolled/plugin_spec.rb index 34f6e7ef59..595a86426f 100644 --- a/entry_types/scrolled/spec/pageflow_scrolled/plugin_spec.rb +++ b/entry_types/scrolled/spec/pageflow_scrolled/plugin_spec.rb @@ -2,41 +2,6 @@ module PageflowScrolled RSpec.describe Plugin do - describe 'FRONTEND_VERSION_SEED_DATA' do - it 'returns 1 by default' do - entry = create(:entry) - - result = Plugin::FRONTEND_VERSION_SEED_DATA.call(request:, - entry:) - - expect(result).to eq(1) - end - - it 'returns 2 if motif params is set to v2' do - entry = create(:entry) - - result = Plugin::FRONTEND_VERSION_SEED_DATA.call( - request: request('https://example.com/some-entry?frontend=v2'), - entry: - ) - - expect(result).to eq(2) - end - - it 'returns 2 if frontend_v2 feature is enabled for entry' do - entry = create(:entry, with_feature: 'frontend_v2') - - result = Plugin::FRONTEND_VERSION_SEED_DATA.call(request:, - entry:) - - expect(result).to eq(2) - end - - def request(uri = 'https://example.com/some-entry') - ActionDispatch::Request.new(Rack::MockRequest.env_for(uri)) - end - end - describe 'IFRAME_EMBED_CONSENT_VENDOR' do it 'returns nil if consent not required' do pageflow_configure do |config|