Changeset 1807

Show
Ignore:
Timestamp:
04-05-11 13:06:50 (3 years ago)
Author:
work@…
Message:

- developmental commit of table editor

Location:
trunk
Files:
2 modified

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