bobwen-dev/react-templates
1
0
Fork 0
mirror of https://github.com/bobwen-dev/react-templates synced 2025-04-12 00:56:39 +02:00
Code Issues Releases Wiki Activity

add fiddle layout

Browse Source
This commit is contained in:
ido 2014-12-04 11:15:19 +02:00
parent ec1eef1cc0
commit 2ed1428131
15 changed files with 515 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
fiddle.html Normal file
View File

@ -0,0 +1,34 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>React templates - RTFiddle</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<link rel="stylesheet" href="playground/css/fiddle.css"/>
<style>
</style>
</head>
<body>
<div id="container">
</div>
<!--<script src="playground/bundle/reactTemplates.bundle.js"></script>-->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.0.5/firebase.js"></script>
<!--<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>-->
<!--<script src="playground/libs.browser.js"></script>-->
<script src="playground/main.browser.js"></script>
<script type="application/javascript">
initFiddle();
</script>
</body>
</html>

2
home.html
View File

@ -39,7 +39,7 @@
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">-->
<!-- Latest compiled and minified JavaScript -->
<link rel="stylesheet" href="playground/css/home.css"/>

68
playground/css/fiddle.css Normal file
View File

@ -0,0 +1,68 @@
body {
/*padding: 20px;*/
font-family: "Helvetica", "Arial", "FreeSans", "Verdana", "Tahoma", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", sans-serif;
background: #f6f6f6 url(../img/initializing.png) 50% 50% no-repeat;
overflow: hidden;
padding: 0;
margin: 0;
position: relative;
font-size: 14px;
}
#header {
height: 48px;
/*background: #4679bd;*/
background: #222;
}
#header-title {
color: #00d8ff;
font-size: 24px;
line-height: 50px;
height: 50px;
display: inline-block;
}
.hiddenTab {
/*width: 0;*/
/*height: 0;*/
}
.large-text-area {
height: 400px;
margin: 10px;
}
.result-area {
width: 50%;
float: left;
margin-top: 48px;
}
.sample-view {
margin: 10px;
}
.sample-view button {
margin: 5px;
}
.sample-view input[type=checkbox] {
margin-right: 5px;
}
.playground {
}
.code-area {
/*background-color: rgb(181, 181, 181);*/
width: 50%;
height: 50%;
/*height: 166px;*/
display: inline-block;
float: left;
/*margin: 2px;*/
/*padding: 10px;*/
}
/*position: relative; min-height: 100%;*/

4
playground/css/home.css
View File

@ -1,7 +1,7 @@
.large-text-area {
/*height: 400px;*/
height: 400px;
/*min-height: 100px;*/
height: 100%;
/*height: 100%;*/
margin: 10px;
}

2
playground/examples.rt
View File

@ -5,7 +5,7 @@
<p>
Simple hello world html transformed into react javascript code
</p>
<playground id="helloExample" rt-props="this.state.samples[0]" direction="horizontal" style="display: block"></playground>
<playground id="helloExample" rt-props="this.state.samples[0]" direction="horizontal" codeVisible="{false}" style="display: block"></playground>
</div>
<div class="example">
<h3>A Stateful Component</h3>

1
playground/examples.rt.js
View File

@ -6,6 +6,7 @@ module.exports = function () {
return React.DOM.div({ 'id': 'examples' }, React.DOM.div({ 'className': 'example' }, React.DOM.h3({}, 'Hello world in react templates'), React.DOM.p({}, '\n Simple hello world html transformed into react javascript code\n '), playground(_.merge({}, {
'id': 'helloExample',
'direction': 'horizontal',
'codeVisible': false,
'style': { display: 'block' }
}, this.state.samples[0]))), React.DOM.div({ 'className': 'example' }, React.DOM.h3({}, 'A Stateful Component'), React.DOM.p({}, '\n In addition to taking input data (accessed via ', React.DOM.code({}, 'this.props'), '), a\n component can maintain internal state data (accessed via ', React.DOM.code({}, 'this.state'), ').\n When a component\'s state data changes, the rendered markup will be\n updated by re-invoking ', React.DOM.code({}, 'render()'), '.\n '), React.DOM.div({ 'id': 'timerExample' }), playground(_.merge({}, {
'id': 'example2',

25
playground/fiddle.rt
View File

@ -1,8 +1,19 @@
<!DOCTYPE rt playGround="./PlayGround.js">
<!DOCTYPE rt playground="./playground.js">
<div>
<h1>React Templates fiddle</h1>
<h2>Play with react templates and save/share your results</h2>
<button class="btn btn-lg btn-primary" onClick="(evt)=>evt.preventDefault();this.save()">Save fiddle</button>
<br>
<playGround ref="playground" direction="vertical"/>
</div>
<div id="header">
<div id="header-title">
<img class="nav-logo" src="https://facebook.github.io/react/img/logo.svg" width="36" height="36" />
RTFIddle
</div>
<div style="padding-left: 20px; display: inline-block">
<button class="btn" onClick="(evt)=>evt.preventDefault();this.save()">Save fiddle</button>
</div>
</div>
<div>
<!--<h1>React Templates fiddle</h1>-->
<!--<h2>Play with react templates and save/share your results</h2>-->
<!--<button class="btn btn-lg btn-primary" onClick="(evt)=>evt.preventDefault();this.save()">Save fiddle</button>-->
<!--<br />-->
<playground ref="playground" direction="vertical" fiddle="{true}" />
</div>
</div>

24
playground/fiddle.rt.js
View File

@ -1,17 +1,31 @@
var React = require('react/addons');
var _ = require('lodash');
var playGround = require('./PlayGround.js');
var playground = require('./playground.js');
'use strict';
function onClick1(evt) {
evt.preventDefault();
this.save();
}
module.exports = function () {
return React.DOM.div({}, React.DOM.h1({}, 'React Templates fiddle'), React.DOM.h2({}, 'Play with react templates and save/share your results'), React.DOM.button({
'className': 'btn btn-lg btn-primary',
return React.DOM.div({}, React.DOM.div({ 'id': 'header' }, React.DOM.div({ 'id': 'header-title' }, React.DOM.img({
'className': 'nav-logo',
'src': 'https://facebook.github.io/react/img/logo.svg',
'width': '36',
'height': '36'
}), '\n RTFIddle\n '), React.DOM.div({
'style': {
paddingLeft: '20px',
display: 'inline-block'
}
}, React.DOM.button({
'className': 'btn',
'onClick': onClick1.bind(this)
}, 'Save fiddle'), React.DOM.br({}, playGround({
}, 'Save fiddle'))), React.DOM.div({} /* <h1>React Templates fiddle</h1> */
/* <h2>Play with react templates and save/share your results</h2> */
/* <button class="btn btn-lg btn-primary" onClick="(evt)=>evt.preventDefault();this.save()">Save fiddle</button> */
/* <br /> */, playground({
'ref': 'playground',
'direction': 'vertical'
'direction': 'vertical',
'fiddle': true
})));
};

84
playground/home-main.browser.js
View File

@ -68972,6 +68972,7 @@ module.exports = function () {
return React.DOM.div({ 'id': 'examples' }, React.DOM.div({ 'className': 'example' }, React.DOM.h3({}, 'Hello world in react templates'), React.DOM.p({}, '\n Simple hello world html transformed into react javascript code\n '), playground(_.merge({}, {
'id': 'helloExample',
'direction': 'horizontal',
'codeVisible': false,
'style': { display: 'block' }
}, this.state.samples[0]))), React.DOM.div({ 'className': 'example' }, React.DOM.h3({}, 'A Stateful Component'), React.DOM.p({}, '\n In addition to taking input data (accessed via ', React.DOM.code({}, 'this.props'), '), a\n component can maintain internal state data (accessed via ', React.DOM.code({}, 'this.state'), ').\n When a component\'s state data changes, the rendered markup will be\n updated by re-invoking ', React.DOM.code({}, 'render()'), '.\n '), React.DOM.div({ 'id': 'timerExample' }), playground(_.merge({}, {
'id': 'example2',
@ -68987,7 +68988,7 @@ module.exports = function () {
'style': { display: 'block' }
})));
};
},{"./playground":278,"lodash":113,"react/addons":undefined}],277:[function(require,module,exports){
},{"./playground":279,"lodash":113,"react/addons":undefined}],277:[function(require,module,exports){
'use strict';
/*eslint-env browser*/
var reactTemplates = require('../src/reactTemplates');
@ -69027,11 +69028,69 @@ if (window.location.hash) {
},{"../src/reactTemplates":280,"./examples.js":275,"lodash":113,"react/addons":undefined}],278:[function(require,module,exports){
},{"../src/reactTemplates":281,"./examples.js":275,"lodash":113,"react/addons":undefined}],278:[function(require,module,exports){
var React = require('react/addons');
var _ = require('lodash');
var CodeEditor = require('./aceEditor');
'use strict';
function onChange1(evt) {
this.setState({ 'templateHTML': evt.target.value });
}
function onChange2(evt) {
this.setState({ 'templateProps': evt.target.value });
}
function onSubmit3(e) {
e.preventDefault();
}
module.exports = function () {
return React.DOM.div({}, React.DOM.div({
'style': {
position: 'relative',
minHeight: '100%'
}
}, CodeEditor({
'className': 'large-text-area',
'style': { border: this.validHTML ? '1px solid black' : '2px solid red' },
'value': this.state.templateHTML,
'mode': 'html',
'onChange': onChange1.bind(this)
})), React.DOM.div({
'style': {
position: 'relative',
minHeight: '100%'
}
}, CodeEditor({
'className': 'large-text-area',
'style': { border: this.validProps ? '1px solid black' : '2px solid red' },
'value': this.state.templateProps,
'mode': 'javascript',
'onChange': onChange2.bind(this)
})), React.DOM.div({
'style': {
position: 'relative',
minHeight: '100%'
}
}, CodeEditor({
'className': 'large-text-area',
'style': { border: '1px solid black' },
'value': this.templateSource,
'mode': 'javascript',
'readOnly': true
})), React.DOM.div({
'key': 'result-area',
'className': 'result-area well ' + (this.props.direction === 'horizontal' && 'horizontal' || 'vertical'),
'style': { marginTop: '48px' }
}, React.DOM.h2({}, 'Preview:'), React.DOM.form({
'className': 'sample-view',
'onSubmit': onSubmit3.bind(this)
}, this.sample({ 'key': 'sample' }))), React.DOM.br({ 'style': { clear: 'both' } }));
};
},{"./aceEditor":274,"lodash":113,"react/addons":undefined}],279:[function(require,module,exports){
'use strict';
/*eslint-env browser*/
var reactTemplates = require('../src/reactTemplates');
var playgroundTemplate = require('./playground.rt.js');
var pgFiddleTemplate = require('./playground-fiddle.rt.js');
var React = require('react/addons');
@ -69102,11 +69161,15 @@ var Playground = React.createClass({
displayName: 'Playground',
mixins: [React.addons.LinkedStateMixin],
propTypes: {
direction: React.PropTypes.string
direction: React.PropTypes.string,
codeVisible: React.PropTypes.bool,
fiddle: React.PropTypes.bool
},
getDefaultProps: function() {
return {
direction: 'horizontal' //vertical
direction: 'horizontal', //vertical
codeVisible: true,
fiddle: false
};
},
updateSample: function (state) {
@ -69144,13 +69207,14 @@ var Playground = React.createClass({
},
render: function () {
return playgroundTemplate.apply(this);
var template = this.props.fiddle ? pgFiddleTemplate : playgroundTemplate;
return template.apply(this);
}
});
module.exports = Playground;
},{"../src/reactTemplates":280,"./playground.rt.js":279,"lodash":113,"react/addons":undefined}],279:[function(require,module,exports){
},{"../src/reactTemplates":281,"./playground-fiddle.rt.js":278,"./playground.rt.js":280,"lodash":113,"react/addons":undefined}],280:[function(require,module,exports){
var React = require('react/addons');
var _ = require('lodash');
var CodeEditor = require('./aceEditor');
@ -69180,7 +69244,7 @@ module.exports = function () {
'aria-controls': 'template',
'role': 'tab',
'data-toggle': 'tab'
}, 'Template')), this.state.templateProps != '{}' ? React.DOM.li({ 'role': 'presentation' }, React.DOM.a({
}, 'Template')), this.props.codeVisible ? React.DOM.li({ 'role': 'presentation' }, React.DOM.a({
'href': '#' + this.props.id + '-classCode',
'aria-controls': 'classCode',
'role': 'tab',
@ -69200,7 +69264,7 @@ module.exports = function () {
'value': this.state.templateHTML,
'mode': 'html',
'onChange': onChange1.bind(this)
})), this.state.templateProps != '{}' ? React.DOM.div({
})), this.props.codeVisible ? React.DOM.div({
'role': 'tabpanel',
'className': 'tab-pane',
'id': this.props.id + '-classCode'
@ -69229,7 +69293,7 @@ module.exports = function () {
'onSubmit': onSubmit3.bind(this)
}, this.sample({ 'key': 'sample' }))), React.DOM.br({ 'style': { clear: 'both' } }));
};
},{"./aceEditor":274,"lodash":113,"react/addons":undefined}],280:[function(require,module,exports){
},{"./aceEditor":274,"lodash":113,"react/addons":undefined}],281:[function(require,module,exports){
/**
* Created by avim on 11/9/2014.
*/
@ -69600,7 +69664,7 @@ module.exports = {
_test: {}
};
},{"./stringUtils":281,"cheerio":8,"escodegen":70,"esprima":87,"lodash":113,"react/addons":undefined}],281:[function(require,module,exports){
},{"./stringUtils":282,"cheerio":8,"escodegen":70,"esprima":87,"lodash":113,"react/addons":undefined}],282:[function(require,module,exports){
'use strict';
var _ = require('lodash');

353
playground/main.browser.js
View File

File diff suppressed because one or more lines are too long

30
playground/playground-fiddle.rt Normal file
View File

@ -0,0 +1,30 @@
<!DOCTYPE rt CodeEditor="./aceEditor">
<!--suppress ALL -->
<div class="playground">
<div class="code-area">
<CodeEditor class="large-text-area" style="border: {this.validHTML ? '1px solid black' : '2px solid red'};"
value="{this.state.templateHTML}"
mode="html"
onChange="(evt) => this.setState({'templateHTML':evt.target.value})" />
</div>
<div class="code-area">
<CodeEditor class="large-text-area" style="border: {this.validProps ? '1px solid black' : '2px solid red'};"
value="{this.state.templateProps}"
mode="javascript"
onChange="(evt) => this.setState({'templateProps':evt.target.value})" />
</div>
<div class="code-area">
<CodeEditor class="large-text-area" style="border:1px solid black;"
value="{this.templateSource}"
mode="javascript"
readOnly="{true}" />
</div>
<div key="result-area" class="result-area">
<h2>Preview:</h2>
<form class="sample-view" onSubmit="(e) => e.preventDefault();">
<this.sample key="sample">
</this.sample>
</form>
</div>
<br style="clear:both">
</div>

40
playground/playground-fiddle.rt.js Normal file
View File

@ -0,0 +1,40 @@
var React = require('react/addons');
var _ = require('lodash');
var CodeEditor = require('./aceEditor');
'use strict';
function onChange1(evt) {
this.setState({ 'templateHTML': evt.target.value });
}
function onChange2(evt) {
this.setState({ 'templateProps': evt.target.value });
}
function onSubmit3(e) {
e.preventDefault();
}
module.exports = function () {
return React.DOM.div({ 'className': 'playground' }, React.DOM.div({ 'className': 'code-area' }, CodeEditor({
'className': 'large-text-area',
'style': { border: this.validHTML ? '1px solid black' : '2px solid red' },
'value': this.state.templateHTML,
'mode': 'html',
'onChange': onChange1.bind(this)
})), React.DOM.div({ 'className': 'code-area' }, CodeEditor({
'className': 'large-text-area',
'style': { border: this.validProps ? '1px solid black' : '2px solid red' },
'value': this.state.templateProps,
'mode': 'javascript',
'onChange': onChange2.bind(this)
})), React.DOM.div({ 'className': 'code-area' }, CodeEditor({
'className': 'large-text-area',
'style': { border: '1px solid black' },
'value': this.templateSource,
'mode': 'javascript',
'readOnly': true
})), React.DOM.div({
'key': 'result-area',
'className': 'result-area'
}, React.DOM.h2({}, 'Preview:'), React.DOM.form({
'className': 'sample-view',
'onSubmit': onSubmit3.bind(this)
}, this.sample({ 'key': 'sample' }))), React.DOM.br({ 'style': { clear: 'both' } }));
};

12
playground/playground.js
View File

@ -2,6 +2,7 @@
/*eslint-env browser*/
var reactTemplates = require('../src/reactTemplates');
var playgroundTemplate = require('./playground.rt.js');
var pgFiddleTemplate = require('./playground-fiddle.rt.js');
var React = require('react/addons');
@ -72,11 +73,15 @@ var Playground = React.createClass({
displayName: 'Playground',
mixins: [React.addons.LinkedStateMixin],
propTypes: {
direction: React.PropTypes.string
direction: React.PropTypes.string,
codeVisible: React.PropTypes.bool,
fiddle: React.PropTypes.bool
},
getDefaultProps: function() {
return {
direction: 'horizontal' //vertical
direction: 'horizontal', //vertical
codeVisible: true,
fiddle: false
};
},
updateSample: function (state) {
@ -114,7 +119,8 @@ var Playground = React.createClass({
},
render: function () {
return playgroundTemplate.apply(this);
var template = this.props.fiddle ? pgFiddleTemplate : playgroundTemplate;
return template.apply(this);
}
});

4
playground/playground.rt
View File

@ -4,7 +4,7 @@
<!-- Nav tabs -->
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#{this.props.id}-template" aria-controls="template" role="tab" data-toggle="tab">Template</a></li>
<li rt-if="this.state.templateProps != '{}'" role="presentation"><a href="#{this.props.id}-classCode" aria-controls="classCode" role="tab" data-toggle="tab">Class</a></li>
<li rt-if="this.props.codeVisible" role="presentation"><a href="#{this.props.id}-classCode" aria-controls="classCode" role="tab" data-toggle="tab">Class</a></li>
<li role="presentation"><a href="#{this.props.id}-generatedCode" aria-controls="generatedCode" role="tab" data-toggle="tab">Generated code</a></li>
</ul>
<!-- Tab panes -->
@ -16,7 +16,7 @@
onChange="(evt) => this.setState({'templateHTML':evt.target.value})"
/>
</div>
<div rt-if="this.state.templateProps != '{}'" role="tabpanel" class="tab-pane" id="{this.props.id}-classCode">
<div rt-if="this.props.codeVisible" role="tabpanel" class="tab-pane" id="{this.props.id}-classCode">
<CodeEditor class="large-text-area" style="border: {this.validProps? '1px solid black':'2px solid red'};"
value="{this.state.templateProps}"
mode="javascript"

4
playground/playground.rt.js
View File

@ -27,7 +27,7 @@ module.exports = function () {
'aria-controls': 'template',
'role': 'tab',
'data-toggle': 'tab'
}, 'Template')), this.state.templateProps != '{}' ? React.DOM.li({ 'role': 'presentation' }, React.DOM.a({
}, 'Template')), this.props.codeVisible ? React.DOM.li({ 'role': 'presentation' }, React.DOM.a({
'href': '#' + this.props.id + '-classCode',
'aria-controls': 'classCode',
'role': 'tab',
@ -47,7 +47,7 @@ module.exports = function () {
'value': this.state.templateHTML,
'mode': 'html',
'onChange': onChange1.bind(this)
})), this.state.templateProps != '{}' ? React.DOM.div({
})), this.props.codeVisible ? React.DOM.div({
'role': 'tabpanel',
'className': 'tab-pane',
'id': this.props.id + '-classCode'