- );
-}
-
-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,
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|