jyapayne/ace
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Issue #1232: Scroll editor into browser view on cursor movement

Browse source
This commit is contained in:
nightwing 2013-02-05 00:28:13 +04:00
commit bd6dda68f0
2 changed files with 44 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

4
demo/scrollable-page.html
View file

@ -96,7 +96,7 @@ require("ace/commands/default_commands").commands.push({
var editor = ace.edit("editor");
editor.setTheme("ace/theme/twilight");
editor.session.setMode("ace/mode/javascript");
editor.setAutoScrollEditorIntoView();
var count = 1;
function add() {
@ -113,6 +113,8 @@ function add() {
editor = ace.edit(el)
editor.setTheme(theme)
editor.session.setMode("ace/mode/javascript")
editor.setAutoScrollEditorIntoView()
editor.setValue([
"this is editor number: ", count, "\n",

41
lib/ace/editor.js
View file

@ -2109,6 +2109,47 @@ var Editor = function(renderer, session) {
this.destroy = function() {
this.renderer.destroy();
};
this.setAutoScrollEditorIntoView = function() {
var self = this;
var rect;
var shouldScroll = false;
var scrollAnchor = dom.createElement("div");
scrollAnchor.style.cssText = "position:absolute";
this.container.insertBefore(scrollAnchor, this.container.firstChild);
this.on("changeSelection", function() {
shouldScroll = true;
});
// needed to not trigger sync reflow
this.renderer.on("beforeRender", function() {
if (shouldScroll)
rect = self.renderer.container.getBoundingClientRect()
});
this.renderer.on("afterRender", function() {
if (shouldScroll && rect && self.isFocused()) {
var renderer = self.renderer;
var pos = renderer.$cursorLayer.$pixelPos;
var config = renderer.layerConfig;
var top = pos.top - config.offset;
if (pos.top >= 0 && top + rect.top < 0) {
shouldScroll = true
} else if (pos.top < config.height &&
pos.top + rect.top + config.lineHeight > window.innerHeight) {
shouldScroll = false;
} else {
shouldScroll = null;
}
if (shouldScroll != null) {
scrollAnchor.style.top = top + "px";
scrollAnchor.style.left = pos.left + "px";
scrollAnchor.style.height = config.lineHeight + "px";
scrollAnchor.scrollIntoView(shouldScroll);
}
shouldScroll = rect = null;
}
});
};
}).call(Editor.prototype);