jyapayne/ace
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor ScrollBarV and ScrollBarH classes

Browse source
This commit is contained in:
DanyaPostfactum 2013-11-24 23:00:06 +10:00
commit 03edee8c30
2 changed files with 139 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

13
lib/ace/css/editor.css
View file

@ -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 {

205
lib/ace/scrollbar.js
View file

@ -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