Merge pull request #1352 from open-apparel-registry/tw/full-width-iframe

Add full-width embedded map support
opensupplyhub · May 26, 2021 · 436f661 · 436f661
2 parents fa081c9 + 90a39f3
commit 436f661
Show file tree

Hide file tree

Showing 6 changed files with 111 additions and 45 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -22,6 +22,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Add NonstandardFields model [#1340](https://github.com/open-apparel-registry/open-apparel-registry/pull/1340)
 - Enable custom styles [#1348](https://github.com/open-apparel-registry/open-apparel-registry/pull/1348)
 - Add contributor embed level field [#1349](https://github.com/open-apparel-registry/open-apparel-registry/pull/1349)
+- Add full-width embedded map support [#1352](https://github.com/open-apparel-registry/open-apparel-registry/pull/1352)
 
 ### Changed
 

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,27 @@ 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"
+            />`;