Merge pull request #1696 from danyaPostfactum/refactor/scrollbar

Refactor ScrollBarV and ScrollBarH classes

lib/ace/css/editor.css

@@ -103,10 +103,7 @@
 
 .ace_scrollbar {
     position: absolute;
-    overflow-x: hidden;
-    overflow-y: auto;
     right: 0;
-    top: 0;
     bottom: 0;
     z-index: 6;
 }
@@ -118,14 +115,16 @@
     top: 0;
 }
 
+.ace_scrollbar-v{
+    overflow-x: hidden;
+    overflow-y: scroll;
+    top: 0;
+}
+
 .ace_scrollbar-h {
-    position: absolute;
+    overflow-x: scroll;
-    overflow-x: auto;
     overflow-y: hidden;
-    right: 0;
     left: 0;
-    bottom: 0;
-    z-index: 6;
 }
 
 .ace_print-margin {

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,97 +57,74 @@ 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";
+    this.skipEvent = false;
 
-    event.addListener(this.element, "scroll", this.onScrollV.bind(this));
+    event.addListener(this.element, "scroll", this.onScroll.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, "mousedown", event.preventDefault);
 };
 
 (function() {
     oop.implement(this, EventEmitter);
 
-    this.setVisible = function(show) {
+    this.setVisible = function(isVisible) {
-        if (show) {
+        this.element.style.display = isVisible ? "" : "none";
-            this.element.style.display = "";
+        this.isVisible = isVisible;
-            if (this.fullWidth)
-                this.width = this.fullWidth;
-            if (this.fullHeight)
-                this.height = this.fullHeight;
-        } else {
-            this.element.style.display = "none";
-            this.height = this.width = 0;
-        }
     };
+}).call(ScrollBar.prototype);
+
+/**
+ * Represents a vertical scroll bar.
+ * @class VScrollBar
+ **/
+
+/**
+ * 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 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
+    // 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.inner.style.width =
+    this.element.style.width = (this.width || 15) + 5 + "px";
+};
+
+oop.inherits(VScrollBar, ScrollBar);
+
+(function() {
+
+    this.classSuffix = '-v';
 
     /**
      * 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.
      * @returns {Number}
      **/
     this.getWidth = function() {
-        return this.width;
+        return this.isVisible ? this.width : 0;
-    };
-
-    this.getHeight = function() {
-        return this.height;
     };
 
     /**
@@ -158,20 +135,21 @@ var ScrollBarH = function(parent, renderer) {
         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.
      * @param {Number} height The new inner height
+     * @deprecated Use setScrollHeight instead
      **/
     this.setInnerHeight = function(height) {
         this.inner.style.height = height + "px";
     };
 
-    this.setInnerWidth = function(width) {
+    /**
-        this.inner.style.width = width + "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";
     };
 
     /**
@@ -186,6 +164,93 @@ var ScrollBarH = function(parent, renderer) {
             this.scrollTop = this.element.scrollTop = scrollTop;
         }
     };
+
+}).call(VScrollBar.prototype);
+
+/**
+ * Represents a horisontal scroll bar.
+ * @class HScrollBar
+ **/
+
+/**
+ * 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 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
+    // 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.inner.style.height =
+    this.element.style.height = (this.height || 15) + 5 + "px";
+};
+
+oop.inherits(HScrollBar, ScrollBar);
+
+(function() {
+
+    this.classSuffix = '-h';
+
+    /**
+     * Emitted when the scroll bar, well, scrolls.
+     * @event scroll
+     * @param {Object} e Contains one property, `"data"`, which indicates the current scroll left 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.isVisible ? this.height : 0;
+    };
+
+    /**
+     * 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
+     * @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
+     **/
+    // 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,12 +258,13 @@ var ScrollBarH = function(parent, renderer) {
         }
     };
 
-}).call(ScrollBarV.prototype);
+}).call(HScrollBar.prototype);
-ScrollBarH.prototype = ScrollBarV.prototype;
 
 
+exports.ScrollBar = VScrollBar; // backward compatibility
+exports.ScrollBarV = VScrollBar; // backward compatibility
+exports.ScrollBarH = HScrollBar; // backward compatibility
 
-exports.ScrollBar = ScrollBarV; // backward compatibility
+exports.VScrollBar = VScrollBar;
-exports.ScrollBarV = ScrollBarV;
+exports.HScrollBar = HScrollBar;
-exports.ScrollBarH = ScrollBarH;
 });

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 HScrollBar = require("./scrollbar").HScrollBar;
-var ScrollBarV = require("./scrollbar").ScrollBarV;
+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.scrollBarV = new VScrollBar(this.container, this);
-    this.scrollBarH = new ScrollBarH(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);
@@ -740,11 +740,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);
     };