From 4839838d0cdfca29a9e87fcf966ec026ee99a14f Mon Sep 17 00:00:00 2001 From: Yukai Huang Date: Wed, 12 Apr 2017 09:21:13 +0800 Subject: [PATCH] Manage syncscroll / currentMode in appState --- public/js/index.js | 67 +++++++++++++------------- public/js/lib/appState.js | 8 +++ public/js/lib/{editor => }/modeType.js | 0 public/js/lib/syncscroll.js | 31 ++++++------ 4 files changed, 58 insertions(+), 48 deletions(-) create mode 100644 public/js/lib/appState.js rename public/js/lib/{editor => }/modeType.js (100%) diff --git a/public/js/index.js b/public/js/index.js index 245cf29..b336af9 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 0000000..fb8030e --- /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/modeType.js similarity index 100% rename from public/js/lib/editor/modeType.js rename to public/js/lib/modeType.js diff --git a/public/js/lib/syncscroll.js b/public/js/lib/syncscroll.js index 6b07e79..cee317e 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)