Use width instead position in content elements

REDMINE-20384
codevise · Aug 29, 2023 · 411a8ea · 411a8ea
1 parent ae22d44
commit 411a8ea
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 21 deletions.
diff --git a/entry_types/scrolled/package/src/contentElements/counter/Counter.js b/entry_types/scrolled/package/src/contentElements/counter/Counter.js
@@ -8,12 +8,13 @@ import {
   useContentElementLifecycle,
   useI18n,
   useLocale,
-  paletteColor
+  paletteColor,
+  contentElementWidths
 } from 'pageflow-scrolled/frontend';
 
 import styles from './Counter.module.css';
 
-export function Counter({configuration, contentElementId, sectionProps}) {
+export function Counter({configuration, contentElementId, contentElementWidth, sectionProps}) {
   const updateConfiguration = useContentElementConfigurationUpdate();
   const locale = useLocale();
   const {t} = useI18n({locale: 'ui'});
@@ -100,7 +101,7 @@ export function Counter({configuration, contentElementId, sectionProps}) {
 
   return (
     <div className={classNames(
-      {[styles.center]: configuration.position === 'wide' || configuration.position === 'full'}
+      {[styles.center]: contentElementWidth > contentElementWidths.md}
     )}>
       <div className={classNames(
         styles.wrapper,

diff --git a/entry_types/scrolled/package/src/contentElements/counter/stories.js b/entry_types/scrolled/package/src/contentElements/counter/stories.js
@@ -1,5 +1,6 @@
 import '../frontend';
 import {storiesOfContentElement} from 'pageflow-scrolled/spec/support/stories';
+import {contentElementWidths} from 'pageflow-scrolled/frontend';
 
 storiesOfContentElement(module, {
   typeName: 'counter',
@@ -39,9 +40,9 @@ storiesOfContentElement(module, {
       }
     },
     {
-      name: 'Position Wide',
+      name: 'XL Width',
       configuration: {
-        position: 'wide'
+        width: contentElementWidths.xl
       }
     },
     {

diff --git a/entry_types/scrolled/package/src/contentElements/heading/Heading.js b/entry_types/scrolled/package/src/contentElements/heading/Heading.js
@@ -6,12 +6,13 @@ import {
   EditableInlineText,
   useContentElementConfigurationUpdate,
   useDarkBackground,
-  useI18n
+  useI18n,
+  contentElementWidths
 } from 'pageflow-scrolled/frontend';
 
 import styles from './Heading.module.css';
 
-export function Heading({configuration, sectionProps}) {
+export function Heading({configuration, sectionProps, contentElementWidth}) {
   const level = configuration.level || sectionProps.sectionIndex;
   const firstSectionInEntry = level === 0;
   const updateConfiguration = useContentElementConfigurationUpdate();
@@ -31,7 +32,7 @@ export function Heading({configuration, sectionProps}) {
                                darkBackground ? styles.light : styles.dark,
                                {[styles.forcePaddingTop]: forcePaddingTop},
                                {[styles[sectionProps.layout]]:
-                                 configuration.position === 'wide' ||
+                                 contentElementWidth > contentElementWidths.md ||
                                  sectionProps.layout === 'centerRagged'},
                                {[withShadowClassName]: !sectionProps.invert})}>
       <Text scaleCategory={getScaleCategory(configuration, firstSectionInEntry)}

diff --git a/entry_types/scrolled/package/src/contentElements/imageGallery/ImageGallery.js b/entry_types/scrolled/package/src/contentElements/imageGallery/ImageGallery.js
@@ -11,15 +11,17 @@ import {
   FullscreenViewer,
   Image,
   ToggleFullscreenCornerButton,
-  usePhonePlatform
+  usePhonePlatform,
+  contentElementWidths,
+  contentElementWidthName as widthName,
 } from 'pageflow-scrolled/frontend';
 
 import {ScrollButton} from './ScrollButton';
 import {useIntersectionObserver} from './useIntersectionObserver'
 
 import styles from './ImageGallery.module.css';
 
-export function ImageGallery({configuration, contentElementId, customMargin}) {
+export function ImageGallery({configuration, contentElementId, contentElementWidth, customMargin}) {
   const [visibleIndex, setVisibleIndex] = useState(-1);
   const isPhonePlatform = usePhonePlatform();
 
@@ -29,9 +31,10 @@ export function ImageGallery({configuration, contentElementId, customMargin}) {
       renderChildren={({enterFullscreen, isFullscreen}) =>
         <Scroller customMargin={customMargin}
                   configuration={configuration}
+                  contentElementWidth={contentElementWidth}
                   controlled={isFullscreen}
                   displayFullscreenToggle={!isPhonePlatform &&
-                                           configuration.position !== 'full' &&
+                                           contentElementWidth !== contentElementWidths.full &&
                                            configuration.enableFullscreenOnDesktop}
                   visibleIndex={visibleIndex}
                   setVisibleIndex={setVisibleIndex}
@@ -40,6 +43,7 @@ export function ImageGallery({configuration, contentElementId, customMargin}) {
       renderFullscreenChildren={({exitFullscreen}) => {
         return (
           <Scroller configuration={configuration}
+                    contentElementWidth={contentElementWidth}
                     visibleIndex={visibleIndex}
                     setVisibleIndex={setVisibleIndex}
                     displayFullscreenToggle={false}
@@ -57,6 +61,7 @@ function Scroller({
   onFullscreenEnter, onFullscreenExit,
   onBump,
   configuration,
+  contentElementWidth,
   controlled
 }) {
   const lastVisibleIndex = useRef(null);
@@ -132,7 +137,9 @@ function Scroller({
 
   return (
     <div className={classNames(styles.wrapper,
-                               styles[configuration.position],
+                               {[styles.wide]:
+                                 contentElementWidth === contentElementWidths.lg ||
+                                 contentElementWidth === contentElementWidths.xl},
                                {[styles.customMargin]: customMargin})}>
       <div className={styles.leftButton}>
         <ScrollButton direction="left"

diff --git a/entry_types/scrolled/package/src/contentElements/inlineImage/InlineImage.js b/entry_types/scrolled/package/src/contentElements/inlineImage/InlineImage.js
@@ -5,13 +5,14 @@ import {
   Image,
   ContentElementFigure,
   FitViewport,
+  contentElementWidths,
   useContentElementLifecycle,
   useFile,
   usePortraitOrientation,
   ExpandableImage
 } from 'pageflow-scrolled/frontend';
 
-export function InlineImage({contentElementId, configuration}) {
+export function InlineImage({contentElementId, contentElementWidth, configuration}) {
   const imageFile = useFile({
     collectionName: 'imageFiles', permaId: configuration.id
   });
@@ -28,35 +29,40 @@ export function InlineImage({contentElementId, configuration}) {
       <OrientationAwareInlineImage landscapeImageFile={imageFile}
                                    portraitImageFile={portraitImageFile}
                                    contentElementId={contentElementId}
+                                   contentElementWidth={contentElementWidth}
                                    configuration={configuration} />
     );
   }
   else {
     return (
       <ImageWithCaption imageFile={imageFile}
                         contentElementId={contentElementId}
+                        contentElementWidth={contentElementWidth}
                         configuration={configuration} />
     )
   }
 }
 
 function OrientationAwareInlineImage({landscapeImageFile, portraitImageFile,
-                                      contentElementId, configuration}) {
+                                      contentElementId, contentElementWidth,
+                                      configuration}) {
   const portraitOrientation = usePortraitOrientation();
   const imageFile = portraitOrientation && portraitImageFile ?
                     portraitImageFile : landscapeImageFile;
 
   return (
     <ImageWithCaption imageFile={imageFile}
                       contentElementId={contentElementId}
+                      contentElementWidth={contentElementWidth}
                       configuration={configuration} />
   );
 }
 
-function ImageWithCaption({imageFile, contentElementId, configuration}) {
+function ImageWithCaption({imageFile, contentElementId, contentElementWidth, configuration}) {
   const {shouldLoad} = useContentElementLifecycle();
-  const {enableFullscreen, position} = configuration;
-  const supportFullscreen = enableFullscreen && position !== "full";
+  const {enableFullscreen} = configuration;
+  const supportFullscreen = enableFullscreen &&
+                            contentElementWidth < contentElementWidths.full;
 
   return (
     <FitViewport file={imageFile}
@@ -71,7 +77,8 @@ function ImageWithCaption({imageFile, contentElementId, configuration}) {
               <Image imageFile={imageFile}
                      load={shouldLoad}
                      structuredData={true}
-                     variant={configuration.position === 'full' ? 'large' : 'medium'}
+                     variant={contentElementWidth === contentElementWidths.full ?
+                              'large' : 'medium'}
                      preferSvg={true} />
             </ExpandableImage>
           </FitViewport.Content>

diff --git a/entry_types/scrolled/package/src/contentElements/vrImage/VrImage.js b/entry_types/scrolled/package/src/contentElements/vrImage/VrImage.js
@@ -2,16 +2,17 @@ import React, {useRef, useState} from 'react';
 import {useAutoCruising} from './useAutoCruising';
 
 import {
+  contentElementWidths,
   useContentElementEditorState,
   useContentElementLifecycle,
   useFile,
   ContentElementBox,
   ContentElementFigure,
   Panorama,
-  FitViewport
+  FitViewport,
 } from 'pageflow-scrolled/frontend';
 
-export function VrImage({configuration}) {
+export function VrImage({configuration, contentElementWidth}) {
   const {shouldLoad} = useContentElementLifecycle();
   const {isEditable, isSelected} = useContentElementEditorState();
 
@@ -20,7 +21,7 @@ export function VrImage({configuration}) {
   return (
     <div style={{pointerEvents: isEditable && !isSelected ? 'none' : undefined}}>
       <FitViewport
-        aspectRatio={configuration.position === 'full' ? 0.5 : 0.75}>
+        aspectRatio={contentElementWidth === contentElementWidths.full ? 0.5 : 0.75}>
         <ContentElementBox>
           <ContentElementFigure configuration={configuration}>
             <FitViewport.Content>