- Timestamp:
- 2010-08-24T17:14:44+12:00 (14 years ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
main/trunk/greenstone3/web/interfaces/oran/js/gui_div.js
r22676 r22768 1 //jQuery( function($) {2 //$('div.blockWrapper').iNestedSortable(3 // {4 // accept: 'block',5 // }6 //);7 //});8 1 9 2 console.log("Loading gui_div.js\n"); … … 109 102 110 103 $('div.gsf_template').children(".block,.table").slideUp(300); 111 //$('div.gsf_template .table').hide();112 //$('div.block').click(function() {113 //alert("I was clicked!");114 // $(this).children(".block").slideToggle('fast');115 // return false;116 //});117 118 119 //hide the all of the element with class msg_body120 //$(".gsf_template > table").hide();121 //toggle the componenet with class msg_body122 //$(".gsf_template").click(function()123 //{124 //alert("You clicked? " + $("this > .table"));125 //$(this).getElementsByTagName("table")[0].slideToggle(600);126 //});127 128 //$(".resizable").resizable({containment: 'parent', alsoResize:'parent'});129 130 //$('.tr').equalHeights();131 132 //$(".td").resizable({133 // alsoResize: 'parent',134 //containment: 'parent',135 // handles: 'e,s',136 // stop: function(event, ui) {137 // $(this).parent().parent().equalHeights();138 // }, });139 140 104 }); 141 105 142 106 /*******************************************************************************/ 143 107 144 function minimize_templates()145 {146 //$(".msg_body").hide();147 //var targetContent = $('.table');148 //targetContent.hide();149 //targetContent.parent().css('display','none');150 //targetContent.slideUp(300);151 //targetContent.parent().html('[+]');152 153 }154 155 108 function bind_all_sortables() 156 109 { 110 console.log('function bind_all_sortables()'); 157 111 bind_template_sortable(); 158 112 //bind_table_sortable(); … … 173 127 function bind_tables() 174 128 { 175 $('.tr').equalHeights(); 129 console.log('function bind_tables()'); 130 //$('.tr').resize_tables($(this)); //equalHeights(); 131 132 133 $('td').click(function () { 134 console.log('td click'); 135 return false; 136 }); 176 137 177 138 $(".td").resizable({ … … 180 141 handles: 'w,e', 181 142 stop: function(event, ui) { 182 $(this).parent().parent().equalHeights(); 143 console.log('Resize table on stop'); 144 resize_tables($(this)); 145 //$(this).parent().parent().equalHeights(); 183 146 }, }); 184 147 … … 186 149 accept: '.element_type_td', 187 150 tolerance: 'pointer', 188 activate: function(event, ui) { $(this).addClass("droppable_hl"); console.log("droppable activated")},189 deactivate: function(event, ui) { $(this).removeClass("droppable_hl"); console.log("droppable deactivated")},151 activate: function(event, ui) { $(this).addClass("droppable_hl");}, // console.log("droppable activated")}, 152 deactivate: function(event, ui) { $(this).removeClass("droppable_hl"); }, // console.log("droppable deactivated")}, 190 153 drop: function(event, ui) { 191 //alert("Something has been dropped on me!!"); 192 //$(this).addClass('ui-state-highlight').find('p').html('Dropped!'); 193 //var tr = this.parentNode.parentNode; //$(this).getElementsByTagName("tr")[0]; 154 var span = document.createElement("div"); 155 span.setAttribute("class","td"); 156 span.setAttribute("style","height:50px"); 157 span.setAttribute("style","display:block"); 194 158 var td = document.createElement("td"); 195 159 var div = document.createElement("div"); // class=\"td block\" title=\"td-div\""); 196 160 div.setAttribute("title","td-div"); 197 161 div.setAttribute("class","td block"); 162 div.setAttribute("style","margin-left:0px"); 198 163 div.setAttribute("width","25px"); 199 164 td.appendChild(div); 165 div.appendChild(span); 200 166 var sep = document.createElement("td"); 201 167 sep.setAttribute("class","droppable"); … … 204 170 $(this).after(td); 205 171 bind_tables(); 206 //bind_td_sortable(); 172 resize_tables($(this)); 173 bind_td_sortable(); 207 174 //bind_all_sortables(); 208 175 } … … 213 180 function replace_with(item, me) 214 181 { 215 /* 216 (item.parents('.table')).each(function(index) { 217 $(this).children().children().children('td').each(function() { 218 var sum = 0; 219 $(this).children('.block').each(function() { sum = sum + $(this).height(); } ); 220 console.log("My height is " + $(this).height() + ", sum height is " + sum); 221 }); 222 }); 223 */ 224 /* 225 alert(item.parents('.td').length); 226 227 (item.parents('.td')).each(function(index) { 228 $(this).children.each(function() 229 alert(index + " height is " + $(this).height()); // + $(this).style('height') + $(this).offsetHeight); 230 var h = $(this).height(); 231 var a = 0; 232 // if we are now the maximum then set to h otherwise ignore? 233 $(this).parents('.table').each(function() {$(this).children().children().children().each(function() { if($(this).height() > a) a = $(this).height(); } ) } ); 234 alert("A is " + a); 235 if( h > a) 236 { 237 h = h + 25; 238 alert("Increasing height to " + h); 239 $(this).height(h); 240 alert("height is now " + $(this).height()); 241 } 242 else 243 alert("height did not need increasing (h=" + h + ",a=" + a + ")"); 244 }); //forEach().css('height')); 245 */ 246 182 console.log('function replace_with(item, me)'); 247 183 item.replaceWith(me); //'<div class="element element-txt">This text box has been added!</div>'); 248 184 185 resize_tables(item); 186 187 bind_all_sortables(); 188 } 189 190 function resize_tables(item) 191 { 192 console.log('function resize_tables(item)'); 193 var max_height = 0; 249 194 (item.parents('.table')).each(function(index) { 250 195 $(this).children().children().children().each(function() { 251 var sum = 0; 252 $(this).children('.block').each(function() { sum = sum + $(this).height(); } ); 253 console.log("My height is " + $(this).height() + ", sum height is " + sum); 196 var sum_one = 0; 197 var sum_two = 0; 198 $(this).children('.block').each(function() { sum_one = sum_one + $(this).height(); 199 $(this).children('.block').each(function() { sum_two = sum_two + $(this).height(); } ); 200 console.log("My height is " + $(this).height() + ", sum height 2 is " + sum_two); 201 }); 202 console.log("My height is " + $(this).height() + ", sum height 1 is " + sum_one); 203 if (sum_two > max_height) 204 max_height = sum_two; 254 205 }); 255 206 }); 256 257 bind_all_sortables(); 207 equalHeights(item,max_height); 258 208 } 259 209 260 210 function bind_template_sortable() 261 211 { 212 console.log('function bind_template_sortable()'); 262 213 $('.gsf_template').sortable({ 263 214 'cursor':'pointer', 264 'tolerance': 'fit',265 215 'items':'.table, .gsf_choose_metadata, .gsf_metadata', 266 216 'placeholder':'placeholder', … … 276 226 }); 277 227 278 } 279 280 /* 281 function bind_table_sortable() 282 { 283 $('.table').sortable({ 228 $('.gsf_template').click(function () { 229 console.log('gsf_template class click'); 230 return false; 231 }); 232 233 } 234 235 function bind_td_sortable() 236 { 237 console.log('function bind_td_sortable()'); 238 $('.td').sortable({ 284 239 'cursor':'pointer', 285 240 'tolerance': 'pointer', 286 'items':'.tr', 287 'placeholder':'placeholder', 288 //'nested':'.gsf:metadata' 289 stop: function(event, ui) { 290 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_tr')) { replace_with(ui.item, "<tr class=\"tr\"></tr>"); } 291 } 292 293 }); 294 } 295 296 function bind_tr_sortable() 297 { 298 $('.tr').sortable({ 299 'cursor':'pointer', 300 'tolerance': 'pointer', 301 'items':'.td', 302 'placeholder':'placeholder', 303 //'nested':'.gsf:metadata' 304 stop: function(event, ui) { 305 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_td')) { replace_with(ui.item, "<td class=\"td\"></td>"); } 306 } 307 308 }); 309 } 310 311 */ 312 313 function bind_td_sortable() 314 { 315 $('.td').sortable({ 316 'cursor':'pointer', 317 'containment':'parent', 318 'tolerance': 'pointer', 319 'items':'.gsf_metadata, .gsf_choose_metadata, .gsf_link, .gsf_switch, .td', 241 'items':'.gsf_metadata, .gsf_choose_metadata, .gsf_link, .gsf_switch', 320 242 'placeholder':'placeholder', 321 243 //'nested':'.gsf:metadata' … … 323 245 stop: function(event, ui) { 324 246 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); } 325 /*if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_td')) {326 alert("Inserting td " + this.parentNode.parentNode + " " + $('.td').sortable( "widget" ));327 var tr = this.parentNode.parentNode; //$(this).getElementsByTagName("tr")[0];328 var td = document.createElement("td");329 var div = document.createElement("div"); // class=\"td block\" title=\"td-div\"");330 //var cls = document.createAttribute("class");331 div.setAttribute("title","td-div");332 div.setAttribute("class","td block");333 var span = document.createElement("div");334 span.setAttribute("class", "block gsf_metadata");335 span.setAttribute("style","height:50px");336 //div.setAttribute(cls,"block");337 div.appendChild(span);338 td.appendChild(div);339 tr.appendChild(td);340 ui.item.remove();341 bind_all_sortables();342 }*/343 247 344 248 } 345 249 346 250 }); 251 252 $('.td').click(function () { 253 console.log('td class click'); 254 return false; 255 }); 256 257 258 347 259 } 348 260 349 261 function bind_choose_metadata_sortable() 350 262 { 263 console.log('function bind_choose_metadata_sortable()'); 351 264 $('.gsf_choose_metadata').sortable({ 352 265 'cursor':'pointer', … … 364 277 function bind_link_sortable() 365 278 { 279 console.log('function bind_link_sortable()'); 366 280 $('.gsf_link').sortable({ 367 281 'cursor':'pointer', … … 378 292 function bind_switch_sortable() 379 293 { 294 console.log('function bind_switch_sortable()'); 380 295 $('.gsf_switch').sortable({ 381 296 'cursor':'pointer', … … 393 308 function bind_when_sortable() 394 309 { 310 console.log('function bind_when_sortable()'); 395 311 $('.gsf_when').sortable({ 396 312 'cursor':'pointer', … … 407 323 function bind_otherwise_sortable() 408 324 { 325 console.log('function bind_otherwise_sortable()'); 409 326 $('.gsf_otherwise').sortable({ 410 327 'cursor':'pointer', … … 422 339 function bind_block_mouseover() 423 340 { 341 console.log('function bind_block_mouseover()'); 424 342 $(".block").mouseover(function() 425 343 { 426 //alert("Mouse over event");427 344 $(this).parents().css("border", ""); 428 345 $(this).css("border", "1px solid blue"); … … 436 353 function bind_minmax_remove() 437 354 { 355 console.log('function bind_minmax_remove()'); 438 356 $('a.minmax').bind('click', toggleContent); 439 357 $('a.remove').bind('click', removeContent); … … 441 359 442 360 var removeContent = (function () { 443 //var parentTag = $(this).parent().get(0).titleName;444 // alert("Removing div " + parentTag);445 $(this).parent(). remove();361 console.log('var removeContent = (function ()'); 362 // this -> a -> td -> tr -> tbody -> table -> div 363 $(this).parent().parent().parent().parent().parent().remove(); 446 364 }); 447 365 … … 449 367 var toggleContent = function(e) 450 368 { 451 //var targetContent = $('div.block', this.parentNode); 452 //$(".msg_head").click(function() 453 //{ 454 //$(this).next(".block").slideToggle(600); 455 //}); 456 //alert($(this).html() + " " + $(this).css('display') + " " + targetContent.css('display')); 369 console.log('var toggleContent = function(e)'); 370 console.log('parent: ' + $(this).html()); 457 371 if ($(this).html() == '[+]'){ //targetContent.css('display') == 'none') { 458 //if ($(this).css('display') == 'none') { 459 // var targetContent2 = $('.table'); 460 // targetContent2.show(); 461 462 // targetContent.show(); 463 // targetContent.slideDown(300); 464 // alert("I should be sliding down! " + $(this).parent()); 465 $(this).parent().children(".block,.table").slideDown(300); 372 $(this).parent().parent().parent().parent().parent().children(".block,.table").slideDown(300); 466 373 $(this).html('[-]'); 374 $(this).removeClass("ui-icon-plusthick"); 375 $(this).addClass("ui-icon-minusthick"); 467 376 } else { 468 // targetContent.slideUp(300); 469 $(this).parent().children(".block,.table").slideUp(300); 377 $(this).parent().parent().parent().parent().parent().children(".block,.table").slideUp(300); 470 378 $(this).html('[+]'); 379 $(this).removeClass("ui-icon-minusthick"); 380 $(this).addClass("ui-icon-plusthick"); 471 381 } 472 //$(this).children(".block, .table").slideToggle('fast');473 382 return false; 474 383 }; … … 480 389 }; 481 390 482 /*-------------------------------------------------------------------- 483 * JQuery Plugin: "EqualHeights" 484 * by: Scott Jehl, Todd Parker, Maggie Costello Wachs (http://www.filamentgroup.com) 485 * 486 * Copyright (c) 2008 Filament Group 487 * Licensed under GPL (http://www.opensource.org/licenses/gpl-license.php) 488 * 489 * Description: Compares the heights or widths of the top-level children of a provided element 490 and sets their min-height to the tallest height (or width to widest width). Sets in em units 491 by default if pxToEm() method is available. 492 * Dependencies: jQuery library, pxToEm method (article: 493 http://www.filamentgroup.com/lab/retaining_scalable_interfaces_with_pixel_to_em_conversion/) 494 * Usage Example: $(element).equalHeights(); 495 Optional: to set min-height in px, pass a true argument: $(element).equalHeights(true); 496 * Version: 2.0, 08.01.2008 497 --------------------------------------------------------------------*/ 498 499 // Modified to get children of children ie. tr -> td -> div 500 501 $.fn.equalHeights = function(px) { 502 //console.log("EQUAL HEIGHTS"); 503 $(this).each(function(){ 504 var currentTallest = 0; 505 //console.log($(this).children()); 506 //console.log($(this).children().children()); 507 //$(this).children().children().each(function(i){ 508 // console.log($(this)); 509 // console.log("THIS HEIGHT="+$(this).height()+ " CURRENT TALLEST="+ currentTallest); 510 //if ($(this).height() > currentTallest) { currentTallest = $(this).height(); } 511 //if ($(this).height() > currentTallest) { currentTallest = $(this).height(); } 512 //}); 513 //if (!px || !Number.prototype.pxToEm) currentTallest = currentTallest.pxToEm(); //use ems unless px is specified 514 // for ie6, set height since min-height isn't supported 515 //if ($.browser.msie && $.browser.version == 6.0) { $(this).children().children().css({'height': $(this).currentTallest}); } 516 $(this).children().children().css({'height': $(this).height()}); //currentTallest}); 517 }); 518 return this; 391 function equalHeights(item, height) { 392 console.log('function equalHeights(item, height)'); 393 (item.parents('.table')).each(function(index) { 394 $(this).children().children().children().each(function() { 395 $(this).height(height); 396 $(this).children().height(height); 397 }); 398 }); 519 399 }; 520 400
Note:
See TracChangeset
for help on using the changeset viewer.