Changeset 1808


Ignore:
Timestamp:
May 4, 2011, 2:42:42 PM (6 years ago)
Author:
work@…
Message:
  • developmental commit of table editor
File:
1 edited

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',
Note: See TracChangeset for help on using the changeset viewer.