source: main/trunk/greenstone3/web/interfaces/oran/js/gui_div.js@ 22676

Last change on this file since 22676 was 22676, checked in by sjb48, 14 years ago

Working on auto-resizing tables and column insertion. Partially working.
File size: 18.3 KB
Line 
1//jQuery( function($) {
2//$('div.blockWrapper').iNestedSortable(
3// {
4// accept: 'block',
5// }
6//);
7//});
8
9console.log("Loading gui_div.js\n");
10
11$(document).ready(function(){
12
13 console.log("Document ready function\n");
14
15 /******************************************/
16 /* DRAGGABLES */
17 /******************************************/
18
19 $(".element_type_gsf_template").draggable({
20 connectToSortable: '#formatStatement',
21 helper: 'clone',
22 revert: 'invalid'
23 });
24
25 $(".element_type_table").draggable({
26 connectToSortable: '.gsf_template',
27 helper: 'clone',
28 revert: 'invalid'
29 });
30
31 $(".element_type_tr").draggable({
32 connectToSortable: '.gsf_table',
33 helper: 'clone',
34 revert: 'invalid'
35 })
36
37 $(".element_type_td").draggable({
38 //connectToSortable: '.td',
39 helper: 'clone',
40 revert: 'invalid'
41 })
42
43 $(".element_type_text").draggable({
44 connectToSortable: '.gsf_otherwise',
45 helper: 'clone',
46 revert: 'invalid'
47 });
48
49 $(".element_type_gsf_choose_metadata").draggable({
50 connectToSortable: '.gsf_template',
51 helper: 'clone',
52 revert: 'invalid'
53 });
54
55 $(".element_type_gsf_metadata").draggable({
56 connectToSortable: '.gsf_choose_metadata, .gsf_template, .gsf_when, .gsf_otherwise, .td',
57 helper: 'clone',
58 revert: 'invalid'
59 });
60
61 $(".element_type_gsf_link").draggable({
62 connectToSortable: '.gsf_template',
63 helper: 'clone',
64 revert: 'invalid'
65 });
66
67 // switch, when, otherwise, icon
68 $(".element_type_gsf_switch").draggable({
69 connectToSortable: '.gsf_template',
70 helper: 'clone',
71 revert: 'invalid'
72 });
73
74 $(".element_type_gsf_when").draggable({
75 connectToSortable: '.gsf_switch',
76 helper: 'clone',
77 revert: 'invalid'
78 });
79
80 $(".element_type_gsf_otherwise").draggable({
81 connectToSortable: '.gsf_switch',
82 helper: 'clone',
83 revert: 'invalid'
84 });
85
86 $(".element_type_gsf_icon").draggable({
87 connectToSortable: '.gsf_link',
88 helper: 'clone',
89 revert: 'invalid'
90 });
91
92
93 /******************************************/
94 /* SORTABLES */
95 /******************************************/
96
97 bind_all_sortables();
98
99 $('#formatStatement').sortable({
100 cursor: 'pointer',
101 tolerance: 'pointer',
102 items: '.gsf_template',
103 placeholder:'placeholder',
104 //'nested':'div'
105 stop: function(event, ui) {
106 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('css_gsf_template')) { replace_with(ui.item,gsf_template_element); }
107 }
108 });
109
110 $('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_body
120 //$(".gsf_template > table").hide();
121 //toggle the componenet with class msg_body
122 //$(".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});
141
142/*******************************************************************************/
143
144function 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
155function bind_all_sortables()
156{
157 bind_template_sortable();
158 //bind_table_sortable();
159 //bind_tr_sortable();
160 //bind_td_sortable();
161 bind_choose_metadata_sortable();
162 bind_link_sortable();
163 bind_switch_sortable();
164 bind_when_sortable();
165 bind_otherwise_sortable();
166
167 bind_tables();
168
169 bind_block_mouseover();
170 bind_minmax_remove();
171}
172
173function bind_tables()
174{
175 $('.tr').equalHeights();
176
177 $(".td").resizable({
178 alsoResize: 'parent',
179 //containment: 'parent',
180 handles: 'w,e',
181 stop: function(event, ui) {
182 $(this).parent().parent().equalHeights();
183 }, });
184
185 $(".droppable").droppable({
186 accept: '.element_type_td',
187 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")},
190 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];
194 var td = document.createElement("td");
195 var div = document.createElement("div"); // class=\"td block\" title=\"td-div\"");
196 div.setAttribute("title","td-div");
197 div.setAttribute("class","td block");
198 div.setAttribute("width","25px");
199 td.appendChild(div);
200 var sep = document.createElement("td");
201 sep.setAttribute("class","droppable");
202 sep.setAttribute("width","10px");
203 $(this).after(sep);
204 $(this).after(td);
205 bind_tables();
206 //bind_td_sortable();
207 //bind_all_sortables();
208 }
209 });
210
211}
212
213function replace_with(item, me)
214{
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
247 item.replaceWith(me); //'<div class="element element-txt">This text box has been added!</div>');
248
249 (item.parents('.table')).each(function(index) {
250 $(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);
254 });
255 });
256
257 bind_all_sortables();
258}
259
260function bind_template_sortable()
261{
262 $('.gsf_template').sortable({
263 'cursor':'pointer',
264 'tolerance': 'fit',
265 'items':'.table, .gsf_choose_metadata, .gsf_metadata',
266 'placeholder':'placeholder',
267 //'nested':'.gsf:metadata'
268 stop: function(event, ui) {
269 //if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('css_table')) { replace_with(ui.item, "<table border=\"1\" width=\"100%\" height=\"50px\"><tr><td><div class=\"td block\" title=\"td-div\">XXXXXXXXXXXXXXXXXXXXXXXX</div></td></tr></table>"); }
270 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_table')) { replace_with(ui.item, "<table class=\"table\" border=\"2\"></table>"); }
271 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_choose_metadata')) { replace_with(ui.item, gsf_choose_metadata_element); }
272 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); }
273 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_link')) { replace_with(ui.item, gsf_link_element); }
274 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_switch')) { replace_with(ui.item, gsf_switch_element); }
275 }
276 });
277
278}
279
280/*
281function bind_table_sortable()
282{
283 $('.table').sortable({
284 'cursor':'pointer',
285 '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
296function 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
313function 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',
320 'placeholder':'placeholder',
321 //'nested':'.gsf:metadata'
322 receive: function(event, ui) { alert("Attempted to receive"); },
323 stop: function(event, ui) {
324 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
344 }
345
346 });
347}
348
349function bind_choose_metadata_sortable()
350{
351 $('.gsf_choose_metadata').sortable({
352 'cursor':'pointer',
353 'tolerance': 'fit',
354 'items':'.gsf_metadata',
355 'placeholder':'placeholder',
356 'connectWith':'.gsf_choose_metadata',
357 //'nested':'.gsf:metadata'
358 stop: function(event, ui) {
359 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); }
360 }
361 });
362}
363
364function bind_link_sortable()
365{
366 $('.gsf_link').sortable({
367 'cursor':'pointer',
368 'tolerance': 'pointer',
369 'items':'.gsf_icon',
370 'placeholder':'placeholder',
371 //'nested':'.gsf:metadata'
372 stop: function(event, ui) {
373 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_icon')) { replace_with(ui.item, gsf_icon_element); }
374 }
375 });
376}
377
378function bind_switch_sortable()
379{
380 $('.gsf_switch').sortable({
381 'cursor':'pointer',
382 'tolerance': 'pointer',
383 'items':'.gsf_metadata, .gsf_when, .gsf_otherwise',
384 'placeholder':'placeholder',
385 //'nested':'.gsf:metadata'
386 stop: function(event, ui) {
387 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_when')) { replace_with(ui.item, gsf_when_element); }
388 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_otherwise')) { replace_with(ui.item, gsf_otherwise_element); }
389 }
390 });
391}
392
393function bind_when_sortable()
394{
395 $('.gsf_when').sortable({
396 'cursor':'pointer',
397 'tolerance': 'pointer',
398 'items':'.leaf',
399 'placeholder':'placeholder',
400 //'nested':'.gsf:metadata'
401 stop: function(event, ui) {
402 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); }
403 }
404 });
405}
406
407function bind_otherwise_sortable()
408{
409 $('.gsf_otherwise').sortable({
410 'cursor':'pointer',
411 'tolerance': 'pointer',
412 'items':'.leaf',
413 'placeholder':'placeholder',
414 //'nested':'.gsf:metadata'
415 stop: function(event, ui) {
416 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); }
417 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_text')) { replace_with(ui.item, "<input type=\"text\" name=\"rawtextinput\" size=\"10\"/>"); }
418 }
419 });
420}
421
422function bind_block_mouseover()
423{
424 $(".block").mouseover(function()
425 {
426 //alert("Mouse over event");
427 $(this).parents().css("border", "");
428 $(this).css("border", "1px solid blue");
429 return false;
430 }).mouseout(function(){
431 $(this).css("border", "");
432 return false;
433 });
434}
435
436function bind_minmax_remove()
437{
438 $('a.minmax').bind('click', toggleContent);
439 $('a.remove').bind('click', removeContent);
440};
441
442var removeContent = (function () {
443 //var parentTag = $(this).parent().get(0).titleName;
444 //alert("Removing div " + parentTag);
445 $(this).parent().remove();
446 });
447
448
449var toggleContent = function(e)
450{
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'));
457 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);
466 $(this).html('[-]');
467 } else {
468 // targetContent.slideUp(300);
469 $(this).parent().children(".block,.table").slideUp(300);
470 $(this).html('[+]');
471 }
472 //$(this).children(".block, .table").slideToggle('fast');
473 return false;
474};
475
476function serialize(s)
477{
478 serial = $.SortSerialize(s);
479 alert(serial.hash);
480};
481
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;
519};
520
Note: See TracBrowser for help on using the repository browser.