Skip to content

Commit d9ee81c

Browse files
jsierlesjsierles
committed
embed an appetize.io simulator for AlertIOS documentation
1 parent 529687f commit d9ee81c

6 files changed

Lines changed: 175 additions & 11 deletions

File tree

‎website/core/Site.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ var Site = React.createClass({
5151
{this.props.children}
5252

5353
<footer className="wrap">
54-
<div className="right">© 2015 Facebook Inc.</div>
54+
<div className="center">© 2015 Facebook Inc.</div>
5555
</footer>
5656
</div>
5757

@@ -68,6 +68,7 @@ var Site = React.createClass({
6868
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
6969
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
7070
`}} />
71+
<script src="/react-native/js/scripts.js" />
7172
</body>
7273
</html>
7374
);

‎website/layout/AutodocsLayout.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -451,10 +451,55 @@ var Autodocs = React.createClass({
451451
{metadata.next && <a className="docs-next" href={metadata.next + '.html#content'}>Next &rarr;</a>}
452452
</div>
453453
</div>
454+
455+
<EmbeddedSimulator shouldRender={metadata.runnable} metadata={metadata} />
456+
454457
</section>
455458
</Site>
456459
);
457460
}
458461
});
459462

463+
var EmbeddedSimulator = React.createClass({
464+
render: function() {
465+
if (!this.props.shouldRender) {
466+
return null;
467+
}
468+
469+
var metadata = this.props.metadata;
470+
471+
return (
472+
<div className="column-left">
473+
<p><strong>Run this example</strong></p>
474+
<div className="modal-button-open">
475+
<img src="/react-native/img/alertIOS.png" />
476+
</div>
477+
<Modal />
478+
</div>
479+
);
480+
}
481+
});
482+
483+
var Modal = React.createClass({
484+
render: function() {
485+
var appParams = {route: 'AlertIOS'};
486+
var encodedParams = encodeURIComponent(JSON.stringify(appParams));
487+
var url = `https://appetize.io/embed/bypdk4jnjra5uwyj2kzd2aenv4?device=iphone5s&scale=70&autoplay=false&orientation=portrait&deviceColor=white&params=${encodedParams}`;
488+
489+
return (
490+
<div>
491+
<div className="modal">
492+
<div className="modal-content">
493+
<button className="modal-button-close">&times;</button>
494+
<div className="center">
495+
<iframe className="simulator" src={url} width="274" height="550" frameborder="0" scrolling="no"></iframe>
496+
</div>
497+
</div>
498+
</div>
499+
<div className="modal-backdrop" />
500+
</div>
501+
);
502+
}
503+
});
504+
460505
module.exports = Autodocs;

‎website/server/generate.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ server.noconvert = true;
2222
// requests.
2323
var queue = Promise.resolve();
2424

25-
glob('src/**/*.*', function(er, files) {
25+
glob('src/**/*.*', { ignore: 'src/react-native/js/**/*' }, function(er, files) {
2626
files.forEach(function(file) {
2727
var targetFile = file.replace(/^src/, 'build');
2828

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

Lines changed: 92 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -185,15 +185,13 @@ html * {
185185

186186
.container {
187187
padding-top: 50px;
188-
min-width: 960px;
188+
min-width: 1160px;
189189
}
190190

191191
.wrap {
192-
width: 960px;
193-
margin-left: auto;
194-
margin-right: auto;
195-
padding-left: 20px;
196-
padding-right: 20px;
192+
max-width: 1260px;
193+
margin: 0 auto;
194+
padding: 0 20px;
197195
}
198196

199197
.skinnyWrap {
@@ -363,7 +361,7 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
363361
font-size: 14px;
364362
float: left;
365363
width: 210px;
366-
margin-top: 5px;
364+
margin: 5px 48px 0 0;
367365
}
368366

369367
.nav-docs ul {
@@ -550,7 +548,7 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
550548
float: right;
551549
}
552550

553-
footer {
551+
footer.wrap {
554552
font-size: 13px;
555553
font-weight: 600;
556554
padding-top: 36px;
@@ -699,7 +697,7 @@ figure {
699697
}
700698

701699
.inner-content {
702-
float: right;
700+
float: left;
703701
width: 650px;
704702
}
705703

@@ -845,6 +843,91 @@ small code, li code, p code {
845843
text-decoration: none !important;
846844
}
847845

846+
.column-left, .column-left * {
847+
box-sizing: border-box;
848+
}
849+
850+
.column-left p {
851+
text-align: center;
852+
color: #999;
853+
}
854+
855+
.column-left {
856+
float: left;
857+
padding: 20px;
858+
width: 210px;
859+
}
860+
861+
/* Modal */
862+
.modal-backdrop {
863+
background: rgba(0,0,0,.4);
864+
display: none;
865+
height: 100%;
866+
left: 0;
867+
overflow: auto;
868+
position: fixed;
869+
top: 0;
870+
width: 100%;
871+
z-index: 9900;
872+
}
873+
874+
.modal {
875+
background: #F6F6F6;
876+
bottom: 0;
877+
box-shadow: 2px 2px 4px 0 rgba(0,0,0,.11);
878+
display: none;
879+
border-radius: 10px;
880+
height: 95%;
881+
left: 0;
882+
margin: auto;
883+
max-height: 620px;
884+
max-width: 460px;
885+
overflow: auto;
886+
position: fixed;
887+
right: 0;
888+
top: 0;
889+
width: 80%;
890+
z-index: 9999;
891+
}
892+
893+
.modal-open {
894+
display: block;
895+
}
896+
897+
.modal-content {
898+
padding: 40px 24px 24px 24px;
899+
position: relative;
900+
}
901+
902+
.modal-content iframe {
903+
margin: 0 auto;
904+
}
905+
906+
.modal-button-open {
907+
text-align: center;
908+
}
909+
910+
.modal-button-close {
911+
background: transparent;
912+
border-radius: 0 0 0 4px;
913+
border: 0;
914+
color: #555;
915+
font-size: 1.2em;
916+
font-weight: bolder;
917+
line-height: 32px;
918+
margin: 0;
919+
padding: 0 12px;
920+
position: absolute;
921+
right: 0;
922+
top: 0;
923+
}
924+
.modal-button-close:active,
925+
.modal-button-close:focus,
926+
.modal-button-close:hover {
927+
background: #EAF8FD;
928+
outline: none;
929+
}
930+
848931
@media screen and (max-width: 960px) {
849932
.nav-main {
850933
position: static;

‎website/src/react-native/img/alertIOS.png‎

75.9 KB
Loading

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

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
(function(){
2+
// Not on browser
3+
if (typeof document === 'undefined') {
4+
return;
5+
}
6+
7+
document.addEventListener('DOMContentLoaded', init);
8+
9+
function init() {
10+
var backdrop = document.querySelector('.modal-backdrop');
11+
var modalButtonOpen = document.querySelector('.modal-button-open');
12+
var modalButtonClose = document.querySelector('.modal-button-close');
13+
14+
backdrop.addEventListener('click', hideModal);
15+
modalButtonOpen.addEventListener('click', showModal);
16+
modalButtonClose.addEventListener('click', hideModal);
17+
}
18+
19+
function showModal(e) {
20+
var backdrop = document.querySelector('.modal-backdrop');
21+
var modal = document.querySelector('.modal');
22+
23+
backdrop.classList.add('modal-open');
24+
modal.classList.add('modal-open');
25+
}
26+
27+
function hideModal(e) {
28+
var backdrop = document.querySelector('.modal-backdrop');
29+
var modal = document.querySelector('.modal');
30+
31+
backdrop.classList.remove('modal-open');
32+
modal.classList.remove('modal-open');
33+
}
34+
35+
}());

0 commit comments

Comments
 (0)