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

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

Can now drag a metadata item and have it maintain selection
File size: 18.1 KB
Line 
1
2console.log("Loading gui_div.js\n");
3
4$(document).ready(function(){
5
6 console.log("Document ready function\n");
7
8 var CURRENT_SELECT_VALUE = "";
9
10 /******************************************/
11 /* DRAGGABLES */
12 /******************************************/
13
14 $(".element_type_gsf_template").draggable({
15 cursor: 'crosshair',
16 connectToSortable: '#formatStatement',
17 helper: 'clone',
18 revert: 'invalid'
19 });
20
21 $(".element_type_table").draggable({
22 cursor: 'crosshair',
23 connectToSortable: '.gsf_template',
24 helper: 'clone',
25 revert: 'invalid'
26 });
27
28 $(".element_type_tr").draggable({
29 cursor: 'crosshair',
30 connectToSortable: '.gsf_table',
31 helper: 'clone',
32 revert: 'invalid'
33 })
34
35 $(".element_type_td").draggable({
36 cursor: 'crosshair',
37 //connectToSortable: '.td',
38 helper: 'clone',
39 revert: 'invalid'
40 })
41
42 $(".element_type_text").draggable({
43 cursor: 'crosshair',
44 connectToSortable: '.gsf_otherwise, .gsf_link',
45 helper: 'clone',
46 revert: 'invalid'
47 });
48
49 $(".element_type_gsf_choose_metadata").draggable({
50 cursor: 'crosshair',
51 connectToSortable: '.td-div',
52 helper: 'clone',
53 revert: 'invalid'
54 });
55
56 //$(".element_type_gsf_metadata").draggable({
57 $(".draggable_gsf_metadata").draggable({
58 cursor: 'crosshair',
59 connectToSortable: '.gsf_choose_metadata, .gsf_when, .gsf_otherwise, .td-div',
60 helper: 'clone',
61 revert: 'invalid'
62 });
63
64 $(".draggable_gsf_link").draggable({
65 cursor: 'crosshair',
66 connectToSortable: '.td-div',
67 helper: 'clone',
68 revert: 'invalid'
69 });
70
71 // switch, when, otherwise, icon
72 $(".element_type_gsf_switch").draggable({
73 cursor: 'crosshair',
74 connectToSortable: '.td-div',
75 helper: 'clone',
76 revert: 'invalid'
77 });
78
79 $(".element_type_gsf_when").draggable({
80 cursor: 'crosshair',
81 connectToSortable: '.gsf_switch',
82 helper: 'clone',
83 revert: 'invalid'
84 });
85
86 $(".element_type_gsf_otherwise").draggable({
87 cursor: 'crosshair',
88 connectToSortable: '.gsf_switch',
89 helper: 'clone',
90 revert: 'invalid'
91 });
92
93 $(".element_type_gsf_icon").draggable({
94 cursor: 'crosshair',
95 connectToSortable: '.gsf_link',
96 helper: 'clone',
97 revert: 'invalid'
98 });
99
100
101 /******************************************/
102 /* SORTABLES */
103 /******************************************/
104
105 bind_td_sortable();
106 bind_all_sortables();
107
108 $('#formatStatement').sortable({
109 cursor: 'pointer',
110 tolerance: 'pointer',
111 items: '.gsf_template',
112 placeholder:'placeholder',
113 //'nested':'div'
114 stop: function(event, ui) {
115 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('css_gsf_template')) { replace_with(ui.item,gsf_template_element); }
116 }
117 });
118
119 $('div.gsf_template').children(".block,.table").slideUp(300);
120});
121
122/*******************************************************************************/
123
124function bind_all_sortables()
125{
126 console.log('function bind_all_sortables()');
127 bind_template_sortable();
128 //bind_table_sortable();
129 //bind_tr_sortable();
130 //bind_td_sortable();
131 bind_choose_metadata_sortable();
132 bind_link_sortable();
133 bind_switch_sortable();
134 bind_when_sortable();
135 bind_otherwise_sortable();
136
137 bind_tables();
138
139 bind_block_mouseover();
140 bind_minmax_remove();
141}
142
143function bind_tables()
144{
145 console.log('function bind_tables()');
146 //$('.tr').resize_tables($(this)); //equalHeights();
147
148
149 $('td').click(function () {
150 console.log('td click *');
151 return false;
152 });
153
154 $(".td-div").resizable({
155 alsoResize: 'parent',
156 //containment: 'parent',
157 handles: 'w,e',
158 stop: function(event, ui) {
159 console.log('Resize table on stop');
160 resize_tables($(this));
161 //$(this).parent().parent().equalHeights();
162 }, });
163
164 //$(".droppable").sortable({
165 // 'cursor':'pointer',
166 // 'tolerance': 'pointer',
167 // 'items':'.column, .td-div',
168 // 'placeholder':'placeholder'
169 //});
170
171 $(".droppable").droppable({
172 accept: '.element_type_td',
173 tolerance: 'pointer',
174 activate: function(event, ui) { $(this).addClass("droppable_hl");}, // console.log("droppable activated")},
175 deactivate: function(event, ui) { $(this).removeClass("droppable_hl"); }, // console.log("droppable deactivated")},
176 drop: function(event, ui) {
177 //if ($(this).hasClass("ui-draggable"))
178 //if (ui.helper.hasClass("ui-draggable"))
179 //{
180 var neverempty = document.createElement("div");
181 neverempty.setAttribute("class","neverempty block");
182 neverempty.setAttribute("style","height:50px");
183 neverempty.setAttribute("style","display:block");
184 var text = document.createTextNode('NEVER EMPTY');
185 neverempty.appendChild(text);
186 var td = document.createElement("td");
187 var div = document.createElement("div"); // class=\"td block\" title=\"td-div\"");
188 div.setAttribute("title","td-div");
189 div.setAttribute("class","td-div block");
190 div.setAttribute("style","margin-left:0px");
191 div.setAttribute("width","25px");
192 td.appendChild(div);
193 div.appendChild(neverempty);
194 var sep = document.createElement("td");
195 sep.setAttribute("class","droppable");
196 sep.setAttribute("width","10px");
197 $(this).after(sep);
198 $(this).after(td);
199 bind_tables();
200 resize_tables($(this));
201 bind_td_sortable();
202 bind_block_mouseover();
203 //bind_all_sortables();
204 //}
205 //else
206 //{
207 // console.log("Attempting to add");
208 //$(this).appendTo(ui.draggable[0]);
209 // $(this).prepend(ui.draggable[0]);
210 //$(ui.draggable[0]).appendTo($(this));
211 //}
212 }
213 });
214
215}
216
217function replace_with(item, me)
218{
219 // Search me for select
220 if(me.search("select") != -1)
221 {
222 // If select exists, then find CURRENT_SELECT_VALUE
223 var index = me.search(CURRENT_SELECT_VALUE);
224 if(index == -1)
225 console.log("Did not find " + CURRENT_SELECT_VALUE);
226 else
227 console.log("Found " + CURRENT_SELECT_VALUE + " at index " + index);
228 index = index + CURRENT_SELECT_VALUE.length + 1;
229 console.log("Attempt inserting select at new index "+index);
230 a = me.substring(0,index);
231 b = me.substring(index);
232 me = a.concat("selected",b);
233 }
234
235 //console.log('function replace_with(item, me)');
236 item.replaceWith(me); //'<div class="element element-txt">This text box has been added!</div>');
237 //item.find('select').attr("value", CURRENT_SELECT_VALUE);
238
239
240 //if(select != null){
241 // console.log("Attempting to select " + CURRENT_SELECT_VALUE);
242 // console.log("length = "+select.length);
243 // for(index = 0; index < select.length; index++) {
244 // console.log(select[index].value);
245 // if(select[index].value == CURRENT_SELECT_VALUE)
246 // console.log("Found "+CURRENT_SELECT_VALUE+" at index " + index);
247 // select.selectedIndex = index;
248 // }
249 // }
250
251 resize_tables(item);
252
253 bind_all_sortables();
254}
255
256function resize_tables(item)
257{
258 //console.log('function resize_tables(item)');
259 var max_height = 0;
260 (item.parents('.table')).each(function(index) {
261 $(this).children().children().children().each(function() {
262 var sum_one = 0;
263 var sum_two = 0;
264 $(this).children('.block').each(function() { sum_one = sum_one + $(this).height();
265 $(this).children('.block').each(function() { sum_two = sum_two + $(this).height(); } );
266 console.log("My height is " + $(this).height() + ", sum height 2 is " + sum_two);
267 });
268 console.log("My height is " + $(this).height() + ", sum height 1 is " + sum_one);
269 if (sum_two > max_height)
270 max_height = sum_two;
271 });
272 });
273 equalHeights(item,max_height);
274}
275
276function bind_template_sortable()
277{
278 //console.log('function bind_template_sortable()');
279 $('.gsf_template').sortable({
280 'cursor':'pointer',
281 'tolerance': 'pointer',
282 'items':'.table', //.gsf_choose_metadata, .gsf_metadata',
283 'placeholder':'placeholder',
284 //'nested':'.gsf:metadata'
285 stop: function(event, ui) {
286 //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>"); }
287 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_table')) { replace_with(ui.item, "<table class=\"table\" border=\"2\"></table>"); }
288 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_choose_metadata')) { replace_with(ui.item, gsf_choose_metadata_element); }
289 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); }
290 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_link')) { replace_with(ui.item, gsf_link_element); }
291 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_switch')) { replace_with(ui.item, gsf_switch_element); }
292 }
293 });
294
295 $('.gsf_template').click(function () {
296 console.log('gsf_template class click');
297 return false;
298 });
299
300}
301
302function bind_td_sortable()
303{
304
305 $('tr').sortable({
306 'cursor':'pointer',
307 'tolerance': 'intersect',
308 'items':'.column',
309 'placeholder':'placeholder_td',
310 'connectWith':'column'});
311
312 //$('.column').sortable({
313 // connectWith:['.column'],
314 // placeholder: 'placeholder',
315 // items:'td-div'
316 //});
317
318
319 //$('.column').sortable({
320 // 'cursor':'pointer',
321 // 'tolerance': 'pointer',
322 // 'items':'.td-div',
323 // 'placeholder':'placeholder',
324 // 'connectWith':'.column'
325 //'nested':'.gsf:metadata'
326 //receive: function(event, ui) { alert("Attempted to receive"); },
327 //stop: function(event, ui) {
328 // if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); }
329
330 //});
331
332 //console.log('function bind_td_sortable()');
333 $('.td-div').sortable({
334 'cursor':'pointer',
335 'tolerance': 'pointer',
336 'items':'.gsf_metadata, .gsf_choose_metadata, .gsf_link, .gsf_switch',
337 'placeholder':'placeholder',
338 //'connectWith':'.td-div',
339 //'nested':'.gsf:metadata'
340 receive: function(event, ui) { alert("Attempted to receive"); },
341 stop: function(event, ui) {
342 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); }
343
344 }
345
346 });
347
348 $('.td-div').click(function () {
349 //console.log('td class click');
350 return true;
351 });
352
353
354
355}
356
357
358function bind_choose_metadata_sortable()
359{
360 //console.log('function bind_choose_metadata_sortable()');
361 $('.gsf_choose_metadata').sortable({
362 'cursor':'pointer',
363 'tolerance': 'pointer',
364 'items':'.gsf_metadata, .gsf_default',
365 'placeholder':'placeholder',
366 'connectWith':'.gsf_choose_metadata',
367 //'nested':'.gsf:metadata'
368 stop: function(event, ui) {
369 //alert("STOP");
370 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_metadata')) {
371 console.log("Current select value = "+CURRENT_SELECT_VALUE);
372 var select = $(ui.item).find('select');
373 var value = select.attr("value");
374 console.log("We want this:"+value);
375
376 replace_with(ui.item, gsf_metadata_element);
377
378 }
379 bind_all_sortables();
380 }
381 });
382}
383
384function bind_link_sortable()
385{
386 //console.log('function bind_link_sortable()');
387 $('.gsf_link').sortable({
388 'cursor':'pointer',
389 'tolerance': 'pointer',
390 'items':'.gsf_icon, .gsf_text',
391 'placeholder':'placeholder',
392 'connectWith':'.gsf_link',
393 //'nested':'.gsf:metadata'
394 stop: function(event, ui) {
395 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_icon')) { replace_with(ui.item, gsf_icon_element); }
396 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_text')) { replace_with(ui.item, "<input type=\"text\" name=\"rawtextinput\" size=\"10\"/>"); }
397 }
398 });
399}
400
401function bind_switch_sortable()
402{
403 //console.log('function bind_switch_sortable()');
404 $('.gsf_switch').sortable({
405 'cursor':'pointer',
406 'tolerance': 'pointer',
407 'items':'.gsf_metadata, .gsf_when, .gsf_otherwise',
408 'placeholder':'placeholder',
409 'connectWith':'.gsf_switch',
410 //'nested':'.gsf:metadata'
411 stop: function(event, ui) {
412 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_when')) { replace_with(ui.item, gsf_when_element); }
413 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_otherwise')) { replace_with(ui.item, gsf_otherwise_element); }
414 }
415 });
416}
417
418function bind_when_sortable()
419{
420 //console.log('function bind_when_sortable()');
421 $('.gsf_when').sortable({
422 'cursor':'pointer',
423 'tolerance': 'pointer',
424 'items':'.leaf',
425 'placeholder':'placeholder',
426 //'nested':'.gsf:metadata'
427 stop: function(event, ui) {
428 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); }
429 }
430 });
431}
432
433function bind_otherwise_sortable()
434{
435 //console.log('function bind_otherwise_sortable()');
436 $('.gsf_otherwise').sortable({
437 'cursor':'pointer',
438 'tolerance': 'pointer',
439 'items':'.leaf',
440 'placeholder':'placeholder',
441 //'nested':'.gsf:metadata'
442 stop: function(event, ui) {
443 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); }
444 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_text')) { replace_with(ui.item, "<input type=\"text\" name=\"rawtextinput\" size=\"10\"/>"); }
445 }
446 });
447}
448
449function bind_block_mouseover()
450{
451 //console.log('function bind_block_mouseover()');
452 $(".block").mouseover(function()
453 {
454 $(this).parents().css("border", "");
455 $(this).css("border", "2px solid blue");
456 return false;
457 }).mouseout(function(){
458 $(this).css("border", "");
459 return false;
460 });
461}
462
463function bind_minmax_remove()
464{
465 console.log('function bind_minmax_remove()');
466 $('a.minmax').bind('click', toggleContent);
467 $('a.remove').bind('click', removeContent);
468};
469
470var removeContent = (function () {
471 //console.log('var removeContent = (function ()');
472 // this -> a -> td -> tr -> tbody -> table -> div
473 //$(this).parent().parent().parent().parent().parent().remove();
474 $(this).closest(".block").remove();
475 });
476
477
478var toggleContent = function(e)
479{
480 //console.log('var toggleContent = function(e)');
481 console.log('parent: ' + $(this).html());
482 if ($(this).html() == '[+]'){ //targetContent.css('display') == 'none') {
483 //$(this).parent().parent().parent().parent().parent().children(".block,.table").slideDown(300);
484 //$(this).parents().children(".block,.table").stopPropagation().slideDown(300);
485 //var x = $(this).parent().parent().parent().parent().parent();
486 //var y = $(this).parent().parent().parent().parent().parent().children(".block,.table");
487 //var z = $(this).closest(".block").children(".table, .block");
488 $(this).closest(".block").children(".table, .block").slideDown(300);
489 $(this).html('[-]');
490 $(this).removeClass("ui-icon-plusthick");
491 $(this).addClass("ui-icon-minusthick");
492 } else {
493 //$(this).parent().parent().parent().parent().parent().children(".block,.table").slideUp(300);
494 //$(this).parents().children(".block,.table").slideUp(300);
495 $(this).closest(".block").children(".table, .block").slideUp(300);
496 $(this).html('[+]');
497 $(this).removeClass("ui-icon-minusthick");
498 $(this).addClass("ui-icon-plusthick");
499 }
500 return false;
501};
502
503function serialize(s)
504{
505 serial = $.SortSerialize(s);
506 alert(serial.hash);
507};
508
509function equalHeights(item, height) {
510 //console.log('function equalHeights(item, height)');
511 (item.parents('.table')).each(function(index) {
512 $(this).children().children().children().each(function() {
513 $(this).height(height);
514 $(this).children().height(height);
515 });
516 });
517};
518
Note: See TracBrowser for help on using the repository browser.