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

Last change on this file since 22987 was 22987, checked in by sjb48, 14 years ago
File size: 14.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 /******************************************/
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 'tolerance': 'pointer',
220 'items':'.table', //.gsf_choose_metadata, .gsf_metadata',
221 'placeholder':'placeholder',
222 //'nested':'.gsf:metadata'
223 stop: function(event, ui) {
224 //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>"); }
225 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_table')) { replace_with(ui.item, "<table class=\"table\" border=\"2\"></table>"); }
226 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_choose_metadata')) { replace_with(ui.item, gsf_choose_metadata_element); }
227 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); }
228 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_link')) { replace_with(ui.item, gsf_link_element); }
229 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_switch')) { replace_with(ui.item, gsf_switch_element); }
230 }
231 });
232
233 $('.gsf_template').click(function () {
234 console.log('gsf_template class click');
235 return false;
236 });
237
238}
239
240function bind_td_sortable()
241{
242 //console.log('function bind_td_sortable()');
243 $('.td-div').sortable({
244 'cursor':'pointer',
245 'tolerance': 'pointer',
246 'items':'.gsf_metadata, .gsf_choose_metadata, .gsf_link, .gsf_switch',
247 'placeholder':'placeholder',
248 'connectWith':'.td-div',
249 //'nested':'.gsf:metadata'
250 receive: function(event, ui) { alert("Attempted to receive"); },
251 stop: function(event, ui) {
252 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); }
253
254 }
255
256 });
257
258 $('.td-div').click(function () {
259 //console.log('td class click');
260 return true;
261 });
262
263
264
265}
266
267
268function bind_choose_metadata_sortable()
269{
270 //console.log('function bind_choose_metadata_sortable()');
271 $('.gsf_choose_metadata').sortable({
272 'cursor':'pointer',
273 'tolerance': 'pointer',
274 'items':'.gsf_metadata, .gsf_default',
275 'placeholder':'placeholder',
276 'connectWith':'.gsf_choose_metadata',
277 //'nested':'.gsf:metadata'
278 stop: function(event, ui) {
279 //alert("STOP");
280 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); }
281 }
282 });
283}
284
285function bind_link_sortable()
286{
287 //console.log('function bind_link_sortable()');
288 $('.gsf_link').sortable({
289 'cursor':'pointer',
290 'tolerance': 'pointer',
291 'items':'.gsf_icon, .gsf_text',
292 'placeholder':'placeholder',
293 'connectWith':'.gsf_link',
294 //'nested':'.gsf:metadata'
295 stop: function(event, ui) {
296 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_icon')) { replace_with(ui.item, gsf_icon_element); }
297 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_text')) { replace_with(ui.item, "<input type=\"text\" name=\"rawtextinput\" size=\"10\"/>"); }
298 }
299 });
300}
301
302function bind_switch_sortable()
303{
304 //console.log('function bind_switch_sortable()');
305 $('.gsf_switch').sortable({
306 'cursor':'pointer',
307 'tolerance': 'pointer',
308 'items':'.gsf_metadata, .gsf_when, .gsf_otherwise',
309 'placeholder':'placeholder',
310 'connectWith':'.gsf_switch',
311 //'nested':'.gsf:metadata'
312 stop: function(event, ui) {
313 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_when')) { replace_with(ui.item, gsf_when_element); }
314 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_otherwise')) { replace_with(ui.item, gsf_otherwise_element); }
315 }
316 });
317}
318
319function bind_when_sortable()
320{
321 //console.log('function bind_when_sortable()');
322 $('.gsf_when').sortable({
323 'cursor':'pointer',
324 'tolerance': 'pointer',
325 'items':'.leaf',
326 'placeholder':'placeholder',
327 //'nested':'.gsf:metadata'
328 stop: function(event, ui) {
329 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); }
330 }
331 });
332}
333
334function bind_otherwise_sortable()
335{
336 //console.log('function bind_otherwise_sortable()');
337 $('.gsf_otherwise').sortable({
338 'cursor':'pointer',
339 'tolerance': 'pointer',
340 'items':'.leaf',
341 'placeholder':'placeholder',
342 //'nested':'.gsf:metadata'
343 stop: function(event, ui) {
344 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); }
345 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_text')) { replace_with(ui.item, "<input type=\"text\" name=\"rawtextinput\" size=\"10\"/>"); }
346 }
347 });
348}
349
350function bind_block_mouseover()
351{
352 //console.log('function bind_block_mouseover()');
353 $(".block").mouseover(function()
354 {
355 $(this).parents().css("border", "");
356 $(this).css("border", "1px solid blue");
357 return false;
358 }).mouseout(function(){
359 $(this).css("border", "");
360 return false;
361 });
362}
363
364function bind_minmax_remove()
365{
366 console.log('function bind_minmax_remove()');
367 $('a.minmax').bind('click', toggleContent);
368 $('a.remove').bind('click', removeContent);
369};
370
371var removeContent = (function () {
372 //console.log('var removeContent = (function ()');
373 // this -> a -> td -> tr -> tbody -> table -> div
374 $(this).parent().parent().parent().parent().parent().remove();
375 });
376
377
378var toggleContent = function(e)
379{
380 //console.log('var toggleContent = function(e)');
381 console.log('parent: ' + $(this).html());
382 if ($(this).html() == '[+]'){ //targetContent.css('display') == 'none') {
383 $(this).parent().parent().parent().parent().parent().children(".block,.table").slideDown(300);
384 $(this).html('[-]');
385 $(this).removeClass("ui-icon-plusthick");
386 $(this).addClass("ui-icon-minusthick");
387 } else {
388 $(this).parent().parent().parent().parent().parent().children(".block,.table").slideUp(300);
389 $(this).html('[+]');
390 $(this).removeClass("ui-icon-minusthick");
391 $(this).addClass("ui-icon-plusthick");
392 }
393 return false;
394};
395
396function serialize(s)
397{
398 serial = $.SortSerialize(s);
399 alert(serial.hash);
400};
401
402function equalHeights(item, height) {
403 //console.log('function equalHeights(item, height)');
404 (item.parents('.table')).each(function(index) {
405 $(this).children().children().children().each(function() {
406 $(this).height(height);
407 $(this).children().height(height);
408 });
409 });
410};
411
Note: See TracBrowser for help on using the repository browser.