add amd, minor ui fixes
This commit is contained in:
ido
parent
e258d88a2b
commit
33b5443e25
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
72
index.html
72
index.html
|
|
@ -1,6 +1,4 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<!--[if IE]><![endif]-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
|
@ -11,27 +9,6 @@
|
|||
|
||||
<link rel="shortcut icon" href="https://facebook.github.io/react/favicon.ico">
|
||||
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,700' rel='stylesheet' type='text/css'>
|
||||
<!--<link rel="alternate" type="application/rss+xml" title="React" href="http://facebook.github.io/react/feed.xml">-->
|
||||
|
||||
<!--<link rel="stylesheet" href="https://facebook.github.io/react/css/syntax.css">-->
|
||||
<!--<link rel="stylesheet" href="https://facebook.github.io/react/css/codemirror.css">-->
|
||||
<!--<link rel="stylesheet" href="https://facebook.github.io//react/css/react.css">-->
|
||||
|
||||
<!--<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>-->
|
||||
<!--<script type="text/javascript">try{Typekit.load();}catch(e){}</script>-->
|
||||
|
||||
<!--[if lte IE 8]>
|
||||
<!--<script type="text/javascript" src="/react/js/html5shiv.min.js"></script>-->
|
||||
<!--<script type="text/javascript" src="/react/js/es5-shim.min.js"></script>-->
|
||||
<!--<script type="text/javascript" src="/react/js/es5-sham.min.js"></script>-->
|
||||
<!--<![endif]–>-->
|
||||
|
||||
<!--<script type="text/javascript" src="/react/js/codemirror.js"></script>-->
|
||||
<!--<script type="text/javascript" src="/react/js/javascript.js"></script>-->
|
||||
<!--<script type="text/javascript" src="/react/js/react.js"></script>-->
|
||||
<!--<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>-->
|
||||
<!--<script type="text/javascript" src="/react/js/live_editor.js"></script>-->
|
||||
<!--<script type="text/javascript" src="/react/js/showdown.js"></script>-->
|
||||
|
||||
<!-- Latest compiled and minified CSS -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
|
||||
|
|
@ -58,78 +35,49 @@
|
|||
</a>
|
||||
<ul class="nav-site">
|
||||
<li><a href="fiddle.html">Playground</a></li>
|
||||
<li><a href="https://github.com/wix/react-templates">docs</a></li>
|
||||
<!--<li><a href="https://github.com/wix/react-templates">support</a></li>-->
|
||||
<li><a href="https://github.com/wix/react-templates">download</a></li>
|
||||
<!--<li><a href="https://github.com/wix/react-templates/">blog</a></li>-->
|
||||
<li><a href="https://github.com/wix/react-templates#template-directives-and-syntax">docs</a></li>
|
||||
<li><a href="https://github.com/wix/react-templates#installation">download</a></li>
|
||||
<li><a href="https://github.com/wix/react-templates">github</a>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="hero">
|
||||
<div class="wrap">
|
||||
<div class="text">React Templates</div>
|
||||
<div class="minitext">
|
||||
Light weight templates for React
|
||||
Lightweight Templates for React
|
||||
</div>
|
||||
<div class="buttons-unit">
|
||||
<a href="fiddle.html" class="button">Checkout the Playground</a>
|
||||
<!--<a href="/react/downloads.html" class="button">Download React v0.12.1</a>-->
|
||||
<a href="fiddle.html" class="button">Check Out the Playground</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<section class="content wrap">
|
||||
|
||||
<section class="love-list">
|
||||
|
||||
<ul >
|
||||
<li>No runtime libraries. No magic. Just simple pre-compilation to a clear React code</li>
|
||||
<li>Super easy to write panels. By panels we mean components that have a lot of HTML code and non-reusable logic</li>
|
||||
<li>Very good separation of presentation and logic. Almost no HTML within the component file</li>
|
||||
<li>Declarative coding for presentation. HTML that you write and inspect look similar</li>
|
||||
<li>Easy syntax. Similar to HTML. All IDEs recognize this format</li>
|
||||
<li>Supports <a href="#amd">AMD</a>, <a href="#commonjs">CommonJS</a> and globals</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</section>
|
||||
<section id="home-section" class="home-section">
|
||||
</section>
|
||||
<div id="loading" style="/* padding-bottom: 40px; */
|
||||
margin-bottom: 100px;
|
||||
font-size: 20px;
|
||||
padding-top: 50px;
|
||||
text-align: center;">Loading...</div>
|
||||
<div id="loading">Loading...</div>
|
||||
<hr class="home-divider" />
|
||||
<!--<section class="home-bottom-section">-->
|
||||
<!--<div class="buttons-unit">-->
|
||||
<!--<a href="docs/getting-started.html" class="button">Get Started</a>-->
|
||||
<!--<a href="downloads.html" class="button">Download React v0.12.1</a>-->
|
||||
<!--</div>-->
|
||||
<!--</section>-->
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<!--<footer class="wrap">-->
|
||||
<!--<div class="left">-->
|
||||
<!--A Facebook & Instagram collaboration.<br>-->
|
||||
<!--<a href="/react/acknowledgements.html">Acknowledgements</a>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="right">-->
|
||||
<!--© 2013–2014 Facebook Inc.<br>-->
|
||||
<!--Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.-->
|
||||
<!--</div>-->
|
||||
<!--</footer>-->
|
||||
<footer class="footer">
|
||||
<span>Sponsored by </span> <a href="//wix.com" class="wf-white-logo"></a>
|
||||
</footer>
|
||||
</div>
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
|
||||
<script src="playground/libs/ace-builds-1.1.8/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
|
||||
<!--<script src="playground/libs/ace-builds-1.1.8/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>-->
|
||||
<script src="playground/dist/rt-main.browser.min.js"></script>
|
||||
<!--<script data-main="playground/home-main.js" src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.js"></script>-->
|
||||
<!--<script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.js"></script>-->
|
||||
|
|
|
|||
|
|
@ -5,10 +5,10 @@ define(['react', 'lodash', 'jquery', './libs/codemirror-4.8/lib/codemirror',
|
|||
'./libs/codemirror-4.8/addon/hint/show-hint',
|
||||
'./libs/codemirror-4.8/addon/hint/xml-hint',
|
||||
'./libs/codemirror-4.8/addon/hint/html-hint',
|
||||
'./libs/codemirror-4.8/addon/display/panel',
|
||||
//'./libs/codemirror-4.8/addon/display/panel',
|
||||
'./libs/codemirror-4.8/mode/xml/xml',
|
||||
'./libs/codemirror-4.8/mode/css/css',
|
||||
'./libs/codemirror-4.8/mode/htmlmixed/htmlmixed'
|
||||
//'./libs/codemirror-4.8/mode/css/css',
|
||||
'./libs/codemirror-4.8/addon/runmode/runmode'
|
||||
//'./libs/codemirror-4.8/addon/display/placeholder'
|
||||
], function (React, _, $, CodeMirror, CMLint) {
|
||||
'use strict';
|
||||
|
|
@ -69,13 +69,25 @@ define(['react', 'lodash', 'jquery', './libs/codemirror-4.8/lib/codemirror',
|
|||
|
||||
var editor = React.createClass({
|
||||
displayName: 'CodeMirrorEditor',
|
||||
propTypes: {
|
||||
id: React.PropTypes.string,
|
||||
readOnly: React.PropTypes.bool,
|
||||
runMode: React.PropTypes.bool,
|
||||
mode: React.PropTypes.string
|
||||
},
|
||||
getDefaultProps: function () {
|
||||
return {
|
||||
readOnly: false,
|
||||
mode: 'html'
|
||||
};
|
||||
},
|
||||
getInitialState: function () {
|
||||
return {
|
||||
editorId: _.uniqueId()
|
||||
};
|
||||
},
|
||||
componentWillMount: function () {
|
||||
},
|
||||
//componentWillMount: function () {
|
||||
//},
|
||||
render: function () {
|
||||
var props = _.omit(this.props, ['ref', 'key', 'value', 'valueLink', 'onChange']);
|
||||
props.id = this.props.id || this.state.editorId;
|
||||
|
|
@ -113,11 +125,11 @@ define(['react', 'lodash', 'jquery', './libs/codemirror-4.8/lib/codemirror',
|
|||
};
|
||||
options.hintOptions = {schemaInfo: tags};
|
||||
//options.gutters = ['CodeMirror-lint-markers'];
|
||||
options.lint = true;
|
||||
//options.lint = true;
|
||||
} else {
|
||||
options.mode = 'javascript';
|
||||
//options.gutters = ['CodeMirror-lint-markers'];
|
||||
options.lint = true;
|
||||
//options.lint = true;
|
||||
}
|
||||
|
||||
this.editor = CodeMirror.fromTextArea(this.getDOMNode(), options);
|
||||
|
|
@ -132,21 +144,21 @@ define(['react', 'lodash', 'jquery', './libs/codemirror-4.8/lib/codemirror',
|
|||
}.bind(this));
|
||||
}
|
||||
},
|
||||
showMessage: function (msg) {
|
||||
//var anOption = document.createElement('div');
|
||||
//anOption.innerText = msg;
|
||||
//anOption.setAttribute('class', 'error-panel');
|
||||
//if (this.panel) {
|
||||
// this.panel.clear();
|
||||
//}
|
||||
//this.panel = this.editor.addPanel(anOption, {height: 22}); // {position: 'bottom'}
|
||||
},
|
||||
clearMessage: function () {
|
||||
if (this.panel) {
|
||||
this.panel.clear();
|
||||
this.panel = null;
|
||||
}
|
||||
},
|
||||
//showMessage: function (msg) {
|
||||
// //var anOption = document.createElement('div');
|
||||
// //anOption.innerText = msg;
|
||||
// //anOption.setAttribute('class', 'error-panel');
|
||||
// //if (this.panel) {
|
||||
// // this.panel.clear();
|
||||
// //}
|
||||
// //this.panel = this.editor.addPanel(anOption, {height: 22}); // {position: 'bottom'}
|
||||
//},
|
||||
//clearMessage: function () {
|
||||
// if (this.panel) {
|
||||
// this.panel.clear();
|
||||
// this.panel = null;
|
||||
// }
|
||||
//},
|
||||
annotate: function (annot) {
|
||||
CMLint.annotate(this.editor, annot);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,69 @@
|
|||
define(['react', 'lodash', 'jquery', './libs/codemirror-4.8/lib/codemirror',
|
||||
'./libs/codemirror-4.8/mode/javascript/javascript',
|
||||
'./libs/codemirror-4.8/addon/hint/html-hint',
|
||||
'./libs/codemirror-4.8/addon/hint/show-hint',
|
||||
'./libs/codemirror-4.8/addon/hint/xml-hint',
|
||||
'./libs/codemirror-4.8/addon/hint/html-hint',
|
||||
'./libs/codemirror-4.8/mode/xml/xml',
|
||||
'./libs/codemirror-4.8/addon/runmode/runmode'
|
||||
], function (React, _, $, CodeMirror) {
|
||||
'use strict';
|
||||
return React.createClass({
|
||||
displayName: 'CodeMirrorViewer',
|
||||
propTypes: {
|
||||
id: React.PropTypes.string,
|
||||
runMode: React.PropTypes.bool,
|
||||
mode: React.PropTypes.string
|
||||
},
|
||||
getDefaultProps: function () {
|
||||
return {
|
||||
readOnly: false,
|
||||
runMode: true,
|
||||
mode: 'html'
|
||||
};
|
||||
},
|
||||
getInitialState: function () {
|
||||
return {
|
||||
editorId: _.uniqueId()
|
||||
};
|
||||
},
|
||||
render: function () {
|
||||
var props = _.omit(this.props, ['ref', 'key', 'value', 'valueLink', 'onChange']);
|
||||
props.id = this.props.id || this.state.editorId;
|
||||
props.className = 'cm-s-default';
|
||||
var value = this.props.valueLink ? this.props.valueLink() : this.props.value;
|
||||
return React.DOM.pre(props, value);
|
||||
},
|
||||
componentWillUpdate: function (nextProps/*, nextState*/) {
|
||||
var value = nextProps.valueLink ? nextProps.valueLink() : nextProps.value;
|
||||
if (this.editor && this.editor.getValue() !== value) {
|
||||
this.editor.setValue(value || '');
|
||||
}
|
||||
},
|
||||
componentDidMount: function () {
|
||||
var value = this.props.valueLink ? this.props.valueLink() : this.props.value;
|
||||
var options = {
|
||||
readOnly: this.props.readOnly,
|
||||
lineWrapping: true,
|
||||
smartIndent: true,
|
||||
matchBrackets: true,
|
||||
value: value,
|
||||
lineNumbers: true,
|
||||
mode: 'javascript',
|
||||
gutters: ['CodeMirror-linenumbers', 'rt-annotations'],
|
||||
theme: 'solarized'
|
||||
};
|
||||
|
||||
if (this.props.mode === 'html') {
|
||||
options.mode = 'text/html';
|
||||
} else {
|
||||
options.mode = 'javascript';
|
||||
}
|
||||
|
||||
this.editor = CodeMirror.runMode(value, options.mode, this.getDOMNode());
|
||||
},
|
||||
componentWillUnmount: function () {
|
||||
this.editor.toTextArea();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -3,11 +3,9 @@ html {
|
|||
}
|
||||
|
||||
body {
|
||||
/*padding: 20px;*/
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-weight: 300;
|
||||
/*background: #f6f6f6 url(../img/initializing.png) 50% 50% no-repeat;*/
|
||||
/*overflow: hidden;*/
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
/*position: relative;*/
|
||||
|
|
@ -45,7 +43,7 @@ body {
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
.title-link{
|
||||
.title-link {
|
||||
float: left;
|
||||
margin-top: -3px;
|
||||
margin-right: 5px;
|
||||
|
|
@ -62,8 +60,8 @@ body {
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
#buttons-bar button{
|
||||
font-weight:400;
|
||||
#buttons-bar button {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
#buttons-bar button, #buttons-bar div {
|
||||
|
|
@ -78,17 +76,18 @@ body {
|
|||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.nav-site{
|
||||
position:absolute;
|
||||
top:0;
|
||||
right:0;
|
||||
}
|
||||
.nav-site li {
|
||||
margin: 0;
|
||||
display:inline-block;
|
||||
.nav-site {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.nav-site a {
|
||||
.nav-site li {
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.nav-site a {
|
||||
padding: 0 8px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
|
|
@ -98,17 +97,16 @@ body {
|
|||
color: #aaa
|
||||
}
|
||||
|
||||
.nav-site a:hover {
|
||||
.nav-site a:hover {
|
||||
color: #fafafa
|
||||
}
|
||||
|
||||
.nav-site a.active {
|
||||
.nav-site a.active {
|
||||
color: #fafafa;
|
||||
border-bottom: 3px solid #cc7a6f;
|
||||
background: #333
|
||||
}
|
||||
|
||||
|
||||
.fiddle {
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -132,9 +130,8 @@ body {
|
|||
/*margin: 10px;*/
|
||||
}
|
||||
|
||||
|
||||
.sample-view {
|
||||
height:100%;
|
||||
height: 100%;
|
||||
border: 1px solid #ddd;
|
||||
background-color: #f8f8f5;
|
||||
|
||||
|
|
@ -154,7 +151,7 @@ body {
|
|||
}
|
||||
|
||||
.CodeMirror-wrap {
|
||||
border:1px solid #ddd;
|
||||
border: 1px solid #ddd;
|
||||
/*border-radius: 4px 4px 4px 4px;*/
|
||||
/*height: 400px;*/
|
||||
/*min-height: 100px;*/
|
||||
|
|
@ -162,19 +159,20 @@ body {
|
|||
/*margin: 10px;*/
|
||||
}
|
||||
|
||||
.fiddle-row{
|
||||
overflow:hidden;
|
||||
.fiddle-row {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.code-area {
|
||||
width: 50%;
|
||||
float:left;
|
||||
position:relative;
|
||||
float: left;
|
||||
position: relative;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.result-area-form{
|
||||
padding:5px;
|
||||
.result-area-form {
|
||||
padding: 5px;
|
||||
margin: 10px 20px;
|
||||
}
|
||||
|
||||
.error-panel {
|
||||
|
|
@ -194,38 +192,40 @@ body {
|
|||
background-color: aliceblue;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/*position: relative; min-height: 100%;*/
|
||||
|
||||
.code-area::after{
|
||||
content:'';
|
||||
position:absolute;
|
||||
top:5px;
|
||||
right:5px;
|
||||
.code-area::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
font-size: 11px;
|
||||
padding:2px 5px;
|
||||
border:1px solid #ddd;
|
||||
padding: 2px 5px;
|
||||
border: 1px solid #ddd;
|
||||
color: #b4b4b4;
|
||||
background: rgba(255,255,255,0.5);
|
||||
pointer-events:none;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
pointer-events: none;
|
||||
transition: opacity 0.2s;
|
||||
-webkit-transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
/*.code-area:hover::after{
|
||||
opacity:0.2;
|
||||
}*/
|
||||
|
||||
#area-rt::after{
|
||||
content:'Template';
|
||||
#area-rt::after {
|
||||
content: 'Template';
|
||||
}
|
||||
|
||||
#area-code::after{
|
||||
content:'Class';
|
||||
#area-code::after {
|
||||
content: 'Class';
|
||||
}
|
||||
|
||||
#area-generated::after{
|
||||
content:'Generated Code';
|
||||
#area-generated::after {
|
||||
content: 'Generated Code';
|
||||
}
|
||||
|
||||
#area-result::after{
|
||||
content:'Result';
|
||||
#area-result::after {
|
||||
content: 'Result';
|
||||
}
|
||||
|
|
@ -1,5 +1,3 @@
|
|||
|
||||
|
||||
body {
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-weight: 300;
|
||||
|
|
@ -11,12 +9,12 @@ p {
|
|||
margin: 0 0 10px
|
||||
}
|
||||
|
||||
.subHeader {
|
||||
font-size: 21px;
|
||||
font-weight: 200;
|
||||
line-height: 30px;
|
||||
margin-bottom: 10px
|
||||
}
|
||||
/*.subHeader {*/
|
||||
/*font-size: 21px;*/
|
||||
/*font-weight: 200;*/
|
||||
/*line-height: 30px;*/
|
||||
/*margin-bottom: 10px*/
|
||||
/*}*/
|
||||
|
||||
em {
|
||||
font-style: italic
|
||||
|
|
@ -472,7 +470,7 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
|
|||
.hero .text {
|
||||
font-size: 110px;
|
||||
text-align: center;
|
||||
font-weight: 100;
|
||||
font-weight: 300;
|
||||
color: #3899EC;
|
||||
}
|
||||
|
||||
|
|
@ -520,8 +518,8 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
|
|||
}
|
||||
|
||||
.buttons-unit .button {
|
||||
font-size: 24px;
|
||||
background: #cc7a6f;
|
||||
font-size: 22px;
|
||||
background: #FB7D33;
|
||||
color: #fafafa
|
||||
}
|
||||
|
||||
|
|
@ -714,14 +712,6 @@ h3 {
|
|||
float: right
|
||||
}
|
||||
|
||||
footer {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
margin-top: 36px;
|
||||
margin-bottom: 18px;
|
||||
overflow: auto
|
||||
}
|
||||
|
||||
section.black content {
|
||||
padding-bottom: 18px
|
||||
}
|
||||
|
|
@ -1070,19 +1060,19 @@ h1:after {
|
|||
}
|
||||
}
|
||||
|
||||
.post {
|
||||
margin-bottom: 30px
|
||||
}
|
||||
/*.post {*/
|
||||
/*margin-bottom: 30px*/
|
||||
/*}*/
|
||||
|
||||
.pagination {
|
||||
margin-bottom: 30px;
|
||||
width: 100%;
|
||||
overflow: hidden
|
||||
}
|
||||
/*.pagination {*/
|
||||
/*margin-bottom: 30px;*/
|
||||
/*width: 100%;*/
|
||||
/*overflow: hidden;*/
|
||||
/*}*/
|
||||
|
||||
.pagination .next {
|
||||
float: right
|
||||
}
|
||||
/*.pagination .next {*/
|
||||
/*float: right*/
|
||||
/*}*/
|
||||
|
||||
div[data-twttr-id] iframe {
|
||||
margin: 10px auto !important
|
||||
|
|
@ -1104,16 +1094,33 @@ div[data-twttr-id] iframe {
|
|||
margin-left: 20px
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
margin-left: 0; margin-bottom: 1px;border-bottom:none;
|
||||
#loading {
|
||||
margin-bottom: 100px;
|
||||
font-size: 20px;
|
||||
padding-top: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
.nav-tabs>li{margin-left:0}
|
||||
|
||||
.preview-title{display:block; padding:10px 15px 13px; line-height: 1.42857; color: #333; margin-left:30px; }
|
||||
.nav-tabs {
|
||||
margin-left: 0;
|
||||
margin-bottom: 1px;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.nav-tabs > li {
|
||||
margin-left: 0
|
||||
}
|
||||
|
||||
.preview-title {
|
||||
display: block;
|
||||
padding: 10px 15px 13px;
|
||||
line-height: 1.42857;
|
||||
color: #333;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.large-text-area {
|
||||
border:1px solid #ddd;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 0 4px 4px 4px;
|
||||
/*height: 400px;*/
|
||||
/*min-height: 100px;*/
|
||||
|
|
@ -1121,12 +1128,12 @@ div[data-twttr-id] iframe {
|
|||
/*margin: 10px;*/
|
||||
}
|
||||
|
||||
.code-area, .result-area{
|
||||
box-sizing:border-box;
|
||||
.code-area, .result-area {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.CodeMirror-wrap {
|
||||
border:1px solid #ddd;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 0 4px 4px 4px;
|
||||
/*height: 400px;*/
|
||||
/*min-height: 100px;*/
|
||||
|
|
@ -1165,6 +1172,9 @@ div[data-twttr-id] iframe {
|
|||
background-color: #f8f8f5;
|
||||
padding: 20px 30px;
|
||||
margin-left:30px;
|
||||
height: 301px;
|
||||
max-height:308px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.sample-view button {
|
||||
|
|
@ -1175,4 +1185,27 @@ div[data-twttr-id] iframe {
|
|||
margin-right: 5px;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 20px;
|
||||
background: #666;
|
||||
color: #FFF;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
footer span {
|
||||
display: inline-block;
|
||||
line-height:1.5;
|
||||
vertical-align:text-bottom;
|
||||
}
|
||||
|
||||
.wf-white-logo {
|
||||
width: 200px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
background-image: url(../../img/icons-footer-sab5af31545.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 -188px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,67 +1,9 @@
|
|||
/*.hidden {*/
|
||||
/*display: none;*/
|
||||
/*}*/
|
||||
|
||||
/*body {*/
|
||||
/*padding: 20px;*/
|
||||
/*}*/
|
||||
|
||||
/*.hiddenTab {*/
|
||||
/*width: 0;*/
|
||||
/*height: 0;*/
|
||||
/*}*/
|
||||
|
||||
/*.large-text-area {*/
|
||||
/*height: 400px;*/
|
||||
/*margin: 10px;*/
|
||||
/*}*/
|
||||
|
||||
/*.code-area.horizontal {*/
|
||||
/*width: 50%;*/
|
||||
/*height: 620px;*/
|
||||
/*float: left;*/
|
||||
/*}*/
|
||||
|
||||
/*.code-area.vertical {*/
|
||||
/*width: 100%;*/
|
||||
/*height: 620px;*/
|
||||
/*float: none;*/
|
||||
/*}*/
|
||||
|
||||
/*.result-area.horizontal {*/
|
||||
/*width: 50%;*/
|
||||
/*float: left;*/
|
||||
/*}*/
|
||||
|
||||
/*.result-area.vertical {*/
|
||||
/*width: 100%;*/
|
||||
/*float: none;*/
|
||||
/*}*/
|
||||
|
||||
/*.result-area {*/
|
||||
/*width: 50%;*/
|
||||
/*height: 620px;*/
|
||||
/*float: left;*/
|
||||
/*}*/
|
||||
|
||||
/*.sample-view {*/
|
||||
/*margin: 10px;*/
|
||||
/*}*/
|
||||
|
||||
/*.sample-view button {*/
|
||||
/*margin: 5px;*/
|
||||
/*}*/
|
||||
|
||||
/*.sample-view input[type=checkbox] {*/
|
||||
/*margin-right: 5px;*/
|
||||
/*}*/
|
||||
|
||||
.playground-error {
|
||||
color: red;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.cm-s-solarized .editor-error {
|
||||
/*color: red;*/
|
||||
/*text-decoration: underline;*/
|
||||
background-color: #F0F079;
|
||||
}
|
||||
|
|
@ -25,13 +25,15 @@ define(['lodash', 'react', './examples.rt',
|
|||
var Examples = React.createClass({
|
||||
displayName: 'Examples',
|
||||
mixins: [React.addons.LinkedStateMixin],
|
||||
|
||||
getInitialState: function () {
|
||||
var codeAmd = window.reactTemplates.convertTemplateToReact(helloRT, {modules: 'amd', name: 'template'});
|
||||
var codeCJS = window.reactTemplates.convertTemplateToReact(helloRT, {modules: 'commonjs', name: 'template'});
|
||||
return {
|
||||
amd: {value: codeAmd},
|
||||
cjs: {value: codeCJS},
|
||||
samples: samples
|
||||
};
|
||||
},
|
||||
|
||||
render: function () {
|
||||
return examplesTemplate.apply(this);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<!--suppress CheckEmptyScriptTag -->
|
||||
<rt-require dependency="./playground" as="playground"/>
|
||||
<rt-require dependency="./CodeMirrorViewer" as="viewer"/>
|
||||
<div id="examples">
|
||||
<div class="example">
|
||||
<h3>Hello world in react templates</h3>
|
||||
|
|
@ -43,4 +44,18 @@
|
|||
</p>
|
||||
<playground id="weatherExample" rt-props="this.state.samples.weather" direction="horizontal"></playground>
|
||||
</div>
|
||||
<div id="amd" class="example">
|
||||
<h3>AMD</h3>
|
||||
<p>
|
||||
This example shows the hello sample output with AMD support.
|
||||
</p>
|
||||
<viewer rt-props="this.state.amd" mode="javascript" />
|
||||
</div>
|
||||
<div id="commonjs" class="example">
|
||||
<h3>CommonJS</h3>
|
||||
<p>
|
||||
This example shows the hello sample output with CommonJS support.
|
||||
</p>
|
||||
<viewer rt-props="this.state.cjs" mode="javascript" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
define([
|
||||
'react/addons',
|
||||
'lodash',
|
||||
'./playground'
|
||||
], function (React, _, playground) {
|
||||
'./playground',
|
||||
'./CodeMirrorViewer'
|
||||
], function (React, _, playground, viewer) {
|
||||
'use strict';
|
||||
return function () {
|
||||
return React.createElement('div', { 'id': 'examples' }, React.createElement('div', { 'className': 'example' }, React.createElement('h3', {}, 'Hello world in react templates'), React.createElement('p', {}, '\n Simple hello world html transformed into react javascript code\n '), React.createElement(playground, _.merge({}, {
|
||||
|
|
@ -23,6 +24,12 @@ define([
|
|||
}, this.state.samples.todo))), React.createElement('div', { 'className': 'example' }, React.createElement('h3', {}, 'Weather'), React.createElement('p', {}, '\n This example shows working with async events, usage of regular event handler function pointers instead of lambda expression, and working with 2 way binding\n '), React.createElement(playground, _.merge({}, {
|
||||
'id': 'weatherExample',
|
||||
'direction': 'horizontal'
|
||||
}, this.state.samples.weather))));
|
||||
}, this.state.samples.weather))), React.createElement('div', {
|
||||
'id': 'amd',
|
||||
'className': 'example'
|
||||
}, React.createElement('h3', {}, 'AMD'), React.createElement('p', {}, '\n This example shows the hello sample output with AMD support.\n '), React.createElement(viewer, _.merge({}, { 'mode': 'javascript' }, this.state.amd))), React.createElement('div', {
|
||||
'id': 'commonjs',
|
||||
'className': 'example'
|
||||
}, React.createElement('h3', {}, 'CommonJS'), React.createElement('p', {}, '\n This example shows the hello sample output with CommonJS support.\n '), React.createElement(viewer, _.merge({}, { 'mode': 'javascript' }, this.state.cjs))));
|
||||
};
|
||||
});
|
||||
|
|
@ -32,10 +32,8 @@
|
|||
</div>
|
||||
<ul class="nav-site">
|
||||
<li><a href="index.html">HOME</a></li>
|
||||
<li><a href="https://github.com/wix/react-templates">docs</a></li>
|
||||
<!--<li><a href="https://github.com/wix/react-templates">support</a></li>-->
|
||||
<li><a href="https://github.com/wix/react-templates">download</a></li>
|
||||
<!--<li><a href="https://github.com/wix/react-templates/">blog</a></li>-->
|
||||
<li><a href="https://github.com/wix/react-templates#template-directives-and-syntax">docs</a></li>
|
||||
<li><a href="https://github.com/wix/react-templates#installation">download</a></li>
|
||||
<li><a href="https://github.com/wix/react-templates">github</a>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@ define([
|
|||
'tabIndex': '-1',
|
||||
'href': '#',
|
||||
'onClick': onClick7.bind(this)
|
||||
}, 'Weather'))))), React.createElement('ul', { 'className': 'nav-site' }, React.createElement('li', {}, React.createElement('a', { 'href': 'index.html' }, 'HOME')), React.createElement('li', {}, React.createElement('a', { 'href': 'https://github.com/wix/react-templates' }, 'docs')) /* <li><a href="https://github.com/wix/react-templates">support</a></li> */, React.createElement('li', {}, React.createElement('a', { 'href': 'https://github.com/wix/react-templates' }, 'download')) /* <li><a href="https://github.com/wix/react-templates/">blog</a></li> */, React.createElement('li', {}, React.createElement('a', { 'href': 'https://github.com/wix/react-templates' }, 'github')))), React.createElement('div', { 'className': 'playground-container' }, React.createElement(playground, {
|
||||
}, 'Weather'))))), React.createElement('ul', { 'className': 'nav-site' }, React.createElement('li', {}, React.createElement('a', { 'href': 'index.html' }, 'HOME')), React.createElement('li', {}, React.createElement('a', { 'href': 'https://github.com/wix/react-templates#template-directives-and-syntax' }, 'docs')), React.createElement('li', {}, React.createElement('a', { 'href': 'https://github.com/wix/react-templates#installation' }, 'download')), React.createElement('li', {}, React.createElement('a', { 'href': 'https://github.com/wix/react-templates' }, 'github')))), React.createElement('div', { 'className': 'playground-container' }, React.createElement(playground, {
|
||||
'ref': 'playground',
|
||||
'direction': 'vertical',
|
||||
'fiddle': true
|
||||
|
|
|
|||
|
|
@ -0,0 +1,72 @@
|
|||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||
|
||||
(function(mod) {
|
||||
if (typeof exports == "object" && typeof module == "object") // CommonJS
|
||||
mod(require("../../lib/codemirror"));
|
||||
else if (typeof define == "function" && define.amd) // AMD
|
||||
define(["../../lib/codemirror"], mod);
|
||||
else // Plain browser env
|
||||
mod(CodeMirror);
|
||||
})(function(CodeMirror) {
|
||||
"use strict";
|
||||
|
||||
CodeMirror.runMode = function(string, modespec, callback, options) {
|
||||
var mode = CodeMirror.getMode(CodeMirror.defaults, modespec);
|
||||
var ie = /MSIE \d/.test(navigator.userAgent);
|
||||
var ie_lt9 = ie && (document.documentMode == null || document.documentMode < 9);
|
||||
|
||||
if (callback.nodeType == 1) {
|
||||
var tabSize = (options && options.tabSize) || CodeMirror.defaults.tabSize;
|
||||
var node = callback, col = 0;
|
||||
node.innerHTML = "";
|
||||
callback = function(text, style) {
|
||||
if (text == "\n") {
|
||||
// Emitting LF or CRLF on IE8 or earlier results in an incorrect display.
|
||||
// Emitting a carriage return makes everything ok.
|
||||
node.appendChild(document.createTextNode(ie_lt9 ? '\r' : text));
|
||||
col = 0;
|
||||
return;
|
||||
}
|
||||
var content = "";
|
||||
// replace tabs
|
||||
for (var pos = 0;;) {
|
||||
var idx = text.indexOf("\t", pos);
|
||||
if (idx == -1) {
|
||||
content += text.slice(pos);
|
||||
col += text.length - pos;
|
||||
break;
|
||||
} else {
|
||||
col += idx - pos;
|
||||
content += text.slice(pos, idx);
|
||||
var size = tabSize - col % tabSize;
|
||||
col += size;
|
||||
for (var i = 0; i < size; ++i) content += " ";
|
||||
pos = idx + 1;
|
||||
}
|
||||
}
|
||||
|
||||
if (style) {
|
||||
var sp = node.appendChild(document.createElement("span"));
|
||||
sp.className = "cm-" + style.replace(/ +/g, " cm-");
|
||||
sp.appendChild(document.createTextNode(content));
|
||||
} else {
|
||||
node.appendChild(document.createTextNode(content));
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
var lines = CodeMirror.splitLines(string), state = (options && options.state) || CodeMirror.startState(mode);
|
||||
for (var i = 0, e = lines.length; i < e; ++i) {
|
||||
if (i) callback("\n");
|
||||
var stream = new CodeMirror.StringStream(lines[i]);
|
||||
if (!stream.string && mode.blankLine) mode.blankLine(state);
|
||||
while (!stream.eol()) {
|
||||
var style = mode.token(stream, state);
|
||||
callback(stream.current(), style, i, stream.start, state);
|
||||
stream.start = stream.pos;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
});
|
||||
|
|
@ -147,12 +147,10 @@ define(['react', 'jquery', 'lodash', './playground-fiddle.rt', './playground.rt'
|
|||
getTabs: function () {
|
||||
if (this.props.codeVisible) {
|
||||
return [['templateHTML', 'Template'], ['templateProps', 'Class'], ['templateSource', 'Generated code']];
|
||||
} else {
|
||||
return [['templateHTML', 'Template'], ['templateSource', 'Generated code']];
|
||||
}
|
||||
return [['templateHTML', 'Template'], ['templateSource', 'Generated code']];
|
||||
},
|
||||
updateSample: function (state) {
|
||||
|
||||
//try {
|
||||
// React.unmountComponentAtNode(mountNode);
|
||||
//} catch (e) { }
|
||||
|
|
@ -162,36 +160,41 @@ define(['react', 'jquery', 'lodash', './playground-fiddle.rt', './playground.rt'
|
|||
//this.validHTML = this.sampleFunc !== emptyFunc;
|
||||
this.validHTML = true;
|
||||
this.sampleRender = generateRenderFunc(this.sampleFunc);
|
||||
//var classBase = {};
|
||||
try {
|
||||
this.validProps = true;
|
||||
console.log(state.templateProps);
|
||||
//classBase = eval(this.templateSource + '\n' + state.templateProps);
|
||||
//if (!_.isObject(classBase)) {
|
||||
// throw 'failed to eval';
|
||||
//}
|
||||
this.sample = eval('(function () {' + this.templateSource + '\n' + state.templateProps + '\n return React.createElement(' + state.name + ');})()');
|
||||
|
||||
clearMessage(this.refs.editorCode);
|
||||
} catch (e) {
|
||||
//classBase = {};
|
||||
this.validProps = false;
|
||||
this.sample = null;
|
||||
var editor = this.refs.editorCode;
|
||||
this.setTimeout(function() {
|
||||
showMessage(editor, e.message);
|
||||
console.log('setTimeout playgroundError');
|
||||
React.render(
|
||||
React.createElement('div', {className: 'playground-error'}, e.toString()),
|
||||
mountNode
|
||||
);
|
||||
}, 500);
|
||||
this.showError(e, editor);
|
||||
}
|
||||
//classBase.render = this.sampleRender;
|
||||
//this.sample = React.createFactory(React.createClass(classBase));
|
||||
},
|
||||
showError: function (e, editor) {
|
||||
var mountNode = this.refs.mount.getDOMNode();
|
||||
this.setTimeout(function() {
|
||||
showMessage(editor, e.message);
|
||||
React.render(
|
||||
React.createElement('div', {className: 'playground-error'}, e.toString()),
|
||||
mountNode
|
||||
);
|
||||
}, 500);
|
||||
},
|
||||
showErrorAnnotation: function (annot, editor) {
|
||||
var mountNode = this.refs.mount.getDOMNode();
|
||||
this.setTimeout(function() {
|
||||
editor.annotate(annot);
|
||||
React.render(
|
||||
React.createElement('div', {className: 'playground-error'}, annot.message),
|
||||
mountNode
|
||||
);
|
||||
}, 500);
|
||||
},
|
||||
clear: function () {
|
||||
//console.log('clear');
|
||||
var currentState = {
|
||||
templateHTML: templateHTML,
|
||||
templateProps: templateProps
|
||||
|
|
@ -199,6 +202,28 @@ define(['react', 'jquery', 'lodash', './playground-fiddle.rt', './playground.rt'
|
|||
//this.updateSample(currentState);
|
||||
this.setState(currentState);
|
||||
},
|
||||
generateCode: function (state) {
|
||||
var html = state.templateHTML;
|
||||
var editor = this.refs.editorRT;
|
||||
var name = window.reactTemplates.normalizeName(state.name) + 'RT';
|
||||
var code = null;
|
||||
try {
|
||||
code = window.reactTemplates.convertTemplateToReact(html.trim().replace(/\r/g, ''), {modules: 'none', name: name});
|
||||
clearMessage(editor);
|
||||
} catch (e) {
|
||||
var annot = null;
|
||||
if (e.name === 'RTCodeError') {
|
||||
//index: -1 line: -1 message: "Document should have a root element" name: "RTCodeError"
|
||||
annot = {line: e.line, message: e.message, index: e.index};
|
||||
} else {
|
||||
annot = {line: 1, message: e.message};
|
||||
}
|
||||
this.showErrorAnnotation(annot, editor);
|
||||
//showMessage(editor, msg);
|
||||
console.log(e);
|
||||
}
|
||||
this.templateSource = code;
|
||||
},
|
||||
getInitialState: function () {
|
||||
var currentState = {
|
||||
templateHTML: this.props.templateHTML || templateHTML,
|
||||
|
|
@ -229,14 +254,13 @@ define(['react', 'jquery', 'lodash', './playground-fiddle.rt', './playground.rt'
|
|||
componentWillUnmount: function(){
|
||||
window.removeEventListener('resize', this.calcSize);
|
||||
},
|
||||
|
||||
calcSize: function() {
|
||||
var contentHeight = $(window).height() - $('#header').height();
|
||||
var height = contentHeight / 2 - 10;
|
||||
|
||||
$('.code-area').each(function (i, k) {
|
||||
$(this).height(height);
|
||||
console.log($(this).height());
|
||||
//console.log($(this).height());
|
||||
});
|
||||
this.refs.editorCode.editor.refresh();
|
||||
this.refs.editorRT.editor.refresh();
|
||||
|
|
@ -251,9 +275,6 @@ define(['react', 'jquery', 'lodash', './playground-fiddle.rt', './playground.rt'
|
|||
this.generateCode(this.state);
|
||||
var template = this.props.fiddle ? pgFiddleTemplate : playgroundTemplate;
|
||||
return template.apply(this);
|
||||
},
|
||||
generateCode: function (state) {
|
||||
this.templateSource = generateTemplateSource(state.templateHTML, this.refs.editorRT, window.reactTemplates.normalizeName(state.name) + 'RT');
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue