Support scaling of slide when browser resizes (#721)

* Support scaling of slide when browser resizes

* Added manual scale ratio prop

Author: carloskelly13

mdx-slides/index.js

@@ -1,21 +1,19 @@
 import React from 'react';
 import { render } from 'react-dom';
 import { MDXProvider } from '@mdx-js/react';
-import Deck from '../src/components/deck';
-import Slide from '../src/components/slide';
+import { Deck, Slide } from '../src/components';
 
 // See the webpack config to see how this import alias is made
 import slides, { notes } from 'spectacle-user-mdx';
-
-const components = {};
+import mdxComponentMap from '../src/utils/mdx-component-mapper';
 
 const MDXSlides = () => (
   <Deck loop>
     {slides.map((MDXSlide, i) => {
       const NotesForSlide = notes[i];
       return (
         <Slide key={`slide-${i}`} slideNum={i}>
-          <MDXProvider components={components}>
+          <MDXProvider components={mdxComponentMap}>
             <MDXSlide />
             <div
               style={{ height: 5, width: '100%', backgroundColor: 'black' }}

src/components/deck.js

@@ -27,10 +27,11 @@ import searchChildrenForAppear from '../utils/search-children-appear';
  */
 
 const AnimatedDeckDiv = styled(animated.div)`
+  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 100%;
+  position: fixed;
 `;
 
 const initialState = {
@@ -44,18 +45,15 @@ const initialState = {
 
 const defaultSlideEffect = {
   from: {
-    width: '100%',
-    position: 'absolute',
+    position: 'fixed',
     transform: 'translate(100%, 0%)'
   },
   enter: {
-    width: '100%',
-    position: 'absolute',
+    position: 'fixed',
     transform: 'translate(0, 0%)'
   },
   leave: {
-    width: '100%',
-    position: 'absolute',
+    position: 'fixed',
     transform: 'translate(-100%, 0%)'
   },
   config: { precision: 0 }

src/components/slide.js

@@ -2,22 +2,18 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import useSlide, { SlideContext } from '../hooks/use-slide';
 import { DeckContext } from '../hooks/use-deck';
-import styled from 'styled-components';
+import styled, { ThemeContext } from 'styled-components';
 import { color } from 'styled-system';
 
 const SlideContainer = styled('div')`
   ${color};
   position: relative;
-  width: 100%;
-  padding-top: 56.25%;
+  transform-origin: left center;
+  width: ${({ theme }) => theme.size.width || 1366}px;
+  height: ${({ theme }) => theme.size.height || 768}px;
 `;
 const SlideWrapper = styled('div')`
   ${color};
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  position: absolute;
   overflow-y: scroll;
 `;
 const TemplateWrapper = styled('div')`
@@ -40,19 +36,47 @@ const Slide = props => {
     backgroundColor,
     textColor,
     template,
-    numberOfSlides
+    numberOfSlides,
+    scaleRatio
   } = props;
+  const theme = React.useContext(ThemeContext);
   const { slideElementMap, keyboardControls } = React.useContext(DeckContext);
   const initialState = { currentSlideElement: 0, immediate: false };
   const numberOfSlideElements = slideElementMap[slideNum];
+  const [ratio, setRatio] = React.useState(scaleRatio || 1);
+
+  const transformForWindowSize = React.useCallback(() => {
+    const slideWidth = theme.size.width || 1366;
+    const clientWidth = Math.max(
+      document.documentElement.clientWidth,
+      window.innerWidth || 0
+    );
+    const ratio = clientWidth / slideWidth;
+    setRatio(ratio);
+  }, [theme]);
+
+  React.useEffect(() => {
+    if (!isNaN(scaleRatio)) {
+      return;
+    }
+    transformForWindowSize();
+    window.addEventListener('resize', transformForWindowSize);
+    return () => {
+      window.removeEventListener('resize', transformForWindowSize);
+    };
+  }, [transformForWindowSize, scaleRatio]);
+
   const value = useSlide(
     initialState,
     slideNum,
     numberOfSlideElements,
     keyboardControls
   );
   return (
-    <SlideContainer backgroundColor={backgroundColor}>
+    <SlideContainer
+      backgroundColor={backgroundColor}
+      style={{ transform: `scale(${ratio})` }}
+    >
       <TemplateWrapper>
         {typeof template === 'function' &&
           template({ slideNumber: slideNum, numberOfSlides })}
@@ -67,8 +91,9 @@ const Slide = props => {
 Slide.propTypes = {
   backgroundColor: PropTypes.string,
   children: PropTypes.node.isRequired,
-  slideNum: PropTypes.number,
   numberOfSlides: PropTypes.number,
+  scaleRatio: PropTypes.number,
+  slideNum: PropTypes.number,
   template: PropTypes.func,
   textColor: PropTypes.string
 };

src/theme/default-theme.js

@@ -1,4 +1,8 @@
 export default {
+  size: {
+    width: 1366,
+    height: 768
+  },
   colors: {
     primary: '#ebe5da',
     secondary: '#f04d21',

src/utils/mdx-component-mapper.js

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import {
+  CodePane,
+  Image,
+  OrderedList,
+  Quote,
+  Heading,
+  UnorderedList,
+  Text,
+  ListItem
+} from '../components';
+
+const LeftAlignedHeading = props => <Heading {...props} textAlign="left" />;
+
+const mdxComponentMap = {
+  p: Text,
+  h1: LeftAlignedHeading,
+  h2: LeftAlignedHeading,
+  h3: LeftAlignedHeading,
+  blockquote: Quote,
+  ul: UnorderedList,
+  ol: OrderedList,
+  li: ListItem,
+  img: Image,
+  codeblock: CodePane,
+  code: CodePane
+};
+
+export default mdxComponentMap;