Merge pull request #429 from hackmdio/refactor-part-3

Refactor frontend part 3

2 files changed, 62 insertions, 34 deletions

diff --git a/public/js/lib/editor/index.js b/public/js/lib/editor/index.js
index c807a17f..2991998b 100644
--- a/public/js/lib/editor/index.js
+++ b/public/js/lib/editor/index.js
@@ -1,5 +1,6 @@
 import * as utils from './utils'
 import config from './config'
+import statusBarTemplate from './statusbar.html'
 
 /* config section */
 const isMac = CodeMirror.keyMap.default === CodeMirror.keyMap.macDefault
@@ -118,6 +119,7 @@ export default class Editor {
       }
     }
     this.eventListeners = {}
+    this.config = config
   }
 
   on (event, cb) {
@@ -132,40 +134,27 @@ export default class Editor {
     })
   }
 
-  getStatusBarTemplate () {
-    return new Promise((resolve, reject) => {
-      $.get(window.serverurl + '/views/statusbar.html').done(template => {
-        this.statusBarTemplate = template
-        resolve()
-      }).fail(reject)
-    })
-  }
-
   addStatusBar () {
-    if (!this.statusBarTemplate) {
-      this.getStatusBarTemplate.then(this.addStatusBar)
-    } else {
-      this.statusBar = $(this.statusBarTemplate)
-      this.statusCursor = this.statusBar.find('.status-cursor > .status-line-column')
-      this.statusSelection = this.statusBar.find('.status-cursor > .status-selection')
-      this.statusFile = this.statusBar.find('.status-file')
-      this.statusIndicators = this.statusBar.find('.status-indicators')
-      this.statusIndent = this.statusBar.find('.status-indent')
-      this.statusKeymap = this.statusBar.find('.status-keymap')
-      this.statusLength = this.statusBar.find('.status-length')
-      this.statusTheme = this.statusBar.find('.status-theme')
-      this.statusSpellcheck = this.statusBar.find('.status-spellcheck')
-      this.statusPreferences = this.statusBar.find('.status-preferences')
-      this.statusPanel = this.editor.addPanel(this.statusBar[0], {
-        position: 'bottom'
-      })
+    this.statusBar = $(statusBarTemplate)
+    this.statusCursor = this.statusBar.find('.status-cursor > .status-line-column')
+    this.statusSelection = this.statusBar.find('.status-cursor > .status-selection')
+    this.statusFile = this.statusBar.find('.status-file')
+    this.statusIndicators = this.statusBar.find('.status-indicators')
+    this.statusIndent = this.statusBar.find('.status-indent')
+    this.statusKeymap = this.statusBar.find('.status-keymap')
+    this.statusLength = this.statusBar.find('.status-length')
+    this.statusTheme = this.statusBar.find('.status-theme')
+    this.statusSpellcheck = this.statusBar.find('.status-spellcheck')
+    this.statusPreferences = this.statusBar.find('.status-preferences')
+    this.statusPanel = this.editor.addPanel(this.statusBar[0], {
+      position: 'bottom'
+    })
 
-      this.setIndent()
-      this.setKeymap()
-      this.setTheme()
-      this.setSpellcheck()
-      this.setPreferences()
-    }
+    this.setIndent()
+    this.setKeymap()
+    this.setTheme()
+    this.setSpellcheck()
+    this.setPreferences()
   }
 
   updateStatusBar () {
@@ -508,8 +497,6 @@ export default class Editor {
       placeholder: "← Start by entering a title here\n===\nVisit /features if you don't know what to do.\nHappy hacking :)"
     })
 
-    this.getStatusBarTemplate()
-
     return this.editor
   }
 
diff --git a/public/js/lib/editor/statusbar.html b/public/js/lib/editor/statusbar.html
new file mode 100644
index 00000000..24cbf6c2
--- /dev/null
+++ b/public/js/lib/editor/statusbar.html
@@ -0,0 +1,41 @@
+<div class="status-bar">
+    <div class="status-info">
+        <div class="status-cursor">
+          <span class="status-line-column"></span>
+          <span class="status-selection"></span>
+        </div>
+        <div class="status-file"></div>
+    </div>
+    <div class="status-indicators">
+        <div class="status-length"></div>
+        <div class="status-preferences dropup toggle-dropdown pull-right">
+            <a id="preferencesLabel" class="ui-preferences-label text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Click to change preferences">
+                <i class="fa fa-wrench fa-fw"></i>
+            </a>
+            <ul class="dropdown-menu" aria-labelledby="preferencesLabel">
+                <li class="ui-preferences-override-browser-keymap"><a><label>Allow override browser keymap&nbsp;&nbsp;<input type="checkbox"></label></a></li>
+            </ul>
+        </div>
+        <div class="status-keymap dropup pull-right">
+            <a id="keymapLabel" class="ui-keymap-label text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Click to change keymap">
+            Sublime
+            </a>
+            <ul class="dropdown-menu" aria-labelledby="keymapLabel">
+                <li class="ui-keymap-sublime"><a>Sublime</a></li>
+                <li class="ui-keymap-emacs"><a>Emacs</a></li>
+                <li class="ui-keymap-vim"><a>Vim</a></li>
+            </ul>
+        </div>
+        <div class="status-indent">
+            <div class="indent-type" title="Click to switch indentation type">Spaces:</div>
+            <div class="indent-width-label" title="Click to change indentation size">4</div>
+            <input class="indent-width-input hidden" type="number" min="1" max="10" maxlength="2" size="2">
+        </div>
+        <div class="status-theme">
+            <a class="ui-theme-toggle" title="Toggle editor theme"><i class="fa fa-sun-o fa-fw"></i></a>
+        </div>
+        <div class="status-spellcheck">
+            <a class="ui-spellcheck-toggle" title="Toggle spellcheck"><i class="fa fa-check fa-fw"></i></a>
+        </div>
+    </div>
+</div>