bobwen-dev
/
react-templates
mirror of https://github.com/bobwen-dev/react-templates
1
0
Fork 0
Code Issues Releases Wiki Activity

add toolbar + samples

This commit is contained in:
ido 2014-12-08 14:48:12 +02:00
parent fa51a3ea5c
commit 85f3ef4a95
8 changed files with 179 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
playground/css/fiddle.css
View File

@ -37,16 +37,35 @@ body {
#header-title {
color: #00d8ff;
font-size: 24px;
line-height: 50px;
height: 50px;
line-height: 48px;
/*height: 50px;*/
padding-left: 10px;
vertical-align: middle;
display: inline-block;
}
.title-link, .title-link:hover, .title-link:visited {
text-decoration: none;
color: #00d8ff;
}
#buttons-bar {
padding-left: 40px;
display: inline-block;
}
#buttons-bar button, #buttons-bar div {
margin-right: 10px;
}
.toolbar-dropdown {
display: inline-block;
}
.button-icon {
margin-right: 5px;
}
.fiddle {
height: 100%;
}
@ -63,6 +82,7 @@ body {
width: 50%;
display: table-cell;
vertical-align: top;
padding: 5px;
}
.sample-view {

17
playground/fiddle-main.js
View File

@ -6,7 +6,9 @@ requirejs.config({
firebase: 'https://cdn.firebase.com/js/client/2.0.5/firebase',
react: 'http://fb.me/react-with-addons-0.12.1',
//ace: '../ace-builds-1.1.8/src-min/ace',
fiddle: './fiddle'
fiddle: './fiddle',
text: 'libs/requirejs-plugins/text',
json: 'libs/requirejs-plugins/json'
//'react/addons': 'http://fb.me/react-with-addons-0.12.1'
},
shim: {
@ -41,8 +43,8 @@ requirejs(['jquery', 'react', 'fiddle'], function ($, React, fiddle) {
//});
var h = (contentHeight / 2) - 10;
var w = ($(document).width() / 2) - 10;
//var h = (contentHeight / 2) - 10;
//var w = ($(document).width() / 2) - 10;
//var size = getWindowSize();
//$('#editor-rt').css({
// top: 50, left: 0, bottom: h, right: w, position: 'absolute'
@ -70,17 +72,8 @@ requirejs(['jquery', 'react', 'fiddle'], function ($, React, fiddle) {
//var h = (contentHeight / 2) - 10;
//var w = ($(document).width() / 2) - 10;
var $this = $(this);
//$this.parent().width();
//$this.parent().width();
console.log('' + $this.parent().height() + ',' + $this.parent().width() );
//$(this).css({);
$this.height($this.parent().height() - 2).width($this.parent().width() - 2);
//$(this).css({
// top: 50 + h, left: w, bottom: 0, right: 0, position: 'absolute'
//});
});
//.large-text-area
}
});

30
playground/fiddle.js
View File

@ -3,7 +3,7 @@
*/
/*eslint global-strict:0, no-alert:0*/
/*global Firebase:true,alert:true*/
define(['react', 'firebase', 'lodash', './fiddle.rt'], function (React, Firebase, _, fiddleTemplate) {
define(['react', 'firebase', 'lodash', './fiddle.rt', 'jquery'], function (React, Firebase, _, fiddleTemplate, $) {
'use strict';
function generateRandomId() {
@ -40,7 +40,35 @@ define(['react', 'firebase', 'lodash', './fiddle.rt'], function (React, Firebase
Firebase.goOffline();
alert('saved the fiddle, you can share your url');
}.bind(this));
},
clear: function () {
this.refs.playground.clear();
},
loadSample: function (name) {
//require(['text!./samples/' + name + '.rt', 'text!./samples/' + name + '.code'], function (rt, code) {
// var currentState = {
// templateHTML: rt,
// templateProps: code
// };
// //this.updateSample(currentState);
// this.refs.playground.setState(currentState);
//});
var playground = this.refs.playground;
$.get('playground/samples/' + name + '.rt', null, function (data, textStatus, jqXHR) {
var rt = data;
$.get('playground/samples/' + name + '.code', null, function (data2, textStatus2, jqXHR2) {
var currentState = {
templateHTML: rt,
templateProps: data2
};
//this.updateSample(currentState);
playground.setState(currentState);
});
});
//this.refs.playground.clear();
},
render: function () {

23
playground/fiddle.rt
View File

@ -2,13 +2,34 @@
<div class="fiddle">
<div id="header">
<div id="header-title">
<a href="index.html" class="title-link">
<span>&lt;</span>
<img class="nav-logo" src="https://facebook.github.io/react/img/logo.svg" width="32" height="32" />
<span>/&gt;</span>
</a>
RTFiddle
</div>
<div id="buttons-bar">
<button class="btn" onClick="(evt)=>evt.preventDefault();this.save()">Save fiddle</button>
<button type="button" class="btn btn-default" onClick="(evt)=>evt.preventDefault();this.save()">
<span class="glyphicon glyphicon-star button-icon" aria-hidden="true"></span>Save fiddle
</button>
<button type="button" class="btn btn-default" onClick="(evt)=>evt.preventDefault();this.clear()">
<span class="glyphicon glyphicon-trash button-icon" aria-hidden="true"></span>Clear
</button>
<div class="dropdown toolbar-dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
Load Sample
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" onClick="(evt)=>evt.preventDefault();this.loadSample('rt-if')">rt-if</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" onClick="(evt)=>evt.preventDefault();this.loadSample('rt-repeat')">rt-repeat</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" onClick="(evt)=>evt.preventDefault();this.loadSample('rt-props')">rt-props</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" onClick="(evt)=>evt.preventDefault();this.loadSample('todo')">Todo</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" onClick="(evt)=>evt.preventDefault();this.loadSample('weather')">Weather</a></li>
</ul>
</div>
</div>
</div>
<!--<div>-->

89
playground/fiddle.rt.js
View File

@ -9,20 +9,93 @@ define([
evt.preventDefault();
this.save();
}
function onClick2(evt) {
evt.preventDefault();
this.clear();
}
function onClick3(evt) {
evt.preventDefault();
this.loadSample('rt-if');
}
function onClick4(evt) {
evt.preventDefault();
this.loadSample('rt-repeat');
}
function onClick5(evt) {
evt.preventDefault();
this.loadSample('rt-props');
}
function onClick6(evt) {
evt.preventDefault();
this.loadSample('todo');
}
function onClick7(evt) {
evt.preventDefault();
this.loadSample('weather');
}
return function () {
return React.createElement('div', { 'className': 'fiddle' }, React.createElement('div', { 'id': 'header' }, React.createElement('div', { 'id': 'header-title' }, React.createElement('span', {}, '<'), React.createElement('img', {
return React.createElement('div', { 'className': 'fiddle' }, React.createElement('div', { 'id': 'header' }, React.createElement('div', { 'id': 'header-title' }, React.createElement('a', {
'href': 'index.html',
'className': 'title-link'
}, React.createElement('span', {}, '<'), React.createElement('img', {
'className': 'nav-logo',
'src': 'https://facebook.github.io/react/img/logo.svg',
'width': '32',
'height': '32'
}), React.createElement('span', {}, '/>'), '\n RTFiddle\n '), React.createElement('div', { 'id': 'buttons-bar' }, React.createElement('button', {
'className': 'btn',
}), React.createElement('span', {}, '/>')), '\n RTFiddle\n '), React.createElement('div', { 'id': 'buttons-bar' }, React.createElement('button', {
'type': 'button',
'className': 'btn btn-default',
'onClick': onClick1.bind(this)
}, 'Save fiddle'))) /* <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 /> */, React.createElement('div', { 'className': 'playground-container' }, React.createElement(playground, {
}, React.createElement('span', {
'className': 'glyphicon glyphicon-star button-icon',
'aria-hidden': 'true'
}), 'Save fiddle\n '), React.createElement('button', {
'type': 'button',
'className': 'btn btn-default',
'onClick': onClick2.bind(this)
}, React.createElement('span', {
'className': 'glyphicon glyphicon-trash button-icon',
'aria-hidden': 'true'
}), 'Clear\n '), React.createElement('div', { 'className': 'dropdown toolbar-dropdown' }, React.createElement('button', {
'className': 'btn btn-default dropdown-toggle',
'type': 'button',
'id': 'dropdownMenu1',
'data-toggle': 'dropdown',
'aria-expanded': 'true'
}, '\n Load Sample\n ', React.createElement('span', { 'className': 'caret' })), React.createElement('ul', {
'className': 'dropdown-menu',
'role': 'menu',
'aria-labelledby': 'dropdownMenu1'
}, React.createElement('li', { 'role': 'presentation' }, React.createElement('a', {
'role': 'menuitem',
'tabIndex': '-1',
'href': '#',
'onClick': onClick3.bind(this)
}, 'rt-if')), React.createElement('li', { 'role': 'presentation' }, React.createElement('a', {
'role': 'menuitem',
'tabIndex': '-1',
'href': '#',
'onClick': onClick4.bind(this)
}, 'rt-repeat')), React.createElement('li', { 'role': 'presentation' }, React.createElement('a', {
'role': 'menuitem',
'tabIndex': '-1',
'href': '#',
'onClick': onClick5.bind(this)
}, 'rt-props')), React.createElement('li', { 'role': 'presentation' }, React.createElement('a', {
'role': 'menuitem',
'tabIndex': '-1',
'href': '#',
'onClick': onClick6.bind(this)
}, 'Todo')), React.createElement('li', { 'role': 'presentation' }, React.createElement('a', {
'role': 'menuitem',
'tabIndex': '-1',
'href': '#',
'onClick': onClick7.bind(this)
}, 'Weather')))))) /* <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 /> */, React.createElement('div', { 'className': 'playground-container' }, React.createElement(playground, {
'ref': 'playground',
'direction': 'vertical',
'fiddle': true

14
playground/playground-fiddle.rt
View File

@ -22,12 +22,14 @@
mode="javascript"
readOnly="{true}" />
</div>
<div id="result-area" key="result-area" class="result-area well">
<h2>Preview:</h2>
<form class="sample-view" onSubmit="(e) => e.preventDefault();">
<this.sample key="sample">
</this.sample>
</form>
<div class="result-area">
<div id="result-area" key="result-area" class="well">
<h2>Preview:</h2>
<form class="sample-view" onSubmit="(e) => e.preventDefault();">
<this.sample key="sample">
</this.sample>
</form>
</div>
</div>
</div>
<!--<br style="clear:both">-->

6
playground/playground-fiddle.rt.js
View File

@ -36,13 +36,13 @@ define([
'value': this.templateSource,
'mode': 'javascript',
'readOnly': true
})), React.createElement('div', {
})), React.createElement('div', { 'className': 'result-area' }, React.createElement('div', {
'id': 'result-area',
'key': 'result-area',
'className': 'result-area well'
'className': 'well'
}, React.createElement('h2', {}, 'Preview:'), React.createElement('form', {
'className': 'sample-view',
'onSubmit': onSubmit3.bind(this)
}, React.createElement(this.sample, { 'key': 'sample' })))) /* <br style="clear:both"> */);
}, React.createElement(this.sample, { 'key': 'sample' }))))) /* <br style="clear:both"> */);
};
});

9
playground/playground.js
View File

@ -100,6 +100,15 @@ define(['react', 'lodash', './playground-fiddle.rt', './playground.rt'], functio
classBase.render = this.sampleRender;
this.sample = React.createFactory(React.createClass(classBase));
},
clear: function () {
//console.log('clear');
var currentState = {
templateHTML: templateHTML,
templateProps: templateProps
};
//this.updateSample(currentState);
this.setState(currentState);
},
getInitialState: function () {
var currentState = {
templateHTML: this.props.templateHTML || templateHTML,