Changeset 1808

Show
Ignore:
Timestamp:
04-05-11 14:42:42 (3 years ago)
Author:
work@…
Message:

- developmental commit of table editor

Files:
1 modified

Legend:

Unmodified
Added
Removed
  • trunk/grails-app/views/studyWizard/common/_page_header.gsp

    r1807 r1808  
    120120                // add 'select all' buttons 
    121121                this.addSelectAllButton(table); 
     122 
     123                // style the table 
     124                this.resizeTableColumns(table); 
     125 
     126                // make sure the header stays in view when scrolling up or down 
     127                this.keepHeaderInView(table); 
    122128        }, 
    123129 
     
    358364        // and unset flag 
    359365        this.allSelected = false; 
    360     } 
     366    }, 
     367 
     368    /** 
     369     * resize the table columns so that they lineup properly 
     370     * @param table 
     371         */ 
     372    resizeTableColumns: function(table) { 
     373                var header      = $(this.options.headerIdentifier, table); 
     374                var width       = 20;           // default column width 
     375                var column      = 0; 
     376                var columns     = []; 
     377                var resized     = []; 
     378 
     379                // calculate total width of elements in header 
     380                header.children().each(function() { 
     381                        // calculate width per column 
     382                        var c = $(this); 
     383 
     384                        // if a column header contains help icons / helptext, make sure 
     385                        // to handle them before initializing the table otherwise the 
     386                        // widths are calculations are off... 
     387                        var columnWidth = c.outerWidth(true); 
     388 
     389            width += columnWidth; 
     390 
     391                        // remember column 
     392                        resized[ column ] = (c.attr('rel') == 'resized'); 
     393                        columns[ column ] = c.width(); 
     394                        column++; 
     395                }); 
     396 
     397                console.log(columns); 
     398 
     399                // resize the header 
     400                header.css({ width: width + 'px' }); 
     401 
     402                // set table row width and assume column widths are 
     403                // identical to those in the header (css!) 
     404                $(this.options.rowIdentifier, table).each(function() { 
     405                        var row = $(this); 
     406                        var column = 0; 
     407                        row.children().each(function() { 
     408                                var child = $(this); 
     409                                child.css({ width: columns[ column] + 'px' }); 
     410                                if (resized[ column ]) { 
     411                                        $(':input', child).each(function() { 
     412                                                $(this).css({width: (columns[ column ] - 10) + 'px'}); 
     413                                        }); 
     414                                } 
     415                                column++; 
     416                        }); 
     417                        row.css({ width: width + 'px' }); 
     418                }); 
     419 
     420                // add sliders? 
     421                if (header.width() > table.width()) { 
     422                        // yes, add a top and a bottom slider 
     423            this.addSlider(table, 'before'); 
     424            this.addSlider(table, 'after'); 
     425                } 
     426    }, 
     427 
     428        /** 
     429         * add a slider to a table (either before or after the table) 
     430         * @param table 
     431         * @param location 
     432         */ 
     433        addSlider: function(table, location) { 
     434                var that        = this; 
     435                var header      = $(this.options.headerIdentifier, table); 
     436                var sliderContainer = $(document.createElement('div')); 
     437 
     438                // add to table 
     439                sliderContainer.addClass('sliderContainer'); 
     440 
     441                // where? 
     442                if (location == 'before') { 
     443                        table.before(sliderContainer); 
     444                } else { 
     445                        table.after(sliderContainer); 
     446                } 
     447 
     448                // initialize slider 
     449                sliderContainer.slider({ 
     450                        value   : 1, 
     451                        min             : 1, 
     452                        max             : header.width() - table.width(), 
     453                        step    : 1, 
     454                        slide   : function(event, ui) { 
     455                                $(that.options.headerIdentifier + ', ' + that.options.rowIdentifier, table).css({ 'margin-left': ( 1 - ui.value ) + 'px' }); 
     456                        } 
     457                }); 
     458        }, 
     459 
     460        keepHeaderInView: function(table) { 
     461        $('window').scroll(function() { 
     462                console.log('scrolling...'); 
     463        }); 
     464        } 
    361465} 
    362466 
    363 handleWizardTable(); 
     467attachHelpTooltips(); 
    364468new TableEditor().init({ 
    365469        tableIdentifier : 'div.tableEditor',