Added in metadata editor

client/homebrew/editor/editor.jsx

@@ -1,25 +1,31 @@
-var React = require('react');
-var _ = require('lodash');
-var cx = require('classnames');
+const React = require('react');
+const _ = require('lodash');
+const cx = require('classnames');
 
-var CodeEditor = require('naturalcrit/codeEditor/codeEditor.jsx');
-var Snippets = require('./snippets/snippets.js');
+const CodeEditor = require('naturalcrit/codeEditor/codeEditor.jsx');
+const SnippetBar = require('./snippetbar/snippetbar.jsx');
+const MetadataEditor = require('./MetadataEditor/MetadataEditor.jsx');
 
 
-var splice = function(str, index, inject){
+const splice = function(str, index, inject){
 	return str.slice(0, index) + inject + str.slice(index);
 };
-var execute = function(val){
-	if(_.isFunction(val)) return val();
-	return val;
-}
 
+const SNIPPETBAR_HEIGHT = 25;
 
-var Editor = React.createClass({
+const Editor = React.createClass({
 	getDefaultProps: function() {
 		return {
-			value : "",
-			onChange : function(){}
+			value : '',
+			onChange : ()=>{},
+
+			metadata : {},
+			onMetadataChange : ()=>{}
+		};
+	},
+	getInitialState: function() {
+		return {
+			showMetadataEditor: false
 		};
 	},
 	cursorPosition : {
@@ -27,7 +33,6 @@ var Editor = React.createClass({
 		ch : 0
 	},
 
-
 	componentDidMount: function() {
 		this.updateEditorSize();
 		window.addEventListener("resize", this.updateEditorSize);
@@ -37,8 +42,8 @@ var Editor = React.createClass({
 	},
 
 	updateEditorSize : function() {
-		var paneHeight = this.refs.main.parentNode.clientHeight;
-		paneHeight -= this.refs.snippetBar.clientHeight + 1;
+		let paneHeight = this.refs.main.parentNode.clientHeight;
+		paneHeight -= SNIPPETBAR_HEIGHT + 1;
 		this.refs.codeEditor.codeMirror.setSize(null, paneHeight);
 	},
 
@@ -48,38 +53,37 @@ var Editor = React.createClass({
 	handleCursorActivty : function(curpos){
 		this.cursorPosition = curpos;
 	},
-
-	handleSnippetClick : function(injectText){
-		var lines = this.props.value.split('\n');
+	handleInject : function(injectText){
+		const lines = this.props.value.split('\n');
 		lines[this.cursorPosition.line] = splice(lines[this.cursorPosition.line], this.cursorPosition.ch, injectText);
 
 		this.handleTextChange(lines.join('\n'));
 		this.refs.codeEditor.setCursorPosition(this.cursorPosition.line, this.cursorPosition.ch  + injectText.length);
 	},
+	handgleToggle : function(){
+		this.setState({
+			showMetadataEditor : !this.state.showMetadataEditor
+		})
+	},
 
 	//Called when there are changes to the editor's dimensions
 	update : function(){
 		this.refs.codeEditor.updateSize();
 	},
 
-	renderSnippetGroups : function(){
-		return _.map(Snippets, (snippetGroup)=>{
-			return <SnippetGroup
-				groupName={snippetGroup.groupName}
-				icon={snippetGroup.icon}
-				snippets={snippetGroup.snippets}
-				key={snippetGroup.groupName}
-				onSnippetClick={this.handleSnippetClick}
-			/>
-		})
+	renderMetadataEditor : function(){
+		if(!this.state.showMetadataEditor) return;
+		return <MetadataEditor
+			metadata={this.props.metadata}
+			onChange={this.props.onMetadataChange}
+		/>
 	},
 
 	render : function(){
 		return(
 			<div className='editor' ref='main'>
-				<div className='snippetBar' ref='snippetBar'>
-					{this.renderSnippetGroups()}
-				</div>
+				<SnippetBar onInject={this.handleInject} onToggle={this.handgleToggle} showmeta={this.state.showMetadataEditor} />
+				{this.renderMetadataEditor()}
 				<CodeEditor
 					ref='codeEditor'
 					wrap={true}
@@ -99,40 +103,3 @@ module.exports = Editor;
 
 
 
-
-
-
-var SnippetGroup = React.createClass({
-	getDefaultProps: function() {
-		return {
-			groupName : '',
-			icon : 'fa-rocket',
-			snippets : [],
-			onSnippetClick : function(){},
-		};
-	},
-	handleSnippetClick : function(snippet){
-		this.props.onSnippetClick(execute(snippet.gen));
-	},
-	renderSnippets : function(){
-		return _.map(this.props.snippets, (snippet)=>{
-			return <div className='snippet' key={snippet.name} onClick={this.handleSnippetClick.bind(this, snippet)}>
-				<i className={'fa fa-fw ' + snippet.icon} />
-				{snippet.name}
-			</div>
-		})
-	},
-
-	render : function(){
-		return <div className='snippetGroup'>
-			<div className='text'>
-				<i className={'fa fa-fw ' + this.props.icon} />
-				<span className='groupName'>{this.props.groupName}</span>
-			</div>
-			<div className='dropdown'>
-				{this.renderSnippets()}
-			</div>
-		</div>
-	},
-
-});