Refactor ScrollBarV and ScrollBarH classes

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 {

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) {
+    event.addListener(this.element, "scroll", this.onScroll.bind(this));
-    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);
+}).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;
-                this.width = this.fullWidth;
-            if (this.fullHeight)
-                this.height = this.fullHeight;
         } 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);
+}).call(ScrollBarH.prototype);
-ScrollBarH.prototype = ScrollBarV.prototype;
-
 
 
 exports.ScrollBar = ScrollBarV; // backward compatibility