ares-ide
Version:
A browser-based code editor and UI designer for Enyo 2 projects
114 lines (111 loc) • 3.43 kB
JavaScript
/**
_enyo.ScrollThumb_ is a helper kind used by
<a href="#enyo.TouchScrollStrategy">enyo.TouchScrollStrategy</a> and
<a href="#enyo.TranslateScrollStrategy">enyo.TranslateScrollStrategy</a> to
display a small visual scroll indicator.
_enyo.ScrollThumb_ is not typically created in application code.
*/
enyo.kind({
name: "enyo.ScrollThumb",
//* The orientation of the scroll indicator bar; "v" for vertical or "h" for horizontal
axis: "v",
//* @protected
//* Minimum size of the indicator
minSize: 4,
//* Size of the corners of the indicator
cornerSize: 6,
classes: "enyo-thumb",
create: enyo.inherit(function (sup) {
return function() {
sup.apply(this, arguments);
var v = this.axis == "v";
this.dimension = v ? "height" : "width";
this.offset = v ? "top" : "left";
this.translation = v ? "translateY" : "translateX";
this.positionMethod = v ? "getScrollTop" : "getScrollLeft";
this.sizeDimension = v ? "clientHeight" : "clientWidth";
this.addClass("enyo-" + this.axis + "thumb");
this.transform = enyo.dom.canTransform();
if (enyo.dom.canAccelerate()) {
enyo.dom.transformValue(this, "translateZ", 0);
}
};
}),
//* Syncs the scroll indicator bar to the scroller size and position,
//* as determined by the passed-in scroll strategy.
sync: function(inStrategy) {
this.scrollBounds = inStrategy._getScrollBounds();
this.update(inStrategy);
},
update: function(inStrategy) {
if (this.showing) {
var d = this.dimension, o = this.offset;
var bd = this.scrollBounds[this.sizeDimension], sbd = this.scrollBounds[d];
var overs = 0, overp = 0, over = 0;
if (bd >= sbd) {
this.hide();
return;
}
if (inStrategy.isOverscrolling()) {
over = inStrategy.getOverScrollBounds()["over" + o];
overs = Math.abs(over);
overp = Math.max(over, 0);
}
var sbo = inStrategy[this.positionMethod]() - over;
// calc size & position
var bdc = bd - this.cornerSize;
var s = Math.floor((bd * bd / sbd) - overs);
s = Math.max(this.minSize, s);
var p = Math.floor((bdc * sbo / sbd) + overp);
p = Math.max(0, Math.min(bdc - this.minSize, p));
// apply thumb styling
this.needed = s < bd;
if (this.needed && this.hasNode()) {
if (this._pos !== p) {
this._pos = p;
if(!this.transform) {
//adjust top/left for browsers that don't support translations
if(this.axis=="v") {
this.setBounds({top:p + "px"});
} else {
this.setBounds({left:p + "px"});
}
} else {
enyo.dom.transformValue(this, this.translation, p + "px");
}
}
if (this._size !== s) {
this._size = s;
this.node.style[d] = this.domStyles[d] = s + "px";
}
} else {
this.hide();
}
}
},
// implement set because showing is not changed while
// we delayHide but we want to cancel the hide.
setShowing: function(inShowing) {
if (inShowing && inShowing != this.showing) {
if (this.scrollBounds[this.sizeDimension] >= this.scrollBounds[this.dimension]) {
return;
}
}
if (this.hasNode()) {
this.cancelDelayHide();
}
if (inShowing != this.showing) {
var last = this.showing;
this.showing = inShowing;
this.showingChanged(last);
}
},
delayHide: function(inDelay) {
if (this.showing) {
enyo.job(this.id + "hide", this.bindSafely("hide"), inDelay || 0);
}
},
cancelDelayHide: function() {
enyo.job.stop(this.id + "hide");
}
});