1
\$\begingroup\$

I am trying to turn my code into a working library (my first).

Currently you simply call GridNav() and it sets up and executes.

I am currently refactoring out all the necessary variables.

The trouble I am having is the animations property. I want users to be able to override the property.

(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);

Here it is working: codepen

Any other library recommendations/tips welcome.

\$\endgroup\$
3
  • \$\begingroup\$ If I undersand the question appropriately, this sounds more like a Stack Overflow question. You're asking how to solve a specific programming problem. \$\endgroup\$ – jfriend00 Oct 8 '15 at 22:59
  • \$\begingroup\$ Oh I thought stackoverflow, was for issues and here is code review(as in go over/refactor) \$\endgroup\$ – PrivatMamtora Oct 8 '15 at 23:01
  • \$\begingroup\$ Yeah, the boundary between the two is a bit hard to learn. If you read this, Stack Overflow includes "a specific programming problem" which I think you have. The on-topic list for code review is here. \$\endgroup\$ – jfriend00 Oct 8 '15 at 23:05
2
\$\begingroup\$
  • The undefined parameter seems unused.
  • It should spell fixOutOfBoundCoordinates.
  • There's commented out code.
  • nextPage returns either false or undefined. Since its return value isn't used, just return without any value instead.
  • There's no point empty else blocks.
  • console.log isn't defined everywhere.

When you're saying you want the user to be able to override animations, do you mean just supplying a completely different value? In that case can't you just supply that as a value in params? I.e. if params.animations is undefined, use Library.animations instead.

There's also a lot of code duplication; if possible if there's code that is copied verbatim, move it into a shared function to reduce the noise.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.