netdisco/Netdisco/share/public/javascripts/jquery.floatThead.js

/*!
 * jQuery.floatThead
 * Copyright (c) 2012 - 2013 Misha Koryak - https://github.com/mkoryak/floatThead
 * Licensed under Creative Commons Attribution-NonCommercial 3.0 Unported - http://creativecommons.org/licenses/by-sa/3.0/
 * Date: 8/25/13
 *
 * @projectDescription lock a table header in place while scrolling - without breaking styles or events bound to the header
 *
 * Dependencies:
 * jquery 1.9.0 + [required] OR jquery 1.7.0 + jquery UI core
 * underscore.js 1.3.0 + [required]
 *
 * http://notetodogself.blogspot.com
 * http://programmingdrunk.com/floatThead/
 *
 * Tested on FF13+, Chrome 21+, IE9, IE8
 *
 * @author Misha Koryak
 * @version 1.0.0
 */
// ==ClosureCompiler==
// @compilation_level SIMPLE_OPTIMIZATIONS
// @output_file_name jquery.floatThead.min.js
// ==/ClosureCompiler==
/**
 * @preserve jQuery.floatThead 1.0.0
 * Copyright (c) 2013 Misha Koryak - https://github.com/mkoryak/floatThead
 * Licensed under Creative Commons Attribution-NonCommercial 3.0 Unported - http://creativecommons.org/licenses/by-sa/3.0/
 */
(function( $ ) {

//browser stuff
var ieVersion = function(){for(var a=3,b=document.createElement("b"),c=b.all||[];b.innerHTML="<!--[if gt IE "+ ++a+"]><i><![endif]-->",c[0];);return 4<a?a:document.documentMode}();
var ifChrome = function(){
  var $table = $("<table><colgroup><col></colgroup><tbody><tr><td style='width:10px'></td></tbody></table>");
  $('body').append($table);
  var width = $table.find('col').width();
  $table.remove();
  return width == 0;
};

/**
 * provides a default config object. You can modify this after including this script if you want to change the init defaults
 * @type {Object}
 */
$.floatThead = {
    defaults: {
        cellTag: 'th',
        zIndex: 1001, //zindex of the floating thead (actually a container div)
        debounceResizeMs: 1,
        useAbsolutePositioning: true, //if set to NULL - defaults: has scrollContainer=true, doesnt have scrollContainer=false
        scrollingTop: 0, //String or function($table) - offset from top of window where the header should not pass above
        //TODO: this got lost somewhere - needs to be re-implemented
        scrollingBottom: 0, //String or function($table) - offset from the bottom of the table where the header should stop scrolling
        scrollContainer: function($table){
            return $([]); //if the table has horizontal scroll bars then this is the container that has overflow:auto and causes those scroll bars
        },
        floatTableClass: 'floatThead-table'
    }            
};
  
var $window = $(window);
var floatTheadCreated = 0;


/**
 * debounce and fix window resize event for ie7. ie7 is evil and will fire window resize event when ANY dom element is resized.
 * @param debounceMs
 * @param cb
 */

function windowResize(debounceMs, cb){
    var winWidth = $window.width();
    var debouncedCb = _.debounce(function(){
        var winWidthNew = $window.width();
        if(winWidth != winWidthNew){
            winWidth = winWidthNew;
            cb();
        }
    }, debounceMs);
    $window.bind('resize.floatTHead', debouncedCb);
}

/**
 * try to calculate the scrollbar width for your browser/os
 * @return {Number}
 */
function scrollbarWidth() {
    var $div = $('<div/>')
    .css({ width: 100, height: 100, overflow: 'auto', position: 'absolute', top: -1000, left: -1000 })
    .prependTo('body').append('<div/>').find('div')
    .css({ width: '100%', height: 200 });
    var scrollbarWidth = 100 - $div.width();
    $div.parent().remove();
    return scrollbarWidth;
}

/**
 * Check if a given table has been datatableized (http://datatables.net)
 * @param $table
 * @return {Boolean}
 */
function isDatatable($table){
    if($table.dataTableSettings){
        for(var i = 0; i < $table.dataTableSettings.length; i++){
            var table = $table.dataTableSettings[i].nTable;
            if($table[0] == table){
                return true;
            }
        }
    }
    return false;
}
$.fn.floatThead = function(map){
    if(ieVersion < 8){
        return this; //no more crappy browser support. 
    }

    isChrome = ifChrome(); //need to call this after dom ready, and now it is.
    if(isChrome){
        //because chrome cant read <col> width, these elements are used for sizing the table. Need to create new elements because they must be unstyled by user's css.
        document.createElement('fthtr'); //tr
        document.createElement('fthtd'); //td
        document.createElement('fthfoot'); //tfoot
    }
    if(_.isString(map)){
        var command = map;
        var ret = this;
        this.filter('table').each(function(){
            var obj = $(this).data('floatThead-attached');
            if(obj && _.isFunction(obj[command])){
                r = obj[command]();
                if(typeof r !== 'undefined'){
                    ret = r;
                }
            }
        });
        return ret;
    }
    var opts = $.extend({}, $.floatThead.defaults, map);
    

    this.filter(':not(.'+opts.floatTableClass+')').each(function(){
        var $table = $(this);
        if($table.data('floatThead-attached')){
            return true; //continue the each loop 
        }
        if(!$table.is('table')){
            throw new Error('jQuery.floatThead must be run on a table element. ex: $("table").floatThead();');
        }
        var $header = $table.find('thead:first');
        var $tbody = $table.find('tbody:first');
        if($header.length == 0){
            throw new Error('jQuery.floatThead must be run on a table that contains a <thead> element');
        }
        var headerFloated = true;
        var scrollingTop, scrollingBottom;
        var scrollbarOffset = {vertical: 0, horizontal: 0};
        var scWidth = scrollbarWidth();
        var lastColumnCount = 0; //used by columnNum()
        var $scrollContainer = opts.scrollContainer($table) || $([]); //guard against returned nulls

        var useAbsolutePositioning = opts.useAbsolutePositioning; 
        if(useAbsolutePositioning == null){ //defaults: locked=true, !locked=false
            useAbsolutePositioning = opts.scrollContainer($table).length;
        } 

        var $fthGrp = $('<fthfoot style="display:table-footer-group;"/>');
       
        var locked = $scrollContainer.length > 0;
        var wrappedContainer = false; //used with absolute positioning enabled. did we need to wrap the scrollContainer/table with a relative div?
        var absoluteToFixedOnScroll = ieVersion && !locked && useAbsolutePositioning; //on ie using absolute positioning doesnt look good with window scrolling, so we change positon to fixed on scroll, and then change it back to absolute when done.
        var $floatTable = $("<table/>");
        var $floatColGroup = $("<colgroup/>");
        var $tableColGroup = $("<colgroup/>");
        var $fthRow = $('<fthrow style="display:table-row;height:0;"/>'); //created unstyled elements
        var $floatContainer = $('<div style="overflow: hidden;"></div>');
        var $newHeader = $("<thead/>");
        var $sizerRow = $('<tr class="size-row"/>');
        var $sizerCells = $([]);
        var $tableCells = $([]); //used for sizing - either $sizerCells or $tableColGroup cols. $tableColGroup cols are only created in chrome for borderCollapse:collapse because of a chrome bug.
        var $headerCells = $([]);
        var $fthCells = $([]); //created elements
       
        $newHeader.append($sizerRow);
        $header.detach();

        $table.prepend($newHeader); 
        $table.prepend($tableColGroup);
        if(isChrome){
            $fthGrp.append($fthRow);
            $table.append($fthGrp);
        }

        $floatTable.append($floatColGroup);
        $floatContainer.append($floatTable);
        $floatTable.attr('class', $table.attr('class'));
        $floatTable.addClass(opts.floatTableClass).css('margin', 0); //must have no margins or you wont be able to click on things under floating table

        if(useAbsolutePositioning){
            var makeRelative = function($container, alwaysWrap){
                var positionCss = $container.css('position');
                var relativeToScrollContainer = (positionCss == "relative" || positionCss == "absolute");
                if(!relativeToScrollContainer || alwaysWrap){
                    var css = {"paddingLeft": $container.css('paddingLeft'), "paddingRight": $container.css('paddingRight')};
                    $floatContainer.css(css);
                    $container = $container.wrap("<div style='position: relative; clear:both;'></div>").parent();
                    wrappedContainer = true;
                }
                return $container;
            };
            if(locked){
                var $relative = makeRelative($scrollContainer, true);
                $relative.append($floatContainer);
            } else {
                makeRelative($table);
                $table.after($floatContainer);
            }
        } else {
            $table.after($floatContainer);
        }
        

        $floatContainer.css({
                position: useAbsolutePositioning ? 'absolute' : 'fixed',
                marginTop: 0,
                top:  useAbsolutePositioning ? 0 : 'auto',
                zIndex: opts.zIndex
        });
        updateScrollingOffsets();
        
        var layoutFixed = {'table-layout': 'fixed'};
        var layoutAuto = {'table-layout': $table.css('tableLayout') || 'auto'};

        function setHeaderHeight(){
            var headerHeight = $header.outerHeight(true);
            $sizerRow.outerHeight(headerHeight);
            $sizerCells.outerHeight(headerHeight);
        }
        
                
        function setFloatWidth(){
            var tableWidth = $table.outerWidth();
            var width = $scrollContainer.width() || tableWidth;
            $floatContainer.width(width - scrollbarOffset.vertical);
            if(locked){
                var percent = 100 * tableWidth / (width - scrollbarOffset.vertical);
                $floatTable.css('width', percent+'%');
            } else {
                $floatTable.outerWidth(tableWidth);
            }
        }
        
        function updateScrollingOffsets(){
            scrollingTop = (_.isFunction(opts.scrollingTop) ? opts.scrollingTop($table) : opts.scrollingTop) || 0;
            scrollingBottom = (_.isFunction(opts.scrollingBottom) ? opts.scrollingBottom($table) : opts.scrollingBottom) || 0;
        }

        /**
         * get the number of columns and also rebuild resizer rows if the count is different then the last count
         */
        function columnNum(){
            var $headerColumns = $header.find('tr:first>'+opts.cellTag);  
      
            var count =  _.reduce($headerColumns, function(sum, cell){
                var colspan = parseInt(($(cell).attr('colspan') || 1), 10);
                return sum + colspan;
            }, 0);
            if(count != lastColumnCount){
                lastColumnCount = count;
                var cells = [], cols = [], psuedo = [];
                for(var x = 0; x < count; x++){
                    cells.push('<'+opts.cellTag+' class="floatThead-col-'+x+'"/>');
                    cols.push('<col/>');
                    psuedo.push("<fthcell style='display:table-cell;height:0;width:auto;'/>");
                }

                cols = cols.join('');
                cells = cells.join('');

                if(isChrome){
                    psuedo = psuedo.join('');
                    $fthRow.html(psuedo);
                    $fthCells = $fthRow.find('fthcell')
                }

                $sizerRow.html(cells);
                $tableColGroup.html(cols);
                $tableCells = $tableColGroup.find('col');
                $floatColGroup.html(cols);
                $headerCells = $floatColGroup.find("col");
                
            }
            return count;
        }


        function refloat(){
            if(!headerFloated){
                headerFloated = true; 
                $table.css(layoutFixed);
                $floatTable.css(layoutFixed);
                $floatTable.append($header); //append because colgroup must go first in chrome
                $tbody.before($newHeader);
                setHeaderHeight();
            }
        }
        function unfloat(){
            if(headerFloated){
                headerFloated = false;
                $newHeader.detach();
                $table.prepend($header);
                $table.css(layoutAuto);
                $floatTable.css(layoutAuto);
            }
        }
        function changePositioning(isAbsolute){
            if(useAbsolutePositioning != isAbsolute){
                useAbsolutePositioning = isAbsolute;
                $floatContainer.css({
                    position: useAbsolutePositioning ? 'absolute' : 'fixed'
                });
            }
        }

        /**
         * returns a function that updates the floating header's cell widths.
         * @return {Function}
         */
        function reflow(){
            var numCols = columnNum(); //if the tables columns change dynamically since last time (datatables) we need to rebuild the sizer rows and get new count
            var flow = function(){
                var badReflow = false;
                var $rowCells = isChrome ? $fthCells : $tableCells;
                if($rowCells.length == numCols && numCols > 0){
                    unfloat();
                    for(var i=0; i < numCols; i++){
                        var $rowCell = $rowCells.eq(i);
                        var rowWidth = $rowCell.outerWidth(true);
                        $headerCells.eq(i).outerWidth(rowWidth);
                        $tableCells.eq(i).outerWidth(rowWidth);
                    }
                    refloat();
                    for(var i=0; i < numCols; i++){
                        var hw = $headerCells.eq(i).outerWidth(true);
                        var tw = $tableCells.eq(i).outerWidth(true);
                        if(hw != tw){
                            badReflow = true;
                            break;
                        }
                    }
                } else { 
                    $floatTable.append($header);
                    $table.css(layoutAuto);
                    $floatTable.css(layoutAuto);
                    setHeaderHeight();
                }
                return badReflow;
            };
            return flow;
        }

        /**
         * first performs initial calculations that we expect to not change when the table, window, or scrolling container are scrolled.
         * returns a function that calculates the floating container's top and left coords. takes into account if we are using page scrolling or inner scrolling
         * @return {Function}
         */
        function calculateFloatContainerPosFn(){
            var scrollingContainerTop = $scrollContainer.scrollTop();

            //this floatEnd calc was moved out of the returned function because we assume the table height doesnt change (otherwise we must reinit by calling calculateFloatContainerPosFn)
            var floatEnd;
            var tableContainerGap = 0;

            var floatContainerHeight = $floatContainer.height();
            var tableOffset = $table.offset();
            if(locked){
                var containerOffset = $scrollContainer.offset();
                tableContainerGap = tableOffset.top - containerOffset.top + scrollingContainerTop;
            } else {
                floatEnd = tableOffset.top - scrollingTop - floatContainerHeight + scrollingBottom + scrollbarOffset.horizontal;
            }
            var windowTop = $window.scrollTop();
            var windowLeft = $window.scrollLeft();
            var scrollContainerLeft =  $scrollContainer.scrollLeft();
            scrollingContainerTop = $scrollContainer.scrollTop();

   

            var positionFn =  function(eventType){
                
                if(eventType == 'windowScroll'){
                    windowTop = $window.scrollTop();
                    windowLeft = $window.scrollLeft();
                } else if(eventType == 'containerScroll'){
                    scrollingContainerTop = $scrollContainer.scrollTop();
                    scrollContainerLeft =  $scrollContainer.scrollLeft();
                } else if(eventType != 'init') {
                    windowTop = $window.scrollTop();
                    windowLeft = $window.scrollLeft();
                    scrollingContainerTop = $scrollContainer.scrollTop();
                    scrollContainerLeft =  $scrollContainer.scrollLeft();
                }
                if(absoluteToFixedOnScroll){
                    if(eventType == 'windowScrollDone'){
                        changePositioning(true); //change to absolute
                    } else {
                        changePositioning(false); //change to fixed
                    }
                } else if(eventType == 'windowScrollDone'){
                    return null; //event is fired when they stop scrolling. ignore it if not 'absoluteToFixedOnScroll'
                }

                tableOffset = $table.offset();
                var top, left, tableHeight;

                //absolute positioning
                if(locked && useAbsolutePositioning){ //inner scrolling
                    if (tableContainerGap >= scrollingContainerTop) {
                        var gap = tableContainerGap - scrollingContainerTop;
                        gap = gap > 0 ? gap : 0;
                        top = gap;
            //            unfloat(); //more trouble than its worth
                    } else {
                        top = wrappedContainer ? 0 : scrollingContainerTop;
            //            refloat(); //more trouble than its worth
                        //headers stop at the top of the viewport
                    }
                    left = 0;
                } else if(!locked && useAbsolutePositioning) { //window scrolling
                    tableHeight = $table.outerHeight();
                    if(windowTop > floatEnd + tableHeight){
                        top = tableHeight - floatContainerHeight; //scrolled past table
                    } else if (tableOffset.top > windowTop + scrollingTop) {
                        top = 0; //scrolling to table
                        unfloat();
                    } else {
                        top = scrollingTop + windowTop - tableOffset.top + tableContainerGap;
                        refloat(); //scrolling within table. header floated
                    }
                    left =  0;

                //fixed positioning:
                } else if(locked && !useAbsolutePositioning){ //inner scrolling
                    if (tableContainerGap > scrollingContainerTop) {
                        top = tableOffset.top - windowTop;
                        unfloat();
                    } else {
                        top = tableOffset.top + scrollingContainerTop  - windowTop - tableContainerGap;
                        refloat();
                        //headers stop at the top of the viewport
                    }
                    left = tableOffset.left + scrollContainerLeft - windowLeft;
                } else if(!locked && !useAbsolutePositioning) { //window scrolling
                    tableHeight = $table.outerHeight();
                    if(windowTop > floatEnd + tableHeight){
                        top = tableHeight + scrollingTop - windowTop + floatEnd; 
                        unfloat();
                    } else if (tableOffset.top > windowTop + scrollingTop) {
                        top = tableOffset.top - windowTop;
                        refloat();
                    } else {
                        top = scrollingTop;
                    }
                    left = tableOffset.left - windowLeft;
                }

                return {top: top, left: left};
            };
            return positionFn;
        }
        /**
         * returns a function that caches old floating container position and only updates css when the position changes
         * @return {Function}
         */
        function repositionFloatContainerFn(){
            var oldTop = null; 
            var oldLeft = null;
            var oldScrollLeft = null;
            return function(pos, setWidth, setHeight){
                if(pos != null && (oldTop != pos.top || oldLeft != pos.left)){
                    $floatContainer.css({
                        top: pos.top,
                        left: pos.left
                    });
                    oldTop = pos.top;
                    oldLeft = pos.left;
                }
                if(setWidth){
                    setFloatWidth();
                }
                if(setHeight){ 
                    setHeaderHeight();
                }
                var scrollLeft = $scrollContainer.scrollLeft();
                if(oldScrollLeft != scrollLeft){
                    $floatContainer.scrollLeft(scrollLeft);
                    oldScrollLeft = scrollLeft;
                }
            }
        }

        /**
         * checks if THIS table has scrollbars, and finds their widths
         */
        function calculateScrollBarSize(){ //this should happen after the floating table has been positioned
            if($scrollContainer.length){
                scrollbarOffset.horizontal = $scrollContainer.width() < $table.width() ? scWidth : 0; 
                scrollbarOffset.vertical =  $scrollContainer.height() < $table.height() ? scWidth: 0;
            }
        }
        //finish up. create all calculation functions and bind them to events
        calculateScrollBarSize();
        
        var flow = reflow();
        flow();
        var calculateFloatContainerPos = calculateFloatContainerPosFn();
        var repositionFloatContainer = repositionFloatContainerFn();
        
        repositionFloatContainer(calculateFloatContainerPos('init'), true, true); //this must come after reflow because reflow changes scrollLeft back to 0 when it rips out the thead
        
        var windowScrollDoneEvent = _.debounce(function(){
            repositionFloatContainer(calculateFloatContainerPos('windowScrollDone'), false);
        }, 300);

        var windowScrollEvent = function(){ 
            repositionFloatContainer(calculateFloatContainerPos('windowScroll'), false);
            windowScrollDoneEvent();
        };
        var containerScrollEvent = function(){ 
            repositionFloatContainer(calculateFloatContainerPos('containerScroll'), false);
        };
        
        var windowResizeEvent = function(){
            updateScrollingOffsets();
            calculateScrollBarSize();
            flow = reflow();
            var badReflow = flow();
            if(badReflow){
                flow();
            }
            calculateFloatContainerPos = calculateFloatContainerPosFn();
            repositionFloatContainer = repositionFloatContainerFn();
            repositionFloatContainer(calculateFloatContainerPos('resize'), true, true);
        };
        var reflowEvent = _.debounce(function(){
            calculateScrollBarSize();
            updateScrollingOffsets();
            flow = reflow();
            var badReflow = flow();
            if(badReflow){
                flow();
            }
            calculateFloatContainerPos = calculateFloatContainerPosFn();
            repositionFloatContainer(calculateFloatContainerPos('reflow'), true);
        }, 1);
        if(locked){ //internal scrolling
            if(useAbsolutePositioning){
                $scrollContainer.bind('scroll.floatTHead', containerScrollEvent);
            } else {
                $scrollContainer.bind('scroll.floatTHead', containerScrollEvent);
                $window.bind('scroll.floatTHead', windowScrollEvent);
            }
        } else { //window scrolling
            $window.bind('scroll.floatTHead', windowScrollEvent);
        }
        
        $window.bind('load.floatTHead', reflowEvent); //for tables with images
        
        windowResize(opts.debounceResizeMs, windowResizeEvent);
        $table.bind('reflow', reflowEvent);
        if(isDatatable($table)){
            $table
                  .bind('filter', reflowEvent)
                  .bind('sort',   reflowEvent)
                  .bind('page',   reflowEvent);
        }
        
        //attach some useful functions to the table. 
        $table.data('floatThead-attached', {
            destroy: function(){
                $table.css(layoutAuto);
                $tableColGroup.remove();
                $fthGrp.remove();
                $newHeader.replaceWith($header);
                $table.unbind('reflow');
                reflowEvent = windowResizeEvent = containerScrollEvent = windowScrollEvent = function() {};
                $scrollContainer.unbind('scroll.floatTHead');
                $floatContainer.remove();
                $table.data('floatThead-attached', false);
                floatTheadCreated--;
                if(floatTheadCreated == 0){
                    $window.unbind('scroll.floatTHead');
                    $window.unbind('resize.floatTHead');
                    $window.unbind('load.floatTHead');
                }
            },
            reflow: function(){
                reflowEvent();
            },
            setHeaderHeight: function(){
                setHeaderHeight();
            },
            getFloatContainer: function(){
                return $floatContainer;
            }
        });
        floatTheadCreated++;
    });
    return this;
};
})(jQuery);