tsp-component/lib/slider/index.js

提供多端和react版本的UI组件

import { setTranslate } from '../util/animation';
var prefix = 'tsp-component-slider';
var Silder = (function () {
    function Silder(params) {
        this.isPanEnd = true;
        this.sliderElem = params.sliderElem;
        this.containerElem = params.containerElem;
        this.count = params.count;
        this.direction = params.direction;
        this.width = params.width;
        this.height = params.height;
        this.selectedIndex = params.selectedIndex;
        this.afterChangeIndexs = {
            beforeSelectIndex: this.selectedIndex,
            afterSelectedIndex: this.selectedIndex
        };
        this.panStart = this.panStart.bind(this);
        this.panMove = this.panMove.bind(this);
        this.panEnd = this.panEnd.bind(this);
        this.sliderMove = this.sliderMove.bind(this);
        this.getMoveBeforePosition = this.getMoveBeforePosition.bind(this);
        this.setMoveAfterSelectedIndex = this.setMoveAfterSelectedIndex.bind(this);
        this.getPanEndDistance = this.getPanEndDistance.bind(this);
        this.addPanEndClass = this.addPanEndClass.bind(this);
        this.removePanEndClass = this.removePanEndClass.bind(this);
    }
    Object.defineProperty(Silder.prototype, "isCritical", {
        get: function () {
            var model = this.direction === 'horizontal' ? 'width' : 'height';
            return this[model] * 0.25 <= this.panDistance;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(Silder.prototype, "scalar", {
        get: function () {
            return this.direction === 'horizontal' ? [this.width, 'deltaX'] : [this.height, 'deltaY'];
        },
        enumerable: true,
        configurable: true
    });
    Silder.prototype.panStart = function () {
        this.isPanEnd = false;
        this.removePanEndClass();
    };
    Silder.prototype.panMove = function (evt) {
        if (this.isPanEnd) {
            return;
        }
        if (evt.distance < this.width * 0.9) {
            var position = this.getMoveBeforePosition();
            var moveDistance = {
                x: position.x ? position.x + evt.deltaX : 0,
                y: position.y ? position.y + evt.deltaY : 0
            };
            this.panDistance = evt.distance;
            this.sliderMove(moveDistance.x, moveDistance.y);
        }
        else {
            this.panEnd(evt);
        }
    };
    Silder.prototype.panEnd = function (evt) {
        if (this.isPanEnd) {
            return;
        }
        var beforeSelectIndex = this.selectedIndex;
        var isChangeSlectedIndex = this.setMoveAfterSelectedIndex(evt);
        var position = this.getPanEndDistance(evt, isChangeSlectedIndex);
        this.isPanEnd = true;
        this.afterChangeIndexs = {
            beforeSelectIndex: beforeSelectIndex,
            afterSelectedIndex: this.selectedIndex
        };
        this.addPanEndClass();
        this.sliderMove(position.x, position.y);
    };
    Silder.prototype.onChangeSelectedIndex = function (evt, selectedIndex) {
        var position = this.getPanEndDistance(evt, true);
        var children = this.sliderElem.children;
        this.afterChangeIndexs = {
            beforeSelectIndex: this.selectedIndex,
            afterSelectedIndex: selectedIndex
        };
        this.selectedIndex = selectedIndex;
        this.addPanEndClass();
        this.sliderMove(position.x, position.y);
    };
    Silder.prototype.sliderMove = function (x, y) {
        setTranslate(this.sliderElem, x, y);
    };
    Silder.prototype.getMoveBeforePosition = function () {
        return {
            x: this.direction === 'horizontal' ? -this.width : 0,
            y: this.direction === 'vertical' ? -this.height : 0
        };
    };
    Silder.prototype.setMoveAfterSelectedIndex = function (evt) {
        if (!this.isCritical) {
            return false;
        }
        var count = this.count - 1;
        if (evt[this.scalar[1]] < 0) {
            this.selectedIndex = this.selectedIndex === count ? 0 : this.selectedIndex + 1;
        }
        else {
            this.selectedIndex = this.selectedIndex === 0 ? count : this.selectedIndex - 1;
        }
        return true;
    };
    Silder.prototype.getPanEndDistance = function (evt, isChangeSlectedIndex) {
        var value = -this.scalar[0];
        if (isChangeSlectedIndex) {
            if (evt[this.scalar[1]] < 0) {
                value = 2 * -this.scalar[0];
            }
            else {
                value = 0;
            }
        }
        return {
            x: this.direction === 'horizontal' ? value : 0,
            y: this.direction === 'vertical' ? value : 0
        };
    };
    Silder.prototype.addPanEndClass = function () {
        this.sliderElem.classList.add(prefix + "-panend");
    };
    Silder.prototype.removePanEndClass = function () {
        this.sliderElem.classList.remove(prefix + "-panend");
    };
    return Silder;
}());
export default Silder;