removed bootstrap.js and implemented tabs in react

fiddle.html

@@ -25,7 +25,6 @@
 <div id="container">
 </div>
 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
 <!--<script src="playground/libs/ace-builds-1.1.8/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>-->
 <!--<script src="https://cdn.firebase.com/js/client/2.0.5/firebase.js"></script>-->
 <!--<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>-->

index.html

@@ -148,7 +148,6 @@
 <div id="fb-root"></div>
 
 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
 <script src="playground/libs/ace-builds-1.1.8/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
 <script src="playground/dist/rt-main.browser.min.js"></script>
 <!--<script data-main="playground/home-main.js" src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.js"></script>-->

playground/CodeMirrorEditor.js

@@ -78,7 +78,8 @@ define(['react', 'lodash', 'jquery', './libs/codemirror-4.8/lib/codemirror',
         render: function () {
             var props = _.omit(this.props, ['ref', 'key', 'value', 'valueLink', 'onChange']);
             props.id = this.props.id || this.state.editorId;
-            return React.DOM.div(props);
+            var value = this.props.valueLink ? this.props.valueLink() : this.props.value;
+            return React.DOM.textarea(props,value);
         },
         componentWillUpdate: function (nextProps/*, nextState*/) {
             var value = nextProps.valueLink ? nextProps.valueLink() : nextProps.value;
@@ -117,7 +118,7 @@ define(['react', 'lodash', 'jquery', './libs/codemirror-4.8/lib/codemirror',
                 options.lint = true;
             }
 
-            this.editor = new CodeMirror(document.getElementById(this.props.id || this.state.editorId), options);
+            this.editor = CodeMirror.fromTextArea(this.getDOMNode(), options);
 
             if (!this.props.readOnly) {
                 this.editor.on('change', function (/*e*/) {
@@ -145,7 +146,7 @@ define(['react', 'lodash', 'jquery', './libs/codemirror-4.8/lib/codemirror',
             }
         },
         componentWillUnmount: function () {
-            this.editor.destroy();
+            this.editor.toTextArea();
         }
     });
 

playground/playground.js

@@ -88,6 +88,13 @@ define(['react', 'lodash', './playground-fiddle.rt', './playground.rt'], functio
                 fiddle: false
             };
         },
+        getTabs: function () {
+            if (this.props.codeVisible) {
+                return  [['templateHTML','Template'],['templateProps','Class'],['templateSource','Generated code']];
+            } else {
+                return  [['templateHTML','Template'],['templateSource','Generated code']];
+            }
+        },
         updateSample: function (state) {
             this.templateSource = generateTemplateSource(state.templateHTML, this.refs.editorRT);
             this.sampleFunc = generateTemplateFunction(this.templateSource);
@@ -122,7 +129,8 @@ define(['react', 'lodash', './playground-fiddle.rt', './playground.rt'], functio
         getInitialState: function () {
             var currentState = {
                 templateHTML: this.props.templateHTML || templateHTML,
-                templateProps: this.props.templateProps || templateProps
+                templateProps: this.props.templateProps || templateProps,
+                currentTab: 'templateHTML'
             };
             this.updateSample(currentState);
             return currentState;

playground/playground.rt

@@ -2,28 +2,32 @@
 <!--suppress CheckEmptyScriptTag -->
 <rt-require dependency="./CodeMirrorEditor" as="CodeEditor"/>
 <div class="playground">
-    <div id="{this.props.id}-myTab" role="tabpanel" class="code-area {(this.props.direction === 'horizontal' && 'horizontal') ||'vertical'}">
+    <div id="{this.props.id}-myTab" class="code-area {(this.props.direction === 'horizontal' && 'horizontal') ||'vertical'}">
         <!-- Nav tabs -->
         <ul class="nav nav-tabs" role="tablist">
-            <li role="presentation" class="active"><a href="#{this.props.id}-template" aria-controls="template" role="tab" data-toggle="tab">Template</a></li>
+
-            <li rt-if="this.props.codeVisible" role="presentation"><a href="#{this.props.id}-classCode" aria-controls="classCode" role="tab" data-toggle="tab">Class</a></li>
+            <li rt-repeat="tab in this.getTabs()" role="presentation"
-            <li role="presentation"><a href="#{this.props.id}-generatedCode" aria-controls="generatedCode" role="tab" data-toggle="tab">Generated code</a></li>
+                rt-class="{active:this.state.currentTab === tab[0]}"
+                onClick="(evt)=> evt.preventDefault();this.setState({'currentTab':tab[0]});">
+                <a aria-controls="{tab[1]}"
+                   >{tab[1]}</a>
+            </li>
         </ul>
         <!-- Tab panes -->
-        <div class="tab-content">
+        <div>
-            <div role="tabpanel" class="tab-pane active" id="{this.props.id}-template">
+            <div rt-if="this.state.currentTab === 'templateHTML'" class="tab-pane active" >
                 <CodeEditor ref="editorRT" class="large-text-area" style="border: {this.validHTML? '':'2px solid red'};"
                             value="{this.state.templateHTML}"
                             mode="html"
                             onChange="(evt) => this.setState({'templateHTML':evt.target.value})" />
             </div>
-            <div rt-if="this.props.codeVisible" role="tabpanel" class="tab-pane" id="{this.props.id}-classCode">
+            <div rt-if="this.state.currentTab === 'templateProps'" class="tab-pane active">
                 <CodeEditor ref="editorCode" class="large-text-area" style="border: {this.validProps? '':'2px solid red'};"
                             value="{this.state.templateProps}"
                             mode="javascript"
                             onChange="(evt) => this.setState({'templateProps':evt.target.value})" />
             </div>
-            <div role="tabpanel" class="tab-pane" id="{this.props.id}-generatedCode">
+            <div rt-if="this.state.currentTab === 'templateSource'" class="tab-pane active">
                 <CodeEditor class="large-text-area"
                             value="{this.templateSource}"
                             mode="javascript"

playground/playground.rt.js

@@ -4,78 +4,62 @@ define([
     './CodeMirrorEditor'
 ], function (React, _, CodeEditor) {
     'use strict';
-    function onChange1(evt) {
+    function onClick1(tab, tabIndex, evt) {
+        evt.preventDefault();
+        this.setState({ 'currentTab': tab[0] });
+    }
+    function repeatTab2(tab, tabIndex) {
+        return React.createElement('li', {
+            'role': 'presentation',
+            'className': React.addons.classSet({ active: this.state.currentTab === tab[0] }),
+            'onClick': onClick1.bind(this, tab, tabIndex)
+        }, React.createElement('a', { 'aria-controls': tab[1] }, tab[1]));
+    }
+    function onChange3(evt) {
         this.setState({ 'templateHTML': evt.target.value });
     }
-    function onChange2(evt) {
+    function onChange4(evt) {
         this.setState({ 'templateProps': evt.target.value });
     }
-    function onSubmit3(e) {
+    function onSubmit5(e) {
         e.preventDefault();
     }
     return function () {
         return React.createElement('div', { 'className': 'playground' }, React.createElement('div', {
             'id': this.props.id + '-myTab',
-            'role': 'tabpanel',
             'className': 'code-area ' + (this.props.direction === 'horizontal' && 'horizontal' || 'vertical')
-        }    /*  Nav tabs  */, React.createElement('ul', {
+        }    /*  Nav tabs  */, React.createElement.apply(this, _.flatten([
-            'className': 'nav nav-tabs',
+            'ul',
-            'role': 'tablist'
+            {
-        }, React.createElement('li', {
+                'className': 'nav nav-tabs',
-            'role': 'presentation',
+                'role': 'tablist'
-            'className': 'active'
+            },
-        }, React.createElement('a', {
+            _.map(this.getTabs(), repeatTab2.bind(this))
-            'href': '#' + this.props.id + '-template',
+        ]))    /*  Tab panes  */, React.createElement('div', {}, this.state.currentTab === 'templateHTML' ? React.createElement('div', { 'className': 'tab-pane active' }, React.createElement(CodeEditor, {
-            'aria-controls': 'template',
-            'role': 'tab',
-            'data-toggle': 'tab'
-        }, 'Template')), this.props.codeVisible ? React.createElement('li', { 'role': 'presentation' }, React.createElement('a', {
-            'href': '#' + this.props.id + '-classCode',
-            'aria-controls': 'classCode',
-            'role': 'tab',
-            'data-toggle': 'tab'
-        }, 'Class')) : null, React.createElement('li', { 'role': 'presentation' }, React.createElement('a', {
-            'href': '#' + this.props.id + '-generatedCode',
-            'aria-controls': 'generatedCode',
-            'role': 'tab',
-            'data-toggle': 'tab'
-        }, 'Generated code')))    /*  Tab panes  */, React.createElement('div', { 'className': 'tab-content' }, React.createElement('div', {
-            'role': 'tabpanel',
-            'className': 'tab-pane active',
-            'id': this.props.id + '-template'
-        }, React.createElement(CodeEditor, {
             'ref': 'editorRT',
             'className': 'large-text-area',
             'style': { border: this.validHTML ? '' : '2px solid red' },
             'value': this.state.templateHTML,
             'mode': 'html',
-            'onChange': onChange1.bind(this)
+            'onChange': onChange3.bind(this)
-        })), this.props.codeVisible ? React.createElement('div', {
+        })) : null, this.state.currentTab === 'templateProps' ? React.createElement('div', { 'className': 'tab-pane active' }, React.createElement(CodeEditor, {
-            'role': 'tabpanel',
-            'className': 'tab-pane',
-            'id': this.props.id + '-classCode'
-        }, React.createElement(CodeEditor, {
             'ref': 'editorCode',
             'className': 'large-text-area',
             'style': { border: this.validProps ? '' : '2px solid red' },
             'value': this.state.templateProps,
             'mode': 'javascript',
-            'onChange': onChange2.bind(this)
+            'onChange': onChange4.bind(this)
-        })) : null, React.createElement('div', {
+        })) : null, this.state.currentTab === 'templateSource' ? React.createElement('div', { 'className': 'tab-pane active' }, React.createElement(CodeEditor, {
-            'role': 'tabpanel',
-            'className': 'tab-pane',
-            'id': this.props.id + '-generatedCode'
-        }, React.createElement(CodeEditor, {
             'className': 'large-text-area',
             'value': this.templateSource,
             'mode': 'javascript',
             'readOnly': true
-        })))), React.createElement('div', {
+        })) : null)), React.createElement('div', {
             'key': 'result-area',
             'className': 'result-area  ' + (this.props.direction === 'horizontal' && 'horizontal' || 'vertical')
         }, React.createElement('span', { 'className': 'preview-title' }, '\xA0'), React.createElement('form', {
             'className': 'sample-view',
-            'onSubmit': onSubmit3.bind(this)
+            'onSubmit': onSubmit5.bind(this)
         }, React.createElement(this.sample, { 'key': 'sample' }))), React.createElement('br', { 'style': { clear: 'both' } }));
     };
 });