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

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

More work on format statements. New elements can now be added by dragging in to the sortables. Javascript is now more modular.
File size: 12.1 KB
Line 
1//jQuery( function($) {
2//$('div.blockWrapper').iNestedSortable(
3// {
4// accept: 'block',
5// }
6//);
7//});
8
9console.log("Loading gui_div.js\n");
10
11$(document).ready(function(){
12
13 console.log("Document ready function\n");
14
15 /******************************************/
16 /* DRAGGABLES */
17 /******************************************/
18
19 $(".element_type_gsf_template").draggable({
20 connectToSortable: '#formatStatement',
21 helper: 'clone',
22 revert: 'invalid'
23 });
24
25 $(".element_type_table").draggable({
26 connectToSortable: '.gsf_template',
27 helper: 'clone',
28 revert: 'invalid'
29 });
30
31 $(".element_type_tr").draggable({
32 connectToSortable: '.gsf_table',
33 helper: 'clone',
34 revert: 'invalid'
35 })
36
37 $(".element_type_td").draggable({
38 connectToSortable: '.gsf_table',
39 helper: 'clone',
40 revert: 'invalid'
41 })
42
43 $(".element_type_text").draggable({
44 connectToSortable: '.gsf_otherwise',
45 helper: 'clone',
46 revert: 'invalid'
47 });
48
49 $(".element_type_gsf_choose_metadata").draggable({
50 connectToSortable: '.gsf_template',
51 helper: 'clone',
52 revert: 'invalid'
53 });
54
55 $(".element_type_gsf_metadata").draggable({
56 connectToSortable: '.gsf_choose_metadata, .gsf_template, .gsf_when, .gsf_otherwise, .td',
57 helper: 'clone',
58 revert: 'invalid'
59 });
60
61 $(".element_type_gsf_link").draggable({
62 connectToSortable: '.gsf_template',
63 helper: 'clone',
64 revert: 'invalid'
65 });
66
67 // switch, when, otherwise, icon
68 $(".element_type_gsf_switch").draggable({
69 connectToSortable: '.gsf_template',
70 helper: 'clone',
71 revert: 'invalid'
72 });
73
74 $(".element_type_gsf_when").draggable({
75 connectToSortable: '.gsf_switch',
76 helper: 'clone',
77 revert: 'invalid'
78 });
79
80 $(".element_type_gsf_otherwise").draggable({
81 connectToSortable: '.gsf_switch',
82 helper: 'clone',
83 revert: 'invalid'
84 });
85
86 $(".element_type_gsf_icon").draggable({
87 connectToSortable: '.gsf_link',
88 helper: 'clone',
89 revert: 'invalid'
90 });
91
92
93 /******************************************/
94 /* SORTABLES */
95 /******************************************/
96
97 bind_all_sortables();
98
99 $('#formatStatement').sortable({
100 cursor: 'pointer',
101 tolerance: 'pointer',
102 items: '.gsf_template',
103 placeholder:'placeholder',
104 //'nested':'div'
105 stop: function(event, ui) {
106 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('css_gsf_template')) { replace_with(ui.item,gsf_template_element); }
107 }
108 });
109
110
111 //$(".resizable").resizable({containment: 'parent', alsoResize:'parent'});
112
113 $('.tr').equalHeights();
114
115 $(".td").resizable({
116 alsoResize: 'parent',
117 //containment: 'parent',
118 handles: 'e,s',
119 stop: function(event, ui) {
120 $(this).parent().parent().equalHeights();
121 }, });
122
123});
124
125/*******************************************************************************/
126
127function bind_all_sortables()
128{
129 bind_template_sortable();
130 bind_table_sortable();
131 bind_tr_sortable();
132 bind_td_sortable();
133 bind_choose_metadata_sortable();
134 bind_link_sortable();
135 bind_switch_sortable();
136 bind_when_sortable();
137 bind_otherwise_sortable();
138
139 bind_block_mouseover();
140 bind_minmax_remove();
141}
142
143function replace_with(item, me)
144{
145 item.replaceWith(me); //'<div class="element element-txt">This text box has been added!</div>');
146 bind_all_sortables();
147}
148
149function bind_template_sortable()
150{
151 $('.gsf_template').sortable({
152 'cursor':'pointer',
153 'tolerance': 'fit',
154 'items':'.table, .gsf_choose_metadata, .gsf_metadata',
155 'placeholder':'placeholder',
156 //'nested':'.gsf:metadata'
157 stop: function(event, ui) {
158 //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>"); }
159 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_table')) { replace_with(ui.item, "<table class=\"table\" border=\"2\"></table>"); }
160 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_choose_metadata')) { replace_with(ui.item, gsf_choose_metadata_element); }
161 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); }
162 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_link')) { replace_with(ui.item, gsf_link_element); }
163 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_switch')) { replace_with(ui.item, gsf_switch_element); }
164 }
165 });
166
167}
168
169function bind_table_sortable()
170{
171 $('.table').sortable({
172 'cursor':'pointer',
173 'tolerance': 'pointer',
174 'items':'.tr',
175 'placeholder':'placeholder',
176 //'nested':'.gsf:metadata'
177 stop: function(event, ui) {
178 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_tr')) { replace_with(ui.item, "<tr class=\"tr\"></tr>"); }
179 }
180
181 });
182}
183
184function bind_tr_sortable()
185{
186 $('.tr').sortable({
187 'cursor':'pointer',
188 'tolerance': 'pointer',
189 'items':'.td',
190 'placeholder':'placeholder',
191 //'nested':'.gsf:metadata'
192 stop: function(event, ui) {
193 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_td')) { replace_with(ui.item, "<td class=\"td\"></td>"); }
194 }
195
196 });
197}
198
199function bind_td_sortable()
200{
201 $('.td').sortable({
202 'cursor':'pointer',
203 'tolerance': 'pointer',
204 'items':'.gsf_metadata, .gsf_choose_metadata, .gsf_link, .gsf_switch',
205 'placeholder':'placeholder',
206 //'nested':'.gsf:metadata'
207 stop: function(event, ui) {
208 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); }
209 }
210
211 });
212}
213
214function bind_choose_metadata_sortable()
215{
216 $('.gsf_choose_metadata').sortable({
217 'cursor':'pointer',
218 'tolerance': 'fit',
219 'items':'.gsf_metadata',
220 'placeholder':'placeholder',
221 'connectWith':'.gsf_choose_metadata',
222 //'nested':'.gsf:metadata'
223 stop: function(event, ui) {
224 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); }
225 }
226 });
227}
228
229function bind_link_sortable()
230{
231 $('.gsf_link').sortable({
232 'cursor':'pointer',
233 'tolerance': 'pointer',
234 'items':'.gsf_icon',
235 'placeholder':'placeholder'
236 //'nested':'.gsf:metadata'
237 });
238}
239
240function bind_switch_sortable()
241{
242 $('.gsf_switch').sortable({
243 'cursor':'pointer',
244 'tolerance': 'pointer',
245 'items':'.gsf_metadata, .gsf_when, .gsf_otherwise',
246 'placeholder':'placeholder',
247 //'nested':'.gsf:metadata'
248 stop: function(event, ui) {
249 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_when')) { replace_with(ui.item, gsf_when_element); }
250 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_otherwise')) { replace_with(ui.item, gsf_otherwise_element); }
251 }
252 });
253}
254
255function bind_when_sortable()
256{
257 $('.gsf_when').sortable({
258 'cursor':'pointer',
259 'tolerance': 'pointer',
260 'items':'.leaf',
261 'placeholder':'placeholder',
262 //'nested':'.gsf:metadata'
263 stop: function(event, ui) {
264 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); }
265 }
266 });
267}
268
269function bind_otherwise_sortable()
270{
271 $('.gsf_otherwise').sortable({
272 'cursor':'pointer',
273 'tolerance': 'pointer',
274 'items':'.leaf',
275 'placeholder':'placeholder',
276 //'nested':'.gsf:metadata'
277 stop: function(event, ui) {
278 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); }
279 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_text')) { replace_with(ui.item, "<input type=\"text\" name=\"rawtextinput\" size=\"10\"/>"); }
280 }
281 });
282}
283
284function bind_block_mouseover()
285{
286 $(".block").mouseover(function()
287 {
288 //alert("Mouse over event");
289 $(this).parents().css("border", "");
290 $(this).css("border", "1px solid blue");
291 return false;
292 }).mouseout(function(){
293 $(this).css("border", "");
294 return false;
295 });
296}
297
298function bind_minmax_remove()
299{
300 $('a.minmax').bind('click', toggleContent);
301 $('a.remove').bind('click', removeContent);
302};
303
304var removeContent = (function () {
305 //var parentTag = $(this).parent().get(0).titleName;
306 //alert("Removing div " + parentTag);
307 $(this).parent().remove();
308 });
309
310
311var toggleContent = function(e)
312{
313 var targetContent = $('div.block', this.parentNode);
314 if (targetContent.css('display') == 'none') {
315 targetContent.slideDown(300);
316 $(this).html('[-]');
317 } else {
318 targetContent.slideUp(300);
319 $(this).html('[+]');
320 }
321 return false;
322};
323
324function serialize(s)
325{
326 serial = $.SortSerialize(s);
327 alert(serial.hash);
328};
329
330/*--------------------------------------------------------------------
331 * JQuery Plugin: "EqualHeights"
332 * by: Scott Jehl, Todd Parker, Maggie Costello Wachs (http://www.filamentgroup.com)
333 *
334 * Copyright (c) 2008 Filament Group
335 * Licensed under GPL (http://www.opensource.org/licenses/gpl-license.php)
336 *
337 * Description: Compares the heights or widths of the top-level children of a provided element
338 and sets their min-height to the tallest height (or width to widest width). Sets in em units
339 by default if pxToEm() method is available.
340 * Dependencies: jQuery library, pxToEm method (article:
341 http://www.filamentgroup.com/lab/retaining_scalable_interfaces_with_pixel_to_em_conversion/)
342 * Usage Example: $(element).equalHeights();
343 Optional: to set min-height in px, pass a true argument: $(element).equalHeights(true);
344 * Version: 2.0, 08.01.2008
345--------------------------------------------------------------------*/
346
347// Modified to get children of children ie. tr -> td -> div
348
349$.fn.equalHeights = function(px) {
350 console.log("EQUAL HEIGHTS");
351 $(this).each(function(){
352 var currentTallest = 0;
353 console.log($(this).children());
354 console.log($(this).children().children());
355 //$(this).children().children().each(function(i){
356 // console.log($(this));
357 // console.log("THIS HEIGHT="+$(this).height()+ " CURRENT TALLEST="+ currentTallest);
358 //if ($(this).height() > currentTallest) { currentTallest = $(this).height(); }
359 //if ($(this).height() > currentTallest) { currentTallest = $(this).height(); }
360 //});
361 //if (!px || !Number.prototype.pxToEm) currentTallest = currentTallest.pxToEm(); //use ems unless px is specified
362 // for ie6, set height since min-height isn't supported
363 //if ($.browser.msie && $.browser.version == 6.0) { $(this).children().children().css({'height': $(this).currentTallest}); }
364 $(this).children().children().css({'height': $(this).height()}); //currentTallest});
365 });
366 return this;
367};
368
Note: See TracBrowser for help on using the repository browser.