Ext.define('Ext.scroll.indicator.CssTransform', { extend: 'Ext.scroll.indicator.Abstract', config: { ui: '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)'; } } });