css layout I love you

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/**',

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']);
+        var props = _.omit(this.props, ['ref', 'key', 'value', 'valueLink', 'onChange']);
-        props.id = this.state.editorId;
+        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') {

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%;
+    /*height: 100%;*/
-}
+    display: block;
-
-html {
-    height: 100%;
 }
 
 #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;
+    height: 300px;
-    margin: 10px;
+    /*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%;*/

playground/fiddle-main.js

@@ -10,11 +10,11 @@ requirejs.config({
         //'react/addons': 'http://fb.me/react-with-addons-0.12.1'
     },
     shim: {
-        lodash: { exports: '_' },
+        lodash: {exports: '_'},
-        firebase: { exports: 'Firebase' },
+        firebase: {exports: 'Firebase'},
         //ace: { exports: 'ace' },
-        jquery: { exports: '$' },
+        jquery: {exports: '$'},
-        react: { exports: 'React' }
+        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
+    }
 });
 

playground/fiddle.rt

@@ -2,7 +2,9 @@
 <div class="fiddle">
     <div id="header">
         <div id="header-title">
-            <img class="nav-logo" src="https://facebook.github.io/react/img/logo.svg" width="36" height="36" />
+            <span>&lt;</span>
+            <img class="nav-logo" src="https://facebook.github.io/react/img/logo.svg" width="32" height="32" />
+            <span>/&gt;</span>
             RTFiddle
         </div>
         <div id="buttons-bar">
@@ -14,6 +16,8 @@
         <!--<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 class="playground-container">
+        <playground ref="playground" direction="vertical" fiddle="{true}" />
+    </div>
     <!--</div>-->
 </div>

playground/fiddle.rt.js

@@ -10,22 +10,22 @@ define([
         this.save();
     }
     return function () {
-        return React.createElement('div', { 'className': 'fiddle' }, React.createElement('div', { 'id': 'header' }, React.createElement('div', { 'id': 'header-title' }, React.createElement('img', {
+        return React.createElement('div', { 'className': 'fiddle' }, React.createElement('div', { 'id': 'header' }, React.createElement('div', { 'id': 'header-title' }, React.createElement('span', {}, '<'), React.createElement('img', {
             'className': 'nav-logo',
             'src': 'https://facebook.github.io/react/img/logo.svg',
-            'width': '36',
+            'width': '32',
-            'height': '36'
+            'height': '32'
-        }), '\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',
             '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(playground, {
+                               /* <br /> */, React.createElement('div', { 'className': 'playground-container' }, React.createElement(playground, {
             'ref': 'playground',
             'direction': 'vertical',
             'fiddle': true
-        })    /* </div> */);
+        }))    /* </div> */);
     };
 });

playground/playground-fiddle.rt

@@ -1,28 +1,28 @@
 <!DOCTYPE rt CodeEditor="./aceEditor">
 <!--suppress ALL -->
 <div class="playground">
-    <div class="row">
+    <div class="fiddle-row">
         <div class="code-area">
-            <CodeEditor class="large-text-area" style="border: {this.validHTML ? '1px solid black' : '2px solid red'};"
+            <CodeEditor id="editor-rt" 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'};"
+            <CodeEditor id="editor-code" 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>
-    <div class="row">
+    <div class="fiddle-row">
         <div class="code-area">
-            <CodeEditor class="large-text-area" style="border:1px solid black;"
+            <CodeEditor id="editor-generated" class="large-text-area" style="border:1px solid black;"
                         value="{this.templateSource}"
                         mode="javascript"
                         readOnly="{true}" />
         </div>
-        <div key="result-area" class="result-area well">
+        <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">

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', {

playground/playground.js

@@ -60,8 +60,8 @@ define(['react', 'lodash', './playground-fiddle.rt', './playground.rt'], functio
     //    '    <button onClick="()=>this.add()">Add</button><br/>\n' +
     //    '    <button onClick="()=>this.clearDone()">Clear done</button>\n' +
     //    '</div>';
-    var templateHTML = "<div></div>";
+    var templateHTML = '<div></div>';
-    var templateProps = "{}";
+    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({