function PaginationObject(){ this.doPagination = pag_doPagination; this.doCollapsed = pag_doCollapsed; this.setPages = pag_setPages; this.bindPagEvents = pag_bindPagEvents; this.bindColEvents = pag_bindColEvents; this.paginate = { //This object establishes the parameters for pagination behavior parent: false, //REQUIRED, Parent container for the panels normalizeHeight: false, //OPTIONAL, Equalize the height of the items within each panel. This can be set to a pixel value. collapsedHeight: false, //OPTIONAL, Min-height value for collapsed elements itemsPerPanel: 5, //OPTIONAL fixThumbSize: false, //OPTIONAL, Adjust thumbnail with and height based off it's parent height adjustDescription: false, //OPTIONAL, Used on events to try and dynmaically set the cut off point for description text includeNumbers: true //OPTIONAL, Not currently used }; this.collapsed = { //This object establishes the parameters for collapsible behavior trigger: false, //REQUIRED target: false //REQUIRED }; } function pag_doPagination(){ //Runs various functions based on the properties of the obj.paginate var obj = this; obj.paginate.parent.hide(); obj.setPages(); } function pag_setPages(){ var obj = this; var index = obj.paginate.itemsPerPanel; //This index value gets adjusted as page elements are added var height; var minHeight; var containerHeight = 'auto'; var descriptionLength; //Sets height to either auto or a specific height if( obj.paginate.normalizeHeight != false && $.isNumeric(parseInt(obj.paginate.normalizeHeight)) ){ height = parseInt(obj.paginate.normalizeHeight)+'px'; containerHeight = parseInt(obj.paginate.normalizeHeight) * obj.paginate.itemsPerPanel +'px'; minHeight = 0; } else { height = 'auto'; } //Sets min-height to either auto or a specific height if( obj.paginate.collapsedHeight != false && $.isNumeric(parseInt(obj.paginate.collapsedHeight)) ){ minHeight = parseInt(obj.paginate.collapsedHeight)+'px'; containerHeight = parseInt(obj.paginate.collapsedHeight) * obj.paginate.itemsPerPanel +'px'; height = 'auto'; } else { minHeight = 0; } //TODO implement improvements here /* if( obj.paginate.parent.parents('.feedElement').length && obj.paginate.parent.parents('.feedElement').siblings('.feedElement').length == 0 ){ console.log('Number of feedElement siblins is '); console.log(obj.paginate.parent.parents('.feedElement').siblings('.feedElement').length); height = 'auto'; minHeight = 0; } */ function buildPages(state){ if(obj.paginate.parent.find('.page').length > 0){ index = obj.paginate.itemsPerPanel + obj.paginate.parent.find('.page').last().index() + 1; //Adjusts index value to account for pages that have been added by previous calls to this function } if(minHeight != 0){ obj.paginate.parent.find('> *').each(function(){ $(this).children().first().height(minHeight).attr('data-height', minHeight); }); } obj.paginate.parent.find('> *:lt('+index+')').not('.page').height(height).css('min-height', minHeight).wrapAll('
'); if(parseInt(height) <= 160){ //Hides description text for Calendar events when the parent container is really small... Inelegant solution, would like to do this better if(obj.paginate.parent.parent().hasClass('calendar') || obj.paginate.parent.parent().hasClass('maeEventsList')) { obj.paginate.parent.find('.descriptionWindow, .actions').hide(); } } if(obj.paginate.parent.find('> *').not('.page').length > obj.paginate.itemsPerPanel){ buildPages('off'); } else { obj.paginate.parent.find('> *').not('.page').height(height).css('min-height', minHeight).wrapAll('
'); //Wraps remaining elements in a page wrapper, breaks the cycle of function calls if(obj.paginate.fixThumbSize == true){ var imgContainer = obj.paginate.parent.find('.responsiveImg').parent(); var fixedSize = obj.paginate.normalizeHeight - parseInt(imgContainer.css('padding-top')) - parseInt(imgContainer.css('padding-bottom')) - parseInt(imgContainer.css('border-top-width')) - parseInt(imgContainer.css('border-bottom-width')); fixedSize = fixedSize+'px'; obj.paginate.parent.find('.responsiveImg').height(fixedSize).width(fixedSize); } } } buildPages('on'); //Sets height for parent object. Important for when pagination leaves some pages with only a handful of elements, this keeps the feed a constant height so pagination controls don't jump around if(height != 'auto'){ obj.paginate.parent.height(containerHeight); } else if(minHeight != 0){ obj.paginate.parent.css('min-height', containerHeight); } if(obj.paginate.parent.find('.page').length > 1){ obj.paginate.parent.after('
'); obj.bindPagEvents(); } obj.paginate.parent.show(); } function pag_bindPagEvents(){ var obj = this; obj.paginate.parent.parent().on('click', '.paginationControls .right', function(){ obj.paginate.parent.find('.page.on').animate({ opacity: 0 }, 200, function() { $(this).toggleClass('on off').css('opacity', 1); $(this).next().css('opacity', 0).toggleClass('on off').animate({opacity: 1}); $(this).next().find('.responsiveImg:not(:hidden)').each(function(){ resizeImg($(this)); }); if(obj.paginate.parent.find('.page.on').index() != 0){ //Reveals previous pagination arrow obj.paginate.parent.parent().find('.paginationControls .left').show(); } if(obj.paginate.parent.find('.page.on').index() + 1 == obj.paginate.parent.find('.page').length){ //Hides next pagination control when last page is visible obj.paginate.parent.parent().find('.paginationControls .right').hide(); } }); }); obj.paginate.parent.parent().on('click', '.paginationControls .left', function(){ obj.paginate.parent.find('.page.on').animate({ opacity: 0 }, 200, function() { $(this).toggleClass('on off').css('opacity', 1); $(this).prev().css('opacity', 0).toggleClass('on off').animate({opacity: 1}); $(this).prev().find('.responsiveImg:not(:hidden)').each(function(){ resizeImg($(this)); }); if(obj.paginate.parent.find('.page.on').index() == 0){ //Hides previous pagination arrow obj.paginate.parent.parent().find('.paginationControls .left').hide(); } if(obj.paginate.parent.find('.page').length > obj.paginate.parent.find('.page.on').index() + 1){ //Reveals next pagination control when there are more pages obj.paginate.parent.parent().find('.paginationControls .right').show(); } }); }); } function pag_doCollapsed(){ var obj = this; var parent = obj.collapsed.trigger.parent(); parent.find(obj.collapsed.target).wrap(''); obj.collapsed.trigger.addClass('icon-circlePlus').attr('data-icon','icon-circlePlus').attr('data-icon-close','icon-circleMinus'); obj.collapsed.trigger.each(function(){ obj.bindColEvents($(this)); }); } function pag_bindColEvents(trigger){ //Collapse Events var obj = this; var parent = trigger.parent(); var target = parent.find(obj.collapsed.target); var isAnimating = false; parent.on('click', trigger, function(){ if(!parent.find('.collapseWrapper').is(':hover')) { //Prevents collapse when clicking on the collapseWrapper if (isAnimating == false) { isAnimating = true; var height = trigger.height(); var title = trigger.find('span'); trigger.toggleClass(trigger.data('icon') + ' ' + trigger.data('icon-close')); if (trigger.hasClass(trigger.data('icon-close'))) { //Expand it //Force height on trigger elements for when they are displayed as table-cells trigger.height(height); //Determine desired height for target for the open animation target.parent().removeClass('collapsed').show(); var targetHeight = target.height(); target.height('0px'); //Do the open animation, set class names, reset variables target.animate({ height: targetHeight }, 200, function () { target.height('auto'); isAnimating = false; }); } else { //Collapse it target.parent().addClass('collapsed'); target.height(target.height()); target.animate({ height: 0 }, 200, function () { target.height('auto'); if (trigger.attr('data-height') == 'undefined') { //Looks for data-height attribute on trigger. Currently only on course catalog items trigger.height('100%'); } else { trigger.height(trigger.attr('data-height')); } target.parent().hide(); isAnimating = false; }); } } } }); }