From 03edee8c30c64f783f2d8d923e07a96be201ae92 Mon Sep 17 00:00:00 2001 From: DanyaPostfactum Date: Sun, 24 Nov 2013 23:00:06 +1000 Subject: [PATCH 1/4] Refactor ScrollBarV and ScrollBarH classes --- lib/ace/css/editor.css | 13 ++- lib/ace/scrollbar.js | 205 ++++++++++++++++++++++++++--------------- 2 files changed, 139 insertions(+), 79 deletions(-) diff --git a/lib/ace/css/editor.css b/lib/ace/css/editor.css index b291c11f..d3bc085e 100644 --- a/lib/ace/css/editor.css +++ b/lib/ace/css/editor.css @@ -97,10 +97,7 @@ .ace_scrollbar { position: absolute; - overflow-x: hidden; - overflow-y: auto; right: 0; - top: 0; bottom: 0; z-index: 6; } @@ -112,14 +109,16 @@ top: 0; } +.ace_scrollbar-v{ + overflow-x: hidden; + overflow-y: auto; + top: 0; +} + .ace_scrollbar-h { - position: absolute; overflow-x: auto; overflow-y: hidden; - right: 0; left: 0; - bottom: 0; - z-index: 6; } .ace_print-margin { diff --git a/lib/ace/scrollbar.js b/lib/ace/scrollbar.js index 02a96e09..7f494f1e 100644 --- a/lib/ace/scrollbar.js +++ b/lib/ace/scrollbar.js @@ -37,7 +37,7 @@ var event = require("./lib/event"); var EventEmitter = require("./lib/event_emitter").EventEmitter; /** - * A set of methods for setting and retrieving the editor's scrollbar. + * An abstract class representing a native scrollbar control. * @class ScrollBar **/ @@ -47,9 +47,9 @@ var EventEmitter = require("./lib/event_emitter").EventEmitter; * * @constructor **/ -var ScrollBarV = function(parent, renderer) { +var ScrollBar = function(parent) { this.element = dom.createElement("div"); - this.element.className = "ace_scrollbar"; + this.element.className = "ace_scrollbar ace_scrollbar" + this.classSuffix; this.inner = dom.createElement("div"); this.inner.className = "ace_scrollbar-inner"; @@ -57,86 +57,72 @@ var ScrollBarV = function(parent, renderer) { parent.appendChild(this.element); - // in OSX lion the scrollbars appear to have no width. In this case resize the - // element to show the scrollbar but still pretend that the scrollbar has a width - // of 0px - // in Firefox 6+ scrollbar is hidden if element has the same width as scrollbar - // make element a little bit wider to retain scrollbar when page is zoomed - renderer.$scrollbarWidth = - this.width = dom.scrollbarWidth(parent.ownerDocument); - renderer.$scrollbarWidth = - this.width = dom.scrollbarWidth(parent.ownerDocument); - this.fullWidth = this.width; - this.inner.style.width = - this.element.style.width = (this.width || 15) + 5 + "px"; this.setVisible(false); - this.element.style.overflowY = "scroll"; - - event.addListener(this.element, "scroll", this.onScrollV.bind(this)); - event.addListener(this.element, "mousedown", event.preventDefault); -}; -var ScrollBarH = function(parent, renderer) { - this.element = dom.createElement("div"); - this.element.className = "ace_scrollbar-h"; - - this.inner = dom.createElement("div"); - this.inner.className = "ace_scrollbar-inner"; - this.element.appendChild(this.inner); - - parent.appendChild(this.element); - - // in OSX lion the scrollbars appear to have no width. In this case resize the - // element to show the scrollbar but still pretend that the scrollbar has a width - // of 0px - // in Firefox 6+ scrollbar is hidden if element has the same width as scrollbar - // make element a little bit wider to retain scrollbar when page is zoomed - this.height = renderer.$scrollbarWidth; - this.fullHeight = this.height; - this.inner.style.height = - this.element.style.height = (this.height || 15) + 5 + "px"; - this.setVisible(false); - this.element.style.overflowX = "scroll"; - - event.addListener(this.element, "scroll", this.onScrollH.bind(this)); + event.addListener(this.element, "scroll", this.onScroll.bind(this)); event.addListener(this.element, "mousedown", event.preventDefault); }; (function() { oop.implement(this, EventEmitter); +}).call(ScrollBar.prototype); + +/** + * Represents a vertical scroll bar. + * @class ScrollBarV + **/ + +/** + * Creates a new `ScrollBarV`. `parent` is the owner of the scroll bar. + * @param {DOMElement} parent A DOM element + * @param {Object} renderer An editor renderer + * + * @constructor + **/ +var ScrollBarV = function(parent, renderer) { + ScrollBar.call(this, parent); + + // in OSX lion the scrollbars appear to have no width. In this case resize the + // element to show the scrollbar but still pretend that the scrollbar has a width + // of 0px + // in Firefox 6+ scrollbar is hidden if element has the same width as scrollbar + // make element a little bit wider to retain scrollbar when page is zoomed + renderer.$scrollbarWidth = + this.width = dom.scrollbarWidth(parent.ownerDocument); + this.fullWidth = this.width; + this.inner.style.width = + this.element.style.width = (this.width || 15) + 5 + "px"; + this.element.style.overflowY = "scroll"; +}; + +oop.inherits(ScrollBarV, ScrollBar); + +(function() { + + this.classSuffix = '-v'; this.setVisible = function(show) { if (show) { this.element.style.display = ""; - if (this.fullWidth) - this.width = this.fullWidth; - if (this.fullHeight) - this.height = this.fullHeight; + this.width = this.fullWidth; } else { this.element.style.display = "none"; - this.height = this.width = 0; + this.width = 0; } }; - + /** * Emitted when the scroll bar, well, scrolls. * @event scroll * @param {Object} e Contains one property, `"data"`, which indicates the current scroll top position **/ - this.onScrollV = function() { + this.onScroll = function() { if (!this.skipEvent) { this.scrollTop = this.element.scrollTop; this._emit("scroll", {data: this.scrollTop}); } this.skipEvent = false; }; - this.onScrollH = function() { - if (!this.skipEvent) { - this.scrollLeft = this.element.scrollLeft; - this._emit("scroll", {data: this.scrollLeft}); - } - this.skipEvent = false; - }; /** * Returns the width of the scroll bar. @@ -146,10 +132,6 @@ var ScrollBarH = function(parent, renderer) { return this.width; }; - this.getHeight = function() { - return this.height; - }; - /** * Sets the height of the scroll bar, in pixels. * @param {Number} height The new height @@ -157,10 +139,6 @@ var ScrollBarH = function(parent, renderer) { this.setHeight = function(height) { this.element.style.height = height + "px"; }; - - this.setWidth = function(width) { - this.element.style.width = width + "px"; - }; /** * Sets the inner height of the scroll bar, in pixels. @@ -169,10 +147,6 @@ var ScrollBarH = function(parent, renderer) { this.setInnerHeight = function(height) { this.inner.style.height = height + "px"; }; - - this.setInnerWidth = function(width) { - this.inner.style.width = width + "px"; - }; /** * Sets the scroll top of the scroll bar. @@ -186,6 +160,95 @@ var ScrollBarH = function(parent, renderer) { this.scrollTop = this.element.scrollTop = scrollTop; } }; + +}).call(ScrollBarV.prototype); + +/** + * Represents a horisontal scroll bar. + * @class ScrollBarV + **/ + +/** + * Creates a new `ScrollBarH`. `parent` is the owner of the scroll bar. + * @param {DOMElement} parent A DOM element + * @param {Object} renderer An editor renderer + * + * @constructor + **/ +var ScrollBarH = function(parent, renderer) { + ScrollBar.call(this, parent); + + // in OSX lion the scrollbars appear to have no width. In this case resize the + // element to show the scrollbar but still pretend that the scrollbar has a width + // of 0px + // in Firefox 6+ scrollbar is hidden if element has the same width as scrollbar + // make element a little bit wider to retain scrollbar when page is zoomed + this.height = renderer.$scrollbarWidth; + this.fullHeight = this.height; + this.inner.style.height = + this.element.style.height = (this.height || 15) + 5 + "px"; + this.element.style.overflowX = "scroll"; +}; + +oop.inherits(ScrollBarH, ScrollBar); + +(function() { + + this.classSuffix = '-h'; + + this.setVisible = function(show) { + if (show) { + this.element.style.display = ""; + this.height = this.fullHeight; + } else { + this.element.style.display = "none"; + this.height = 0; + } + }; + + /** + * Emitted when the scroll bar, well, scrolls. + * @event scroll + * @param {Object} e Contains one property, `"data"`, which indicates the current scroll top position + **/ + this.onScroll = function() { + if (!this.skipEvent) { + this.scrollLeft = this.element.scrollLeft; + this._emit("scroll", {data: this.scrollLeft}); + } + this.skipEvent = false; + }; + + /** + * Returns the height of the scroll bar. + * @returns {Number} + **/ + this.getHeight = function() { + return this.height; + }; + + /** + * Sets the width of the scroll bar, in pixels. + * @param {Number} width The new width + **/ + this.setWidth = function(width) { + this.element.style.width = width + "px"; + }; + + /** + * Sets the inner width of the scroll bar, in pixels. + * @param {Number} width The new inner width + **/ + this.setInnerWidth = function(width) { + this.inner.style.width = width + "px"; + }; + + /** + * Sets the scroll left of the scroll bar. + * @param {Number} scrollTop The new scroll left + **/ + // on chrome 17+ for small zoom levels after calling this function + // this.element.scrollTop != scrollTop which makes page to scroll up. this.setScrollLeft = function(scrollLeft) { if (this.scrollLeft != scrollLeft) { this.skipEvent = true; @@ -193,9 +256,7 @@ var ScrollBarH = function(parent, renderer) { } }; -}).call(ScrollBarV.prototype); -ScrollBarH.prototype = ScrollBarV.prototype; - +}).call(ScrollBarH.prototype); exports.ScrollBar = ScrollBarV; // backward compatibility From b58b38d74a76cbacc0fa6e014e225ba34d401436 Mon Sep 17 00:00:00 2001 From: DanyaPostfactum Date: Mon, 2 Dec 2013 21:09:14 +1000 Subject: [PATCH 2/4] Move setVisible() method to ScrollBar class --- lib/ace/scrollbar.js | 33 ++++++++------------------------- 1 file changed, 8 insertions(+), 25 deletions(-) diff --git a/lib/ace/scrollbar.js b/lib/ace/scrollbar.js index 7f494f1e..53b43a49 100644 --- a/lib/ace/scrollbar.js +++ b/lib/ace/scrollbar.js @@ -65,6 +65,11 @@ var ScrollBar = function(parent) { (function() { oop.implement(this, EventEmitter); + + this.setVisible = function(isVisible) { + this.element.style.display = isVisible ? "" : "none"; + this.isVisible = isVisible; + }; }).call(ScrollBar.prototype); /** @@ -89,7 +94,6 @@ var ScrollBarV = function(parent, renderer) { // make element a little bit wider to retain scrollbar when page is zoomed renderer.$scrollbarWidth = this.width = dom.scrollbarWidth(parent.ownerDocument); - this.fullWidth = this.width; this.inner.style.width = this.element.style.width = (this.width || 15) + 5 + "px"; this.element.style.overflowY = "scroll"; @@ -101,16 +105,6 @@ oop.inherits(ScrollBarV, ScrollBar); this.classSuffix = '-v'; - this.setVisible = function(show) { - if (show) { - this.element.style.display = ""; - this.width = this.fullWidth; - } else { - this.element.style.display = "none"; - this.width = 0; - } - }; - /** * Emitted when the scroll bar, well, scrolls. * @event scroll @@ -129,7 +123,7 @@ oop.inherits(ScrollBarV, ScrollBar); * @returns {Number} **/ this.getWidth = function() { - return this.width; + return this.isVisible ? this.width : 0; }; /** @@ -184,7 +178,6 @@ var ScrollBarH = function(parent, renderer) { // in Firefox 6+ scrollbar is hidden if element has the same width as scrollbar // make element a little bit wider to retain scrollbar when page is zoomed this.height = renderer.$scrollbarWidth; - this.fullHeight = this.height; this.inner.style.height = this.element.style.height = (this.height || 15) + 5 + "px"; this.element.style.overflowX = "scroll"; @@ -196,20 +189,10 @@ oop.inherits(ScrollBarH, ScrollBar); this.classSuffix = '-h'; - this.setVisible = function(show) { - if (show) { - this.element.style.display = ""; - this.height = this.fullHeight; - } else { - this.element.style.display = "none"; - this.height = 0; - } - }; - /** * Emitted when the scroll bar, well, scrolls. * @event scroll - * @param {Object} e Contains one property, `"data"`, which indicates the current scroll top position + * @param {Object} e Contains one property, `"data"`, which indicates the current scroll left position **/ this.onScroll = function() { if (!this.skipEvent) { @@ -224,7 +207,7 @@ oop.inherits(ScrollBarH, ScrollBar); * @returns {Number} **/ this.getHeight = function() { - return this.height; + return this.isVisible ? this.height : 0; }; /** From 8ecc94a181bd5f56ad06fa7feefdf38321c573a6 Mon Sep 17 00:00:00 2001 From: DanyaPostfactum Date: Tue, 10 Dec 2013 17:41:02 +1000 Subject: [PATCH 3/4] Rename ScrollBarV -> VScrollBar, ScrollBarH -> HScrollBar --- lib/ace/scrollbar.js | 52 ++++++++++++++++++++++++++----------- lib/ace/virtual_renderer.js | 12 ++++----- 2 files changed, 43 insertions(+), 21 deletions(-) diff --git a/lib/ace/scrollbar.js b/lib/ace/scrollbar.js index 53b43a49..28f41fe4 100644 --- a/lib/ace/scrollbar.js +++ b/lib/ace/scrollbar.js @@ -58,6 +58,7 @@ var ScrollBar = function(parent) { parent.appendChild(this.element); this.setVisible(false); + this.skipEvent = false; event.addListener(this.element, "scroll", this.onScroll.bind(this)); event.addListener(this.element, "mousedown", event.preventDefault); @@ -74,18 +75,19 @@ var ScrollBar = function(parent) { /** * Represents a vertical scroll bar. - * @class ScrollBarV + * @class VScrollBar **/ /** - * Creates a new `ScrollBarV`. `parent` is the owner of the scroll bar. + * Creates a new `VScrollBar`. `parent` is the owner of the scroll bar. * @param {DOMElement} parent A DOM element * @param {Object} renderer An editor renderer * * @constructor **/ -var ScrollBarV = function(parent, renderer) { +var VScrollBar = function(parent, renderer) { ScrollBar.call(this, parent); + this.scrollTop = 0; // in OSX lion the scrollbars appear to have no width. In this case resize the // element to show the scrollbar but still pretend that the scrollbar has a width @@ -96,10 +98,9 @@ var ScrollBarV = function(parent, renderer) { this.width = dom.scrollbarWidth(parent.ownerDocument); this.inner.style.width = this.element.style.width = (this.width || 15) + 5 + "px"; - this.element.style.overflowY = "scroll"; }; -oop.inherits(ScrollBarV, ScrollBar); +oop.inherits(VScrollBar, ScrollBar); (function() { @@ -137,11 +138,20 @@ oop.inherits(ScrollBarV, ScrollBar); /** * Sets the inner height of the scroll bar, in pixels. * @param {Number} height The new inner height + * @deprecated Use setScrollHeight instead **/ this.setInnerHeight = function(height) { this.inner.style.height = height + "px"; }; + /** + * Sets the scroll height of the scroll bar, in pixels. + * @param {Number} height The new scroll height + **/ + this.setScrollHeight = function(height) { + this.inner.style.height = height + "px"; + }; + /** * Sets the scroll top of the scroll bar. * @param {Number} scrollTop The new scroll top @@ -155,22 +165,23 @@ oop.inherits(ScrollBarV, ScrollBar); } }; -}).call(ScrollBarV.prototype); +}).call(VScrollBar.prototype); /** * Represents a horisontal scroll bar. - * @class ScrollBarV + * @class HScrollBar **/ /** - * Creates a new `ScrollBarH`. `parent` is the owner of the scroll bar. + * Creates a new `HScrollBar`. `parent` is the owner of the scroll bar. * @param {DOMElement} parent A DOM element * @param {Object} renderer An editor renderer * * @constructor **/ -var ScrollBarH = function(parent, renderer) { +var HScrollBar = function(parent, renderer) { ScrollBar.call(this, parent); + this.scrollLeft = 0; // in OSX lion the scrollbars appear to have no width. In this case resize the // element to show the scrollbar but still pretend that the scrollbar has a width @@ -180,10 +191,9 @@ var ScrollBarH = function(parent, renderer) { this.height = renderer.$scrollbarWidth; this.inner.style.height = this.element.style.height = (this.height || 15) + 5 + "px"; - this.element.style.overflowX = "scroll"; }; -oop.inherits(ScrollBarH, ScrollBar); +oop.inherits(HScrollBar, ScrollBar); (function() { @@ -221,11 +231,20 @@ oop.inherits(ScrollBarH, ScrollBar); /** * Sets the inner width of the scroll bar, in pixels. * @param {Number} width The new inner width + * @deprecated Use setScrollWidth instead **/ this.setInnerWidth = function(width) { this.inner.style.width = width + "px"; }; + /** + * Sets the scroll width of the scroll bar, in pixels. + * @param {Number} width The new scroll width + **/ + this.setScrollWidth = function(width) { + this.inner.style.width = width + "px"; + }; + /** * Sets the scroll left of the scroll bar. * @param {Number} scrollTop The new scroll left @@ -239,10 +258,13 @@ oop.inherits(ScrollBarH, ScrollBar); } }; -}).call(ScrollBarH.prototype); +}).call(HScrollBar.prototype); -exports.ScrollBar = ScrollBarV; // backward compatibility -exports.ScrollBarV = ScrollBarV; -exports.ScrollBarH = ScrollBarH; +exports.ScrollBar = VScrollBar; // backward compatibility +exports.ScrollBarV = VScrollBar; // backward compatibility +exports.ScrollBarH = HScrollBar; // backward compatibility + +exports.VScrollBar = VScrollBar; +exports.HScrollBar = HScrollBar; }); diff --git a/lib/ace/virtual_renderer.js b/lib/ace/virtual_renderer.js index b2d64a5c..472ac21f 100644 --- a/lib/ace/virtual_renderer.js +++ b/lib/ace/virtual_renderer.js @@ -39,8 +39,8 @@ var GutterLayer = require("./layer/gutter").Gutter; var MarkerLayer = require("./layer/marker").Marker; var TextLayer = require("./layer/text").Text; var CursorLayer = require("./layer/cursor").Cursor; -var ScrollBarH = require("./scrollbar").ScrollBarH; -var ScrollBarV = require("./scrollbar").ScrollBarV; +var HScrollBar = require("./scrollbar").HScrollBar; +var VScrollBar = require("./scrollbar").VScrollBar; var RenderLoop = require("./renderloop").RenderLoop; var EventEmitter = require("./lib/event_emitter").EventEmitter; var editorCss = require("./requirejs/text!./css/editor.css"); @@ -105,8 +105,8 @@ var VirtualRenderer = function(container, theme) { this.$vScroll = false; this.scrollBar = - this.scrollBarV = new ScrollBarV(this.container, this); - this.scrollBarH = new ScrollBarH(this.container, this); + this.scrollBarV = new VScrollBar(this.container, this); + this.scrollBarH = new HScrollBar(this.container, this); this.scrollBarV.addEventListener("scroll", function(e) { if (!_self.$scrollAnimation) _self.session.setScrollTop(e.data - _self.scrollMargin.top); @@ -727,11 +727,11 @@ var VirtualRenderer = function(container, theme) { }; this.$updateScrollBarV = function() { - this.scrollBarV.setInnerHeight(this.layerConfig.maxHeight + this.scrollMargin.v); + this.scrollBarV.setScrollHeight(this.layerConfig.maxHeight + this.scrollMargin.v); this.scrollBarV.setScrollTop(this.scrollTop + this.scrollMargin.top); }; this.$updateScrollBarH = function() { - this.scrollBarH.setInnerWidth(this.layerConfig.width + 2 * this.$padding + this.scrollMargin.h); + this.scrollBarH.setScrollWidth(this.layerConfig.width + 2 * this.$padding + this.scrollMargin.h); this.scrollBarH.setScrollLeft(this.scrollLeft + this.scrollMargin.left); }; From 5affb58e40edea133af473df38b2a3b458cef3ca Mon Sep 17 00:00:00 2001 From: DanyaPostfactum Date: Fri, 13 Dec 2013 16:45:20 +1000 Subject: [PATCH 4/4] Add forgotten css overflow:scroll to scrollbars --- lib/ace/css/editor.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/ace/css/editor.css b/lib/ace/css/editor.css index d3bc085e..1494f76d 100644 --- a/lib/ace/css/editor.css +++ b/lib/ace/css/editor.css @@ -111,12 +111,12 @@ .ace_scrollbar-v{ overflow-x: hidden; - overflow-y: auto; + overflow-y: scroll; top: 0; } .ace_scrollbar-h { - overflow-x: auto; + overflow-x: scroll; overflow-y: hidden; left: 0; }