Changeset 1809 for trunk/grails-app
- Timestamp:
- May 4, 2011, 3:20:28 PM (10 years ago)
- Location:
- trunk/grails-app/views/studyWizard
- Files:
-
- 7 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/grails-app/views/studyWizard/common/_page_header.gsp
r1808 r1809 21 21 <g:render template="common/tabs"/> 22 22 <div class="content"> 23 <script type="text/javascript">24 function TableEditor() {25 }26 TableEditor.prototype = {27 options : {28 tableIdentifier : 'div.table',29 headerIdentifier : 'div.header',30 rowIdentifier : 'div.row',31 columnIdentifier : 'div.column',32 initialize : 033 },34 tempSelectElement : null,35 tempSelectValue : '',36 allSelected : false,37 38 /**39 * initialize object40 * @param options41 */42 init: function(options) {43 var that = this;44 45 // set class parameters46 if (options) {47 $.each(options, function(key,value) {48 that.options[key] = value;49 });50 }51 52 // intitialize tables53 $(this.options.tableIdentifier).each(function() {54 that.initializeTable($(this));55 });56 },57 58 initializeTable: function(table) {59 var that = this;60 61 // handle key presses62 this.attachInputElements(table);63 64 // Bind table wide mouseclicks (lighter implementation than65 // binding / unbinding select elements directly)66 // This only works for mozilla browsers, not for ie and67 // webkit based browsers68 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 data91 that.replicateData(table,row,column,type,value);92 }93 }94 });95 }96 97 // initialize selectable98 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 need104 // to handle mouse clicks differently105 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 need113 // to handle mouse clicks differently114 if (!$.browser.mozilla) {115 that.detachColumnHandler(ui.unselected);116 }117 }118 });119 120 // add 'select all' buttons121 this.addSelectAllButton(table);122 123 // style the table124 this.resizeTableColumns(table);125 126 // make sure the header stays in view when scrolling up or down127 this.keepHeaderInView(table);128 },129 130 /**131 * handle keypresses anywhere inside this table132 * @param table133 */134 attachInputElements: function(table) {135 var that = this;136 137 // bind keypresses anywhere in the table in138 // 1. select elements139 // 2. input elements140 table.bind('keyup.tableEditor', function(e) {141 var element = $('input:focus,select:focus');142 var type = element.attr('type');143 144 if (element.attr('type')) {145 var column = element.parent();146 var row = element.parent().parent();147 var value = element.val();148 149 // replicate data150 that.replicateData(table,row,column,type,value);151 }152 });153 },154 155 /**156 * attach event handlers for select elements in row157 * @param table158 * @param row159 */160 attachSelectElementsInRow: function(table, row) {161 var that = this;162 163 // iterate through all select elements in the selected rows164 $('select', row).each(function() {165 var element = $(this);166 var type = element.attr('type');167 var column = element.parent();168 var row = element.parent().parent();169 170 element.bind('change.tableEditor',function() {171 // replicate data172 var value = $('option:selected',element).val();173 if (value) that.replicateData(table,row,column,type,value);174 });175 });176 },177 178 /**179 * detach event handlers for specific fields in row180 * @param row181 */182 detachColumnHandler: function(row) {183 $('select', row).each(function() {184 // unbind table editor event handlers185 $(this).unbind('.tableEditor');186 });187 },188 189 /**190 * get the column number of a particular column in a row191 *192 * @param row193 * @param column194 * @return int195 */196 getColumnNumber: function(row, column) {197 var count = 0;198 var columnNumber = 0;199 200 // find which column number we are201 row.children().each(function() {202 var childColumn = $(this);203 if (childColumn[0] == column[0]) {204 columnNumber = count;205 }206 count++;207 });208 209 return columnNumber;210 },211 212 /**213 *214 */215 replicateData: function(table, row, column, type, value) {216 var that = this;217 var columnNumber = this.getColumnNumber(row, column);218 var inputSelector = "";219 220 // determine inputSelector221 switch (type) {222 case('text'):223 inputSelector = 'input';224 break;225 case('select-one'):226 inputSelector = 'select';227 break;228 default:229 inputSelector = 'input';230 break;231 }232 233 // only replicate if source row is also selected234 if (row.hasClass('ui-selected') || row.hasClass('table-editor-selected')) {235 console.log('replicating column '+columnNumber+' of type '+type+' : '+value);236 237 // find selected rows in this table238 $('.ui-selected, .table-editor-selected', table).each(function() {239 // don't replicate to source row240 if ($(this)[0] != row[0]) {241 // find input elements242 $(that.options.columnIdentifier + ':eq(' + (columnNumber-1) + ') ' + inputSelector, $(this)).each(function() {243 // set value244 $(this).val(value);245 });246 }247 });248 }249 },250 251 /**252 * insert a select all button in the first column of the header row253 * @param table254 */255 addSelectAllButton: function(table) {256 var that = this;257 258 // insert a 'select all' element in the top-left header column259 var selectAllElement = $($(this.options.headerIdentifier + ':eq(0)', table ).find(':nth-child(1)')[0]);260 if (selectAllElement) {261 // set up the selectAll element262 selectAllElement263 .addClass('selectAll')264 .html(' ')265 .bind('mousedown',function() {266 that.selectAll(table);267 });268 269 // add a tooltip270 selectAllElement.qtip({271 content: 'leftMiddle',272 position: {273 corner: {274 tooltip: 'leftMiddle',275 target: 'rightMiddle'276 }277 },278 style: {279 border: {280 width: 5,281 radius: 10282 },283 padding: 10,284 textAlign: 'center',285 tip: true,286 name: 'blue'287 },288 content: "Click to select all rows in this table",289 show: 'mouseover',290 hide: 'mouseout',291 api: {292 beforeShow: function() {293 // not used at this moment294 }295 }296 });297 }298 },299 300 /**301 * select all rows in the table302 * @param table303 */304 selectAll: function(table) {305 var that = this;306 307 // clean up the table308 this.cleanup(table);309 310 // select and bind row311 $(this.options.rowIdentifier, table).each(function() {312 var row = $(this);313 row.addClass('table-editor-selected');314 315 // on ie and webkit based browsers we need316 // to handle mouse clicks differently317 if (!$.browser.mozilla) {318 that.attachSelectElementsInRow(table, row);319 }320 });321 322 // and set flag323 this.allSelected = true;324 },325 326 /**327 * check if the table needs cleanup328 * @param table329 */330 cleanup: function(table) {331 // check if all rows were selected332 if (this.allSelected) {333 // yes, then we need to cleanup. If we only used the jquery-ui334 // selector we wouldn't have to do so as it cleans up after335 // itself. But as we cannot programatically hook into the selector336 // we have to clean up ourselves. Perform a table cleanup and337 // unbind every handler.338 this.deselectAll(table);339 }340 },341 342 /**343 * deselect all rows in the table344 * Note that this conflicts with the jquery selectable, so this is345 * NOT a user function, merely an 'underwater' function used for346 * consistency347 * @param table348 */349 deselectAll: function(table) {350 var that = this;351 352 // cleanup rows353 $(this.options.rowIdentifier, table).each(function() {354 var row = $(this);355 row.removeClass('table-editor-selected');356 357 // on ie and webkit based browsers we need358 // to handle mouse clicks differently359 if (!$.browser.mozilla) {360 that.detachColumnHandler(row);361 }362 });363 364 // and unset flag365 this.allSelected = false;366 },367 368 /**369 * resize the table columns so that they lineup properly370 * @param table371 */372 resizeTableColumns: function(table) {373 var header = $(this.options.headerIdentifier, table);374 var width = 20; // default column width375 var column = 0;376 var columns = [];377 var resized = [];378 379 // calculate total width of elements in header380 header.children().each(function() {381 // calculate width per column382 var c = $(this);383 384 // if a column header contains help icons / helptext, make sure385 // to handle them before initializing the table otherwise the386 // widths are calculations are off...387 var columnWidth = c.outerWidth(true);388 389 width += columnWidth;390 391 // remember column392 resized[ column ] = (c.attr('rel') == 'resized');393 columns[ column ] = c.width();394 column++;395 });396 397 console.log(columns);398 399 // resize the header400 header.css({ width: width + 'px' });401 402 // set table row width and assume column widths are403 // 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 slider423 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 table431 * @param location432 */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 table439 sliderContainer.addClass('sliderContainer');440 441 // where?442 if (location == 'before') {443 table.before(sliderContainer);444 } else {445 table.after(sliderContainer);446 }447 448 // initialize slider449 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 }465 }466 467 attachHelpTooltips();468 new TableEditor().init({469 tableIdentifier : 'div.tableEditor',470 rowIdentifier : 'div.row',471 columnIdentifier: 'div.column',472 headerIdentifier: 'div.header'473 });474 </script> -
trunk/grails-app/views/studyWizard/pages/_assay_groups.gsp
r1430 r1809 61 61 </g:each> 62 62 </div> 63 <div class="sliderContainer">64 <div class="slider" ></div>65 </div>66 63 </g:if> 67 64 -
trunk/grails-app/views/studyWizard/pages/_assays.gsp
r1566 r1809 56 56 </g:each> 57 57 </div> 58 <div class="sliderContainer">59 <div class="slider"></div>60 </div>61 58 </g:each> 62 59 </g:if> -
trunk/grails-app/views/studyWizard/pages/_events.gsp
r1782 r1809 138 138 </g:each> 139 139 </div> 140 <div class="sliderContainer">141 <div class="slider"></div>142 </div>143 140 </g:each> 144 141 </g:if> -
trunk/grails-app/views/studyWizard/pages/_groups.gsp
r1430 r1809 76 76 </g:each> 77 77 </div> 78 <div class="sliderContainer">79 <div class="slider" ></div>80 </div>81 78 82 79 </af:page> -
trunk/grails-app/views/studyWizard/pages/_samples.gsp
r1591 r1809 85 85 </g:each> 86 86 </div> 87 <div class="sliderContainer">88 <div class="slider" ></div>89 </div>90 87 </g:if> 91 88 … … 140 137 </g:each> 141 138 </div> 142 <div class="sliderContainer">143 <div class="slider" ></div>144 </div>145 139 </g:each> 146 140 </g:if> -
trunk/grails-app/views/studyWizard/pages/_subjects.gsp
r1793 r1809 60 60 </g:each> 61 61 </div> 62 <div class="sliderContainer">63 <div class="slider" ></div>64 </div>65 62 </g:each> 66 63 </g:if>
Note: See TracChangeset
for help on using the changeset viewer.