Changeset 1807


Ignore:
Timestamp:
May 4, 2011, 1:06:50 PM (6 years ago)
Author:
work@…
Message:
  • developmental commit of table editor
Location:
trunk
Files:
2 edited

Legend:

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

    r1430 r1807  
    2121<g:render template="common/tabs"/>
    2222<div class="content">
     23<script type="text/javascript">
     24function TableEditor() {
     25}
     26TableEditor.prototype = {
     27    options : {
     28        tableIdentifier     :   'div.table',
     29        headerIdentifier    :   'div.header',
     30        rowIdentifier       :   'div.row',
     31        columnIdentifier    :   'div.column',
     32                initialize                      :       0
     33    },
     34    tempSelectElement           : null,
     35    tempSelectValue                     : '',
     36        allSelected                             : false,
     37
     38    /**
     39     * initialize object
     40     * @param options
     41     */
     42    init: function(options) {
     43        var that = this;
     44
     45        // set class parameters
     46        if (options) {
     47            $.each(options, function(key,value) {
     48                that.options[key] = value;
     49            });
     50        }
     51
     52        // intitialize tables
     53                $(this.options.tableIdentifier).each(function() {
     54                        that.initializeTable($(this));
     55                });
     56    },
     57
     58        initializeTable: function(table) {
     59                var that = this;
     60
     61                // handle key presses
     62                this.attachInputElements(table);
     63
     64                // Bind table wide mouseclicks (lighter implementation than
     65                // binding / unbinding select elements directly)
     66                // This only works for mozilla browsers, not for ie and
     67                 // webkit based browsers
     68                if ($.browser.mozilla) {
     69                        table.bind('click', function() {
     70                                var element = $('select:focus');
     71
     72                                // did we select a select element?
     73                                if (element.attr('type')) {
     74                                        that.tempSelectElement  = element;
     75                                        that.tempSelectValue    = $('option:selected',element).val();
     76                                }
     77                        });
     78                        table.bind('mouseup', function() {
     79                                var element = $('select:focus');
     80                                var type        = element.attr('type');
     81
     82                                // did we select a select element?
     83                                if (type) {
     84                                        var column      = element.parent();
     85                                        var row         = element.parent().parent();
     86                                        var value       = $('option:selected',element).val();
     87
     88                                        // has the element changed?
     89                                        if (that.tempSelectElement && element[0] == that.tempSelectElement[0] && that.tempSelectValue != value) {
     90                                                // replicate data
     91                                                that.replicateData(table,row,column,type,value);
     92                                        }
     93                                }
     94                        });
     95                }
     96
     97                // initialize selectable
     98                table.selectable({
     99                        filter: that.options.rowIdentifier,
     100                        selected: function(event, ui) {
     101                                that.cleanup(table);
     102
     103                                // on ie and webkit based browsers we need
     104                                // to handle mouse clicks differently
     105                                if (!$.browser.mozilla) {
     106                                        that.attachSelectElementsInRow(table, ui.selected);
     107                                }
     108                        },
     109                        unselected: function(event, ui) {
     110                                that.cleanup(table);
     111
     112                                // on ie and webkit based browsers we need
     113                                // to handle mouse clicks differently
     114                                if (!$.browser.mozilla) {
     115                                        that.detachColumnHandler(ui.unselected);
     116                                }
     117                        }
     118                });
     119
     120                // add 'select all' buttons
     121                this.addSelectAllButton(table);
     122        },
     123
     124        /**
     125         * handle keypresses anywhere inside this table
     126         * @param table
     127         */
     128        attachInputElements: function(table) {
     129                var that = this;
     130
     131                // bind keypresses anywhere in the table in
     132                // 1. select elements
     133                // 2. input elements
     134                table.bind('keyup.tableEditor', function(e) {
     135                        var element = $('input:focus,select:focus');
     136                        var type        = element.attr('type');
     137
     138                        if (element.attr('type')) {
     139                                var column      = element.parent();
     140                                var row         = element.parent().parent();
     141                                var value       = element.val();
     142
     143                                // replicate data
     144                                that.replicateData(table,row,column,type,value);
     145                        }
     146                });
     147        },
     148
     149        /**
     150         * attach event handlers for select elements in row
     151         * @param table
     152         * @param row
     153         */
     154        attachSelectElementsInRow: function(table, row) {
     155                var that = this;
     156
     157                // iterate through all select elements in the selected rows
     158                $('select', row).each(function() {
     159                        var element = $(this);
     160                        var type        = element.attr('type');
     161                        var column      = element.parent();
     162                        var row         = element.parent().parent();
     163
     164                        element.bind('change.tableEditor',function() {
     165                                // replicate data
     166                                var value = $('option:selected',element).val();
     167                                if (value) that.replicateData(table,row,column,type,value);
     168                        });
     169                });
     170        },
     171
     172        /**
     173         * detach event handlers for specific fields in row
     174         * @param row
     175         */
     176        detachColumnHandler: function(row) {
     177                $('select', row).each(function() {
     178                        // unbind table editor event handlers
     179                        $(this).unbind('.tableEditor');
     180                });
     181        },
     182
     183        /**
     184         * get the column number of a particular column in a row
     185         *
     186         * @param row
     187         * @param column
     188         * @return int
     189         */
     190        getColumnNumber: function(row, column) {
     191                var count = 0;
     192                var columnNumber = 0;
     193
     194                // find which column number we are
     195                row.children().each(function() {
     196                        var childColumn = $(this);
     197                        if (childColumn[0] == column[0]) {
     198                                columnNumber = count;
     199                        }
     200                        count++;
     201                });
     202
     203                return columnNumber;
     204        },
     205
     206        /**
     207         *
     208         */
     209        replicateData: function(table, row, column, type, value) {
     210                var that                        = this;
     211                var columnNumber        = this.getColumnNumber(row, column);
     212                var inputSelector       = "";
     213
     214                // determine inputSelector
     215                switch (type) {
     216                        case('text'):
     217                                inputSelector = 'input';
     218                                break;
     219                        case('select-one'):
     220                                inputSelector = 'select';
     221                                break;
     222                        default:
     223                                inputSelector = 'input';
     224                                break;
     225                }
     226
     227                // only replicate if source row is also selected
     228                if (row.hasClass('ui-selected') || row.hasClass('table-editor-selected')) {
     229                        console.log('replicating column '+columnNumber+' of type '+type+' : '+value);
     230
     231                        // find selected rows in this table
     232                        $('.ui-selected, .table-editor-selected', table).each(function() {
     233                                // don't replicate to source row
     234                                if ($(this)[0] != row[0]) {
     235                                        // find input elements
     236                                        $(that.options.columnIdentifier + ':eq(' + (columnNumber-1) + ') ' + inputSelector, $(this)).each(function() {
     237                                                // set value
     238                                                $(this).val(value);
     239                                        });
     240                                }
     241                        });
     242                }
     243        },
     244
     245        /**
     246         * insert a select all button in the first column of the header row
     247         * @param table
     248         */
     249        addSelectAllButton: function(table) {
     250                var that = this;
     251
     252        // insert a 'select all' element in the top-left header column
     253        var selectAllElement = $($(this.options.headerIdentifier + ':eq(0)', table ).find(':nth-child(1)')[0]);
     254        if (selectAllElement) {
     255            // set up the selectAll element
     256            selectAllElement
     257                .addClass('selectAll')
     258                .html('&nbsp;&nbsp;&nbsp;')
     259                .bind('mousedown',function() {
     260                    that.selectAll(table);
     261                });
     262
     263            // add a tooltip
     264            selectAllElement.qtip({
     265                content: 'leftMiddle',
     266                position: {
     267                    corner: {
     268                        tooltip: 'leftMiddle',
     269                        target: 'rightMiddle'
     270                    }
     271                },
     272                style: {
     273                    border: {
     274                        width: 5,
     275                        radius: 10
     276                    },
     277                    padding: 10,
     278                    textAlign: 'center',
     279                    tip: true,
     280                    name: 'blue'
     281                },
     282                content: "Click to select all rows in this table",
     283                show: 'mouseover',
     284                hide: 'mouseout',
     285                api: {
     286                    beforeShow: function() {
     287                        // not used at this moment
     288                    }
     289                }
     290            });
     291        }
     292        },
     293
     294    /**
     295     * select all rows in the table
     296     * @param table
     297     */
     298        selectAll: function(table) {
     299                var that = this;
     300
     301                // clean up the table
     302                this.cleanup(table);
     303
     304                // select and bind row
     305                $(this.options.rowIdentifier, table).each(function() {
     306                        var row = $(this);
     307                        row.addClass('table-editor-selected');
     308
     309                        // on ie and webkit based browsers we need
     310                        // to handle mouse clicks differently
     311                        if (!$.browser.mozilla) {
     312                                that.attachSelectElementsInRow(table, row);
     313                        }
     314                });
     315
     316                // and set flag
     317                this.allSelected = true;
     318        },
     319
     320        /**
     321         * check if the table needs cleanup
     322         * @param table
     323         */
     324        cleanup: function(table) {
     325                // check if all rows were selected
     326                if (this.allSelected) {
     327                        // yes, then we need to cleanup. If we only used the jquery-ui
     328                        // selector we wouldn't have to do so as it cleans up after
     329                        // itself. But as we cannot programatically hook into the selector
     330                        // we have to clean up ourselves. Perform a table cleanup and
     331                        // unbind every handler.
     332                        this.deselectAll(table);
     333                }
     334        },
     335
     336    /**
     337     * deselect all rows in the table
     338     * Note that this conflicts with the jquery selectable, so this is
     339     * NOT a user function, merely an 'underwater' function used for
     340     * consistency
     341     * @param table
     342     */
     343    deselectAll: function(table) {
     344        var that = this;
     345
     346        // cleanup rows
     347        $(this.options.rowIdentifier, table).each(function() {
     348            var row = $(this);
     349            row.removeClass('table-editor-selected');
     350
     351                        // on ie and webkit based browsers we need
     352                        // to handle mouse clicks differently
     353                        if (!$.browser.mozilla) {
     354                                that.detachColumnHandler(row);
     355                        }
     356        });
     357
     358        // and unset flag
     359        this.allSelected = false;
     360    }
     361}
     362
     363handleWizardTable();
     364new TableEditor().init({
     365        tableIdentifier : 'div.tableEditor',
     366        rowIdentifier   : 'div.row',
     367        columnIdentifier: 'div.column',
     368        headerIdentifier: 'div.header'
     369});
     370</script>
  • trunk/web-app/js/studywizard.js

    r1802 r1807  
    2626
    2727        // handle and initialize table(s)
     28        /*
    2829        handleWizardTable();
    2930        new TableEditor().init({
     
    3334                headerIdentifier: 'div.header'
    3435        });
     36        */
    3537
    3638        // initialize the ontology chooser
Note: See TracChangeset for help on using the changeset viewer.