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

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