add toolbar + samples

playground/css/fiddle.css

@@ -37,16 +37,35 @@ body {
 #header-title {
     color: #00d8ff;
     font-size: 24px;
-    line-height: 50px;
+    line-height: 48px;
-    height: 50px;
+    /*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 {

playground/fiddle-main.js

@@ -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 h = (contentHeight / 2) - 10;
-        var w = ($(document).width() / 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
     }
 });
 

playground/fiddle.js

@@ -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 () {

playground/fiddle.rt

@@ -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>-->

playground/fiddle.rt.js

@@ -9,16 +9,89 @@ 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', {
+        }), React.createElement('span', {}, '/>')), '\n            RTFiddle\n        '), React.createElement('div', { 'id': 'buttons-bar' }, React.createElement('button', {
-            'className': 'btn',
+            'type': 'button',
+            'className': 'btn btn-default',
             'onClick': onClick1.bind(this)
-        }, 'Save fiddle')))    /* <div> */
+        }, 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> */

playground/playground-fiddle.rt

@@ -22,7 +22,8 @@
                         mode="javascript"
                         readOnly="{true}" />
         </div>
-        <div id="result-area" key="result-area" class="result-area well">
+        <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">
@@ -30,5 +31,6 @@
                 </form>
             </div>
         </div>
+    </div>
     <!--<br style="clear:both">-->
 </div>

playground/playground-fiddle.rt.js

@@ -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"> */);
     };
 });

playground/playground.js

@@ -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,