diff options
| -rw-r--r-- | public/css/index.css | 2 | ||||
| -rw-r--r-- | public/js/index.js | 78 | ||||
| -rw-r--r-- | public/js/syncscroll.js | 1 |
3 files changed, 47 insertions, 34 deletions
diff --git a/public/css/index.css b/public/css/index.css index 3d45cda3..fdfae0ac 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -15,7 +15,7 @@ body { letter-spacing: 0.025em; line-height: 1.25; font-size: 18px; - min-height: 100%; + height: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; } diff --git a/public/js/index.js b/public/js/index.js index 92b5ae5d..0e34f9aa 100644 --- a/public/js/index.js +++ b/public/js/index.js @@ -530,6 +530,7 @@ var ui = { edit: $(".ui-edit-area"), view: $(".ui-view-area"), codemirror: $(".ui-edit-area .CodeMirror"), + codemirrorScroll: $(".ui-edit-area .CodeMirror .CodeMirror-scroll"), markdown: $(".ui-view-area .markdown-body") } }; @@ -703,7 +704,7 @@ function locationHashChanged(e) { var windowResizeDebounce = 200; var windowResize = _.debounce(windowResizeInner, windowResizeDebounce); -function windowResizeInner() { +function windowResizeInner(callback) { checkLayout(); checkResponsive(); checkEditorStyle(); @@ -711,18 +712,29 @@ function windowResizeInner() { checkCursorMenu(); //refresh editor if (loaded) { - editor.setOption('viewportMargin', Infinity); - setTimeout(function () { + if (editor.getOption('scrollbarStyle') === 'native') { clearMap(); syncScrollToView(); - editor.setOption('viewportMargin', viewportMargin); - //add or update user cursors - for (var i = 0; i < onlineUsers.length; i++) { - if (onlineUsers[i].id != personalInfo.id) - buildCursor(onlineUsers[i]); - } updateScrollspy(); - }, 100); + if (callback && typeof callback === 'function') + callback(); + } else { + // force it load all docs at once to prevent scroll knob blink + editor.setOption('viewportMargin', Infinity); + setTimeout(function () { + clearMap(); + syncScrollToView(); + editor.setOption('viewportMargin', viewportMargin); + //add or update user cursors + for (var i = 0; i < onlineUsers.length; i++) { + if (onlineUsers[i].id != personalInfo.id) + buildCursor(onlineUsers[i]); + } + updateScrollspy(); + if (callback && typeof callback === 'function') + callback(); + }, 1); + } } } @@ -754,25 +766,16 @@ function checkResponsive() { var lastEditorWidth = 0; function checkEditorStyle() { + var desireHeight = statusBar ? (ui.area.edit.height() - 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' || currentMode == modeType.both) { - //save last editor scroll top - var lastTop = editor.getScrollInfo().top; - ui.area.codemirror.css('height', ''); - //set editor size to keep status bar on the bottom - editor.setSize(null, ui.area.edit.height()); - //restore last editor scroll top - editor.scrollTo(null, lastTop); + ui.area.codemirrorScroll.css('height', desireHeight + 'px'); + ui.area.codemirrorScroll.css('min-height', ''); } else if (scrollbarStyle == 'native') { - ui.area.codemirror.css('height', 'auto'); - $('.CodeMirror-gutters').css('height', $('.CodeMirror-sizer').height()); + ui.area.codemirrorScroll.css('height', ''); + ui.area.codemirrorScroll.css('min-height', desireHeight + 'px'); } - //set editor parent height to fill status bar - if (statusBar) - statusBar.parent().css('height', ui.area.edit.height() - statusBar.outerHeight() + 'px'); - //set sizer height to make it at least height as editor - var editorSizerHeight = ui.area.edit.height() - (statusBar ? statusBar.outerHeight() : 0); - $('.CodeMirror-sizer').css('height', editorSizerHeight + 'px'); //make editor resizable ui.area.edit.resizable({ handles: 'e', @@ -879,6 +882,7 @@ function toggleMode() { var lastMode = null; function changeMode(type) { + // lock navbar to prevent it hide after changeMode lockNavbar(); saveInfo(); if (type) { @@ -949,16 +953,15 @@ function changeMode(type) { } windowResizeInner(); - + restoreInfo(); - + if (lastMode == modeType.view && currentMode == modeType.both) { - if (!scrollMap || !lineHeightMap) - buildMapInner(); - var scrollMapNearest = closestIndex(scrollMap, lastInfo.view.scroll.top); - var lineHeightMapNearest = closestIndex(lineHeightMap, scrollMapNearest); - var height = lineHeightMapNearest * defaultTextHeight; - editor.scrollTo(null, height); + syncScrollToEdit(); + } + + if (lastMode != modeType.edit && currentMode == modeType.edit) { + editor.refresh(); } ui.toolbar.both.removeClass("active"); @@ -987,6 +990,15 @@ var unlockNavbar = _.debounce(function () { $('.navbar').removeClass('locked'); }, 200); +function syncScrollToEdit() { + if (!scrollMap || !lineHeightMap) + buildMapInner(); + var scrollMapNearest = closestIndex(scrollMap, lastInfo.view.scroll.top); + var lineHeightMapNearest = closestIndex(lineHeightMap, scrollMapNearest); + var height = lineHeightMapNearest * defaultTextHeight; + editor.scrollTo(null, height); +} + function closestIndex(arr, closestTo) { var closest = Math.max.apply(null, arr); //Get the highest number in arr in case it match nothing. var index = 0; diff --git a/public/js/syncscroll.js b/public/js/syncscroll.js index 890188cb..524d60a9 100644 --- a/public/js/syncscroll.js +++ b/public/js/syncscroll.js @@ -116,6 +116,7 @@ var viewScrollingTimer = null; //editor.on('scroll', _.throttle(syncScrollToView, editorScrollThrottle)); editor.on('scroll', syncScrollToView); +ui.area.codemirrorScroll.on('scroll', syncScrollToView); ui.area.view.on('scroll', function () { viewScrolling = true; clearTimeout(viewScrollingTimer); |