Merge pull request #1696 from danyaPostfactum/refactor/scrollbar
Refactor ScrollBarV and ScrollBarH classes
This commit is contained in:
Harutyun Amirjanyan
commit
3b96539874
3 changed files with 159 additions and 94 deletions
|
|
@ -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: auto;
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 6;
|
||||
}
|
||||
|
||||
.ace_print-margin {
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
||||
event.addListener(this.element, "scroll", this.onScrollV.bind(this));
|
||||
event.addListener(this.element, "mousedown", event.preventDefault);
|
||||
};
|
||||
this.skipEvent = false;
|
||||
|
||||
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);
|
||||
|
||||
this.setVisible = function(show) {
|
||||
if (show) {
|
||||
this.element.style.display = "";
|
||||
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;
|
||||
}
|
||||
this.setVisible = function(isVisible) {
|
||||
this.element.style.display = isVisible ? "" : "none";
|
||||
this.isVisible = isVisible;
|
||||
};
|
||||
|
||||
}).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;
|
||||
};
|
||||
|
||||
this.getHeight = function() {
|
||||
return this.height;
|
||||
return this.isVisible ? this.width : 0;
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -157,21 +134,22 @@ 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.
|
||||
* @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);
|
||||
ScrollBarH.prototype = ScrollBarV.prototype;
|
||||
}).call(HScrollBar.prototype);
|
||||
|
||||
|
||||
exports.ScrollBar = VScrollBar; // backward compatibility
|
||||
exports.ScrollBarV = VScrollBar; // backward compatibility
|
||||
exports.ScrollBarH = HScrollBar; // backward compatibility
|
||||
|
||||
exports.ScrollBar = ScrollBarV; // backward compatibility
|
||||
exports.ScrollBarV = ScrollBarV;
|
||||
exports.ScrollBarH = ScrollBarH;
|
||||
exports.VScrollBar = VScrollBar;
|
||||
exports.HScrollBar = HScrollBar;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
@ -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);
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue