Skip to content

Commit 4839838

Browse files
YukaiiYukaii
committed
Manage syncscroll / currentMode in appState
1 parent 0e9afde commit 4839838

File tree

4 files changed

+58
-48
lines changed

4 files changed

+58
-48
lines changed

‎public/js/index.js‎

Lines changed: 33 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,8 @@ import { preventXSS } from './render'
8080
import Editor from './lib/editor'
8181

8282
import getUIElements from './lib/editor/ui-elements'
83-
import modeType from './lib/editor/modeType'
83+
import modeType from './lib/modeType'
84+
import appState from './lib/appState'
8485

8586
var defaultTextHeight = 20
8687
var viewportMargin = 20
@@ -244,7 +245,6 @@ const statusType = {
244245
fa: 'fa-plug'
245246
}
246247
}
247-
const defaultMode = modeType.view
248248

249249
// global vars
250250
window.loaded = false
@@ -256,7 +256,6 @@ let visibleSM = false
256256
let visibleMD = false
257257
let visibleLG = false
258258
const isTouchDevice = 'ontouchstart' in document.documentElement
259-
window.currentMode = defaultMode
260259
let currentStatus = statusType.offline
261260
let lastInfo = {
262261
needRestore: false,
@@ -486,7 +485,7 @@ $(window).on('error', function () {
486485
// setNeedRefresh();
487486
})
488487

489-
setupSyncAreas(ui.area.codemirrorScroll, ui.area.view, ui.area.markdown)
488+
setupSyncAreas(ui.area.codemirrorScroll, ui.area.view, ui.area.markdown, editor)
490489

491490
function autoSyncscroll () {
492491
if (editorHasFocus()) {
@@ -548,7 +547,7 @@ function checkResponsive () {
548547
visibleMD = $('.visible-md').is(':visible')
549548
visibleLG = $('.visible-lg').is(':visible')
550549

551-
if (visibleXS && window.currentMode === modeType.both) {
550+
if (visibleXS && appState.currentMode === modeType.both) {
552551
if (editorHasFocus()) { changeMode(modeType.edit) } else { changeMode(modeType.view) }
553552
}
554553

@@ -562,7 +561,7 @@ function checkEditorStyle () {
562561
var desireHeight = editorInstance.statusBar ? (ui.area.edit.height() - editorInstance.statusBar.outerHeight()) : ui.area.edit.height()
563562
// set editor height and min height based on scrollbar style and mode
564563
var scrollbarStyle = editor.getOption('scrollbarStyle')
565-
if (scrollbarStyle === 'overlay' || window.currentMode === modeType.both) {
564+
if (scrollbarStyle === 'overlay' || appState.currentMode === modeType.both) {
566565
ui.area.codemirrorScroll.css('height', desireHeight + 'px')
567566
ui.area.codemirrorScroll.css('min-height', '')
568567
checkEditorScrollbar()
@@ -618,7 +617,7 @@ function checkEditorStyle () {
618617
previousFocusOnEditor = null
619618
})
620619
ui.area.resize.syncToggle.click(function () {
621-
window.syncscroll = !window.syncscroll
620+
appState.syncscroll = !appState.syncscroll
622621
checkSyncToggle()
623622
})
624623
ui.area.resize.handle.append(ui.area.resize.syncToggle)
@@ -632,7 +631,7 @@ function checkEditorStyle () {
632631
}
633632

634633
function checkSyncToggle () {
635-
if (window.syncscroll) {
634+
if (appState.syncscroll) {
636635
if (previousFocusOnEditor) {
637636
window.preventSyncScrollToView = false
638637
syncScrollToView()
@@ -679,10 +678,10 @@ function checkTocStyle () {
679678
// toc scrollspy
680679
ui.toc.toc.removeClass('scrollspy-body, scrollspy-view')
681680
ui.toc.affix.removeClass('scrollspy-body, scrollspy-view')
682-
if (window.currentMode === modeType.both) {
681+
if (appState.currentMode === modeType.both) {
683682
ui.toc.toc.addClass('scrollspy-view')
684683
ui.toc.affix.addClass('scrollspy-view')
685-
} else if (window.currentMode !== modeType.both && !newbool) {
684+
} else if (appState.currentMode !== modeType.both && !newbool) {
686685
ui.toc.toc.addClass('scrollspy-body')
687686
ui.toc.affix.addClass('scrollspy-body')
688687
} else {
@@ -737,7 +736,7 @@ function showStatus (type, num) {
737736
}
738737

739738
function toggleMode () {
740-
switch (window.currentMode) {
739+
switch (appState.currentMode) {
741740
case modeType.edit:
742741
changeMode(modeType.view)
743742
break
@@ -757,16 +756,16 @@ function changeMode (type) {
757756
lockNavbar()
758757
saveInfo()
759758
if (type) {
760-
lastMode = window.currentMode
761-
window.currentMode = type
759+
lastMode = appState.currentMode
760+
appState.currentMode = type
762761
}
763762
var responsiveClass = 'col-lg-6 col-md-6 col-sm-6'
764763
var scrollClass = 'ui-scrollable'
765764
ui.area.codemirror.removeClass(scrollClass)
766765
ui.area.edit.removeClass(responsiveClass)
767766
ui.area.view.removeClass(scrollClass)
768767
ui.area.view.removeClass(responsiveClass)
769-
switch (window.currentMode) {
768+
switch (appState.currentMode) {
770769
case modeType.edit:
771770
ui.area.edit.show()
772771
ui.area.view.hide()
@@ -787,11 +786,11 @@ function changeMode (type) {
787786
break
788787
}
789788
// save mode to url
790-
if (history.replaceState && window.loaded) history.replaceState(null, '', serverurl + '/' + noteid + '?' + window.currentMode.name)
791-
if (window.currentMode === modeType.view) {
789+
if (history.replaceState && window.loaded) history.replaceState(null, '', serverurl + '/' + noteid + '?' + appState.currentMode.name)
790+
if (appState.currentMode === modeType.view) {
792791
editor.getInputField().blur()
793792
}
794-
if (window.currentMode === modeType.edit || window.currentMode === modeType.both) {
793+
if (appState.currentMode === modeType.edit || appState.currentMode === modeType.both) {
795794
ui.toolbar.uploadImage.fadeIn()
796795
// add and update status bar
797796
if (!editorInstance.statusBar) {
@@ -804,14 +803,14 @@ function changeMode (type) {
804803
} else {
805804
ui.toolbar.uploadImage.fadeOut()
806805
}
807-
if (window.currentMode !== modeType.edit) {
806+
if (appState.currentMode !== modeType.edit) {
808807
$(document.body).css('background-color', 'white')
809808
updateView()
810809
} else {
811810
$(document.body).css('background-color', ui.area.codemirror.css('background-color'))
812811
}
813812
// check resizable editor style
814-
if (window.currentMode === modeType.both) {
813+
if (appState.currentMode === modeType.both) {
815814
if (lastEditorWidth > 0) {
816815
ui.area.edit.css('width', lastEditorWidth + 'px')
817816
} else {
@@ -827,22 +826,22 @@ function changeMode (type) {
827826

828827
restoreInfo()
829828

830-
if (lastMode === modeType.view && window.currentMode === modeType.both) {
829+
if (lastMode === modeType.view && appState.currentMode === modeType.both) {
831830
window.preventSyncScrollToView = 2
832831
syncScrollToEdit(null, true)
833832
}
834833

835-
if (lastMode === modeType.edit && window.currentMode === modeType.both) {
834+
if (lastMode === modeType.edit && appState.currentMode === modeType.both) {
836835
window.preventSyncScrollToEdit = 2
837836
syncScrollToView(null, true)
838837
}
839838

840-
if (lastMode === modeType.both && window.currentMode !== modeType.both) {
839+
if (lastMode === modeType.both && appState.currentMode !== modeType.both) {
841840
window.preventSyncScrollToView = false
842841
window.preventSyncScrollToEdit = false
843842
}
844843

845-
if (lastMode !== modeType.edit && window.currentMode === modeType.edit) {
844+
if (lastMode !== modeType.edit && appState.currentMode === modeType.edit) {
846845
editor.refresh()
847846
}
848847

@@ -1360,7 +1359,7 @@ ui.modal.snippetImportSnippets.change(function () {
13601359
})
13611360

13621361
function scrollToTop () {
1363-
if (window.currentMode === modeType.both) {
1362+
if (appState.currentMode === modeType.both) {
13641363
if (editor.getScrollInfo().top !== 0) { editor.scrollTo(0, 0) } else {
13651364
ui.area.view.animate({
13661365
scrollTop: 0
@@ -1374,7 +1373,7 @@ function scrollToTop () {
13741373
}
13751374

13761375
function scrollToBottom () {
1377-
if (window.currentMode === modeType.both) {
1376+
if (appState.currentMode === modeType.both) {
13781377
var scrollInfo = editor.getScrollInfo()
13791378
var scrollHeight = scrollInfo.height
13801379
if (scrollInfo.top !== scrollHeight) { editor.scrollTo(0, scrollHeight * 2) } else {
@@ -2079,14 +2078,14 @@ socket.on('refresh', function (data) {
20792078
// auto change mode if no content detected
20802079
var nocontent = editor.getValue().length <= 0
20812080
if (nocontent) {
2082-
if (visibleXS) { window.currentMode = modeType.edit } else { window.currentMode = modeType.both }
2081+
if (visibleXS) { appState.currentMode = modeType.edit } else { appState.currentMode = modeType.both }
20832082
}
20842083
// parse mode from url
20852084
if (window.location.search.length > 0) {
20862085
var urlMode = modeType[window.location.search.substr(1)]
2087-
if (urlMode) window.currentMode = urlMode
2086+
if (urlMode) appState.currentMode = urlMode
20882087
}
2089-
changeMode(window.currentMode)
2088+
changeMode(appState.currentMode)
20902089
if (nocontent && !visibleXS) {
20912090
editor.focus()
20922091
editor.refresh()
@@ -2446,7 +2445,7 @@ function checkCursorTag (coord, ele) {
24462445
}
24472446

24482447
function buildCursor (user) {
2449-
if (window.currentMode === modeType.view) return
2448+
if (appState.currentMode === modeType.view) return
24502449
if (!user.cursor) return
24512450
var coord = editor.charCoords(user.cursor, 'windows')
24522451
coord.left = coord.left < 4 ? 4 : coord.left
@@ -2723,7 +2722,7 @@ function saveInfo () {
27232722
var scrollbarStyle = editor.getOption('scrollbarStyle')
27242723
var left = $(window).scrollLeft()
27252724
var top = $(window).scrollTop()
2726-
switch (window.currentMode) {
2725+
switch (appState.currentMode) {
27272726
case modeType.edit:
27282727
if (scrollbarStyle === 'native') {
27292728
lastInfo.edit.scroll.left = left
@@ -2754,7 +2753,7 @@ function restoreInfo () {
27542753
var ch = lastInfo.edit.cursor.ch
27552754
editor.setCursor(line, ch)
27562755
editor.setSelections(lastInfo.edit.selections)
2757-
switch (window.currentMode) {
2756+
switch (appState.currentMode) {
27582757
case modeType.edit:
27592758
if (scrollbarStyle === 'native') {
27602759
$(window).scrollLeft(lastInfo.edit.scroll.left)
@@ -2799,7 +2798,7 @@ var lastResult = null
27992798
var postUpdateEvent = null
28002799

28012800
function updateViewInner () {
2802-
if (window.currentMode === modeType.edit || !isDirty) return
2801+
if (appState.currentMode === modeType.edit || !isDirty) return
28032802
var value = editor.getValue()
28042803
var lastMeta = md.meta
28052804
md.meta = {}
@@ -2816,13 +2815,13 @@ function updateViewInner () {
28162815
// prevent XSS
28172816
ui.area.markdown.html(preventXSS(ui.area.markdown.html()))
28182817
ui.area.markdown.addClass('slides')
2819-
window.syncscroll = false
2818+
appState.syncscroll = false
28202819
checkSyncToggle()
28212820
} else {
28222821
if (lastMeta.type && lastMeta.type === 'slide') {
28232822
refreshView()
28242823
ui.area.markdown.removeClass('slides')
2825-
window.syncscroll = true
2824+
appState.syncscroll = true
28262825
checkSyncToggle()
28272826
}
28282827
// only render again when meta changed

‎public/js/lib/appState.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import modeType from './modeType'
2+
3+
let state = {
4+
syncscroll: true,
5+
currentMode: modeType.view
6+
}
7+
8+
export default state

public/js/lib/editor/modeType.js renamed to public/js/lib/modeType.js

File renamed without changes.

‎public/js/lib/syncscroll.js‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
import markdownitContainer from 'markdown-it-container'
66

77
import { md } from '../extra'
8-
import modeType from '../lib/editor/modeType'
8+
import modeType from './modeType'
9+
import appState from './appState'
910

1011
function addPart (tokens, idx) {
1112
if (tokens[idx].map && tokens[idx].level === 0) {
@@ -110,9 +111,6 @@ md.use(markdownitContainer, 'info', { render: renderContainer })
110111
md.use(markdownitContainer, 'warning', { render: renderContainer })
111112
md.use(markdownitContainer, 'danger', { render: renderContainer })
112113

113-
// FIXME: expose syncscroll to window
114-
window.syncscroll = true
115-
116114
window.preventSyncScrollToEdit = false
117115
window.preventSyncScrollToView = false
118116

@@ -127,10 +125,15 @@ let editArea = null
127125
let viewArea = null
128126
let markdownArea = null
129127

130-
export function setupSyncAreas (edit, view, markdown) {
128+
let editor
129+
130+
export function setupSyncAreas (edit, view, markdown, _editor) {
131131
editArea = edit
132132
viewArea = view
133133
markdownArea = markdown
134+
135+
editor = _editor
136+
134137
editArea.on('scroll', _.throttle(syncScrollToView, editScrollThrottle))
135138
viewArea.on('scroll', _.throttle(syncScrollToEdit, viewScrollThrottle))
136139
}
@@ -162,8 +165,8 @@ function buildMapInner (callback) {
162165
viewBottom = viewArea[0].scrollHeight - viewArea.height()
163166

164167
acc = 0
165-
const lines = window.editor.getValue().split('\n')
166-
const lineHeight = window.editor.defaultTextHeight()
168+
const lines = editor.getValue().split('\n')
169+
const lineHeight = editor.defaultTextHeight()
167170
for (i = 0; i < lines.length; i++) {
168171
const str = lines[i]
169172

@@ -174,7 +177,7 @@ function buildMapInner (callback) {
174177
continue
175178
}
176179

177-
const h = window.editor.heightAtLine(i + 1) - window.editor.heightAtLine(i)
180+
const h = editor.heightAtLine(i + 1) - editor.heightAtLine(i)
178181
acc += Math.round(h / lineHeight)
179182
}
180183
_lineHeightMap.push(acc)
@@ -229,7 +232,7 @@ function buildMapInner (callback) {
229232
let viewScrollingTimer = null
230233

231234
export function syncScrollToEdit (event, preventAnimate) {
232-
if (window.currentMode !== modeType.both || !window.syncscroll || !editArea) return
235+
if (appState.currentMode !== modeType.both || !appState.syncscroll || !editArea) return
233236
if (window.preventSyncScrollToEdit) {
234237
if (typeof window.preventSyncScrollToEdit === 'number') {
235238
window.preventSyncScrollToEdit--
@@ -269,8 +272,8 @@ export function syncScrollToEdit (event, preventAnimate) {
269272
let posTo = 0
270273
let topDiffPercent = 0
271274
let posToNextDiff = 0
272-
const scrollInfo = window.editor.getScrollInfo()
273-
const textHeight = window.editor.defaultTextHeight()
275+
const scrollInfo = editor.getScrollInfo()
276+
const textHeight = editor.defaultTextHeight()
274277
const preLastLineHeight = scrollInfo.height - scrollInfo.clientHeight - textHeight
275278
const preLastLineNo = Math.round(preLastLineHeight / textHeight)
276279
const preLastLinePos = scrollMap[preLastLineNo]
@@ -311,7 +314,7 @@ function viewScrollingTimeoutInner () {
311314
let editScrollingTimer = null
312315

313316
export function syncScrollToView (event, preventAnimate) {
314-
if (window.currentMode !== modeType.both || !window.syncscroll || !viewArea) return
317+
if (appState.currentMode !== modeType.both || !appState.syncscroll || !viewArea) return
315318
if (window.preventSyncScrollToView) {
316319
if (typeof preventSyncScrollToView === 'number') {
317320
window.preventSyncScrollToView--
@@ -330,8 +333,8 @@ export function syncScrollToView (event, preventAnimate) {
330333

331334
let lineNo, posTo
332335
let topDiffPercent, posToNextDiff
333-
const scrollInfo = window.editor.getScrollInfo()
334-
const textHeight = window.editor.defaultTextHeight()
336+
const scrollInfo = editor.getScrollInfo()
337+
const textHeight = editor.defaultTextHeight()
335338
lineNo = Math.floor(scrollInfo.top / textHeight)
336339
// if reach the last line, will start lerp to the bottom
337340
const diffToBottom = (scrollInfo.top + scrollInfo.clientHeight) - (scrollInfo.height - textHeight)

0 commit comments

Comments
 (0)