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

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