init repo

OfficeWeb/3rdparty/touch/src/scroll/Indicator.js

@@ -0,0 +1,28 @@
+/**
+ * @private
+ */
+Ext.define('Ext.scroll.Indicator', {
+    requires: [
+        'Ext.scroll.indicator.Default',
+        'Ext.scroll.indicator.ScrollPosition',
+        'Ext.scroll.indicator.CssTransform',
+        'Ext.scroll.indicator.Throttled'
+    ],
+
+    alternateClassName: 'Ext.util.Indicator',
+
+    constructor: function(config) {
+        if (Ext.os.is.Android2 || Ext.os.is.Android3 || Ext.browser.is.ChromeMobile) {
+            return new Ext.scroll.indicator.ScrollPosition(config);
+        }
+        else if (Ext.os.is.iOS) {
+            return new Ext.scroll.indicator.CssTransform(config);
+        }
+        else if (Ext.os.is.Android4) {
+            return new Ext.scroll.indicator.Throttled(config);
+        }
+        else {
+            return new Ext.scroll.indicator.Default(config);
+        }
+    }
+});

OfficeWeb/3rdparty/touch/src/scroll/View.js

@@ -0,0 +1,356 @@
+/**
+ * This is a simple container that is used to compile content and a {@link Ext.scroll.View} instance. It also
+ * provides scroll indicators.
+ *
+ * 99% of the time all you need to use in this class is {@link #getScroller}.
+ *
+ * This should never should be extended.
+ */
+Ext.define('Ext.scroll.View', {
+    extend: 'Ext.Evented',
+
+    alternateClassName: 'Ext.util.ScrollView',
+
+    requires: [
+        'Ext.scroll.Scroller',
+        'Ext.scroll.Indicator'
+    ],
+
+    config: {
+        /**
+         * @cfg {String} indicatorsUi
+         * The style of the indicators of this view. Available options are `dark` or `light`.
+         */
+        indicatorsUi: 'dark',
+
+        element: null,
+
+        scroller: {},
+
+        indicators: {
+            x: {
+                axis: 'x'
+            },
+            y: {
+                axis: 'y'
+            }
+        },
+
+        indicatorsHidingDelay: 100,
+
+        cls: Ext.baseCSSPrefix + 'scroll-view'
+    },
+
+    /**
+     * @method getScroller
+     * Returns the scroller instance in this view. Checkout the documentation of {@link Ext.scroll.Scroller} and
+     * {@link Ext.Container#getScrollable} for more information.
+     * @return {Ext.scroll.View} The scroller
+     */
+
+    /**
+     * @private
+     */
+    processConfig: function(config) {
+        if (!config) {
+            return null;
+        }
+
+        if (typeof config == 'string') {
+            config = {
+                direction: config
+            };
+        }
+
+        config = Ext.merge({}, config);
+
+        var scrollerConfig = config.scroller,
+            name;
+
+        if (!scrollerConfig) {
+            config.scroller = scrollerConfig = {};
+        }
+
+        for (name in config) {
+            if (config.hasOwnProperty(name)) {
+                if (!this.hasConfig(name)) {
+                    scrollerConfig[name] = config[name];
+                    delete config[name];
+                }
+            }
+        }
+
+        return config;
+    },
+
+    constructor: function(config) {
+        config = this.processConfig(config);
+
+        this.useIndicators = { x: true, y: true };
+
+        this.doHideIndicators = Ext.Function.bind(this.doHideIndicators, this);
+
+        this.initConfig(config);
+    },
+
+    setConfig: function(config) {
+        return this.callParent([this.processConfig(config)]);
+    },
+
+    updateIndicatorsUi: function(newUi) {
+        var indicators = this.getIndicators();
+        indicators.x.setUi(newUi);
+        indicators.y.setUi(newUi);
+    },
+
+    applyScroller: function(config, currentScroller) {
+        return Ext.factory(config, Ext.scroll.Scroller, currentScroller);
+    },
+
+    applyIndicators: function(config, indicators) {
+        var defaultClass = Ext.scroll.Indicator,
+            useIndicators = this.useIndicators;
+
+        if (!config) {
+            config = {};
+        }
+
+        if (!config.x) {
+            useIndicators.x = false;
+            config.x = {};
+        }
+
+        if (!config.y) {
+            useIndicators.y = false;
+            config.y = {};
+        }
+
+        return {
+            x: Ext.factory(config.x, defaultClass, indicators && indicators.x),
+            y: Ext.factory(config.y, defaultClass, indicators && indicators.y)
+        };
+    },
+
+    updateIndicators: function(indicators) {
+        this.indicatorsGrid = Ext.Element.create({
+            className: 'x-scroll-bar-grid-wrapper',
+            children: [{
+                className: 'x-scroll-bar-grid',
+                children: [
+                    {
+                        children: [{}, {
+                            children: [indicators.y.barElement]
+                        }]
+                    },
+                    {
+                        children: [{
+                            children: [indicators.x.barElement]
+                        }, {}]
+                    }
+                ]
+            }]
+        });
+    },
+
+    updateScroller: function(scroller) {
+        scroller.on({
+            scope: this,
+            scrollstart: 'onScrollStart',
+            scroll: 'onScroll',
+            scrollend: 'onScrollEnd',
+            refresh: 'refreshIndicators'
+        });
+    },
+
+    isAxisEnabled: function(axis) {
+        return this.getScroller().isAxisEnabled(axis) && this.useIndicators[axis];
+    },
+
+    applyElement: function(element) {
+        if (element) {
+            return Ext.get(element);
+        }
+    },
+
+    updateElement: function(element) {
+        var scrollerElement = element.getFirstChild().getFirstChild(),
+            scroller = this.getScroller();
+
+        element.addCls(this.getCls());
+        element.insertFirst(this.indicatorsGrid);
+
+        scroller.setElement(scrollerElement);
+
+        this.refreshIndicators();
+
+        return this;
+    },
+
+    showIndicators: function() {
+        var indicators = this.getIndicators();
+
+        if (this.hasOwnProperty('indicatorsHidingTimer')) {
+            clearTimeout(this.indicatorsHidingTimer);
+            delete this.indicatorsHidingTimer;
+        }
+
+        if (this.isAxisEnabled('x')) {
+            indicators.x.show();
+        }
+
+        if (this.isAxisEnabled('y')) {
+            indicators.y.show();
+        }
+    },
+
+    hideIndicators: function() {
+        var delay = this.getIndicatorsHidingDelay();
+
+        if (delay > 0) {
+            this.indicatorsHidingTimer = setTimeout(this.doHideIndicators, delay);
+        }
+        else {
+            this.doHideIndicators();
+        }
+    },
+
+    doHideIndicators: function() {
+        var indicators = this.getIndicators();
+
+        if (this.isAxisEnabled('x')) {
+            indicators.x.hide();
+        }
+
+        if (this.isAxisEnabled('y')) {
+            indicators.y.hide();
+        }
+    },
+
+    onScrollStart: function() {
+        this.onScroll.apply(this, arguments);
+        this.showIndicators();
+    },
+
+    onScrollEnd: function() {
+        this.hideIndicators();
+    },
+
+    onScroll: function(scroller, x, y) {
+        this.setIndicatorValue('x', x);
+        this.setIndicatorValue('y', y);
+
+        //<debug>
+        if (this.isBenchmarking) {
+            this.framesCount++;
+        }
+        //</debug>
+    },
+
+    //<debug>
+    isBenchmarking: false,
+
+    framesCount: 0,
+
+    getCurrentFps: function() {
+        var now = Date.now(),
+            fps;
+
+        if (!this.isBenchmarking) {
+            this.isBenchmarking = true;
+            fps = 0;
+        }
+        else {
+            fps = Math.round(this.framesCount * 1000 / (now - this.framesCountStartTime));
+        }
+
+        this.framesCountStartTime = now;
+        this.framesCount = 0;
+
+        return fps;
+    },
+    //</debug>
+
+    setIndicatorValue: function(axis, scrollerPosition) {
+        if (!this.isAxisEnabled(axis)) {
+            return this;
+        }
+
+        var scroller = this.getScroller(),
+            scrollerMaxPosition = scroller.getMaxPosition()[axis],
+            scrollerContainerSize = scroller.getContainerSize()[axis],
+            value;
+
+        if (scrollerMaxPosition === 0) {
+            value = scrollerPosition / scrollerContainerSize;
+
+            if (scrollerPosition >= 0) {
+                value += 1;
+            }
+        }
+        else {
+            if (scrollerPosition > scrollerMaxPosition) {
+                value = 1 + ((scrollerPosition - scrollerMaxPosition) / scrollerContainerSize);
+            }
+            else if (scrollerPosition < 0) {
+                value = scrollerPosition / scrollerContainerSize;
+            }
+            else {
+                value = scrollerPosition / scrollerMaxPosition;
+            }
+        }
+
+        this.getIndicators()[axis].setValue(value);
+    },
+
+    refreshIndicator: function(axis) {
+        if (!this.isAxisEnabled(axis)) {
+            return this;
+        }
+
+        var scroller = this.getScroller(),
+            indicator = this.getIndicators()[axis],
+            scrollerContainerSize = scroller.getContainerSize()[axis],
+            scrollerSize = scroller.getSize()[axis],
+            ratio = scrollerContainerSize / scrollerSize;
+
+        indicator.setRatio(ratio);
+        indicator.refresh();
+    },
+
+    refresh: function() {
+        return this.getScroller().refresh();
+    },
+
+    refreshIndicators: function() {
+        var indicators = this.getIndicators();
+
+        indicators.x.setActive(this.isAxisEnabled('x'));
+        indicators.y.setActive(this.isAxisEnabled('y'));
+
+        this.refreshIndicator('x');
+        this.refreshIndicator('y');
+    },
+
+    destroy: function() {
+        var element = this.getElement(),
+            indicators = this.getIndicators();
+
+        Ext.destroy(this.getScroller(), this.indicatorsGrid);
+
+        if (this.hasOwnProperty('indicatorsHidingTimer')) {
+            clearTimeout(this.indicatorsHidingTimer);
+            delete this.indicatorsHidingTimer;
+        }
+
+        if (element && !element.isDestroyed) {
+            element.removeCls(this.getCls());
+        }
+
+        indicators.x.destroy();
+        indicators.y.destroy();
+
+        delete this.indicatorsGrid;
+
+        this.callParent(arguments);
+    }
+});

OfficeWeb/3rdparty/touch/src/scroll/indicator/Abstract.js

@@ -0,0 +1,126 @@
+/**
+ * @private
+ */
+Ext.define('Ext.scroll.indicator.Abstract', {
+    extend: 'Ext.Component',
+
+    config: {
+        baseCls: 'x-scroll-indicator',
+
+        axis: 'x',
+
+        value: 0,
+
+        length: null,
+
+        minLength: 6,
+
+        hidden: true,
+
+        ui: 'dark'
+    },
+
+    cachedConfig: {
+        ratio: 1,
+
+        barCls: 'x-scroll-bar',
+
+        active: true
+    },
+
+    barElement: null,
+
+    barLength: 0,
+
+    gapLength: 0,
+
+    getElementConfig: function() {
+        return {
+            reference: 'barElement',
+            children: [this.callParent()]
+        };
+    },
+
+    applyRatio: function(ratio) {
+        if (isNaN(ratio)) {
+            ratio = 1;
+        }
+
+        return ratio;
+    },
+
+    refresh: function() {
+        var bar = this.barElement,
+            barDom = bar.dom,
+            ratio = this.getRatio(),
+            axis = this.getAxis(),
+            barLength = (axis === 'x') ? barDom.offsetWidth : barDom.offsetHeight,
+            length = barLength * ratio;
+
+        this.barLength = barLength;
+
+        this.gapLength = barLength - length;
+
+        this.setLength(length);
+
+        this.updateValue(this.getValue());
+    },
+
+    updateBarCls: function(barCls) {
+        this.barElement.addCls(barCls);
+    },
+
+    updateAxis: function(axis) {
+        this.element.addCls(this.getBaseCls(), null, axis);
+        this.barElement.addCls(this.getBarCls(), null, axis);
+    },
+
+    updateValue: function(value) {
+        this.setOffset(this.gapLength * value);
+    },
+
+    updateActive: function(active) {
+        this.barElement[active ? 'addCls' : 'removeCls']('active');
+    },
+
+    doSetHidden: function(hidden) {
+        var elementDomStyle = this.element.dom.style;
+
+        if (hidden) {
+            elementDomStyle.opacity = '0';
+        }
+        else {
+            elementDomStyle.opacity = '';
+        }
+    },
+
+    applyLength: function(length) {
+        return Math.max(this.getMinLength(), length);
+    },
+
+    updateLength: function(length) {
+        if (!this.isDestroyed) {
+            var axis = this.getAxis(),
+                element = this.element;
+
+            if (axis === 'x') {
+                element.setWidth(length);
+            }
+            else {
+                element.setHeight(length);
+            }
+        }
+    },
+
+    setOffset: function(offset) {
+        var axis = this.getAxis(),
+            element = this.element;
+
+        if (axis === 'x') {
+            element.setLeft(offset);
+        }
+        else {
+            element.setTop(offset);
+        }
+    }
+});

OfficeWeb/3rdparty/touch/src/scroll/indicator/CssTransform.js

@@ -0,0 +1,108 @@
+/**
+ * @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.callParent();
+    },
+
+    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)';
+        }
+    }
+});

OfficeWeb/3rdparty/touch/src/scroll/indicator/Default.js

@@ -0,0 +1,46 @@
+/**
+ * @private
+ */
+Ext.define('Ext.scroll.indicator.Default', {
+    extend: 'Ext.scroll.indicator.Abstract',
+
+    config: {
+        cls: 'default'
+    },
+
+    setOffset: function(offset) {
+        var axis = this.getAxis(),
+            domStyle = this.element.dom.style;
+
+        if (axis === 'x') {
+            domStyle.webkitTransform = 'translate3d(' + offset + 'px, 0, 0)';
+        }
+        else {
+            domStyle.webkitTransform = 'translate3d(0, ' + offset + 'px, 0)';
+        }
+    },
+
+    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);
+    }
+});

OfficeWeb/3rdparty/touch/src/scroll/indicator/ScrollPosition.js

@@ -0,0 +1,66 @@
+/**
+ * @private
+ */
+Ext.define('Ext.scroll.indicator.ScrollPosition', {
+    extend: 'Ext.scroll.indicator.Abstract',
+
+    config: {
+        cls: 'scrollposition'
+    },
+
+    getElementConfig: function() {
+        var config = this.callParent(arguments);
+
+        config.children.unshift({
+            className: 'x-scroll-bar-stretcher'
+        });
+
+        return config;
+    },
+
+    updateValue: function(value) {
+        if (this.gapLength === 0) {
+            if (value > 1) {
+                value = value - 1;
+            }
+
+            this.setOffset(this.barLength * value);
+        }
+        else {
+            this.setOffset(this.gapLength * value);
+        }
+    },
+
+    updateLength: function() {
+        var scrollOffset = this.barLength,
+            barDom = this.barElement.dom,
+            element = this.element;
+
+        this.callParent(arguments);
+
+        if (this.getAxis() === 'x') {
+            barDom.scrollLeft = scrollOffset;
+            element.setLeft(scrollOffset);
+        }
+        else {
+            barDom.scrollTop = scrollOffset;
+            element.setTop(scrollOffset);
+        }
+    },
+
+    setOffset: function(offset) {
+        var barLength = this.barLength,
+            minLength = this.getMinLength(),
+            barDom = this.barElement.dom;
+
+        offset = Math.min(barLength - minLength, Math.max(offset, minLength - this.getLength()));
+        offset = barLength - offset;
+
+        if (this.getAxis() === 'x') {
+            barDom.scrollLeft = offset;
+        }
+        else {
+            barDom.scrollTop = offset;
+        }
+    }
+});

OfficeWeb/3rdparty/touch/src/scroll/indicator/Throttled.js

@@ -0,0 +1,69 @@
+/**
+ * @private
+ */
+Ext.define('Ext.scroll.indicator.Throttled', {
+    extend:'Ext.scroll.indicator.Default',
+    config: {
+        cls: 'throttled'
+    },
+    constructor: function() {
+        this.callParent(arguments);
+        this.updateLength = Ext.Function.createThrottled(this.updateLength, 75, this);
+        this.setOffset = Ext.Function.createThrottled(this.setOffset, 50, this);
+    },
+
+    doSetHidden: function(hidden) {
+        if (hidden) {
+            this.setOffset(-10000);
+        } else {
+            delete this.lastLength;
+            delete this.lastOffset;
+            this.updateValue(this.getValue());
+        }
+    },
+    updateLength: function(length) {
+        length = Math.round(length);
+        if (this.lastLength === length || this.lastOffset === -10000) {
+            return;
+        }
+        this.lastLength = length;
+        Ext.TaskQueue.requestWrite('doUpdateLength', this,[length]);
+    },
+
+    doUpdateLength: function(length){
+        if (!this.isDestroyed) {
+            var axis = this.getAxis(),
+                element = this.element;
+
+            if (axis === 'x') {
+                element.setWidth(length);
+            }
+            else {
+                element.setHeight(length);
+            }
+        }
+    },
+
+    setOffset: function(offset) {
+        offset = Math.round(offset);
+        if (this.lastOffset === offset || this.lastOffset === -10000) {
+            return;
+        }
+        this.lastOffset = offset;
+        Ext.TaskQueue.requestWrite('doSetOffset', this,[offset]);
+    },
+
+    doSetOffset: function(offset) {
+        if (!this.isDestroyed) {
+            var axis = this.getAxis(),
+                domStyle = this.element.dom.style;
+
+            if (axis === 'x') {
+                domStyle.webkitTransform = 'translate3d(' + offset + 'px, 0, 0)';
+            }
+            else {
+                domStyle.webkitTransform = 'translate3d(0, ' + offset + 'px, 0)';
+            }
+        }
+    }
+});