46 lines
2.3 KiB
Plaintext
46 lines
2.3 KiB
Plaintext
<!--<rt-require dependency="./aceEditor" as="CodeEditor"/>-->
|
|
<!--suppress CheckEmptyScriptTag -->
|
|
<rt-require dependency="./CodeMirrorEditor" as="CodeEditor"/>
|
|
<div class="playground">
|
|
<div id="{this.props.id}-myTab" class="code-area {this.getLayoutClass()}">
|
|
<!-- Nav tabs -->
|
|
<ul class="nav nav-tabs" role="tablist">
|
|
<li rt-repeat="tab in this.getTabs()" role="presentation" key="tab{tabIndex}"
|
|
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>
|
|
<div rt-if="this.state.currentTab === 'templateHTML'" key="editorRT" 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.state.currentTab === 'templateProps'" key="editorCode" 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 rt-if="this.state.currentTab === 'templateSource'" key="templateSource" class="tab-pane active">
|
|
<CodeEditor class="large-text-area"
|
|
value="{this.templateSource}"
|
|
mode="javascript"
|
|
readOnly="{true}" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div key="result-area" class="result-area {this.getLayoutClass()}">
|
|
<span class="preview-title">{'\u00A0'}</span>
|
|
<form ref="mount" class="sample-view" onSubmit="(e) => e.preventDefault();">
|
|
<!--<this.sample key="sample">-->
|
|
<!--</this.sample>-->
|
|
</form>
|
|
</div>
|
|
<br style="clear:both">
|
|
</div>
|