Grid navigation library

Question

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.

• jfriend00: If I undersand the question appropriately, this sounds more like a Stack Overflow question. You're asking how to solve a specific programming problem.
• PrivatMamtora: Oh I thought stackoverflow, was for issues and here is code review(as in go over/refactor)
• jfriend00: 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.

Answer 1

• 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.