From 0e9afde5fa87d7039d4cebd43e5613541c56849a Mon Sep 17 00:00:00 2001
From: Yukai Huang
Date: Tue, 11 Apr 2017 21:33:54 +0800
Subject: Move syncsroll under lib

---
 public/js/lib/syncscroll.js | 368 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 368 insertions(+)
 create mode 100644 public/js/lib/syncscroll.js

(limited to 'public/js/lib/syncscroll.js')

diff --git a/public/js/lib/syncscroll.js b/public/js/lib/syncscroll.js
new file mode 100644
index 00000000..6b07e79c
--- /dev/null
+++ b/public/js/lib/syncscroll.js
@@ -0,0 +1,368 @@
+/* eslint-env browser, jquery */
+/* global _ */
+// Inject line numbers for sync scroll.
+
+import markdownitContainer from 'markdown-it-container'
+
+import { md } from '../extra'
+import modeType from '../lib/editor/modeType'
+
+function addPart (tokens, idx) {
+  if (tokens[idx].map && tokens[idx].level === 0) {
+    const startline = tokens[idx].map[0] + 1
+    const endline = tokens[idx].map[1]
+    tokens[idx].attrJoin('class', 'part')
+    tokens[idx].attrJoin('data-startline', startline)
+    tokens[idx].attrJoin('data-endline', endline)
+  }
+}
+
+md.renderer.rules.blockquote_open = function (tokens, idx, options, env, self) {
+  tokens[idx].attrJoin('class', 'raw')
+  addPart(tokens, idx)
+  return self.renderToken(...arguments)
+}
+md.renderer.rules.table_open = function (tokens, idx, options, env, self) {
+  addPart(tokens, idx)
+  return self.renderToken(...arguments)
+}
+md.renderer.rules.bullet_list_open = function (tokens, idx, options, env, self) {
+  addPart(tokens, idx)
+  return self.renderToken(...arguments)
+}
+md.renderer.rules.list_item_open = function (tokens, idx, options, env, self) {
+  tokens[idx].attrJoin('class', 'raw')
+  if (tokens[idx].map) {
+    const startline = tokens[idx].map[0] + 1
+    const endline = tokens[idx].map[1]
+    tokens[idx].attrJoin('data-startline', startline)
+    tokens[idx].attrJoin('data-endline', endline)
+  }
+  return self.renderToken(...arguments)
+}
+md.renderer.rules.ordered_list_open = function (tokens, idx, options, env, self) {
+  addPart(tokens, idx)
+  return self.renderToken(...arguments)
+}
+md.renderer.rules.link_open = function (tokens, idx, options, env, self) {
+  addPart(tokens, idx)
+  return self.renderToken(...arguments)
+}
+md.renderer.rules.paragraph_open = function (tokens, idx, options, env, self) {
+  addPart(tokens, idx)
+  return self.renderToken(...arguments)
+}
+md.renderer.rules.heading_open = function (tokens, idx, options, env, self) {
+  tokens[idx].attrJoin('class', 'raw')
+  addPart(tokens, idx)
+  return self.renderToken(...arguments)
+}
+md.renderer.rules.fence = (tokens, idx, options, env, self) => {
+  const token = tokens[idx]
+  const info = token.info ? md.utils.unescapeAll(token.info).trim() : ''
+  let langName = ''
+  let highlighted
+
+  if (info) {
+    langName = info.split(/\s+/g)[0]
+    if (/!$/.test(info)) token.attrJoin('class', 'wrap')
+    token.attrJoin('class', options.langPrefix + langName.replace(/=$|=\d+$|=\+$|!$|=!/, ''))
+    token.attrJoin('class', 'hljs')
+    token.attrJoin('class', 'raw')
+  }
+
+  if (options.highlight) {
+    highlighted = options.highlight(token.content, langName) || md.utils.escapeHtml(token.content)
+  } else {
+    highlighted = md.utils.escapeHtml(token.content)
+  }
+
+  if (highlighted.indexOf('<pre') === 0) {
+    return `${highlighted}\n`
+  }
+
+  if (tokens[idx].map && tokens[idx].level === 0) {
+    const startline = tokens[idx].map[0] + 1
+    const endline = tokens[idx].map[1]
+    return `<pre class="part" data-startline="${startline}" data-endline="${endline}"><code${self.renderAttrs(token)}>${highlighted}</code></pre>\n`
+  }
+
+  return `<pre><code${self.renderAttrs(token)}>${highlighted}</code></pre>\n`
+}
+md.renderer.rules.code_block = (tokens, idx, options, env, self) => {
+  if (tokens[idx].map && tokens[idx].level === 0) {
+    const startline = tokens[idx].map[0] + 1
+    const endline = tokens[idx].map[1]
+    return `<pre class="part" data-startline="${startline}" data-endline="${endline}"><code>${md.utils.escapeHtml(tokens[idx].content)}</code></pre>\n`
+  }
+  return `<pre><code>${md.utils.escapeHtml(tokens[idx].content)}</code></pre>\n`
+}
+function renderContainer (tokens, idx, options, env, self) {
+  tokens[idx].attrJoin('role', 'alert')
+  tokens[idx].attrJoin('class', 'alert')
+  tokens[idx].attrJoin('class', `alert-${tokens[idx].info.trim()}`)
+  addPart(tokens, idx)
+  return self.renderToken(...arguments)
+}
+
+md.use(markdownitContainer, 'success', { render: renderContainer })
+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
+
+const editScrollThrottle = 5
+const viewScrollThrottle = 5
+const buildMapThrottle = 100
+
+let viewScrolling = false
+let editScrolling = false
+
+let editArea = null
+let viewArea = null
+let markdownArea = null
+
+export function setupSyncAreas (edit, view, markdown) {
+  editArea = edit
+  viewArea = view
+  markdownArea = markdown
+  editArea.on('scroll', _.throttle(syncScrollToView, editScrollThrottle))
+  viewArea.on('scroll', _.throttle(syncScrollToEdit, viewScrollThrottle))
+}
+
+let scrollMap, lineHeightMap, viewTop, viewBottom
+
+export function clearMap () {
+  scrollMap = null
+  lineHeightMap = null
+  viewTop = null
+  viewBottom = null
+}
+window.viewAjaxCallback = clearMap
+
+const buildMap = _.throttle(buildMapInner, buildMapThrottle)
+
+// Build offsets for each line (lines can be wrapped)
+// That's a bit dirty to process each line everytime, but ok for demo.
+// Optimizations are required only for big texts.
+function buildMapInner (callback) {
+  if (!viewArea || !markdownArea) return
+  let i, offset, nonEmptyList, pos, a, b, _lineHeightMap, linesCount, acc, _scrollMap
+
+  offset = viewArea.scrollTop() - viewArea.offset().top
+  _scrollMap = []
+  nonEmptyList = []
+  _lineHeightMap = []
+  viewTop = 0
+  viewBottom = viewArea[0].scrollHeight - viewArea.height()
+
+  acc = 0
+  const lines = window.editor.getValue().split('\n')
+  const lineHeight = window.editor.defaultTextHeight()
+  for (i = 0; i < lines.length; i++) {
+    const str = lines[i]
+
+    _lineHeightMap.push(acc)
+
+    if (str.length === 0) {
+      acc++
+      continue
+    }
+
+    const h = window.editor.heightAtLine(i + 1) - window.editor.heightAtLine(i)
+    acc += Math.round(h / lineHeight)
+  }
+  _lineHeightMap.push(acc)
+  linesCount = acc
+
+  for (i = 0; i < linesCount; i++) {
+    _scrollMap.push(-1)
+  }
+
+  nonEmptyList.push(0)
+    // make the first line go top
+  _scrollMap[0] = viewTop
+
+  const parts = markdownArea.find('.part').toArray()
+  for (i = 0; i < parts.length; i++) {
+    const $el = $(parts[i])
+    let t = $el.attr('data-startline') - 1
+    if (t === '') {
+      return
+    }
+    t = _lineHeightMap[t]
+    if (t !== 0 && t !== nonEmptyList[nonEmptyList.length - 1]) {
+      nonEmptyList.push(t)
+    }
+    _scrollMap[t] = Math.round($el.offset().top + offset - 10)
+  }
+
+  nonEmptyList.push(linesCount)
+  _scrollMap[linesCount] = viewArea[0].scrollHeight
+
+  pos = 0
+  for (i = 1; i < linesCount; i++) {
+    if (_scrollMap[i] !== -1) {
+      pos++
+      continue
+    }
+
+    a = nonEmptyList[pos]
+    b = nonEmptyList[pos + 1]
+    _scrollMap[i] = Math.round((_scrollMap[b] * (i - a) + _scrollMap[a] * (b - i)) / (b - a))
+  }
+
+  _scrollMap[0] = 0
+
+  scrollMap = _scrollMap
+  lineHeightMap = _lineHeightMap
+
+  if (window.loaded && callback) callback()
+}
+
+// sync view scroll progress to edit
+let viewScrollingTimer = null
+
+export function syncScrollToEdit (event, preventAnimate) {
+  if (window.currentMode !== modeType.both || !window.syncscroll || !editArea) return
+  if (window.preventSyncScrollToEdit) {
+    if (typeof window.preventSyncScrollToEdit === 'number') {
+      window.preventSyncScrollToEdit--
+    } else {
+      window.preventSyncScrollToEdit = false
+    }
+    return
+  }
+  if (!scrollMap || !lineHeightMap) {
+    buildMap(() => {
+      syncScrollToEdit(event, preventAnimate)
+    })
+    return
+  }
+  if (editScrolling) return
+
+  const scrollTop = viewArea[0].scrollTop
+  let lineIndex = 0
+  for (let i = 0, l = scrollMap.length; i < l; i++) {
+    if (scrollMap[i] > scrollTop) {
+      break
+    } else {
+      lineIndex = i
+    }
+  }
+  let lineNo = 0
+  let lineDiff = 0
+  for (let i = 0, l = lineHeightMap.length; i < l; i++) {
+    if (lineHeightMap[i] > lineIndex) {
+      break
+    } else {
+      lineNo = lineHeightMap[i]
+      lineDiff = lineHeightMap[i + 1] - lineNo
+    }
+  }
+
+  let posTo = 0
+  let topDiffPercent = 0
+  let posToNextDiff = 0
+  const scrollInfo = window.editor.getScrollInfo()
+  const textHeight = window.editor.defaultTextHeight()
+  const preLastLineHeight = scrollInfo.height - scrollInfo.clientHeight - textHeight
+  const preLastLineNo = Math.round(preLastLineHeight / textHeight)
+  const preLastLinePos = scrollMap[preLastLineNo]
+
+  if (scrollInfo.height > scrollInfo.clientHeight && scrollTop >= preLastLinePos) {
+    posTo = preLastLineHeight
+    topDiffPercent = (scrollTop - preLastLinePos) / (viewBottom - preLastLinePos)
+    posToNextDiff = textHeight * topDiffPercent
+    posTo += Math.ceil(posToNextDiff)
+  } else {
+    posTo = lineNo * textHeight
+    topDiffPercent = (scrollTop - scrollMap[lineNo]) / (scrollMap[lineNo + lineDiff] - scrollMap[lineNo])
+    posToNextDiff = textHeight * lineDiff * topDiffPercent
+    posTo += Math.ceil(posToNextDiff)
+  }
+
+  if (preventAnimate) {
+    editArea.scrollTop(posTo)
+  } else {
+    const posDiff = Math.abs(scrollInfo.top - posTo)
+    var duration = posDiff / 50
+    duration = duration >= 100 ? duration : 100
+    editArea.stop(true, true).animate({
+      scrollTop: posTo
+    }, duration, 'linear')
+  }
+
+  viewScrolling = true
+  clearTimeout(viewScrollingTimer)
+  viewScrollingTimer = setTimeout(viewScrollingTimeoutInner, duration * 1.5)
+}
+
+function viewScrollingTimeoutInner () {
+  viewScrolling = false
+}
+
+// sync edit scroll progress to view
+let editScrollingTimer = null
+
+export function syncScrollToView (event, preventAnimate) {
+  if (window.currentMode !== modeType.both || !window.syncscroll || !viewArea) return
+  if (window.preventSyncScrollToView) {
+    if (typeof preventSyncScrollToView === 'number') {
+      window.preventSyncScrollToView--
+    } else {
+      window.preventSyncScrollToView = false
+    }
+    return
+  }
+  if (!scrollMap || !lineHeightMap) {
+    buildMap(() => {
+      syncScrollToView(event, preventAnimate)
+    })
+    return
+  }
+  if (viewScrolling) return
+
+  let lineNo, posTo
+  let topDiffPercent, posToNextDiff
+  const scrollInfo = window.editor.getScrollInfo()
+  const textHeight = window.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)
+  if (scrollInfo.height > scrollInfo.clientHeight && diffToBottom > 0) {
+    topDiffPercent = diffToBottom / textHeight
+    posTo = scrollMap[lineNo + 1]
+    posToNextDiff = (viewBottom - posTo) * topDiffPercent
+    posTo += Math.floor(posToNextDiff)
+  } else {
+    topDiffPercent = (scrollInfo.top % textHeight) / textHeight
+    posTo = scrollMap[lineNo]
+    posToNextDiff = (scrollMap[lineNo + 1] - posTo) * topDiffPercent
+    posTo += Math.floor(posToNextDiff)
+  }
+
+  if (preventAnimate) {
+    viewArea.scrollTop(posTo)
+  } else {
+    const posDiff = Math.abs(viewArea.scrollTop() - posTo)
+    var duration = posDiff / 50
+    duration = duration >= 100 ? duration : 100
+    viewArea.stop(true, true).animate({
+      scrollTop: posTo
+    }, duration, 'linear')
+  }
+
+  editScrolling = true
+  clearTimeout(editScrollingTimer)
+  editScrollingTimer = setTimeout(editScrollingTimeoutInner, duration * 1.5)
+}
+
+function editScrollingTimeoutInner () {
+  editScrolling = false
+}
-- 
cgit v1.3.1


From 4839838d0cdfca29a9e87fcf966ec026ee99a14f Mon Sep 17 00:00:00 2001
From: Yukai Huang
Date: Wed, 12 Apr 2017 09:21:13 +0800
Subject: Manage syncscroll / currentMode in appState

---
 public/js/index.js               | 67 ++++++++++++++++++++--------------------
 public/js/lib/appState.js        |  8 +++++
 public/js/lib/editor/modeType.js | 11 -------
 public/js/lib/modeType.js        | 11 +++++++
 public/js/lib/syncscroll.js      | 31 ++++++++++---------
 5 files changed, 69 insertions(+), 59 deletions(-)
 create mode 100644 public/js/lib/appState.js
 delete mode 100644 public/js/lib/editor/modeType.js
 create mode 100644 public/js/lib/modeType.js

(limited to 'public/js/lib/syncscroll.js')

diff --git a/public/js/index.js b/public/js/index.js
index 245cf299..b336af90 100644
--- a/public/js/index.js
+++ b/public/js/index.js
@@ -80,7 +80,8 @@ import { preventXSS } from './render'
 import Editor from './lib/editor'
 
 import getUIElements from './lib/editor/ui-elements'
-import modeType from './lib/editor/modeType'
+import modeType from './lib/modeType'
+import appState from './lib/appState'
 
 var defaultTextHeight = 20
 var viewportMargin = 20
@@ -244,7 +245,6 @@ const statusType = {
     fa: 'fa-plug'
   }
 }
-const defaultMode = modeType.view
 
 // global vars
 window.loaded = false
@@ -256,7 +256,6 @@ let visibleSM = false
 let visibleMD = false
 let visibleLG = false
 const isTouchDevice = 'ontouchstart' in document.documentElement
-window.currentMode = defaultMode
 let currentStatus = statusType.offline
 let lastInfo = {
   needRestore: false,
@@ -486,7 +485,7 @@ $(window).on('error', function () {
   // setNeedRefresh();
 })
 
-setupSyncAreas(ui.area.codemirrorScroll, ui.area.view, ui.area.markdown)
+setupSyncAreas(ui.area.codemirrorScroll, ui.area.view, ui.area.markdown, editor)
 
 function autoSyncscroll () {
   if (editorHasFocus()) {
@@ -548,7 +547,7 @@ function checkResponsive () {
   visibleMD = $('.visible-md').is(':visible')
   visibleLG = $('.visible-lg').is(':visible')
 
-  if (visibleXS && window.currentMode === modeType.both) {
+  if (visibleXS && appState.currentMode === modeType.both) {
     if (editorHasFocus()) { changeMode(modeType.edit) } else { changeMode(modeType.view) }
   }
 
@@ -562,7 +561,7 @@ function checkEditorStyle () {
   var desireHeight = editorInstance.statusBar ? (ui.area.edit.height() - editorInstance.statusBar.outerHeight()) : ui.area.edit.height()
     // set editor height and min height based on scrollbar style and mode
   var scrollbarStyle = editor.getOption('scrollbarStyle')
-  if (scrollbarStyle === 'overlay' || window.currentMode === modeType.both) {
+  if (scrollbarStyle === 'overlay' || appState.currentMode === modeType.both) {
     ui.area.codemirrorScroll.css('height', desireHeight + 'px')
     ui.area.codemirrorScroll.css('min-height', '')
     checkEditorScrollbar()
@@ -618,7 +617,7 @@ function checkEditorStyle () {
       previousFocusOnEditor = null
     })
     ui.area.resize.syncToggle.click(function () {
-      window.syncscroll = !window.syncscroll
+      appState.syncscroll = !appState.syncscroll
       checkSyncToggle()
     })
     ui.area.resize.handle.append(ui.area.resize.syncToggle)
@@ -632,7 +631,7 @@ function checkEditorStyle () {
 }
 
 function checkSyncToggle () {
-  if (window.syncscroll) {
+  if (appState.syncscroll) {
     if (previousFocusOnEditor) {
       window.preventSyncScrollToView = false
       syncScrollToView()
@@ -679,10 +678,10 @@ function checkTocStyle () {
   // toc scrollspy
   ui.toc.toc.removeClass('scrollspy-body, scrollspy-view')
   ui.toc.affix.removeClass('scrollspy-body, scrollspy-view')
-  if (window.currentMode === modeType.both) {
+  if (appState.currentMode === modeType.both) {
     ui.toc.toc.addClass('scrollspy-view')
     ui.toc.affix.addClass('scrollspy-view')
-  } else if (window.currentMode !== modeType.both && !newbool) {
+  } else if (appState.currentMode !== modeType.both && !newbool) {
     ui.toc.toc.addClass('scrollspy-body')
     ui.toc.affix.addClass('scrollspy-body')
   } else {
@@ -737,7 +736,7 @@ function showStatus (type, num) {
 }
 
 function toggleMode () {
-  switch (window.currentMode) {
+  switch (appState.currentMode) {
     case modeType.edit:
       changeMode(modeType.view)
       break
@@ -757,8 +756,8 @@ function changeMode (type) {
   lockNavbar()
   saveInfo()
   if (type) {
-    lastMode = window.currentMode
-    window.currentMode = type
+    lastMode = appState.currentMode
+    appState.currentMode = type
   }
   var responsiveClass = 'col-lg-6 col-md-6 col-sm-6'
   var scrollClass = 'ui-scrollable'
@@ -766,7 +765,7 @@ function changeMode (type) {
   ui.area.edit.removeClass(responsiveClass)
   ui.area.view.removeClass(scrollClass)
   ui.area.view.removeClass(responsiveClass)
-  switch (window.currentMode) {
+  switch (appState.currentMode) {
     case modeType.edit:
       ui.area.edit.show()
       ui.area.view.hide()
@@ -787,11 +786,11 @@ function changeMode (type) {
       break
   }
   // save mode to url
-  if (history.replaceState && window.loaded) history.replaceState(null, '', serverurl + '/' + noteid + '?' + window.currentMode.name)
-  if (window.currentMode === modeType.view) {
+  if (history.replaceState && window.loaded) history.replaceState(null, '', serverurl + '/' + noteid + '?' + appState.currentMode.name)
+  if (appState.currentMode === modeType.view) {
     editor.getInputField().blur()
   }
-  if (window.currentMode === modeType.edit || window.currentMode === modeType.both) {
+  if (appState.currentMode === modeType.edit || appState.currentMode === modeType.both) {
     ui.toolbar.uploadImage.fadeIn()
     // add and update status bar
     if (!editorInstance.statusBar) {
@@ -804,14 +803,14 @@ function changeMode (type) {
   } else {
     ui.toolbar.uploadImage.fadeOut()
   }
-  if (window.currentMode !== modeType.edit) {
+  if (appState.currentMode !== modeType.edit) {
     $(document.body).css('background-color', 'white')
     updateView()
   } else {
     $(document.body).css('background-color', ui.area.codemirror.css('background-color'))
   }
     // check resizable editor style
-  if (window.currentMode === modeType.both) {
+  if (appState.currentMode === modeType.both) {
     if (lastEditorWidth > 0) {
       ui.area.edit.css('width', lastEditorWidth + 'px')
     } else {
@@ -827,22 +826,22 @@ function changeMode (type) {
 
   restoreInfo()
 
-  if (lastMode === modeType.view && window.currentMode === modeType.both) {
+  if (lastMode === modeType.view && appState.currentMode === modeType.both) {
     window.preventSyncScrollToView = 2
     syncScrollToEdit(null, true)
   }
 
-  if (lastMode === modeType.edit && window.currentMode === modeType.both) {
+  if (lastMode === modeType.edit && appState.currentMode === modeType.both) {
     window.preventSyncScrollToEdit = 2
     syncScrollToView(null, true)
   }
 
-  if (lastMode === modeType.both && window.currentMode !== modeType.both) {
+  if (lastMode === modeType.both && appState.currentMode !== modeType.both) {
     window.preventSyncScrollToView = false
     window.preventSyncScrollToEdit = false
   }
 
-  if (lastMode !== modeType.edit && window.currentMode === modeType.edit) {
+  if (lastMode !== modeType.edit && appState.currentMode === modeType.edit) {
     editor.refresh()
   }
 
@@ -1360,7 +1359,7 @@ ui.modal.snippetImportSnippets.change(function () {
 })
 
 function scrollToTop () {
-  if (window.currentMode === modeType.both) {
+  if (appState.currentMode === modeType.both) {
     if (editor.getScrollInfo().top !== 0) { editor.scrollTo(0, 0) } else {
       ui.area.view.animate({
         scrollTop: 0
@@ -1374,7 +1373,7 @@ function scrollToTop () {
 }
 
 function scrollToBottom () {
-  if (window.currentMode === modeType.both) {
+  if (appState.currentMode === modeType.both) {
     var scrollInfo = editor.getScrollInfo()
     var scrollHeight = scrollInfo.height
     if (scrollInfo.top !== scrollHeight) { editor.scrollTo(0, scrollHeight * 2) } else {
@@ -2079,14 +2078,14 @@ socket.on('refresh', function (data) {
         // auto change mode if no content detected
     var nocontent = editor.getValue().length <= 0
     if (nocontent) {
-      if (visibleXS) { window.currentMode = modeType.edit } else { window.currentMode = modeType.both }
+      if (visibleXS) { appState.currentMode = modeType.edit } else { appState.currentMode = modeType.both }
     }
     // parse mode from url
     if (window.location.search.length > 0) {
       var urlMode = modeType[window.location.search.substr(1)]
-      if (urlMode) window.currentMode = urlMode
+      if (urlMode) appState.currentMode = urlMode
     }
-    changeMode(window.currentMode)
+    changeMode(appState.currentMode)
     if (nocontent && !visibleXS) {
       editor.focus()
       editor.refresh()
@@ -2446,7 +2445,7 @@ function checkCursorTag (coord, ele) {
 }
 
 function buildCursor (user) {
-  if (window.currentMode === modeType.view) return
+  if (appState.currentMode === modeType.view) return
   if (!user.cursor) return
   var coord = editor.charCoords(user.cursor, 'windows')
   coord.left = coord.left < 4 ? 4 : coord.left
@@ -2723,7 +2722,7 @@ function saveInfo () {
   var scrollbarStyle = editor.getOption('scrollbarStyle')
   var left = $(window).scrollLeft()
   var top = $(window).scrollTop()
-  switch (window.currentMode) {
+  switch (appState.currentMode) {
     case modeType.edit:
       if (scrollbarStyle === 'native') {
         lastInfo.edit.scroll.left = left
@@ -2754,7 +2753,7 @@ function restoreInfo () {
     var ch = lastInfo.edit.cursor.ch
     editor.setCursor(line, ch)
     editor.setSelections(lastInfo.edit.selections)
-    switch (window.currentMode) {
+    switch (appState.currentMode) {
       case modeType.edit:
         if (scrollbarStyle === 'native') {
           $(window).scrollLeft(lastInfo.edit.scroll.left)
@@ -2799,7 +2798,7 @@ var lastResult = null
 var postUpdateEvent = null
 
 function updateViewInner () {
-  if (window.currentMode === modeType.edit || !isDirty) return
+  if (appState.currentMode === modeType.edit || !isDirty) return
   var value = editor.getValue()
   var lastMeta = md.meta
   md.meta = {}
@@ -2816,13 +2815,13 @@ function updateViewInner () {
         // prevent XSS
     ui.area.markdown.html(preventXSS(ui.area.markdown.html()))
     ui.area.markdown.addClass('slides')
-    window.syncscroll = false
+    appState.syncscroll = false
     checkSyncToggle()
   } else {
     if (lastMeta.type && lastMeta.type === 'slide') {
       refreshView()
       ui.area.markdown.removeClass('slides')
-      window.syncscroll = true
+      appState.syncscroll = true
       checkSyncToggle()
     }
         // only render again when meta changed
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/modeType.js b/public/js/lib/editor/modeType.js
deleted file mode 100644
index f3212105..00000000
--- a/public/js/lib/editor/modeType.js
+++ /dev/null
@@ -1,11 +0,0 @@
-export default {
-  edit: {
-    name: 'edit'
-  },
-  view: {
-    name: 'view'
-  },
-  both: {
-    name: 'both'
-  }
-}
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/lib/syncscroll.js b/public/js/lib/syncscroll.js
index 6b07e79c..cee317ea 100644
--- a/public/js/lib/syncscroll.js
+++ b/public/js/lib/syncscroll.js
@@ -5,7 +5,8 @@
 import markdownitContainer from 'markdown-it-container'
 
 import { md } from '../extra'
-import modeType from '../lib/editor/modeType'
+import modeType from './modeType'
+import appState from './appState'
 
 function addPart (tokens, idx) {
   if (tokens[idx].map && tokens[idx].level === 0) {
@@ -110,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
 
@@ -127,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))
 }
@@ -162,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]
 
@@ -174,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)
@@ -229,7 +232,7 @@ function buildMapInner (callback) {
 let viewScrollingTimer = null
 
 export function syncScrollToEdit (event, preventAnimate) {
-  if (window.currentMode !== 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--
@@ -269,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]
@@ -311,7 +314,7 @@ function viewScrollingTimeoutInner () {
 let editScrollingTimer = null
 
 export function syncScrollToView (event, preventAnimate) {
-  if (window.currentMode !== modeType.both || !window.syncscroll || !viewArea) return
+  if (appState.currentMode !== modeType.both || !appState.syncscroll || !viewArea) return
   if (window.preventSyncScrollToView) {
     if (typeof preventSyncScrollToView === 'number') {
       window.preventSyncScrollToView--
@@ -330,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)
-- 
cgit v1.3.1