/**
* @private
*/
Ext.define('Ext.scroll.indicator.CssTransform', {
extend: 'Ext.scroll.indicator.Abstract',
config: {
cls: 'csstransform'
},
getElementConfig: function() {
var config = this.callParent();
config.children[0].children = [
{
reference: 'startElement'
},
{
reference: 'middleElement'
},
{
reference: 'endElement'
}
];
return config;
},
refresh: function() {
var axis = this.getAxis(),
startElementDom = this.startElement.dom,
endElementDom = this.endElement.dom,
middleElement = this.middleElement,
startElementLength, endElementLength;
if (axis === 'x') {
startElementLength = startElementDom.offsetWidth;
endElementLength = endElementDom.offsetWidth;
middleElement.setLeft(startElementLength);
}
else {
startElementLength = startElementDom.offsetHeight;
endElementLength = endElementDom.offsetHeight;
middleElement.setTop(startElementLength);
}
this.startElementLength = startElementLength;
this.endElementLength = endElementLength;
this.minLength = startElementLength + endElementLength;
this.callParent();
},
applyLength: function(length) {
return Math.round(Math.max(this.minLength, length));
},
updateLength: function(length) {
var axis = this.getAxis(),
endElementStyle = this.endElement.dom.style,
middleElementStyle = this.middleElement.dom.style,
endElementLength = this.endElementLength,
endElementOffset = length - endElementLength,
middleElementLength = endElementOffset - this.startElementLength;
if (axis === 'x') {
endElementStyle.webkitTransform = 'translate3d(' + endElementOffset + 'px, 0, 0)';
middleElementStyle.webkitTransform = 'translate3d(0, 0, 0) scaleX(' + middleElementLength + ')';
}
else {
endElementStyle.webkitTransform = 'translate3d(0, ' + endElementOffset + 'px, 0)';
middleElementStyle.webkitTransform = 'translate3d(0, 0, 0) scaleY(' + middleElementLength + ')';
}
},
updateValue: function(value) {
var barLength = this.barLength,
gapLength = this.gapLength,
length = this.getLength(),
newLength, offset, extra;
if (value <= 0) {
offset = 0;
this.updateLength(this.applyLength(length + value * barLength));
}
else if (value >= 1) {
extra = Math.round((value - 1) * barLength);
newLength = this.applyLength(length - extra);
extra = length - newLength;
this.updateLength(newLength);
offset = gapLength + extra;
}
else {
offset = gapLength * value;
}
this.setOffset(offset);
},
setOffset: function(offset) {
var axis = this.getAxis(),
elementStyle = this.element.dom.style;
offset = Math.round(offset);
if (axis === 'x') {
elementStyle.webkitTransform = 'translate3d(' + offset + 'px, 0, 0)';
}
else {
elementStyle.webkitTransform = 'translate3d(0, ' + offset + 'px, 0)';
}
}
});