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

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