embed ace

Rokt33r · Rokt33r · commit c74de88ca337 · 2015-07-07T03:55:52.000+09:00
diff --git a/.gitmodules b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "browser/ace"]
+	path = browser/ace
+	url = https://github.com/ajaxorg/ace-builds.git
diff --git a/browser/ace b/browser/ace
@@ -0,0 +1 @@
+Subproject commit 9d12839819e8a8b90f4a0aba382cac9a273b5983
diff --git a/browser/main/Components/CodeViewer.jsx b/browser/main/Components/CodeViewer.jsx
@@ -0,0 +1,34 @@
+var React = require('react/addons')
+
+var ace = require('ace')
+var CodeViewer = React.createClass({
+  propTypes: {
+    code: React.PropTypes.string,
+    mode: React.PropTypes.string
+  },
+  componentDidMount: function () {
+    var el = React.findDOMNode(this.refs.target)
+    var editor = ace.edit(el)
+    editor.setValue(this.props.code)
+    editor.$blockScrolling = Infinity
+    editor.renderer.setShowGutter(false)
+    editor.setReadOnly(true)
+
+    var session = editor.getSession()
+    session.setMode('ace/mode/' + this.props.mode)
+    session.setUseSoftTabs(true)
+
+    this.setState({editor: editor})
+  },
+  componentDidUpdate: function () {
+    this.state.editor.setValue(this.props.code)
+    this.state.editor.getSession().setMode('ace/mode/' + this.props.mode)
+  },
+  render: function () {
+    return (
+      <div ref='target'></div>
+    )
+  }
+})
+
+module.exports = CodeViewer
diff --git a/browser/main/Containers/SnippetContainer.jsx b/browser/main/Containers/SnippetContainer.jsx
@@ -1,5 +1,6 @@
 var React = require('react/addons')
 var Snippet = require('../Services/Snippet')
+var CodeViewer = require('../Components/CodeViewer')
 
 var SnippetList = React.createClass({
   propTypes: {
@@ -8,7 +9,6 @@ var SnippetList = React.createClass({
   },
   itemClickHandlerFactory: function (snippet) {
     return function () {
-      console.log(this.props.selectSnippet)
       this.props.selectSnippet(snippet)
     }.bind(this)
   },
@@ -55,13 +55,21 @@ var SnippetViewer = React.createClass({
       })
       content = (
         <div className='SnippetViewer'>
-          <div className='viewer-header'><i className='fa fa-code'></i> {snippet.callSign} <small className='updatedAt'>{snippet.updatedAt}</small></div>
+          <div className='viewer-header'>
+            <i className='fa fa-code'></i> {snippet.callSign} <small className='updatedAt'>{snippet.updatedAt}</small>
+            <span className='control-group'>
+              <button className='btn-default btn-square btn-sm'><i className='fa fa-edit fa-fw'></i></button>
+              <button className='btn-default btn-square btn-sm'><i className='fa fa-trash fa-fw'></i></button>
+            </span>
+          </div>
           <div className='viewer-body'>
             <div className='viewer-detail'>
               <div className='description'>{snippet.description}</div>
               <div className='tags'><i className='fa fa-tags'/>{tags}</div>
             </div>
-            <div>{snippet.content}</div>
+            <div className='content'>
+              <CodeViewer code={snippet.content} mode={snippet.mode}/>
+            </div>
           </div>
         </div>
       )
diff --git a/browser/main/Services/Snippet.js b/browser/main/Services/Snippet.js
@@ -18,7 +18,7 @@ var snippets = {
       callSign: 'log',
       description: 'javascript log',
       content: 'console.log(\'yolo\')',
-      mode: 'js',
+      mode: 'javascript',
       createdAt: '2015-06-26T15:10:59.000Z',
       updatedAt: '2015-06-26T15:10:59.000Z',
       UserId: 1,
diff --git a/browser/main/index.html b/browser/main/index.html
@@ -4,8 +4,10 @@
   <title>CodeXen</title>
 
   <link rel="stylesheet" href="../vendor/fontawesome/css/font-awesome.min.css" media="screen" title="no title" charset="utf-8">
+
   <script src="../vendor/react/react-with-addons.js"></script>
   <script src="../vendor/react-router/build/umd/ReactRouter.js"></script>
+  <script src="../ace/src-min/ace.js"></script>
 
 </head>
 <body>
diff --git a/browser/styles/main/containers/SnippetContainer.styl b/browser/styles/main/containers/SnippetContainer.styl
@@ -43,11 +43,20 @@
       box-sizing border-box
       small
         font-size 0.5em
+      .control-group
+        float right
+        button
+          margin 0 2px
     .viewer-body
-      absolute bottom left right
+      absolute bottom right
+      left 1px
       top 44px
       .viewer-detail
         border-bottom solid 1px borderColor
         padding 10px
         .description
           margin-bottom 15px
+      .content
+        padding 5px 0
+        .ace_editor
+          height 500px
diff --git a/browser/styles/shared/btn.styl b/browser/styles/shared/btn.styl
@@ -36,9 +36,8 @@
     background-color brandColor
 
 .btn-default
-  border-color invBorderColor
+  border-color lightButtonColor
   background-color transparent
-  color invBorderColor
+  color lightButtonColor
   &:hover, &.hover, &:active, &.active
-    color white
-    background-color invBorderColor
+    background-color lighten(lightButtonColor, 75%)
diff --git a/npm-debug.log b/npm-debug.log
diff --git a/package.json b/package.json
@@ -30,8 +30,6 @@
   },
   "homepage": "https://github.com/Rokt33r/codexen-app#readme",
   "dependencies": {
-    "@rokt33r/ace-builds": "^1.1.9",
-    "del": "^1.2.0",
     "dotenv": "^1.1.0",
     "marked": "^0.3.3",
     "moment": "^2.10.3",
diff --git a/webpack.config.js b/webpack.config.js
@@ -17,6 +17,10 @@ module.exports = {
       {
         test: /\.styl$/,
         loader: 'style-loader!css-loader!stylus-loader'
+      },
+      {
+        test: /\.css$/,
+        loader: 'style-loader!css-loader'
       }
     ]
   },
@@ -25,7 +29,8 @@ module.exports = {
     //but get it from a global 'React' variable
     'react': 'React',
     'react/addons': 'React',
-    'react-router': 'ReactRouter'
+    'react-router': 'ReactRouter',
+    'ace': 'ace'
   },
   resolve: {
     extensions: ['', '.js', '.jsx']

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+[submodule "browser/ace"]`
	`2`	`+ path = browser/ace`
	`3`	`+ url = https://github.com/ajaxorg/ace-builds.git`