Remove specialized zoom handling and margins for slide content (#611)

* margin is 0 or 40 not custom at zoom over 0.6 * removing custom zoom behavior for accessibility * remove duplicate margin and revert to default browser zoom behavior * fix linting and update snapshots
FormidableLabs · Dec 3, 2018 · 5440d28 · 5440d28
1 parent 8a95bd1
commit 5440d28
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 67 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width initial-scale=1 user-scalable=no" />
+    <meta name="viewport" content="width=device-width initial-scale=1" />
     <title>Spectacle</title>
     <link href="https://fonts.googleapis.com/css?family=Lobster+Two:400,700" rel="stylesheet" type="text/css">
     <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet" type="text/css">

diff --git a/one-page.html b/one-page.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width initial-scale=1 user-scalable=no" />
+    <meta name="viewport" content="width=device-width initial-scale=1" />
     <title>Spectacle</title>
     <link href="https://fonts.googleapis.com/css?family=Lobster+Two:400,700" rel="stylesheet" type="text/css">
     <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet" type="text/css">

diff --git a/src/components/__snapshots__/slide.test.js.snap b/src/components/__snapshots__/slide.test.js.snap
@@ -42,20 +42,17 @@ exports[`<Slide /> should render correctly with transitions. 1`] = `
             innerRef={[Function]}
             margin={undefined}
             overviewMode={undefined}
-            scale={1}
             style={Object {}}
             styles={
               Object {
                 "context": Object {},
               }
             }
             width={undefined}
-            zoom={0.6}
           >
             <div
-              className=" spectacle-content css-1wqnfch e1s7evq12"
+              className=" spectacle-content css-121oawa e1s7evq12"
               height={undefined}
-              scale={1}
               style={Object {}}
               width={undefined}
             >
@@ -107,20 +104,17 @@ exports[`<Slide /> should render correctly without transitions. 1`] = `
             innerRef={[Function]}
             margin={undefined}
             overviewMode={undefined}
-            scale={1}
             style={Object {}}
             styles={
               Object {
                 "context": Object {},
               }
             }
             width={undefined}
-            zoom={0.6}
           >
             <div
-              className=" spectacle-content css-1wqnfch e1s7evq12"
+              className=" spectacle-content css-121oawa e1s7evq12"
               height={undefined}
-              scale={1}
               style={Object {}}
               width={undefined}
             >

diff --git a/src/components/slide-components.js b/src/components/slide-components.js
@@ -38,27 +38,13 @@ export const SlideContentWrapper = styled.div(({ align, overviewMode }) => {
 });
 
 export const SlideContent = styled.div(props => {
-  const { overviewMode, scale, zoom, margin, width, height, styles } = props;
-
-  const getMargin = () => {
-    // ensure a "falsy" value of 0 still gets applied
-    if (margin === 0) {
-      return 0;
-    }
-
-    if (!margin) {
-      return 40;
-    }
-
-    return margin;
-  };
+  const { overviewMode, width, height, styles } = props;
 
   const contentStyles = {
     flex: 1,
     maxHeight: height || 700,
     maxWidth: width || 1000,
-    transform: `scale(${scale})`,
-    padding: zoom > 0.6 ? getMargin() : 10
+    padding: 10
   };
   const overviewStyles = {
     width: '100%'

diff --git a/src/components/slide.js b/src/components/slide.js
@@ -16,16 +16,12 @@ class Slide extends React.PureComponent {
   constructor() {
     super(...arguments);
     this.stepCounter = stepCounter();
-
-    this.setZoom = this.setZoom.bind(this);
   }
 
   state = {
-    contentScale: 1,
     reverse: false,
     transitioning: true,
-    z: 1,
-    zoom: 1
+    z: 1
   };
 
   getChildContext() {
@@ -38,7 +34,6 @@ class Slide extends React.PureComponent {
   }
 
   componentDidMount() {
-    this.setZoom();
     const slide = this.slideRef;
     const frags = slide.querySelectorAll('.fragment');
     let currentOrder = 0;
@@ -66,8 +61,6 @@ class Slide extends React.PureComponent {
           currentOrder += 1;
         });
     }
-    window.addEventListener('load', this.setZoom);
-    window.addEventListener('resize', this.setZoom);
 
     if (isFunction(this.props.onActive)) {
       this.props.onActive(this.props.slideIndex);
@@ -82,11 +75,6 @@ class Slide extends React.PureComponent {
     }
   }
 
-  componentWillUnmount() {
-    window.removeEventListener('load', this.setZoom);
-    window.removeEventListener('resize', this.setZoom);
-  }
-
   componentDidUpdate() {
     const { steps, slideIndex } = this.stepCounter.getSteps();
     const stepFunc = this.props.getAnimStep || this.props.getAppearStep;
@@ -97,32 +85,6 @@ class Slide extends React.PureComponent {
     }
   }
 
-  setZoom() {
-    const mobile = window.matchMedia('(max-width: 628px)').matches;
-    const content = this.contentRef;
-    if (content) {
-      const zoom = this.props.viewerScaleMode
-        ? 1
-        : content.offsetWidth / this.context.contentWidth;
-
-      const contentScaleY =
-        content.parentNode.offsetHeight / this.context.contentHeight;
-      const contentScaleX = this.props.viewerScaleMode
-        ? content.parentNode.offsetWidth / this.context.contentWidth
-        : content.parentNode.offsetWidth / this.context.contentHeight;
-      const minScale = Math.min(contentScaleY, contentScaleX);
-
-      let contentScale = minScale < 1 ? minScale : 1;
-      if (mobile && this.props.viewerScaleMode !== true) {
-        contentScale = 1;
-      }
-      this.setState({
-        zoom: zoom > 0.6 ? zoom : 0.6,
-        contentScale
-      });
-    }
-  }
-
   render() {
     const { presenterStyle, children } = this.props;
 
@@ -156,8 +118,6 @@ class Slide extends React.PureComponent {
             overviewMode={this.context.overview}
             width={this.context.contentWidth}
             height={this.context.contentHeight}
-            scale={this.state.contentScale}
-            zoom={this.state.zoom}
             margin={this.props.margin}
             style={{ ...(this.props.contentStyles || {}) }}
             styles={{ context: this.context.styles.components.content }}
@@ -181,6 +141,7 @@ Slide.propTypes = {
   align: PropTypes.string,
   children: PropTypes.node,
   className: PropTypes.string,
+  contentStyles: PropTypes.object,
   dispatch: PropTypes.func,
   export: PropTypes.bool,
   getAnimStep: PropTypes.func,