add a way for disabling AutoScrollEditorIntoView

This commit is contained in:
nightwing 2013-02-06 01:06:59 +04:00
commit c6ba1957aa
3 changed files with 26 additions and 9 deletions

View file

@ -88,6 +88,7 @@ require("ace/commands/default_commands").commands.push({
exec: function(editor) { exec: function(editor) {
dom.toggleCssClass(document.body, "fullScreen") dom.toggleCssClass(document.body, "fullScreen")
dom.toggleCssClass(editor.container, "fullScreen") dom.toggleCssClass(editor.container, "fullScreen")
editor.setAutoScrollEditorIntoView()
editor.resize() editor.resize()
} }
}) })

View file

@ -2110,29 +2110,37 @@ var Editor = function(renderer, session) {
this.renderer.destroy(); this.renderer.destroy();
}; };
this.setAutoScrollEditorIntoView = function() { /**
var self = this; * Enables automatic scrolling of the cursor into view when editor itself is inside scrollable element
* @param {Boolean} enable default true
**/
this.setAutoScrollEditorIntoView = function(enable) {
if (enable === true)
return;
var rect; var rect;
var self = this;
var shouldScroll = false; var shouldScroll = false;
var scrollAnchor = dom.createElement("div"); if (!this.$scrollAnchor)
this.$scrollAnchor = document.createElement("div");
var scrollAnchor = this.$scrollAnchor;
scrollAnchor.style.cssText = "position:absolute"; scrollAnchor.style.cssText = "position:absolute";
this.container.insertBefore(scrollAnchor, this.container.firstChild); this.container.insertBefore(scrollAnchor, this.container.firstChild);
this.on("changeSelection", function() { var onChangeSelection = this.on("changeSelection", function() {
shouldScroll = true; shouldScroll = true;
}); });
// needed to not trigger sync reflow // needed to not trigger sync reflow
this.renderer.on("beforeRender", function() { var onBeforeRender = this.renderer.on("beforeRender", function() {
if (shouldScroll) if (shouldScroll)
rect = self.renderer.container.getBoundingClientRect() rect = self.renderer.container.getBoundingClientRect();
}); });
this.renderer.on("afterRender", function() { var onAfterRender = this.renderer.on("afterRender", function() {
if (shouldScroll && rect && self.isFocused()) { if (shouldScroll && rect && self.isFocused()) {
var renderer = self.renderer; var renderer = self.renderer;
var pos = renderer.$cursorLayer.$pixelPos; var pos = renderer.$cursorLayer.$pixelPos;
var config = renderer.layerConfig; var config = renderer.layerConfig;
var top = pos.top - config.offset; var top = pos.top - config.offset;
if (pos.top >= 0 && top + rect.top < 0) { if (pos.top >= 0 && top + rect.top < 0) {
shouldScroll = true shouldScroll = true;
} else if (pos.top < config.height && } else if (pos.top < config.height &&
pos.top + rect.top + config.lineHeight > window.innerHeight) { pos.top + rect.top + config.lineHeight > window.innerHeight) {
shouldScroll = false; shouldScroll = false;
@ -2144,11 +2152,18 @@ var Editor = function(renderer, session) {
scrollAnchor.style.left = pos.left + "px"; scrollAnchor.style.left = pos.left + "px";
scrollAnchor.style.height = config.lineHeight + "px"; scrollAnchor.style.height = config.lineHeight + "px";
scrollAnchor.scrollIntoView(shouldScroll); scrollAnchor.scrollIntoView(shouldScroll);
} }
shouldScroll = rect = null; shouldScroll = rect = null;
} }
}); });
this.setAutoScrollEditorIntoView = function(enable) {
if (enable === false)
return;
delete this.setAutoScrollEditorIntoView;
this.removeEventListener("changeSelection", onChangeSelection);
this.renderer.removeEventListener("afterRender", onAfterRender);
this.renderer.removeEventListener("beforeRender", onBeforeRender);
};
}; };
}).call(Editor.prototype); }).call(Editor.prototype);

View file

@ -106,6 +106,7 @@ EventEmitter.addEventListener = function(eventName, callback, capturing) {
if (listeners.indexOf(callback) == -1) if (listeners.indexOf(callback) == -1)
listeners[capturing ? "unshift" : "push"](callback); listeners[capturing ? "unshift" : "push"](callback);
return callback;
}; };
EventEmitter.removeListener = EventEmitter.removeListener =