初始化静态值库属性

Question

我正在尝试将我的代码转换为工作库。 （我的第一个）

目前，您只需致电GridNav()即可设置并执行。

我目前正在重构所有必要的变量

我遇到的麻烦是animations属性。我希望用户能够超越房产。

(function(window, document, $, undefined) {
'use strict';

var fixOutOfBoundCordinates = function(pos, max) {
    if (pos < 1) {
        pos = max;
    } else if (pos > max) {
        pos = 1
    }
    return pos;
};

var calculateDestination = function(position, direction, columns) {
    var directions = {
        1: [-1,-1],
        2: [0,-1],
        3: [1,-1],
        4: [-1,0],
        6: [1,0],
        7: [-1,1],
        8: [0,1],
        9: [1,1]
    };

    direction = directions[direction];
    var y = Math.ceil(position/columns);
    var x = position - ((y-1) * columns);

    x = fixOutOfBoundCordinates((x+direction[0]), columns);
    y = fixOutOfBoundCordinates((y+direction[1]), columns);

    return (x + ((y-1)*columns)) -1;
};

var GridNav = function(params) {
    return new Library(params);
};

var Library = function(params) {
    //var $main = document.querySelectorAll( '#pt-main' ),
    var $main = $('#pt-main'),
        $pages = $main.children( 'section.pt-page' ),
        $iterate = $( '.panel' ),
        pagesCount = $pages.length,
        isAnimating = false,
        endCurrPage = false,
        endNextPage = false,
        animEndEventNames = {
            'WebkitAnimation' : 'webkitAnimationEnd',
            'OAnimation' : 'oAnimationEnd',
            'msAnimation' : 'MSAnimationEnd',
            'animation' : 'animationend'
        },
    // animation end event name
        animEndEventName = animEndEventNames[ 'animation'],
        keys = {
            BACKSPACE: 8,
            DOWN: 40,
            ENTER: 13,
            LEFT: 37,
            UP: 38,
            RIGHT: 39,
            SPACE: 32,
            PAGE_DOWN: 34,
            PAGE_UP: 33
        };



    function nextPage(outpage, direction ) {

        if( isAnimating ) {
            return false;
        }

        var cols = $main.data("col");
        var inpage = calculateDestination(outpage, direction, cols);

        isAnimating = true;
        var $currPage = $pages.eq( outpage-1 ),
        // Done early so element visible during animation
            $nextPage = $pages.eq( inpage ).addClass( 'pt-page-current' ),
            outClass = '', inClass = '';

        $currPage.addClass( Library.animation[direction]["outClass"] ).on( animEndEventName, function() {
            $currPage.off( animEndEventName );
            endCurrPage = true;
            if( endNextPage ) {
                onEndAnimation( $currPage, $nextPage );
            }
        } );

        $nextPage.addClass( Library.animation[direction]["inClass"] ).on( animEndEventName, function() {
            $nextPage.off( animEndEventName );
            endNextPage = true;
            if( endCurrPage ) {
                onEndAnimation( $currPage, $nextPage );
            }
        } );

    }

    function onEndAnimation( $outpage, $inpage ) {
        endCurrPage = false;
        endNextPage = false;
        resetPage( $outpage, $inpage );
        isAnimating = false;
    }

    function resetPage( $outpage, $inpage ) {
        $outpage.attr( 'class', $outpage.data( 'originalClassList' ) );
        $inpage.attr( 'class', $inpage.data( 'originalClassList' ) + ' pt-page-current' );
    }

    $pages.each( function() {
        var $page = $( this );
        $page.data( 'originalClassList', $page.attr( 'class' ) );
    } );

    // Use start class as begining
    var start = $pages.index($pages.filter(".start"));
    if (start == -1) {
        start = Math.ceil(pagesCount/2)-1
    } else {

    }

    $pages.eq(start).addClass('pt-page-current');

    $( "body" ).keyup(function(event) {
        var key = event.which;
        var cur;

        if ( key == keys.DOWN || key == keys.PAGE_DOWN ) {
            cur = $('section.pt-page').filter(".pt-page-current").index() + 1;
            nextPage( cur, 8);
        }
        if ( key == keys.UP || key == keys.PAGE_UP ) {
            cur = $('section.pt-page').filter(".pt-page-current").index() + 1;
            nextPage( cur, 2);
        }
        if ( key == keys.RIGHT || key == keys.SPACE || key == keys.ENTER ) {
            cur = $('section.pt-page').filter(".pt-page-current").index() + 1;
            nextPage( cur, 6);
        }
        if ( key == keys.LEFT || key == keys.BACKSPACE ) {
            cur = $('section.pt-page').filter(".pt-page-current").index() + 1;
            nextPage( cur, 4);
        }
    });

    $iterate.on( 'click', function() {
        var cur = $('section.pt-page').filter(".pt-page-current").index() + 1;
        var direction = $iterate.index($(this)) + 1;
        if (direction > 4) {
            direction+= 1;
        }
        nextPage(cur, direction);
    } );

    return this;
};

Library.animation = {
    1:
    // Move UP and Left
    {outClass: 'pt-page-moveToBottomRight',inClass: 'pt-page-moveFromTopLeft'},
    2:
    // Move UP
    {outClass: 'pt-page-moveToBottom', inClass: 'pt-page-moveFromTop'},
    3:
    // Move UP and Right
    {outClass: 'pt-page-moveToBottomLeft', inClass: 'pt-page-moveFromTopRight'},
    4:
    // Move Left
    {outClass: 'pt-page-moveToRight', inClass: 'pt-page-moveFromLeft'},
    6:
    // Move Right
    {outClass: 'pt-page-moveToLeft', inClass: 'pt-page-moveFromRight'},
    7:
    // Move Down and Left
    {outClass: 'pt-page-moveToTopRight', inClass: 'pt-page-moveFromBottomLeft'},
    8:
    // Move Down
    {outClass: 'pt-page-moveToTop', inClass: 'pt-page-moveFromBottom'},
    9:
    // Move Down and Right
    {outClass: 'pt-page-moveToTopLeft', inClass: 'pt-page-moveFromBottomRight'}
};

//define globally if it doesn't already exist
if(!window.GridNav){
    window.GridNav = GridNav;
}
else{
    console.log("Library already defined.");
}
})(window, document, jQuery);

这里有效： codepen

欢迎任何其他图书馆推荐/提示。

从code review

发送到此处