webconsole/src/main/resources/res/ui/ui.tabs.paging.js

/*
 * UI Tabs Paging extension - v1.2 (Stable - jQuery 1.8.2 and jQuery UI 1.9.0)
 * 
 * Copyright (c) 2012, http://seyfertdesign.com/jquery/ui-tabs-paging.html
 * 
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 * 
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 * 
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 *
 * Depends:
 *   jquery.ui.core.js
 *   jquery.ui.widget.js
 *   jquery.ui.tabs.js
 */

(function($) {

//  overridden ui.tabs functions
var uiTabsFuncs = { 
    refresh: $.ui.tabs.prototype.refresh, 
    option: $.ui.tabs.prototype.option
};

// DEPRECATED in jQuery UI 1.9
if ( $.uiBackCompat !== false ) {
    uiTabsFuncs = $.extend(
            uiTabsFuncs, 
            {
                add: $.ui.tabs.prototype.add, 
                remove: $.ui.tabs.prototype.remove 
            }
    );
}
    
$.extend($.ui.tabs.prototype, {
    paging: function(options) {
        var opts = {
            tabsPerPage: 0,       // Max number of tabs to display at one time.  0 automatically sizing.
            nextButton: '»', // Text displayed for next button.
            prevButton: '«', // Text displayed for previous button.
            follow: false,        // When clicking next button, automatically make first tab active.  When clicking previous button automatically make last tab active.
            cycle: false,         // When at end of list, next button returns to first page.  When at beginning of list previous button goes to end of list.
            activeOnAdd: false,   // When new tab is added, make tab active automatically
            followOnActive: false // When tab is changed to active, automatically go move to that tab group.
        };
        
        opts = $.extend(opts, options);

        var self = this, initialized = false, currentPage, 
            buttonWidth, containerWidth, allTabsWidth, tabWidths, 
            maxPageWidth, pages, resizeTimer = null, 
            windowHeight, windowWidth;
        
        // initialize paging
        function init() {
            destroy();
            
            windowHeight = $(window).height();
            windowWidth = $(window).width();
            
            allTabsWidth = 0, currentPage = 0, maxPageWidth = 0, buttonWidth = 0,
                pages = new Array(), tabWidths = new Array(), selectedTabWidths = new Array();
            
            containerWidth = self.element.width();
            
            // loops through LIs, get width of each tab when selected and unselected.
            var maxDiff = 0;  // the max difference between a selected and unselected tab
            self.tabs.each(function(i) {            
                if (i == self.options.active) {
                    selectedTabWidths[i] = $(this).outerWidth(true);
                    tabWidths[i] = self.tabs.eq(i).removeClass('ui-tabs-active').outerWidth(true);
                    self.tabs.eq(i).addClass('ui-tabs-active');
                    maxDiff = Math.min(maxDiff, Math.abs(selectedTabWidths[i] - tabWidths[i]));
                    allTabsWidth += tabWidths[i];
                } else {
                    tabWidths[i] = $(this).outerWidth(true);
                    selectedTabWidths[i] = self.tabs.eq(i).addClass('ui-tabs-active').outerWidth(true);
                    self.tabs.eq(i).removeClass('ui-tabs-active');
                    maxDiff = Math.max(maxDiff, Math.abs(selectedTabWidths[i] - tabWidths[i]));
                    allTabsWidth += tabWidths[i];
                }
            });
            
            // fix padding issues with buttons
            // TODO determine a better way to handle this
            allTabsWidth += maxDiff + ($.browser.msie?4:0) + 9;  

            // if the width of all tables is greater than the container's width, calculate the pages
            if (allTabsWidth > containerWidth) {
                // create next button           
                li = $('<li></li>')
                    .addClass('ui-state-default ui-tabs-paging-next')
                    .append($('<a href="#"></a>')
                            .click(function() { page('next'); return false; })
                            .html(opts.nextButton));
                
                self.tablist.append(li);
                buttonWidth = li.outerWidth(true);
                
                // create prev button
                li = $('<li></li>')
                    .addClass('ui-state-default ui-tabs-paging-prev')
                    .append($('<a href="#"></a>')
                            .click(function() { page('prev'); return false; })
                            .html(opts.prevButton));
                self.tablist.prepend(li);
                buttonWidth += li.outerWidth(true);
                
                // TODO determine fix for padding issues to next button
                buttonWidth += 19; 
                                
                var pageIndex = 0, pageWidth = 0, maxTabPadding = 0;
                
                // start calculating pageWidths
                for (var i = 0; i < tabWidths.length; i++) {
                    // if first tab of page or selected tab's padding larger than the current max, set the maxTabPadding
                    if (pageWidth == 0 || selectedTabWidths[i] - tabWidths[i] > maxTabPadding)
                        maxTabPadding = (selectedTabWidths[i] - tabWidths[i]);
                    
                    // if first tab of page, initialize pages variable for page 
                    if (pages[pageIndex] == null) {
                        pages[pageIndex] = { start: i };
                    
                    } else if ((i > 0 && (i % opts.tabsPerPage) == 0) || (tabWidths[i] + pageWidth + buttonWidth + 12) > containerWidth) {
                        if ((pageWidth + maxTabPadding) > maxPageWidth) 
                            maxPageWidth = (pageWidth + maxTabPadding);
                        pageIndex++;
                        pages[pageIndex] = { start: i };            
                        pageWidth = 0;
                    }
                    pages[pageIndex].end = i+1;
                    pageWidth += tabWidths[i];
                    if (i == self.options.active) currentPage = pageIndex;
                }
                if ((pageWidth + maxTabPadding) > maxPageWidth) 
                    maxPageWidth = (pageWidth + maxTabPadding);             

                // hide all tabs then show tabs for current page
                self.tabs.hide().slice(pages[currentPage].start, pages[currentPage].end).show();
                if (currentPage == (pages.length - 1) && !opts.cycle) 
                    disableButton('next');          
                if (currentPage == 0 && !opts.cycle) 
                    disableButton('prev');
                
                // calculate the right padding for the next button
                buttonPadding = containerWidth - maxPageWidth - buttonWidth;
                if (buttonPadding > 0) 
                    $('.ui-tabs-paging-next', self.element).css({ paddingRight: buttonPadding + 'px' });
            } else {
                destroy();
            }
            
            $(window).bind('resize', handleResize);
            
            initialized = true;
        }
        
        // handles paging forward and backward
        function page(direction) {
            currentPage = currentPage + (direction == 'prev'?-1:1);
            
            if ((direction == 'prev' && currentPage < 0 && opts.cycle) ||
                (direction == 'next' && currentPage >= pages.length && !opts.cycle))
                currentPage = pages.length - 1;
            else if ((direction == 'prev' && currentPage < 0) || 
                     (direction == 'next' && currentPage >= pages.length && opts.cycle))
                currentPage = 0;
            
            var start = pages[currentPage].start;
            var end = pages[currentPage].end;
            self.tabs.hide().slice(start, end).show();
            
            if (direction == 'prev') {
                enableButton('next');
                if (opts.follow && (self.options.active < start || self.options.active > (end-1))) self.option('active', end-1);
                if (!opts.cycle && start <= 0) disableButton('prev');
            } else {
                enableButton('prev');
                if (opts.follow && (self.options.active < start || self.options.active > (end-1))) self.option('active', start);
                if (!opts.cycle && end >= self.tabs.length) disableButton('next');
            }
        }
        
        // change styling of next/prev buttons when disabled
        function disableButton(direction) {
            $('.ui-tabs-paging-'+direction, self.element).addClass('ui-tabs-paging-disabled');
        }
        
        function enableButton(direction) {
            $('.ui-tabs-paging-'+direction, self.element).removeClass('ui-tabs-paging-disabled');
        }
        
        // special function defined to handle IE resize issues
        function handleResize() {
            if (resizeTimer) clearTimeout(resizeTimer);
            
            if (windowHeight != $(window).height() || windowWidth != $(window).width()) 
            {
                resizeTimer = setTimeout(init, 100);
            }
        }
        
        // remove all paging related changes and events
        function destroy() {
            // remove buttons
            $('.ui-tabs-paging-next', self.element).remove();
            $('.ui-tabs-paging-prev', self.element).remove();
            
            // show all tabs
            self.tabs.show();
            
            initialized = false;
            
            $(window).unbind('resize', handleResize);
        }
        
        
        
        // ------------- OVERRIDDEN PUBLIC FUNCTIONS -------------
        self.option = function(optionName, value) {
            uiTabsFuncs.option.apply(this, [optionName, value]);

            // if "followOnActive" is true, then move page when selection changes
            if (optionName == "active")
            {
                // if paging is not initialized or it is not configured to 
                // change pages when a new tab is active, then do nothing
                if (!initialized || !opts.followOnActive)
                    return this;

                // find the new page based on index of the active tab
                for (var i in pages) {
                    var start = pages[i].start;
                    var end = pages[i].end;
                    if (value >= start && value < end) {
                        // if the the active tab is not within the currentPage of tabs, then change pages
                        if (i != currentPage) {
                            this.tabs.hide().slice(start, end).show();

                            currentPage = parseInt(i);
                            if (currentPage == 0) {
                                enableButton('next');
                                if (!opts.cycle && start <= 0) disableButton('prev');
                            } else {
                                enableButton('prev');
                                if (!opts.cycle && end >= this.tabs.length) disableButton('next');
                            }
                        }
                        break;
                    }
                }
            }
            
            return this;
        }
        
        self.refresh = function() {
            if (initialized)
            {
                destroy();

                uiTabsFuncs.refresh.apply(this);
                
                // re-initialize paging buttons
                init();
            }
            
            uiTabsFuncs.refresh.apply(this);
        }
        
        
        // DEPRECATED in jQuery UI 1.9
        if ( $.uiBackCompat !== false )
        {
            // temporarily remove paging buttons before adding a tab
            self.add = function(url, label, index) {
                if (initialized)
                {
                    destroy();

                    uiTabsFuncs.add.apply(this, [url, label, index]);

                    if (opts.activeOnAdd) {
                        if (index == undefined) index = this.tabs.length-1;
                        this.option('active', index);
                    }
                    // re-initialize paging buttons
                    init();

                    return this;
                }

                return uiTabsFuncs.add.apply(this, [url, label, index]);
            }

            // temporarily remove paging buttons before removing a tab
            self.remove = function(index) {
                if (initialized)
                {
                    destroy();
                    uiTabsFuncs.remove.apply(this, [index]);
                    init();

                    return this;
                }

                return uiTabsFuncs.remove.apply(this, [index]);
            }
        }


        // ------------- PUBLIC FUNCTIONS -------------
        $.extend($.ui.tabs.prototype, {
            // public function for removing paging
            pagingDestroy: function() {
                destroy();
                return this;
            },

            // public function to handle resizes that are not on the window
            pagingResize: function() {
                init();
                return this;
            }
        });
        
        // initialize on startup!
        init();
    }
});


})(jQuery);