Merge pull request #3420 from rnplay/embedded-simulator-website

Documentation website changes for an embedded simulator in AlertIOS documentation

website/core/Site.js

@@ -51,7 +51,7 @@ var Site = React.createClass({
             {this.props.children}
 
             <footer className="wrap">
-              <div className="right">© 2015 Facebook Inc.</div>
+              <div className="center">© 2015 Facebook Inc.</div>
             </footer>
           </div>
 
@@ -68,6 +68,7 @@ var Site = React.createClass({
             ){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
             fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
           `}} />
+          <script src="/react-native/js/scripts.js" />
         </body>
       </html>
     );

website/layout/AutodocsLayout.js

@@ -451,10 +451,55 @@ var Autodocs = React.createClass({
               {metadata.next && <a className="docs-next" href={metadata.next + '.html#content'}>Next &rarr;</a>}
             </div>
           </div>
+
+          <EmbeddedSimulator shouldRender={metadata.runnable} metadata={metadata} />
+
         </section>
       </Site>
     );
   }
 });
 
+var EmbeddedSimulator = React.createClass({
+  render: function() {
+    if (!this.props.shouldRender) {
+      return null;
+    }
+
+    var metadata = this.props.metadata;
+
+    return (
+      <div className="column-left">
+        <p><strong>Run this example</strong></p>
+        <div className="modal-button-open">
+          <img src="/react-native/img/alertIOS.png" />
+        </div>
+        <Modal />
+      </div>
+    );
+  }
+});
+
+var Modal = React.createClass({
+  render: function() {
+    var appParams = {route: 'AlertIOS'};
+    var encodedParams = encodeURIComponent(JSON.stringify(appParams));
+    var url = `https://appetize.io/embed/bypdk4jnjra5uwyj2kzd2aenv4?device=iphone5s&scale=70&autoplay=false&orientation=portrait&deviceColor=white&params=${encodedParams}`;
+
+    return (
+      <div>
+        <div className="modal">
+          <div className="modal-content">
+            <button className="modal-button-close">&times;</button>
+            <div className="center">
+              <iframe className="simulator" src={url} width="274" height="550" frameborder="0" scrolling="no"></iframe>
+            </div>
+          </div>
+        </div>
+        <div className="modal-backdrop" />
+      </div>
+    );
+  }
+});
+
 module.exports = Autodocs;

website/server/generate.js

@@ -22,7 +22,7 @@ server.noconvert = true;
 // requests.
 var queue = Promise.resolve();
 
-glob('src/**/*.*', function(er, files) {
+glob('src/**/*.*', { ignore: 'src/react-native/js/**/*' }, function(er, files) {
   files.forEach(function(file) {
     var targetFile = file.replace(/^src/, 'build');
 

website/src/react-native/css/react-native.css

@@ -185,15 +185,13 @@ html * {
 
 .container {
   padding-top: 50px;
-  min-width: 960px;
+  min-width: 1160px;
 }
 
 .wrap {
-  width: 960px;
-  margin-left: auto;
-  margin-right: auto;
-  padding-left: 20px;
-  padding-right: 20px;
+  max-width: 1260px;
+  margin: 0 auto;
+  padding: 0 20px;
 }
 
 .skinnyWrap {
@@ -363,7 +361,7 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
   font-size: 14px;
   float: left;
   width: 210px;
-  margin-top: 5px;
+  margin: 5px 48px 0 0;
 }
 
 .nav-docs ul {
@@ -550,7 +548,7 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
   float: right;
 }
 
-footer {
+footer.wrap {
   font-size: 13px;
   font-weight: 600;
   padding-top: 36px;
@@ -699,7 +697,7 @@ figure {
 }
 
 .inner-content {
-  float: right;
+  float: left;
   width: 650px;
 }
 
@@ -845,6 +843,91 @@ small code, li code, p code {
   text-decoration: none !important;
 }
 
+.column-left, .column-left * {
+  box-sizing: border-box;
+}
+
+.column-left p {
+  text-align: center;
+  color: #999;
+}
+
+.column-left {
+  float: left;
+  padding: 20px;
+  width: 210px;
+}
+
+/* Modal */
+.modal-backdrop {
+  background: rgba(0,0,0,.4);
+  display: none;
+  height: 100%;
+  left: 0;
+  overflow: auto;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 9900;
+}
+
+.modal {
+  background: #F6F6F6;
+  bottom: 0;
+  box-shadow: 2px 2px 4px 0 rgba(0,0,0,.11);
+  display: none;
+  border-radius: 10px;
+  height: 95%;
+  left: 0;
+  margin: auto;
+  max-height: 620px;
+  max-width: 460px;
+  overflow: auto;
+  position: fixed;
+  right: 0;
+  top: 0;
+  width: 80%;
+  z-index: 9999;
+}
+
+.modal-open {
+  display: block;
+}
+
+.modal-content {
+  padding: 40px 24px 24px 24px;
+  position: relative;
+}
+
+.modal-content iframe {
+  margin: 0 auto;
+}
+
+.modal-button-open {
+  text-align: center;
+}
+
+.modal-button-close {
+  background: transparent;
+  border-radius: 0 0 0 4px;
+  border: 0;
+  color: #555;
+  font-size: 1.2em;
+  font-weight: bolder;
+  line-height: 32px;
+  margin: 0;
+  padding: 0 12px;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+  .modal-button-close:active,
+  .modal-button-close:focus,
+  .modal-button-close:hover {
+    background: #EAF8FD;
+    outline: none;
+  }
+
 @media screen and (max-width: 960px) {
   .nav-main {
     position: static;

website/src/react-native/js/scripts.js

@@ -0,0 +1,35 @@
+(function(){
+  // Not on browser
+  if (typeof document === 'undefined') {
+    return;
+  }
+
+  document.addEventListener('DOMContentLoaded', init);
+
+  function init() {
+    var backdrop = document.querySelector('.modal-backdrop');
+    var modalButtonOpen = document.querySelector('.modal-button-open');
+    var modalButtonClose = document.querySelector('.modal-button-close');
+
+    backdrop.addEventListener('click', hideModal);
+    modalButtonOpen.addEventListener('click', showModal);
+    modalButtonClose.addEventListener('click', hideModal);
+  }
+
+  function showModal(e) {
+    var backdrop = document.querySelector('.modal-backdrop');
+    var modal = document.querySelector('.modal');
+
+    backdrop.classList.add('modal-open');
+    modal.classList.add('modal-open');
+  }
+
+  function hideModal(e) {
+    var backdrop = document.querySelector('.modal-backdrop');
+    var modal = document.querySelector('.modal');
+
+    backdrop.classList.remove('modal-open');
+    modal.classList.remove('modal-open');
+  }
+
+}());