diff --git a/playground/css/fiddle.css b/playground/css/fiddle.css index 952edd1..203bd21 100644 --- a/playground/css/fiddle.css +++ b/playground/css/fiddle.css @@ -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 { diff --git a/playground/fiddle-main.js b/playground/fiddle-main.js index ff1218a..d2f180d 100644 --- a/playground/fiddle-main.js +++ b/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 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 } }); diff --git a/playground/fiddle.js b/playground/fiddle.js index b5dfcb0..1233ed1 100644 --- a/playground/fiddle.js +++ b/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 () { diff --git a/playground/fiddle.rt b/playground/fiddle.rt index 77a605e..397d74d 100644 --- a/playground/fiddle.rt +++ b/playground/fiddle.rt @@ -2,13 +2,34 @@