From 74ee6ae6ce047ae7c349b35ae048ae14930c547e Mon Sep 17 00:00:00 2001
From: asmsuechan <suenagaryoutaabc@gmail.com>
Date: Sat, 11 Feb 2017 15:48:38 +0900
Subject: [PATCH] Add lock icon to NoteDetail

---
 browser/components/MarkdownEditor.js      | 18 +++++++++++++--
 browser/main/Detail/MarkdownNoteDetail.js | 27 ++++++++++++++++++++++-
 2 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/browser/components/MarkdownEditor.js b/browser/components/MarkdownEditor.js
index 55e145d7..4a2e232a 100644
--- a/browser/components/MarkdownEditor.js
+++ b/browser/components/MarkdownEditor.js
@@ -3,6 +3,7 @@ import CSSModules from 'browser/lib/CSSModules'
 import styles from './MarkdownEditor.styl'
 import CodeEditor from 'browser/components/CodeEditor'
 import MarkdownPreview from 'browser/components/MarkdownPreview'
+import eventEmitter from 'browser/main/lib/eventEmitter'
 
 class MarkdownEditor extends React.Component {
   constructor (props) {
@@ -13,12 +14,18 @@ class MarkdownEditor extends React.Component {
     this.state = {
       status: 'PREVIEW',
       renderValue: props.value,
-      keyPressed: {}
+      keyPressed: {},
+      locked: false
     }
+
+    this.lockEditorCode = () => this.handleLockEditor()
+    this.getEditorStatus = () => this.handleGetEditorStatus()
   }
 
   componentDidMount () {
     this.value = this.refs.code.value
+    eventEmitter.on('editor:lock', this.lockEditorCode)
+    eventEmitter.on('editor:status', this.getEditorStatus)
   }
 
   componentDidUpdate () {
@@ -33,6 +40,8 @@ class MarkdownEditor extends React.Component {
 
   componentWillUnmount () {
     this.cancelQueue()
+    eventEmitter.off('editor:lock', this.lockEditorCode)
+    eventEmitter.off('editor:status', this.getEditorStatus)
   }
 
   queueRendering (value) {
@@ -77,6 +86,7 @@ class MarkdownEditor extends React.Component {
   }
 
   handleBlur (e) {
+    if (this.state.locked) return
     this.setState({ keyPressed: [] })
     let { config } = this.props
     if (config.editor.switchPreview === 'BLUR') {
@@ -152,7 +162,7 @@ class MarkdownEditor extends React.Component {
     })
     this.setState({ keyPressed })
     let isNoteHandlerKey = (el) => { return this.state.keyPressed[el] }
-    if (this.state.status === 'CODE' && this.escapeFromEditor.every(isNoteHandlerKey)) {
+    if (!this.state.locked && this.state.status === 'CODE' && this.escapeFromEditor.every(isNoteHandlerKey)) {
       document.activeElement.blur()
     }
   }
@@ -164,6 +174,10 @@ class MarkdownEditor extends React.Component {
     this.setState({ keyPressed })
   }
 
+  handleLockEditor () {
+    this.setState({ locked: !this.state.locked })
+  }
+
   render () {
     let { className, value, config } = this.props
 
diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js
index 65821962..73b3047c 100644
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -25,7 +25,8 @@ class MarkdownNoteDetail extends React.Component {
       note: Object.assign({
         title: '',
         content: ''
-      }, props.note)
+      }, props.note),
+      locked: false
     }
     this.dispatchTimer = null
   }
@@ -200,6 +201,16 @@ class MarkdownNoteDetail extends React.Component {
     }
   }
 
+  handleLockButtonClick () {
+    ee.emit('editor:lock')
+    this.focus()
+    this.setState({ locked: !this.state.locked })
+  }
+
+  toggleLockButton () {
+    return this.state.locked ? 'fa-lock' : 'fa-unlock-alt'
+  }
+
   handleDeleteKeyDown (e) {
     if (e.keyCode === 27) this.handleDeleteCancelButtonClick(e)
   }
@@ -235,6 +246,20 @@ class MarkdownNoteDetail extends React.Component {
             />
           </div>
           <div styleName='info-right'>
+            {(() => {
+              // TODO: get a state of MarkdownEditor somehow
+              const editorStatus='CODE'
+              let faClassName=`fa ${this.toggleLockButton()}`
+              if (editorStatus === 'CODE') {
+                return(
+                  <button styleName='info-right-button'
+                    onClick={(e) => this.handleLockButtonClick(e)}
+                  >
+                    <i className={faClassName}/>
+                  </button>
+                )
+              }
+            })()}
             <button styleName='info-right-button'
               onClick={(e) => this.handleContextButtonClick(e)}
             >