Add full-width embedded map support

Adjusts the embedded map preview and sample code to allow users to set the embedded map to full width, and implements sensible defaults when moving between full width and set width. Per a conversation with Scott, some small changes have been made to the styling of the size section of the embedded map settings. As part of updating the iframe code, also fixes a type in the iframe src url.
opensupplyhub · May 25, 2021 · 97ec214 · 97ec214
1 parent fa081c9
commit 97ec214
Show file tree

Hide file tree

Showing 5 changed files with 109 additions and 45 deletions.
diff --git a/src/app/src/components/EmbeddedMapCode.jsx b/src/app/src/components/EmbeddedMapCode.jsx
@@ -19,7 +19,7 @@ const styles = {
         background: 'rgb(240, 240, 240)',
         borderRadius: '0px',
         minHeight: '278px',
-        width: '360px',
+        width: '450px',
         display: 'flex',
         flexDirection: 'column',
         justifyContent: 'space-between',

diff --git a/src/app/src/components/EmbeddedMapConfig.jsx b/src/app/src/components/EmbeddedMapConfig.jsx
@@ -29,6 +29,42 @@ const styles = {
     },
 };
 
+const renderEmbeddedMap = ({ fullWidth, mapSettings, height, width }) =>
+    fullWidth ? (
+        <div>
+            <div
+                style={{
+                    position: 'relative',
+                    paddingTop: `${height}%`,
+                }}
+            >
+                <iframe
+                    src={getEmbeddedMapSrc(mapSettings)}
+                    frameBorder="0"
+                    allowFullScreen
+                    style={{
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        width: '100%',
+                        height: '100%',
+                    }}
+                    title="embedded-map"
+                />
+            </div>
+        </div>
+    ) : (
+        <iframe
+            src={getEmbeddedMapSrc(mapSettings)}
+            frameBorder="0"
+            style={{
+                width: `${width}px`,
+                height: `${height}px`,
+            }}
+            title="embedded-map"
+        />
+    );
+
 function EmbeddedMapConfig({
     user,
     embedConfig: { color, font, width, fullWidth, height },
@@ -93,17 +129,7 @@ function EmbeddedMapConfig({
                 style={{ ...styles.section, minHeight: '500px' }}
             >
                 <Typography style={styles.previewHeader}>Preview</Typography>
-                <iframe
-                    frameBorder="0"
-                    scrolling="no"
-                    marginHeight="0"
-                    marginWidth="0"
-                    width={width}
-                    height={height}
-                    type="text/html"
-                    src={getEmbeddedMapSrc(mapSettings)}
-                    title="embedded-map"
-                />
+                {renderEmbeddedMap({ fullWidth, mapSettings, height, width })}
             </Grid>
         </AppGrid>
     );

diff --git a/src/app/src/components/EmbeddedMapSizeConfig.jsx b/src/app/src/components/EmbeddedMapSizeConfig.jsx
@@ -6,6 +6,8 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Checkbox from '@material-ui/core/Checkbox';
 import InputAdornment from '@material-ui/core/InputAdornment';
 
+import { DEFAULT_WIDTH } from '../util/embeddedMap';
+
 const styles = {
     section: {
         marginTop: '30px',
@@ -22,7 +24,7 @@ const styles = {
         width: '150px',
     },
     sizeCheckbox: {
-        margin: '0 200px 0 10px',
+        padding: '10px',
     },
     contentContainer: { display: 'flex', alignItems: 'flex-start' },
     widthContainer: {
@@ -42,6 +44,21 @@ function EmbeddedMapSizeConfig({
     setFullWidth,
     errors,
 }) {
+    const updateFullWidth = isFullWidth => {
+        if (isFullWidth) {
+            let aspectRatio = 75;
+            if (height > 0 && width > 0) {
+                aspectRatio = (height / width) * 100;
+            }
+            setFullWidth(true);
+            setHeight(aspectRatio);
+        } else {
+            setFullWidth(false);
+            setWidth(DEFAULT_WIDTH);
+            setHeight((DEFAULT_WIDTH * height) / 100);
+        }
+    };
+
     return (
         <div style={styles.section}>
             <Typography style={styles.sectionHeader}>Size</Typography>
@@ -57,33 +74,38 @@ function EmbeddedMapSizeConfig({
             )}
             <div style={styles.contentContainer}>
                 <div style={styles.widthContainer}>
-                    <TextField
-                        id="width"
-                        label="Width"
-                        value={width}
-                        onChange={e => setWidth(e.target.value)}
-                        margin="normal"
-                        type="number"
-                        InputProps={{
-                            endAdornment: (
-                                <InputAdornment position="end">
-                                    px
-                                </InputAdornment>
-                            ),
-                        }}
-                        variant="outlined"
-                        style={styles.sizeInput}
-                        disabled={fullWidth}
-                    />
+                    {!fullWidth && (
+                        <TextField
+                            id="width"
+                            label="Width"
+                            value={width}
+                            onChange={e => setWidth(e.target.value)}
+                            margin="normal"
+                            type="number"
+                            InputProps={{
+                                endAdornment: (
+                                    <InputAdornment position="end">
+                                        px
+                                    </InputAdornment>
+                                ),
+                            }}
+                            variant="outlined"
+                            style={styles.sizeInput}
+                            disabled={fullWidth}
+                        />
+                    )}
                     <FormControlLabel
                         control={
                             <Checkbox
                                 checked={fullWidth}
-                                onChange={e => setFullWidth(e.target.checked)}
+                                onChange={e =>
+                                    updateFullWidth(e.target.checked)
+                                }
                                 value="fullWidth"
                             />
                         }
-                        label="100%"
+                        label={fullWidth ? '100% Width' : '100%'}
+                        style={styles.sizeCheckbox}
                     />
                 </div>
                 <div>

diff --git a/src/app/src/util/embeddedMap.js b/src/app/src/util/embeddedMap.js
@@ -2,16 +2,15 @@ import sortBy from 'lodash/sortBy';
 
 import { OARFont } from './constants';
 
-const DEFAULT_WIDTH = '1000';
-const DEFAULT_HEIGHT = '800';
+export const DEFAULT_WIDTH = '1000';
+export const DEFAULT_HEIGHT = '800';
 
-const getHeight = embedConfig =>
-    embedConfig.height ? embedConfig.height : DEFAULT_HEIGHT;
+const getHeight = embedConfig => (embedConfig.height ? embedConfig.height : '');
 
 const formatExistingWidth = ({ width = DEFAULT_WIDTH }) => {
     const fullWidth = width[width.length - 1] === '%';
     if (!width) {
-        return { fullWidth, width: DEFAULT_WIDTH };
+        return { fullWidth, width: '' };
     }
     return { fullWidth, width };
 };
@@ -84,7 +83,7 @@ const formatEmbedFieldsForServer = fields =>
 
 const formatWidthForServer = ({ width, fullWidth }) => {
     if (fullWidth) return '100%';
-    if (!width || width === '100%') return DEFAULT_WIDTH;
+    if (!width || width === '100%') return '';
     return width;
 };
 

diff --git a/src/app/src/util/util.js b/src/app/src/util/util.js
@@ -780,9 +780,26 @@ export const getEmbeddedMapSrc = ({ contributor, timestamp }) => {
     return window.location.href.replace('settings', `?${qs}`);
 };
 
-export const createIFrameHTML = ({ width, height, fullWidth, ...options }) =>
-    `<iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0" width="${
-        fullWidth ? '100%' : width
-    }" height="${
-        fullWidth ? '100%' : height
-    }" type="text/html" src="${getEmbeddedMapSrc(options)}"></iframe>`;
+export const createIFrameHTML = ({ fullWidth, contributor, height, width }) =>
+    fullWidth
+        ? `<div>
+  <div style="position:relative;padding-top:${height}%;">
+    <iframe
+        src="${getEmbeddedMapSrc({
+            contributor,
+        })}"
+        frameborder="0"
+        allowfullscreen
+        style="position:absolute;top:0;
+               left:0;width:100%;height:100%;"
+        title="embedded-map"></iframe>
+  </div>
+</div>`
+        : `<iframe
+                src="${getEmbeddedMapSrc({
+                    contributor,
+                })}"
+                frameBorder="0"
+                style="width:${width}px;height:${height}px"
+                title="embedded-map"
+            />`;