bobwen-dev
/
react-templates
mirror of https://github.com/bobwen-dev/react-templates
1
0
Fork 0
Code Issues Releases Wiki Activity

switched to ace editor... better ipad support

This commit is contained in:
avim 2014-11-25 17:24:54 +02:00
parent 8952d19789
commit 951d0a0bf3
8 changed files with 69715 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Gruntfile.js
View File

@ -33,8 +33,6 @@ module.exports = function (grunt) {
grunt: ['conf/tasks/test'] grunt: ['conf/tasks/test']
}, },
browserify: { browserify: {
options: {
},
dist: { dist: {
files: { files: {
'web/bundle.js': ['web/browser.js'] 'web/bundle.js': ['web/browser.js']
@ -42,7 +40,7 @@ module.exports = function (grunt) {
}, },
pg: { pg: {
files: { files: {
'playground/main.browser2.js': ['playground/main.js'] 'playground/main.browser.js': ['playground/main.js']
} }
} }
} }

2
index.html
View File

@ -4,8 +4,6 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>React templates - Image Search Sample</title> <title>React templates - Image Search Sample</title>
<link rel="stylesheet" href="playground/playground.css"/> <link rel="stylesheet" href="playground/playground.css"/>
<link rel="stylesheet" href="playground/codemirror.css">
<link rel="stylesheet" href="playground/solarized.css">
</head> </head>
<body> <body>
<div id="playground"> <div id="playground">

2
package.json
View File

@ -31,7 +31,7 @@
"react": "^0.12.0" "react": "^0.12.0"
}, },
"devDependencies": { "devDependencies": {
"codemirror": "^4.7.0", "brace": "^0.4.0",
"grunt": "^0.4.5", "grunt": "^0.4.5",
"grunt-browserify": "^3.2.0", "grunt-browserify": "^3.2.0",
"grunt-eslint": "^2.0.0", "grunt-eslint": "^2.0.0",

64
playground/aceEditor.js Normal file
View File

@ -0,0 +1,64 @@
/**
* Created by avim on 11/25/2014.
*/
var React = require('react/addons');
var _ = require('lodash');
var brace = require('brace');
require('brace/mode/javascript');
require('brace/mode/html');
require('brace/theme/monokai');
var editor = React.createClass({
diplayName:"BraceEditor",
getInitialState: function () {
return {
editorId: _.uniqueId()
}
},
componentWillMount: function () {
},
render: function () {
var props = _.omit(this.props,['id','ref','key','value','valueLink','onChange']);
props.id = this.state.editorId;
return React.DOM.div(props)
},
componentWillUpdate: function (nextProps, nextState) {
var value = nextProps.valueLink?nextProps.valueLink():nextProps.value;
if (this.editor && this.editor.getValue() != value ) {
this.editor.setValue(value,0);
}
},
componentDidMount: function () {
this.editor = brace.edit(this.state.editorId);
if (this.props.mode !== "html") {
this.editor.getSession().setMode('ace/mode/javascript');
} else {
this.editor.getSession().setMode('ace/mode/html');
}
this.editor.getSession().setUseWorker(false);
this.editor.setTheme('ace/theme/monokai');
var value = this.props.valueLink?this.props.valueLink():this.props.value;
this.editor.setValue(value,0);
if (this.props.readOnly) {
this.editor.setReadOnly(true);
} else {
this.editor.setReadOnly(false);
this.editor.on("change", function(e) {
if (this.props.valueLink) {
this.props.valueLink(this.editor.getValue());
} else if (this.props.onChange) {
this.props.onChange({target:{value:this.editor.getValue()}});
}
}.bind(this));
}
},
componentWillUnmount: function () {
this.editor.destroy();
}
});
module.exports = editor;

69678
playground/main.browser.js
View File

File diff suppressed because one or more lines are too long

5
playground/main.js
View File

@ -2,11 +2,6 @@
/*eslint-env browser*/ /*eslint-env browser*/
var reactTemplates = require('../src/reactTemplates'); var reactTemplates = require('../src/reactTemplates');
var playgroundTemplate = require('./playground.rt.js'); var playgroundTemplate = require('./playground.rt.js');
var htmlMode = require('codemirror/mode/htmlmixed/htmlmixed');
var javascriptMode = require('codemirror/mode/javascript/javascript');
var xmlMode = require('codemirror/mode/xml/xml');
var cssMode = require('codemirror/mode/css/css');
var vbScriptMode = require('codemirror/mode/vbscript/vbscript');
var React = require('react/addons'); var React = require('react/addons');

12
playground/playground.rt
View File

@ -1,13 +1,11 @@
<!DOCTYPE rt CodeEditor="react-code-mirror"> <!DOCTYPE rt CodeEditor="./aceEditor">
<div> <div>
<div class="code-area"> <div class="code-area">
<h2>Template:</h2> <h2>Template:</h2>
<CodeEditor class="large-text-area" style="border: {this.validHTML? '1px solid black':'2px solid red'};" <CodeEditor class="large-text-area" style="border: {this.validHTML? '1px solid black':'2px solid red'};"
value="{this.state.templateHTML}" value="{this.state.templateHTML}"
mode="htmlmixed" mode="html"
smartIndent="{true}"
lineNumbers="{true}"
onChange="(evt) => this.setState({'templateHTML':evt.target.value})" onChange="(evt) => this.setState({'templateHTML':evt.target.value})"
/> />
<br/> <br/>
@ -15,9 +13,6 @@
<CodeEditor class="large-text-area" style="border: {this.validProps? '1px solid black':'2px solid red'};" <CodeEditor class="large-text-area" style="border: {this.validProps? '1px solid black':'2px solid red'};"
value="{this.state.templateProps}" value="{this.state.templateProps}"
mode="javascript" mode="javascript"
theme="solarized"
smartIndent="{true}"
lineNumbers="{true}"
onChange="(evt) => this.setState({'templateProps':evt.target.value})" onChange="(evt) => this.setState({'templateProps':evt.target.value})"
/> />
</div> </div>
@ -26,9 +21,6 @@
<CodeEditor class="large-text-area" style="border:1px solid black;" <CodeEditor class="large-text-area" style="border:1px solid black;"
value="{this.templateSource}" value="{this.templateSource}"
mode="javascript" mode="javascript"
theme="solarized"
smartIndent="{true}"
lineNumbers="{true}"
readOnly="{true}" readOnly="{true}"
/> />
<br/> <br/>

12
playground/playground.rt.js
View File

@ -1,6 +1,6 @@
var React = require('react'); var React = require('react');
var _ = require('lodash'); var _ = require('lodash');
var CodeEditor = require('react-code-mirror'); var CodeEditor = require('./aceEditor');
'use strict'; 'use strict';
function onChange1(evt) { function onChange1(evt) {
this.setState({ 'templateHTML': evt.target.value }); this.setState({ 'templateHTML': evt.target.value });
@ -13,18 +13,13 @@ module.exports = function () {
'className': 'large-text-area', 'className': 'large-text-area',
'style': { border: this.validHTML ? '1px solid black' : '2px solid red' }, 'style': { border: this.validHTML ? '1px solid black' : '2px solid red' },
'value': this.state.templateHTML, 'value': this.state.templateHTML,
'mode': 'htmlmixed', 'mode': 'html',
'smartIndent': true,
'lineNumbers': true,
'onChange': onChange1.bind(this) 'onChange': onChange1.bind(this)
}), React.DOM.br({}), React.DOM.h2({}, 'Class:'), CodeEditor({ }), React.DOM.br({}), React.DOM.h2({}, 'Class:'), CodeEditor({
'className': 'large-text-area', 'className': 'large-text-area',
'style': { border: this.validProps ? '1px solid black' : '2px solid red' }, 'style': { border: this.validProps ? '1px solid black' : '2px solid red' },
'value': this.state.templateProps, 'value': this.state.templateProps,
'mode': 'javascript', 'mode': 'javascript',
'theme': 'solarized',
'smartIndent': true,
'lineNumbers': true,
'onChange': onChange2.bind(this) 'onChange': onChange2.bind(this)
})), React.DOM.div({ })), React.DOM.div({
'key': 'result-area', 'key': 'result-area',
@ -34,9 +29,6 @@ module.exports = function () {
'style': { border: '1px solid black' }, 'style': { border: '1px solid black' },
'value': this.templateSource, 'value': this.templateSource,
'mode': 'javascript', 'mode': 'javascript',
'theme': 'solarized',
'smartIndent': true,
'lineNumbers': true,
'readOnly': true 'readOnly': true
}), React.DOM.br({}), React.DOM.h2({}, 'Preview:'), React.DOM.div({ 'className': 'sample-view' }, this.sample({ 'key': 'sample' })))); }), React.DOM.br({}), React.DOM.h2({}, 'Preview:'), React.DOM.div({ 'className': 'sample-view' }, this.sample({ 'key': 'sample' }))));
}; };