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

Refactor frontend part 3

5 files changed, 58 insertions, 48 deletions

diff --git a/public/js/lib/appState.js b/public/js/lib/appState.js
new file mode 100644
index 00000000..fb8030e1
--- /dev/null
+++ b/public/js/lib/appState.js
@@ -0,0 +1,8 @@
+import modeType from './modeType'
+
+let state = {
+  syncscroll: true,
+  currentMode: modeType.view
+}
+
+export default state
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/views/statusbar.html b/public/js/lib/editor/statusbar.html
index 24cbf6c2..24cbf6c2 100644
--- a/public/views/statusbar.html
+++ b/public/js/lib/editor/statusbar.html
diff --git a/public/js/lib/modeType.js b/public/js/lib/modeType.js
new file mode 100644
index 00000000..f3212105
--- /dev/null
+++ b/public/js/lib/modeType.js
@@ -0,0 +1,11 @@
+export default {
+  edit: {
+    name: 'edit'
+  },
+  view: {
+    name: 'view'
+  },
+  both: {
+    name: 'both'
+  }
+}
diff --git a/public/js/syncscroll.js b/public/js/lib/syncscroll.js
index c227f83f..cee317ea 100644
--- a/public/js/syncscroll.js
+++ b/public/js/lib/syncscroll.js
@@ -4,7 +4,9 @@
 
 import markdownitContainer from 'markdown-it-container'
 
-import { md } from './extra'
+import { md } from '../extra'
+import modeType from './modeType'
+import appState from './appState'
 
 function addPart (tokens, idx) {
   if (tokens[idx].map && tokens[idx].level === 0) {
@@ -109,9 +111,6 @@ md.use(markdownitContainer, 'info', { render: renderContainer })
 md.use(markdownitContainer, 'warning', { render: renderContainer })
 md.use(markdownitContainer, 'danger', { render: renderContainer })
 
-// FIXME: expose syncscroll to window
-window.syncscroll = true
-
 window.preventSyncScrollToEdit = false
 window.preventSyncScrollToView = false
 
@@ -126,10 +125,15 @@ let editArea = null
 let viewArea = null
 let markdownArea = null
 
-export function setupSyncAreas (edit, view, markdown) {
+let editor
+
+export function setupSyncAreas (edit, view, markdown, _editor) {
   editArea = edit
   viewArea = view
   markdownArea = markdown
+
+  editor = _editor
+
   editArea.on('scroll', _.throttle(syncScrollToView, editScrollThrottle))
   viewArea.on('scroll', _.throttle(syncScrollToEdit, viewScrollThrottle))
 }
@@ -161,8 +165,8 @@ function buildMapInner (callback) {
   viewBottom = viewArea[0].scrollHeight - viewArea.height()
 
   acc = 0
-  const lines = window.editor.getValue().split('\n')
-  const lineHeight = window.editor.defaultTextHeight()
+  const lines = editor.getValue().split('\n')
+  const lineHeight = editor.defaultTextHeight()
   for (i = 0; i < lines.length; i++) {
     const str = lines[i]
 
@@ -173,7 +177,7 @@ function buildMapInner (callback) {
       continue
     }
 
-    const h = window.editor.heightAtLine(i + 1) - window.editor.heightAtLine(i)
+    const h = editor.heightAtLine(i + 1) - editor.heightAtLine(i)
     acc += Math.round(h / lineHeight)
   }
   _lineHeightMap.push(acc)
@@ -228,7 +232,7 @@ function buildMapInner (callback) {
 let viewScrollingTimer = null
 
 export function syncScrollToEdit (event, preventAnimate) {
-  if (window.currentMode !== window.modeType.both || !window.syncscroll || !editArea) return
+  if (appState.currentMode !== modeType.both || !appState.syncscroll || !editArea) return
   if (window.preventSyncScrollToEdit) {
     if (typeof window.preventSyncScrollToEdit === 'number') {
       window.preventSyncScrollToEdit--
@@ -268,8 +272,8 @@ export function syncScrollToEdit (event, preventAnimate) {
   let posTo = 0
   let topDiffPercent = 0
   let posToNextDiff = 0
-  const scrollInfo = window.editor.getScrollInfo()
-  const textHeight = window.editor.defaultTextHeight()
+  const scrollInfo = editor.getScrollInfo()
+  const textHeight = editor.defaultTextHeight()
   const preLastLineHeight = scrollInfo.height - scrollInfo.clientHeight - textHeight
   const preLastLineNo = Math.round(preLastLineHeight / textHeight)
   const preLastLinePos = scrollMap[preLastLineNo]
@@ -310,7 +314,7 @@ function viewScrollingTimeoutInner () {
 let editScrollingTimer = null
 
 export function syncScrollToView (event, preventAnimate) {
-  if (window.currentMode !== window.modeType.both || !window.syncscroll || !viewArea) return
+  if (appState.currentMode !== modeType.both || !appState.syncscroll || !viewArea) return
   if (window.preventSyncScrollToView) {
     if (typeof preventSyncScrollToView === 'number') {
       window.preventSyncScrollToView--
@@ -329,8 +333,8 @@ export function syncScrollToView (event, preventAnimate) {
 
   let lineNo, posTo
   let topDiffPercent, posToNextDiff
-  const scrollInfo = window.editor.getScrollInfo()
-  const textHeight = window.editor.defaultTextHeight()
+  const scrollInfo = editor.getScrollInfo()
+  const textHeight = editor.defaultTextHeight()
   lineNo = Math.floor(scrollInfo.top / textHeight)
     // if reach the last line, will start lerp to the bottom
   const diffToBottom = (scrollInfo.top + scrollInfo.clientHeight) - (scrollInfo.height - textHeight)