New Result Menu Page JavaScript CSS

result-menu-v2.js

/*!
* file: result-menu-v2.js
* version: 1.0.2
* purpose: suport for FRIA
* license: GPL 3.0
*
*     F
*    * * *
*   *   *   G
*  *     * *   *
* E - - - H - - - I
*  *     * *         *
*   *   *   *           *
*    * *     *             *
*     D-------A---------------B
*              *
*              (C) Federgraph.de
*              
*/

var git; // global_index_table;  
var sot; // TableSort instance for the first table with class="sortable"

function TableSort(tab)
{
    this.g_pattern = new RegExp("(^| )g(\\d)+( |$)");

    this.upchar = String.fromCharCode(160, 9650);
    this.downchar = String.fromCharCode(160, 9660);
    this.spacechar = '';

    this.firstPass = 1;
    this.cc = 0; // current column

    this.tbody = tab.getElementsByTagName("tbody")[0];
    var thead = tab.getElementsByTagName("thead");
    if (thead.length == 0)
        return;

    this.ths = tab
       .getElementsByTagName("thead")[0]
       .getElementsByTagName("tr")[0]
       .getElementsByTagName("th");
    this.trs = this.tbody.getElementsByTagName("tr");

    this.rowCount = this.trs.length;
    this.colCount = this.ths.length;

    this.grid = new Array(this.rowCount);

    this.sortType = new Array(this.colCount);
    for (var s = 0; s < this.colCount; s++)
        this.sortType[s] = "u";

    this.sort = TableSort_Sort;
    this.reset = TableSort_Reset;

    for(var i = 0; i < this.ths.length; i++) 
    {
        var th = this.ths[i];
        th.colIndex = i;
        th.style.cursor = "pointer";
        th.tableSort = this;

        // attach to the th element
        th.onclick = function () {
            var temp = this.tableSort;
            var tempIndex = this.colIndex;
            if (tempIndex > -1)
            {                    
                if (temp != null)
                    temp.sort(tempIndex);
                else
                    alert("temp = null");
            }
        };

        // create invisible elements for holding the sort indicator char
        if (sot == null)
        {
            th.appendChild(document.createTextNode(this.spacechar));
        }
        th.lastChild.data = this.spacechar;
        this.cc = i;
    }
}

function TableSort_Sort(col) 
{   
    var r, c;
    var cc = this.cc;
    var tds, td, val, css, idx, gcol;

    if (this.firstPass == 1) 
    {
        // on firstPass run through all rows,
        // buffer the whole content of the table in grid[row, column] 
        // and initialize the sortType for each column
        for(r = 0; r < this.rowCount; r++) 
        {
            tds = this.trs[r].getElementsByTagName("td");
            this.grid[r] = new Array(this.colCount);

            for(c = 0; c < this.colCount; c++) 
            {
                td = tds[c];

                val = td.firstChild.nodeValue;
                css = td.className;
                idx = git[r][c];
                gcol = this.g_pattern.test(css);

                this.grid[r][c] = new Array(4);

                this.grid[r][c][0] = val;
                this.grid[r][c][1] = css;
                this.grid[r][c][2] = idx;
                this.grid[r][c][3] = gcol;
            }
        }
    }

    var sf; // sort_char_field

    sf = this.ths[this.cc].lastChild;
    // sort the grid (backend data container)
    if(col == cc && this.firstPass == 0) 
    { 
        // swap the sort indicator
        if (sf.data == this.downchar)
            sf.data = this.upchar;
        else
            sf.data = this.downchar;
    }
    else
    { 
        // remove the sort indicator from the old sort column
        if (cc >= 0 && cc < this.colCount)
            sf.data = this.spacechar;

        // update current column index variables
        this.cc = col;
        sf = this.ths[this.cc].lastChild;

        // and update the sort indicator of the now current column
        sf.data = this.upchar; // do not use sf, because this.cc has changed
    }

    // copy over data from the backend data store to the visible table cells
    var desc = sf.data == this.downchar;
    for(var row = 0; row < this.rowCount; row++) 
    {
        // swap direction if desc
        if (desc)
            r = this.rowCount - 1 - row;
        else
            r = row;

        tds = this.trs[r].getElementsByTagName("td");
        for(c = 0; c < this.colCount; c++) 
        {        	
            td = tds[c];
            idx = this.grid[row][col][2] - 1;
            css = this.grid[idx][c][1];
            val = this.grid[idx][c][0];
            gcol = this.grid[idx][c][3];

            td.firstChild.nodeValue = val;
            if (gcol)
                td.className = css;
        }
    }

    this.firstPass = 0;
}

function TableSort_Reset(col) 
{
    if (this.ths[0].click != "undefined")
        this.ths[0].click();
}

var tableSorter =
{
    init: function () {
        if (!tableSorter.browserTest())
            return;
        var tabs = tableSorter.getTables();
        for (var i = 0; i < tabs.length; i++)
        {
            sot = new TableSort(tabs[i]);
            break; // use first sortable table as the only one
        }
        git = tableSorter.getIndexTable();
    },

    browserTest: function () {
        var domEnabled = document.getElementsByTagName;
        if (domEnabled)
            domEnabled = document.getElementsByTagName('body')[0].appendChild;
        if (!domEnabled)
            return false;
        return true;
    },

    getTables: function () {
        var allTables = $("table");
        var sortableTables = new Array();
        for (var i = 0; i < allTables.length; i++) {
            if ($(allTables[i]).hasClass("sortable"))
                sortableTables[sortableTables.length] = allTables[i];
        }
        return sortableTables;
    },

    getIndexTable: function () {
        var jsonText = $("#index_table").children().first().html();
        var jsonObject = eval('(' + jsonText + ')');
        return jsonObject;
    }
};

var MenuCall =
{
    init: function () {

        $(".btn-bar").buttonset();

        // take care of links in sidebar
        // this depends on the 'theme'
        $("#sidebar ul li a").each(function () {
            
            oref = this["href"]; // original ref
            if (oref)
                $(this).attr("href",
                "javascript:MenuCall.downloadHtml('" + oref + "');");

        });

        // same for links in 'menu'
        // ( remove this if there is no menu )
        $("#content ul li ul li a").each(function () {

            oref = this["href"];
            if (oref)
                $(this).attr("href",
                "javascript:MenuCall.downloadHtml('" + oref + "');");

        });

        MenuCall.changeLayout(3);
    },

    downloadHtml: function (data) {
        $.ajax(
        {
            url: data,
            success: function (data) {
                MenuCall.showHtml(data);
            }
        });
    },

    showHtml: function (data) {
        $("#results").html(data);
        MenuCall.initTableSort(true);
        MenuCall.initRowHighlight();
    },

    initTableSort: function (all) {
        if (all)
            sot = null;
        if (tableSorter != 'undefined')
            tableSorter.init();
    },

    initRowHighlight: function () {
        $("table.fr tr").hover(
            function () { $(this).addClass("highlight"); },
            function () { $(this).removeClass("highlight"); }
        );
    },

    changeLayout: function (l) {
        var dw;
        var nw;
        if (l == 0)
            dw = 0;
        else if (l == 1)
            dw = 100;
        else if (l == 2)
            dw = 200;
        else if (l == 3)
            dw = 300;
        else if (l == 96) {
            $("#container").css('width', '96%');
            nw = $('#page').innerWidth();
            dw = nw - 950;
        }
        else if (l == 100) {
            $("#container").css('width', '100%');
            nw = $('#page').innerWidth();
            dw = nw - 950;
        }
        $("#container").css('width', 950 + dw);
        $("#content").css('width', 800 + dw);
        $("#slcHost").css('width', 800 + dw);
        $("#footer").css('width', 930 + dw);
    },

    hideTable: function () {
        $("#results").empty();
    }

};

$(document).ready(function() {
    MenuCall.init();
});