diff --git a/Gruntfile.js b/Gruntfile.js index 3bf6dc5..cfdac32 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -10,6 +10,7 @@ module.exports = function (grunt) { all: { src: [ 'src/**/*.js', 'playground/**/*.js', + '!playground/libs/**/*.js', '!playground/rt-main.browser.js', '!playground/bundle/**', '!playground/tmp/**', diff --git a/playground/aceEditor.js b/playground/aceEditor.js index 50ce93a..ce2f0f8 100644 --- a/playground/aceEditor.js +++ b/playground/aceEditor.js @@ -2,6 +2,7 @@ * Created by avim on 11/25/2014. */ 'use strict'; +/*global ace:true*/ define(['react', 'lodash'/*, 'ace'*/], function (React, _/*, ace*/) { var editor = React.createClass({ @@ -15,8 +16,8 @@ var editor = React.createClass({ }, render: function () { - var props = _.omit(this.props, ['id', 'ref', 'key', 'value', 'valueLink', 'onChange']); - props.id = this.state.editorId; + var props = _.omit(this.props, ['ref', 'key', 'value', 'valueLink', 'onChange']); + props.id = this.props.id || this.state.editorId; return React.DOM.div(props); }, componentWillUpdate: function (nextProps/*, nextState*/) { @@ -26,7 +27,7 @@ var editor = React.createClass({ } }, componentDidMount: function () { - this.editor = ace.edit(this.state.editorId); + this.editor = ace.edit(this.props.id || this.state.editorId); // this.editor.setTheme('ace/theme/monokai'); this.editor.setTheme('ace/theme/solarized_light'); if (this.props.mode !== 'html') { diff --git a/playground/css/fiddle.css b/playground/css/fiddle.css index ea58131..952edd1 100644 --- a/playground/css/fiddle.css +++ b/playground/css/fiddle.css @@ -1,3 +1,7 @@ +html { + height: 100%; +} + body { /*padding: 20px;*/ font-family: "Helvetica", "Arial", "FreeSans", "Verdana", "Tahoma", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", sans-serif; @@ -5,19 +9,25 @@ body { /*overflow: hidden;*/ padding: 0; margin: 0; - position: relative; + /*position: relative;*/ font-size: 14px; - height: 100%; -} - -html { - height: 100%; + /*height: 100%;*/ + display: block; } #container { height: 100%; } +.playground-container { + position: absolute; + top: 48px; + bottom: 0; + left: 0; + right: 0; + background: #DFDFD5; +} + #header { height: 48px; /*background: #4679bd;*/ @@ -42,10 +52,11 @@ html { } .large-text-area { - height: 90%; + /*height: 90%;*/ width: 100%; - display: block; - margin: 10px; + height: 300px; + /*display: block;*/ + /*margin: 10px;*/ } .result-area { @@ -69,9 +80,10 @@ html { .playground { display: table; height: 100%; + width: 100%; } -.row { +.fiddle-row { display: table-row; height: 50%; } @@ -85,6 +97,7 @@ html { /*float: left;*/ /*margin: 2px;*/ /*padding: 10px;*/ + padding: 1px; } /*position: relative; min-height: 100%;*/ \ No newline at end of file diff --git a/playground/fiddle-main.js b/playground/fiddle-main.js index 81bb787..ff1218a 100644 --- a/playground/fiddle-main.js +++ b/playground/fiddle-main.js @@ -10,11 +10,11 @@ requirejs.config({ //'react/addons': 'http://fb.me/react-with-addons-0.12.1' }, shim: { - lodash: { exports: '_' }, - firebase: { exports: 'Firebase' }, + lodash: {exports: '_'}, + firebase: {exports: 'Firebase'}, //ace: { exports: 'ace' }, - jquery: { exports: '$' }, - react: { exports: 'React' } + jquery: {exports: '$'}, + react: {exports: 'React'} }, map: { '*': { @@ -26,5 +26,61 @@ requirejs.config({ requirejs(['jquery', 'react', 'fiddle'], function ($, React, fiddle) { 'use strict'; window.fiddle = React.render(fiddle(), document.getElementById('container')); + $(function () { + $(window).resize(calcSize); + calcSize(); + }); + + function calcSize() { + var contentHeight = $(document).height() - 48; + //$('#container').height(contentHeight).width($(document).width()); + //$('.code-area').each(function (i) { + // var h = (contentHeight / 2) - 10; + // var w = ($(document).width() / 2) - 10; + // $(this).height(h).width(w); + //}); + + + 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' + //}); + //$('#editor-code').css({ + // top: 50, left: w, bottom: h, right: 0, position: 'absolute' + //}); + //$('#editor-generated').css({ + // top: 50 + h, left: 0, bottom: 0, right: w, position: 'absolute' + //}); + //$('#result-area').css({ + // top: 50 + h, left: w, bottom: 0, right: 0, position: 'absolute' + //}); + + //$('.code-area').each(function (i, k) { + // //var h = (contentHeight / 2) - 10; + // //var w = ($(document).width() / 2) - 10; + // //$(this).height(h).width(w); + // $(this).css({ + // top: 50 + h, left: w, bottom: 0, right: 0, position: 'absolute' + // }); + //}); + + $('.large-text-area').each(function (i, k) { + //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.rt b/playground/fiddle.rt index 79e234e..77a605e 100644 --- a/playground/fiddle.rt +++ b/playground/fiddle.rt @@ -2,7 +2,9 @@
*/); }; }); \ No newline at end of file diff --git a/playground/playground-fiddle.rt b/playground/playground-fiddle.rt index 9112273..5c02656 100644 --- a/playground/playground-fiddle.rt +++ b/playground/playground-fiddle.rt @@ -1,28 +1,28 @@
-
+
-
-
-
+
-
-
+

Preview:

diff --git a/playground/playground-fiddle.rt.js b/playground/playground-fiddle.rt.js index 59fcf04..d2adc89 100644 --- a/playground/playground-fiddle.rt.js +++ b/playground/playground-fiddle.rt.js @@ -15,25 +15,29 @@ define([ e.preventDefault(); } return function () { - return React.createElement('div', { 'className': 'playground' }, React.createElement('div', { 'className': 'row' }, React.createElement('div', { 'className': 'code-area' }, React.createElement(CodeEditor, { + return React.createElement('div', { 'className': 'playground' }, React.createElement('div', { 'className': 'fiddle-row' }, React.createElement('div', { 'className': 'code-area' }, React.createElement(CodeEditor, { + 'id': 'editor-rt', '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.createElement('div', { 'className': 'code-area' }, React.createElement(CodeEditor, { + 'id': 'editor-code', '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.createElement('div', { 'className': 'row' }, React.createElement('div', { 'className': 'code-area' }, React.createElement(CodeEditor, { + }))), React.createElement('div', { 'className': 'fiddle-row' }, React.createElement('div', { 'className': 'code-area' }, React.createElement(CodeEditor, { + 'id': 'editor-generated', 'className': 'large-text-area', 'style': { border: '1px solid black' }, 'value': this.templateSource, 'mode': 'javascript', 'readOnly': true })), React.createElement('div', { + 'id': 'result-area', 'key': 'result-area', 'className': 'result-area well' }, React.createElement('h2', {}, 'Preview:'), React.createElement('form', { diff --git a/playground/playground.js b/playground/playground.js index 999e1ed..b04f960 100644 --- a/playground/playground.js +++ b/playground/playground.js @@ -60,8 +60,8 @@ define(['react', 'lodash', './playground-fiddle.rt', './playground.rt'], functio // '
\n' + // ' \n' + // '
'; - var templateHTML = "
"; - var templateProps = "{}"; + var templateHTML = '
'; + var templateProps = '{}'; //var templateProps = "{\n mixins: [React.addons.LinkedStateMixin],\n getInitialState: function () {\n return {edited: '', todos: [], counter: 0};\n },\n add: function () {\n if (this.state.edited.trim().length === 0) {\n return;\n }\n var newTodo = {value: this.state.edited, done: false, key: this.state.counter};\n this.setState({todos: this.state.todos.concat(newTodo), edited: '', counter: this.state.counter + 1});\n },\n remove: function (todo) {\n this.setState({todos: _.reject(this.state.todos, todo)});\n },\n toggleChecked: function (index) {\n var todos = _.cloneDeep(this.state.todos);\n todos[index].done = !todos[index].done;\n this.setState({todos: todos});\n },\n clearDone: function () {\n this.setState({todos: _.filter(this.state.todos, {done: false})});\n }\n}"; var Playground = React.createClass({