Add tilda key press to fullscreen demo

qiaoxin136 · Aug 16, 2017 · 837e38d · 837e38d
1 parent 6d26248
commit 837e38d
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 28 deletions.
diff --git a/src/components/markdown-page.js b/src/components/markdown-page.js
@@ -181,18 +181,31 @@ export default class MarkdownPage extends Component {
               return null;
             }
             if (Demos[content]) {
-              return <div key={index}>{this.props.renderDemo(content)}</div>;
+              return (
+                <div key={index}>
+                  {this.props.renderDemo(content)}
+                </div>
+              );
             }
-            return (<div key={index} className="markdown-body">
-              {content.split(INSERT_REG).map((__html, i) => {
-                if (!__html) {
-                  return null;
-                }
-                if (Demos[__html]) {
-                  return <div key={i}>{this.props.renderDemo(__html, true)}</div>;
-                }
-                return <div key={i} className="markdown-body" dangerouslySetInnerHTML={{__html}} />;
-            })}</div>);
+            return (
+              <div key={index} className="markdown-body">
+                {content.split(INSERT_REG).map((__html, i) => {
+                  if (!__html) {
+                    return null;
+                  }
+                  if (Demos[__html]) {
+                    return (
+                      <div key={i}>
+                        {this.props.renderDemo(__html, true)}
+                      </div>
+                    );
+                  }
+                  return (
+                    <div key={i} className="markdown-body" dangerouslySetInnerHTML={{__html}} />
+                  );
+                })}
+              </div>
+            );
           })
         }
       </div>

diff --git a/src/components/page.js b/src/components/page.js
@@ -2,6 +2,7 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import autobind from 'autobind-decorator';
+import document from 'global/document';
 
 import MarkdownPage from './markdown-page';
 import {loadContent} from '../actions/app-actions';
@@ -12,10 +13,15 @@ class Page extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      content: this._loadContent(props.route.content)
+      content: this._loadContent(props.route.content),
+      fullscreenDemo: false
     };
   }
 
+  componentDidMount() {
+    document.addEventListener('keyup', this._onKeyPress);
+  }
+
   componentWillReceiveProps(nextProps) {
     const {route} = nextProps;
     if (this.props.route !== route) {
@@ -25,6 +31,17 @@ class Page extends Component {
     }
   }
 
+  componentWillUnmount() {
+    document.removeEventListener('keyup', this._onKeyPress);
+  }
+
+  @autobind _onKeyPress(event) {
+    // 192 is tilda ~ key
+    if (event.keyCode === 192) {
+      this.setState({fullscreenDemo: !this.state.fullscreenDemo});
+    }
+  }
+
   _loadContent(content) {
     if (typeof content === 'string') {
       this.props.loadContent(content);
@@ -34,9 +51,14 @@ class Page extends Component {
 
   @autobind _renderDemo(name, isInline) {
     const DemoComponent = Demos[name];
-
+    let className = 'inline-code';
+    if (!isInline) {
+      className = this.state.fullscreenDemo ?
+        'demo fullscreen' :
+        'demo';
+    }
     return (
-      <div className={isInline ? "inline-code" : "demo"}>
+      <div className={className}>
         <DemoComponent />
       </div>
     );

diff --git a/src/stylesheets/_gallery.scss b/src/stylesheets/_gallery.scss
@@ -198,30 +198,43 @@ code {
   -webkit-overflow-scrolling: touch;
 }
 .markdown .demo {
-  height: 80vh;
+  height: 30vh;
+  min-height: 200px;
+  transition: height 600ms;
 
   >div:first-child {
-    margin-top: 0;
-    transition: margin-top 600ms ease-in;
+    margin-top: -20vh;
+    transition: margin-top 600ms;
+  }
+  .options-panel {
+    .input, hr {
+      display: none;
+    }
   }
 
-  &:not(:hover) {
-    height: 30vh;
-    min-height: 200px;
-    transition: height 300ms;
+  &:hover {
+    height: 80vh;
 
     >div:first-child {
-      margin-top: -20vh;
-      transition: margin-top 300ms;
-    }
-    .options-panel {
-      .input, hr {
-        display: none;
-      }
+      margin-top: 0;
     }
   }
 }
 
+.markdown .demo.fullscreen {
+  position: fixed;
+  height: 100vh;
+  width: 100vw;
+  left: 0;
+  z-index: 10002;
+
+  >div:first-child {
+    margin-top: -7vh;
+  }
+
+  &:hover {}
+}
+
 .guideline-chart {
   border: 1px solid #E5E5E4;
   padding: 20px;