").insertAfter('.CodeMirror-cursors')
- }
if ($('div[data-clientid="' + user.id + '"]').length <= 0) {
let cursor = $('
')
cursor.attr('data-line', user.cursor.line)
@@ -2500,12 +2485,12 @@ function buildCursor (user) {
cursor.attr('data-mode', 'hover')
cursortag.delay(2000).fadeOut('fast')
cursor.hover(
- function () {
- if (cursor.attr('data-mode') === 'hover') { cursortag.stop(true).fadeIn('fast') }
- },
- function () {
- if (cursor.attr('data-mode') === 'hover') { cursortag.stop(true).fadeOut('fast') }
- })
+ function () {
+ if (cursor.attr('data-mode') === 'hover') { cursortag.stop(true).fadeIn('fast') }
+ },
+ function () {
+ if (cursor.attr('data-mode') === 'hover') { cursortag.stop(true).fadeOut('fast') }
+ })
var hideCursorTagDelay = 2000
var hideCursorTagTimer = null
@@ -2664,12 +2649,12 @@ editorInstance.on('changes', function (editor, changes) {
}
})
editorInstance.on('focus', function (editor) {
- for (var i = 0; i < window.onlineUsers.length; i++) {
- if (window.onlineUsers[i].id === window.personalInfo.id) {
- window.onlineUsers[i].cursor = editor.getCursor()
+ for (var i = 0; i < onlineUsers.length; i++) {
+ if (onlineUsers[i].id === personalInfo.id) {
+ onlineUsers[i].cursor = editor.getCursor()
}
}
- window.personalInfo['cursor'] = editor.getCursor()
+ personalInfo['cursor'] = editor.getCursor()
socket.emit('cursor focus', editor.getCursor())
})
@@ -2677,12 +2662,12 @@ const cursorActivity = _.debounce(cursorActivityInner, cursorActivityDebounce)
function cursorActivityInner (editor) {
if (editorHasFocus() && !Visibility.hidden()) {
- for (var i = 0; i < window.onlineUsers.length; i++) {
- if (window.onlineUsers[i].id === window.personalInfo.id) {
- window.onlineUsers[i].cursor = editor.getCursor()
+ for (var i = 0; i < onlineUsers.length; i++) {
+ if (onlineUsers[i].id === personalInfo.id) {
+ onlineUsers[i].cursor = editor.getCursor()
}
}
- window.personalInfo['cursor'] = editor.getCursor()
+ personalInfo['cursor'] = editor.getCursor()
socket.emit('cursor activity', editor.getCursor())
}
}
@@ -2724,12 +2709,12 @@ editorInstance.on('beforeSelectionChange', function (doc, selections) {
})
editorInstance.on('blur', function (cm) {
- for (var i = 0; i < window.onlineUsers.length; i++) {
- if (window.onlineUsers[i].id === window.personalInfo.id) {
- window.onlineUsers[i].cursor = null
+ for (var i = 0; i < onlineUsers.length; i++) {
+ if (onlineUsers[i].id === personalInfo.id) {
+ onlineUsers[i].cursor = null
}
}
- window.personalInfo['cursor'] = null
+ personalInfo['cursor'] = null
socket.emit('cursor blur')
})
@@ -2737,71 +2722,71 @@ 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') {
- window.lastInfo.edit.scroll.left = left
- window.lastInfo.edit.scroll.top = top
+ lastInfo.edit.scroll.left = left
+ lastInfo.edit.scroll.top = top
} else {
- window.lastInfo.edit.scroll = editor.getScrollInfo()
+ lastInfo.edit.scroll = editor.getScrollInfo()
}
break
case modeType.view:
- window.lastInfo.view.scroll.left = left
- window.lastInfo.view.scroll.top = top
+ lastInfo.view.scroll.left = left
+ lastInfo.view.scroll.top = top
break
case modeType.both:
- window.lastInfo.edit.scroll = editor.getScrollInfo()
- window.lastInfo.view.scroll.left = ui.area.view.scrollLeft()
- window.lastInfo.view.scroll.top = ui.area.view.scrollTop()
+ lastInfo.edit.scroll = editor.getScrollInfo()
+ lastInfo.view.scroll.left = ui.area.view.scrollLeft()
+ lastInfo.view.scroll.top = ui.area.view.scrollTop()
break
}
- window.lastInfo.edit.cursor = editor.getCursor()
- window.lastInfo.edit.selections = editor.listSelections()
- window.lastInfo.needRestore = true
+ lastInfo.edit.cursor = editor.getCursor()
+ lastInfo.edit.selections = editor.listSelections()
+ lastInfo.needRestore = true
}
function restoreInfo () {
var scrollbarStyle = editor.getOption('scrollbarStyle')
- if (window.lastInfo.needRestore) {
- var line = window.lastInfo.edit.cursor.line
- var ch = window.lastInfo.edit.cursor.ch
+ if (lastInfo.needRestore) {
+ var line = lastInfo.edit.cursor.line
+ var ch = lastInfo.edit.cursor.ch
editor.setCursor(line, ch)
- editor.setSelections(window.lastInfo.edit.selections)
- switch (window.currentMode) {
+ editor.setSelections(lastInfo.edit.selections)
+ switch (appState.currentMode) {
case modeType.edit:
if (scrollbarStyle === 'native') {
- $(window).scrollLeft(window.lastInfo.edit.scroll.left)
- $(window).scrollTop(window.lastInfo.edit.scroll.top)
+ $(window).scrollLeft(lastInfo.edit.scroll.left)
+ $(window).scrollTop(lastInfo.edit.scroll.top)
} else {
- let left = window.lastInfo.edit.scroll.left
- let top = window.lastInfo.edit.scroll.top
+ let left = lastInfo.edit.scroll.left
+ let top = lastInfo.edit.scroll.top
editor.scrollIntoView()
editor.scrollTo(left, top)
}
break
case modeType.view:
- $(window).scrollLeft(window.lastInfo.view.scroll.left)
- $(window).scrollTop(window.lastInfo.view.scroll.top)
+ $(window).scrollLeft(lastInfo.view.scroll.left)
+ $(window).scrollTop(lastInfo.view.scroll.top)
break
case modeType.both:
- let left = window.lastInfo.edit.scroll.left
- let top = window.lastInfo.edit.scroll.top
+ let left = lastInfo.edit.scroll.left
+ let top = lastInfo.edit.scroll.top
editor.scrollIntoView()
editor.scrollTo(left, top)
- ui.area.view.scrollLeft(window.lastInfo.view.scroll.left)
- ui.area.view.scrollTop(window.lastInfo.view.scroll.top)
+ ui.area.view.scrollLeft(lastInfo.view.scroll.left)
+ ui.area.view.scrollTop(lastInfo.view.scroll.top)
break
}
- window.lastInfo.needRestore = false
+ lastInfo.needRestore = false
}
}
// view actions
function refreshView () {
ui.area.markdown.html('')
- window.isDirty = true
+ isDirty = true
updateViewInner()
}
@@ -2813,7 +2798,7 @@ var lastResult = null
var postUpdateEvent = null
function updateViewInner () {
- if (window.currentMode === modeType.edit || !window.isDirty) return
+ if (appState.currentMode === modeType.edit || !isDirty) return
var value = editor.getValue()
var lastMeta = md.meta
md.meta = {}
@@ -2830,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
@@ -2861,7 +2846,7 @@ function updateViewInner () {
generateScrollspy()
updateScrollspy()
smoothHashScroll()
- window.isDirty = false
+ isDirty = false
clearMap()
// buildMap();
updateTitleReminder()
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
similarity index 100%
rename from public/views/statusbar.html
rename to 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
similarity index 93%
rename from public/js/syncscroll.js
rename to 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)
diff --git a/webpackBaseConfig.js b/webpackBaseConfig.js
index 87f7ceeb..36a49f25 100644
--- a/webpackBaseConfig.js
+++ b/webpackBaseConfig.js
@@ -412,6 +412,9 @@ module.exports = {
}, {
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file'
+ }, {
+ test: /\.html$/,
+ loader: 'string'
}, {
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?prefix=font/&limit=5000'
diff --git a/yarn.lock b/yarn.lock
index 360c5752..88addc98 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6529,6 +6529,10 @@ strict-uri-encode@^1.0.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
+string-loader@^0.0.1:
+ version "0.0.1"
+ resolved "https://registry.yarnpkg.com/string-loader/-/string-loader-0.0.1.tgz#496f3cccc990213e0dd5411499f9ac6a6a6f2ff8"
+
string-natural-compare@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-2.0.2.tgz#c5ce4e278ab5d1265ae6fc55435aeb7b76fcb001"