source: trunk/grails-app/views/studyWizard/common/_page_header.gsp @ 1807

Last change on this file since 1807 was 1807, checked in by work@…, 9 years ago
  • developmental commit of table editor
  • Property svn:keywords set to Rev Author Date
File size: 9.3 KB
Line 
1<%
2/**
3 * page header template
4 *
5 * This template is actually rendered by the AjaxflowTagLib using
6 * the following tags:
7 *
8 * <af:pageHeader>
9 *
10 * @author Jeroen Wesbeek
11 * @since  20101220
12 *
13 * Revision information:
14 * $Rev: 1807 $
15 * $Author: work@osx.eu $
16 * $Date: 2011-05-04 11:06:50 +0000 (wo, 04 mei 2011) $
17 */
18%>
19<g:hiddenField name="do" value="" />
20<h1><g:if test="${(study && study.getFieldValue('title'))}">${study.title}</g:if><g:else>${pages[page - 1].title}</g:else> (page ${page} of ${pages.size()})</h1>
21<g:render template="common/tabs"/>
22<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>
Note: See TracBrowser for help on using the repository browser.