").insertAfter('.CodeMirror-cursors')
- }
if ($('div[data-clientid="' + user.id + '"]').length <= 0) {
let cursor = $('
')
cursor.attr('data-line', user.cursor.line)
--
cgit v1.2.3
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/index.js | 2 +-
public/js/lib/syncscroll.js | 368 ++++++++++++++++++++++++++++++++++++++++++++
public/js/syncscroll.js | 368 --------------------------------------------
3 files changed, 369 insertions(+), 369 deletions(-)
create mode 100644 public/js/lib/syncscroll.js
delete mode 100644 public/js/syncscroll.js
(limited to 'public/js')
diff --git a/public/js/index.js b/public/js/index.js
index 0ca6827b..245cf299 100644
--- a/public/js/index.js
+++ b/public/js/index.js
@@ -65,7 +65,7 @@ import {
setupSyncAreas,
syncScrollToEdit,
syncScrollToView
-} from './syncscroll'
+} from './lib/syncscroll'
import {
writeHistory,
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('
${highlighted}\n`
+ }
+
+ return `${highlighted}
\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 `${md.utils.escapeHtml(tokens[idx].content)}
\n`
+ }
+ return `${md.utils.escapeHtml(tokens[idx].content)}
\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
+}
diff --git a/public/js/syncscroll.js b/public/js/syncscroll.js
deleted file mode 100644
index ad21e57b..00000000
--- a/public/js/syncscroll.js
+++ /dev/null
@@ -1,368 +0,0 @@
-/* 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('${highlighted}\n`
- }
-
- return `${highlighted}
\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 `${md.utils.escapeHtml(tokens[idx].content)}
\n`
- }
- return `${md.utils.escapeHtml(tokens[idx].content)}
\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.2.3
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')
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.2.3