diff --git a/demo/autoresize.html b/demo/autoresize.html new file mode 100644 index 00000000..cc1dc5e3 --- /dev/null +++ b/demo/autoresize.html @@ -0,0 +1,48 @@ + + + + + + Editor + + + +
autoresizing editor
+
+
minHeight = 2 lines
+ + + + + + diff --git a/demo/kitchen-sink/layout.js b/demo/kitchen-sink/layout.js index 36f85cf3..4729af44 100644 --- a/demo/kitchen-sink/layout.js +++ b/demo/kitchen-sink/layout.js @@ -103,11 +103,6 @@ var Split = function(){ exports.singleLineEditor = function(el) { var renderer = new Renderer(el); el.style.overflow = "hidden"; - renderer.scrollBar.element.style.top = "0"; - renderer.scrollBar.element.style.display = "none"; - renderer.scrollBar.orginalWidth = renderer.scrollBar.width; - renderer.scrollBar.width = 0; - renderer.content.style.height = "auto"; renderer.screenToTextCoordinates = function(x, y) { var pos = this.pixelToScreenCoordinates(x, y); @@ -117,61 +112,7 @@ exports.singleLineEditor = function(el) { ); }; - renderer.maxLines = 4; - renderer.$computeLayerConfigWithScroll = renderer.$computeLayerConfig; - renderer.$computeLayerConfig = function() { - var config = this.layerConfig; - var height = this.session.getScreenLength() * this.lineHeight; - if (config.height != height) { - var vScroll = height > this.maxLines * this.lineHeight; - - if (vScroll != this.$vScroll) { - if (vScroll) { - this.scrollBar.element.style.display = ""; - this.scrollBar.width = this.scrollBar.orginalWidth; - this.container.style.height = config.height + "px"; - height = config.height; - this.scrollTop = height - this.maxLines * this.lineHeight; - } else { - this.scrollBar.element.style.display = "none"; - this.scrollBar.width = 0; - } - - this.onResize(); - this.$vScroll = vScroll; - } - - if (this.$vScroll) - return renderer.$computeLayerConfigWithScroll(); - - this.container.style.height = height + "px"; - this.scroller.style.height = height + "px"; - this.content.style.height = height + "px"; - this._emit("resize"); - } - - var longestLine = this.$getLongestLine(); - var firstRow = 0; - var lastRow = this.session.getLength(); - - this.scrollTop = 0; - config.width = longestLine; - config.padding = this.$padding; - config.firstRow = 0; - config.firstRowScreen = 0; - config.lastRow = lastRow; - config.lineHeight = this.lineHeight; - config.characterWidth = this.characterWidth; - config.minHeight = height; - config.maxHeight = height; - config.offset = 0; - config.height = height; - - this.$gutterLayer.element.style.marginTop = 0 + "px"; - this.content.style.marginTop = 0 + "px"; - this.content.style.width = longestLine + 2 * this.$padding + "px"; - }; - renderer.isScrollableBy=function(){return false}; + renderer.$maxLines = 4; renderer.setStyle("ace_one-line"); var editor = new Editor(renderer); @@ -182,7 +123,6 @@ exports.singleLineEditor = function(el) { editor.setShowPrintMargin(false); editor.renderer.setShowGutter(false); editor.renderer.setHighlightGutterLine(false); - editor.$mouseHandler.$focusWaitTimout = 0; return editor; diff --git a/doc/site/js/main.js b/doc/site/js/main.js index 48b58727..35b870e5 100644 --- a/doc/site/js/main.js +++ b/doc/site/js/main.js @@ -63,8 +63,6 @@ $(function() { tabs.find(tab_a_selector).click(function(e) { e.preventDefault(); - embedded_editor.resize(); - editor.resize(); if ($(this).attr("href") === "/") { window.location = "http://ace.ajax.org"; return; @@ -101,6 +99,8 @@ $(function() { } $(this).tab("show"); + embedded_editor.resize(); + editor.resize(); var state = {}; state.nav = $(this).attr("href").substr(1); diff --git a/lib/ace/autocomplete/popup.js b/lib/ace/autocomplete/popup.js index 85a5d8b7..5b7ce0b3 100644 --- a/lib/ace/autocomplete/popup.js +++ b/lib/ace/autocomplete/popup.js @@ -42,42 +42,8 @@ var dom = require("../lib/dom"); var $singleLineEditor = function(el) { var renderer = new Renderer(el); - renderer.maxLines = 4; - renderer.$computeLayerConfigWithScroll = renderer.$computeLayerConfig; - renderer.scrollBar.orginalWidth = renderer.scrollBar.getWidth(); - renderer.$computeLayerConfig = function() { - var height = this.session.getScreenLength() * this.lineHeight; - var maxHeight = this.maxLines * this.lineHeight; - var desiredHeight = Math.max(this.lineHeight, Math.min(maxHeight, height)); - var vScroll = height > maxHeight; - if (desiredHeight != this.desiredHeight || vScroll != this.$vScroll) { - if (vScroll != this.$vScroll) { - if (vScroll) { - this.scrollBar.element.style.display = ""; - this.scrollBar.width = this.scrollBar.orginalWidth; - - height = maxHeight; - this.scrollTop = height - this.maxLines * this.lineHeight; - } else { - this.scrollBar.element.style.display = "none"; - this.scrollBar.width = 0; - } - - this.$size.height = 0; - this.$size.width = 0; - - this.$vScroll = vScroll; - } - - this.container.style.height = desiredHeight + "px"; - this.onResize(); - this.$loop.changes = 0; - this.desiredHeight = desiredHeight; - this.scroller.style.overflowX = "hidden"; - } - return renderer.$computeLayerConfigWithScroll(); - }; - + renderer.$maxLines = 4; + var editor = new Editor(renderer); editor.setHighlightActiveLine(false); @@ -108,7 +74,7 @@ var AcePopup = function(parentNode) { popup.renderer.$cursorLayer.restartTimer = noop; popup.renderer.$cursorLayer.element.style.opacity = 0; - popup.renderer.maxLines = 8; + popup.renderer.$maxLines = 8; popup.renderer.$keepTextAreaAtCursor = false; popup.setHighlightActiveLine(true); @@ -221,6 +187,7 @@ var AcePopup = function(parentNode) { el.style.left = pos.left + "px"; el.style.display = ""; + this.renderer.$textLayer.checkForSizeChanges(); this._signal("show"); }; diff --git a/lib/ace/css/editor.css b/lib/ace/css/editor.css index 8ebc1616..0063ba2d 100644 --- a/lib/ace/css/editor.css +++ b/lib/ace/css/editor.css @@ -71,8 +71,8 @@ .ace_scrollbar { position: absolute; - overflow-x: hidden; - overflow-y: scroll; + overflow: hidden; + overflow-y: auto; right: 0; top: 0; bottom: 0; @@ -84,6 +84,22 @@ left: 0; } +.ace_scrollbar-h { + position: absolute; + overflow-x: auto; + overflow-y: hidden; + right: 0; + left: 0; + bottom: 0; +} + +.ace_scrollbar-inner { + position: absolute; + height: 1px; + left: 0; +} + + .ace_print-margin { position: absolute; height: 100%; diff --git a/lib/ace/edit_session.js b/lib/ace/edit_session.js index 850804f6..369a2bc0 100644 --- a/lib/ace/edit_session.js +++ b/lib/ace/edit_session.js @@ -990,7 +990,7 @@ var EditSession = function(text, mode) { * **/ this.setScrollTop = function(scrollTop) { - scrollTop = Math.round(Math.max(0, scrollTop)); + scrollTop = Math.round(scrollTop); if (this.$scrollTop === scrollTop || isNaN(scrollTop)) return; @@ -1011,7 +1011,7 @@ var EditSession = function(text, mode) { * [Sets the value of the distance between the left of the editor and the leftmost part of the visible content.]{: #EditSession.setScrollLeft} **/ this.setScrollLeft = function(scrollLeft) { - scrollLeft = Math.round(Math.max(0, scrollLeft)); + scrollLeft = Math.round(scrollLeft); if (this.$scrollLeft === scrollLeft || isNaN(scrollLeft)) return; diff --git a/lib/ace/editor.js b/lib/ace/editor.js index 62a4c37f..088fbaae 100644 --- a/lib/ace/editor.js +++ b/lib/ace/editor.js @@ -2259,6 +2259,8 @@ config.defineOptions(Editor.prototype, "editor", { displayIndentGuides: "renderer", fontSize: "renderer", fontFamily: "renderer", + maxLines: "renderer", + minLines: "renderer", scrollSpeed: "$mouseHandler", dragDelay: "$mouseHandler", diff --git a/lib/ace/ext/textarea.js b/lib/ace/ext/textarea.js index a402e65f..fee9b9b2 100644 --- a/lib/ace/ext/textarea.js +++ b/lib/ace/ext/textarea.js @@ -288,21 +288,18 @@ function setupApi(editor, editorDiv, settingDiv, ace, options, loader) { settingDiv.hideButton.focus(); editor.on("focus", function onFocus() { editor.removeListener("focus", onFocus); - settingDiv.style.display = "none" + settingDiv.style.display = "none"; }); } else { editor.focus(); - }; + } }; + editor.$setOption = editor.setOption; editor.setOption = function(key, value) { if (options[key] == value) return; switch (key) { - case "gutter": - renderer.setShowGutter(toBool(value)); - break; - case "mode": if (value != "text") { // Load the required mode file. Files get loaded only once. @@ -366,18 +363,9 @@ function setupApi(editor, editorDiv, settingDiv, ace, options, loader) { break; } break; - - case "useSoftTabs": - session.setUseSoftTabs(toBool(value)); - break; - - case "showPrintMargin": - renderer.setShowPrintMargin(toBool(value)); - break; - - case "showInvisibles": - editor.setShowInvisibles(toBool(value)); - break; + + default: + editor.$setOption(key, toBool(value)); } options[key] = value; @@ -391,9 +379,7 @@ function setupApi(editor, editorDiv, settingDiv, ace, options, loader) { return options; }; - for (var option in exports.options) { - editor.setOption(option, exports.options[option]); - } + editor.setOptions(exports.options); return editor; } @@ -493,7 +479,7 @@ function setupSettingPanel(settingDiv, settingOpener, editor, options) { cValue == "true" ? "checked='true'" : "", "'>" ); - return + return; } builder.push("