问在泛hammer.js上获取pan方向并限制方向

EN

var Slideshow = Backbone.View.extend( {

    events: {
        "pan .slideshow-slide" : "handlePan",
        "panstart .slideshow-slide" : "handlePanStart",
        "panend .slideshow-slide" : "handlePanEnd",
    },

    state: {
        panHistory: [],
    },

    handlePanStart: function( evt ) {
        // attempt to get the pan x coord
        var startX = this.getPanXFromEvent( evt );

        // if an x coord couldn't be retrieved, get out
        if ( !startX ) {
            this.logger.warn( "Pan Start: Unable to find x", evt );
            return;
        }

        this.logger.log( "Pan Start", evt );

        // set the pan x array so this is its first and only element
        this.state.panHistory = [ startX ];
    },

    handlePan: function( evt ) {
        // cache the pan history
        var pans = this.state.panHistory,
        // get the x coord from this pan event
        lastX = this.getPanXFromEvent( evt );

        // track deltas on the x axis during the pan, so we know if the user
        // is switching directions between pan start and pan end
        if ( lastX ) {
            pans.push( lastX );
        }
    },

    handlePanEnd: function( evt ) {
        // get the direction of the pan
        switch ( this.getDirectionFromPanEvent( evt ) ) {
            case Hammer.DIRECTION_LEFT:
                // if we panned left and the next slide isn't out of
                // range, go to the next slide.. otherwise fall back
                // on the switch statement's default
                if ( !this.isOutOfRange( this.state.current + 1 ) ) {
                    this.logger.log( "Pan End: Moving Left", evt );
                    this.gotoNextSlide();
                    return;
                }

            case Hammer.DIRECTION_RIGHT:
                // if we panned right and the previous slide isn't out
                // of range, go to the previous slide.. otherwise fall
                // back on the switch statement's default
                if ( !this.isOutOfRange( this.state.current - 1 ) ) {
                    this.logger.log( "Pan End: Moving Right", evt );
                    this.gotoPrevSlide();
                    return;
                }

            // Snap back to the current slide by default by calling
            // gotoSlide on the current index to reset the transform
            default:
                this.logger.log( "Pan End: Snapping Back", evt );
                this.gotoSlide( this.state.current );
        }
    },

    getPanXFromEvent: function( evt ) {
        return Utils.getValue( "originalEvent.gesture.center.x", evt );
    },

    getDirectionFromPanHistory: function( evt ) {
        // placeholders for start, end, and last pan x coords
        var i, start, last, end,
        // cache the pan x array so we don't have to type it 50 times
        pans = this.state.panHistory;

        // if there aren't enough pans to calculate a delta, return 0
        if ( pans.length < 2 ) {
            return 0;
        }

        // get the starting pan x
        start = pans[ 0 ];
        // set last and end to the last pan x
        last = end = pans[ pans.length - 1 ];

        // loop backwards through the pans to find a pan x coord different from the ending one
        // since there's a chance that identical pan x coords will be stacked in the array
        for ( i = pans.length - 2; last === end && i >= 0; i-- ) {
            last = pans[ i ];
        }

        // if the last pan was to the right, and we're farther right
        // than we started, move right
        return end > last && end > start ? Hammer.DIRECTION_RIGHT
            // if the last pan was to the left, and we're farther left
            // than we started, move left
            : end < last && end < start ? Hammer.DIRECTION_LEFT
            // otherwise move nowhere
            : 0;
    },
} );