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

Last change on this file since 24869 was 24869, checked in by sjb48, 12 years ago

Added fix for CURRENT_SELECT problem.

File size: 46.6 KB
Line 
1
2console.log("Loading gui_div.js\n");
3
4/* DOCUMENT SPECIFIC FUNCTIONS */
5
6function displayTOC(checkbox)
7{
8 if (checkbox.checked == true)
9 {
10 console.log("Show the TOC!");
11 displaySideBar(true);
12 $("#tableOfContents").css("display", "block");
13 }
14 else
15 {
16 console.log("Hide the TOC!");
17 $("#tableOfContents").css("display", "none");
18 if ($("#coverImage").css("display") == "none")
19 displaySideBar(false);
20 }
21
22 return;
23}
24
25function displayBookCover(checkbox)
26{
27 if (checkbox.checked == true)
28 {
29 console.log("Show the book cover!");
30 displaySideBar(true);
31 $("#coverImage").css("display", "block");
32 }
33 else
34 {
35 console.log("Hide the book cover!");
36 $("#coverImage").css("display", "none");
37 if ($("#tableOfContents").css("display") == "none")
38 displaySideBar(false);
39 }
40
41 return;
42}
43
44function displaySideBar(toggle)
45{
46 if (toggle == true)
47 {
48 console.log("Show the sidebar!");
49 $("#rightSidebar").css("display", "block");
50 }
51 else
52 {
53 console.log("Hide the sidebar!");
54 $("#rightSidebar").css("display", "none");
55 }
56
57 return;
58}
59
60function checkDocumentRadio()
61{
62 var selection = $('input[name="documentChanges"]'); //document.quiz.colour;
63
64 for (i=0; i<selection.length; i++)
65
66 if (selection[i].checked == true)
67 return selection[i].value;
68
69 return "this";
70}
71
72function saveDocumentChanges()
73{
74 console.log("Saving changes to "+checkDocumentRadio());
75 console.log("TOC="+$('input[name="TOC"]').attr('checked'));
76 console.log("Cover Image="+$('input[name="bookCover"]').attr('checked'));
77
78 var myurl = document.URL;
79
80 var collection_name = getSubstring(myurl, "&c", "&");
81 var document_id = getSubstring(myurl, "&d", "&");
82 var document_type = getSubstring(myurl, "&dt", "&");
83 var prev_action = getSubstring(myurl, "&p.a", "&");
84 var prev_service = getSubstring(myurl, "&p.s", "&");
85
86 var post_url = "http://localhost:8383/greenstone3/dev?a=f&sa=saveDocument&c=" + collection_name + "&d=" + document_id + "&dt=" + document_type + "&p.a=" + prev_action + "&p.s=" + prev_service;
87
88 // XML will be automatically wrapped in <display><format> tags when saved to collection config
89 var xml = '<format><gsf:option name="TOC" value="'+$('input[name="TOC"]').attr('checked')+'"/><gsf:option name="coverImage" value="'+$('input[name="bookCover"]').attr('checked')+'"/></format>';
90
91 $.post(post_url, {data: xml}, function(data) {
92 console.log("Success, we have received data");
93 }, 'xml');
94}
95
96/* FUNCTIONS FOR FORMAT EDITING */
97
98// Ensures that a change to a text field is remembered
99function onTextChange(item, text)
100{
101 console.log("I have set "+item+".value to "+text);
102 item.setAttribute("value",text);
103}
104
105// Ensures that a change to a select field is remembered
106function onSelectChange(item)
107{
108 console.log("I have set "+item.value+".selected to selected");
109 for (var i=0; i<item.options.length; i++)
110 {
111 if(item.selectedIndex == i)
112 item.options[i].setAttribute("selected", "selected");
113 else
114 item.options[i].removeAttribute("selected");
115 }
116 //item.options[item.selectedIndex].selected = "selected";
117 //item.setAttribute("selected","selected");
118}
119
120function getSubstring(str, first, last)
121{
122 var first_index = str.indexOf(first)+first.length+1;
123 var last_index = str.indexOf(last, first_index);
124
125 if(last_index == -1)
126 last_index = str.length;
127
128 var substring = str.substring(first_index, last_index);
129
130 console.log(substring);
131
132 return substring;
133}
134
135function getFormatStatement()
136{
137 var formatDiv = document.getElementById('formatStatement');
138 var formatStatement = innerXHTML(formatDiv);
139 return formatStatement;
140}
141
142function checkClassifierRadio()
143{
144 var selection = $('input[name="classifiers"]'); //document.quiz.colour;
145
146 for (i=0; i<selection.length; i++)
147
148 if (selection[i].checked == true)
149 return selection[i].value;
150
151 return "this";
152
153}
154
155function updateFormatStatement()
156{
157 var formatStatement = getFormatStatement();
158
159 var thisOrAll = checkClassifierRadio();
160 console.log(thisOrAll);
161 var myurl = document.URL;
162
163 var collection_name = getSubstring(myurl, "&c", "&");
164 var service_name = getSubstring(myurl, "&s", "&");
165
166 if(thisOrAll == "all")
167 service_name = "AllClassifierBrowse";
168
169 var classifier_name = null;
170
171 if(service_name == "ClassifierBrowse")
172 classifier_name = getSubstring(myurl, "&cl", "&");
173
174 var post_url = "http://localhost:8383/greenstone3/dev?a=f&sa=update&c=" + collection_name +"&s=" + service_name;
175
176 if(classifier_name != null)
177 post_url = post_url + "&cl=" + classifier_name;
178
179 $.post(post_url, {data: formatStatement}, function(data) {
180 //$('.result').innerHTML = data; //html(data);
181
182 // An error is returned because there is no valid XSLT for a format update action, there probably shouldn't be one so we ignore what the post returns.
183 console.log("Successfully updated");
184 //console.log(data);
185 }, 'html');
186}
187
188function saveFormatStatement()
189{
190 var formatStatement = getFormatStatement();
191 var thisOrAll = checkClassifierRadio();
192
193 var myurl = document.URL;
194
195 var collection_name = getSubstring(myurl, "&c", "&");
196 var service_name = getSubstring(myurl, "&s", "&");
197 var classifier_name = null;
198
199 if(thisOrAll == "all")
200 service_name = "AllClassifierBrowse";
201
202 if(service_name == "ClassifierBrowse")
203 classifier_name = getSubstring(myurl, "&cl", "&");
204
205 var post_url = "http://localhost:8383/greenstone3/dev?a=f&sa=save&c=" + collection_name +"&s=" + service_name;
206
207 if(classifier_name != null)
208 post_url = post_url + "&cl=" + classifier_name;
209
210 $.post(post_url, {data: formatStatement}, function(data) {
211 // An error is returned because there is no valid XSLT for a format update action, there probably shouldn't be one so we ignore what the post returns.
212 console.log("Successfully saved");
213 }, 'html');
214}
215
216function getXSLT(classname)
217{
218 var myurl = document.URL;
219
220 var collection_name = getSubstring(myurl, "&c", "&");
221 var document_id = getSubstring(myurl, "&d", "&");
222 var document_type = getSubstring(myurl, "&dt", "&");
223 var prev_action = getSubstring(myurl, "&p.a", "&");
224 var prev_service = getSubstring(myurl, "&p.s", "&");
225
226 var post_url = "http://localhost:8383/greenstone3/dev?a=d&c=" + collection_name + "&d=" + document_id + "&dt=" + document_type + "&p.a=" + prev_action + "&p.s=" + prev_service + "&o=skinandlib";
227
228 $.post(post_url, {data: classname}, function(data) {
229 console.log("Success, we have received data");
230 classname = "." + classname;
231 console.log(classname);
232 var content = $( data ).find(classname);
233 console.log(content.xml());
234 $("#XSLTcode").val(content.xml());
235 }, 'xml');
236}
237
238function traverse(node, formatstring)
239 {
240
241 if(node.nodeName=='DIV')
242 {
243 console.log("Found a div" +node.nodeName+","+node.nodeType);
244 formatstring = formatstring + find_class(node);
245 console.log(formatstring);
246 }
247
248 var children = $(node).children();
249 for(var i=0; i < children.length; i++)
250 formatstring = formatstring + traverse(children[i], formatstring);
251
252 return formatstring;
253 }
254
255function find_class(current)
256{
257 var classes = current.className.split(' ');
258 var none = "";
259 for(var i = 0; i < classes.length; i++)
260 {
261 switch(classes[i])
262 {
263 case 'gsf_template':
264 return create_gsf_template(current);
265 default:
266 {
267 console.log("Class not found");
268 return none;
269 }
270 }
271 }
272}
273
274function create_gsf_template(current)
275{
276 // find match text which is an input with class match
277 var match = $(current).find('.match')[0].value;
278 console.log(match);
279
280 // find mode text which is an input with class mode
281 var mode = $(current).find('.mode')[0].value;
282 console.log(mode);
283
284 // "<gsf:template match=\"classifierNode\" mode=\"horizontal\">"
285 var gsf = "<gsf:template match=\"" + match + "\"";
286 if(mode != "vertical")
287 gsf = gsf + " mode=\"" + mode + "\"";
288 gsf = gsf + ">";
289
290 return gsf;
291
292}
293
294/*
295$("#iframe").ready(function(){
296 console.log("iframe is ready ...");
297 var iframe = document.getElementById('iframe');
298 var iframe_document = iframe.document;
299
300 if(iframe.contentDocument)
301 {
302 iframe_document = iframe.contentDocument; // For NS6
303 console.log("Chose content document");
304 }
305 else if(iframe.contentWindow)
306 {
307 iframe_document = iframe.contentWindow.document; // For IE5.5 and IE6
308 console.log("Chose content window");
309 }
310
311 console.log(iframe_document.documentElement.innerHTML); //document.documentElement.outerHTML
312
313 $(iframe_document.documentElement.innerHTML).find('a').each(function() {
314 console.log("data "+$(this).data('href'));
315 console.log("getAttribute "+$(this).getAttribute('href'));
316 console.log("attr "+$(this).attr('href'));
317 console.log("this.href "+this.href);
318 var original = this.href; //$(this).attr('href');
319 // check if greenstone link ie. starts with format
320 //var original = $(this).data('href');
321 var modified = original.toString().concat("&excerptid=gs_content");
322 console.log(modified);
323 this.href = modified;
324 //$(this).attr('href',modified);
325 //$(this).data('href', modified);
326 //console.log($(this).attr('href'));
327 console.log("data "+$(this).data('href'));
328 console.log("getAttribute "+$(this).getAttribute('href'));
329 console.log("attr "+$(this).attr('href'));
330 console.log("this.href "+this.href);
331 console.log("**********");
332
333 });
334}); */
335/*
336function loadXMLDoc()
337{
338 if (window.XMLHttpRequest)
339 {// code for IE7+, Firefox, Chrome, Opera, Safari
340 xmlhttp=new XMLHttpRequest();
341 }
342 else
343 {// code for IE6, IE5
344 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
345 }
346
347 xmlhttp.onreadystatechange=function()
348 {
349 console.log("state changed to " + xmlhttp.readyState);
350 console.log("status is " + xmlhttp.status);
351 if (xmlhttp.readyState==4 && xmlhttp.status==200)
352 {
353 console.log("get code");
354 console.log(xmlhttp.responseText);
355 document.getElementById("gs_content").innerHTML=xmlhttp.responseText;
356 }
357 }
358
359 xmlhttp.open("GET","http://localhost:8080/greenstone3/format?a=b&rt=s&s=ClassifierBrowse&c=simpleht&cl=CL1&excerptid=gs_content",true);
360 //xmlhttp.open("GET","http://www.cs.waikato.ac.nz",true);
361 //xmlhttp.open("GET","http://wand.net.nz/~sjb48/index.html",true);
362 xmlhttp.send();
363}
364*/
365$(document).ready(function(){
366
367 console.log("Document ready function\n");
368
369 CURRENT_SELECT_VALUE = ""; //global - gets set by ui.draggable
370
371 /* DOCUMENT SPECIFIC FUNCTIONS */
372
373 $('.sectionHeader').click(function () {
374 console.log('section Header click *');
375 getXSLT("sectionHeader");
376 return false; //don't event bubble
377 });
378
379 $('.sectionContainer').click(function () {
380 console.log('section Container click *');
381 getXSLT("sectionContainer");
382 return false; // don't event bubble
383 });
384
385 var collection = "";
386
387 var regex = new RegExp("[?&]c=");
388 var matches = regex.exec(document.URL);
389 if(matches != null)
390 {
391 var startIndex = matches.index;
392 var endIndex = document.URL.indexOf("&", startIndex + 1);
393
394 if(endIndex == -1)
395 {
396 endIndex = document.URL.length;
397 }
398
399 collection = document.URL.substring(startIndex, endIndex);
400 }
401
402 //Retrieve the collection metadataset using ajax
403 $.ajax
404 ({
405 type: "GET",
406 url: "?a=g&s=CoverageMetadataRetrieve&o=xml&rt=r&c=" + collection,
407 success: function(data)
408 {
409 var str = "<select name=\"meta_select\" onChange=\"onSelectChange(this)\">";
410
411 var selectorArea = document.getElementById("metadataSelector");
412 var metadataSets = data.getElementsByTagName("metadataSet");
413 for(var i = 0; i < metadataSets.length; i++)
414 {
415 var metadata = metadataSets[i].getElementsByTagName("metadata");
416 for(var j = 0; j < metadata.length; j++)
417 {
418 var metaValue = metadataSets[i].getAttribute("name") + "." + metadata[j].getAttribute("name");
419 str += "<option value=\"" + metaValue + "\">" + metaValue + "</option>";
420 }
421 }
422
423 str += "</select>";
424
425 selectorArea.innerHTML = str;
426 gsf_metadata_element = str;
427 }
428 });
429
430 $.ui.draggable.prototype._createHelper = function(event) {
431
432 var o = this.options;
433 var helper = $.isFunction(o.helper) ? $(o.helper.apply(this.element[0], [event])) : (o.helper == 'clone' ? this.element.clone().removeAttr('id') : this.element);
434
435 var select = $(this.element).find('select');
436 var value = select.attr('value');
437 console.log("Found "+value+" in helper");
438 CURRENT_SELECT_VALUE = value;
439 helper.find('select').attr('value', value);
440
441 if(!helper.parents('body').length)
442 helper.appendTo((o.appendTo == 'parent' ? this.element[0].parentNode : o.appendTo));
443
444 if(helper[0] != this.element[0] && !(/(fixed|absolute)/).test(helper.css("position")))
445 helper.css("position", "absolute");
446
447 return helper;
448
449 };
450
451 $.ui.sortable.prototype._removeCurrentsFromItems = function() {
452 //console.log("IN _removeCurrentsFromItems FUNCTION");
453 //console.log("this = " + this.currentItem[0].getAttribute('class'));
454 var list = this.currentItem.find(":data(sortable-item)");
455
456 var i = 0;
457 while (i<this.items.length) {
458 var found_match = false;
459 for (var j=0; j<list.length; j++) {
460 if(this.items[i])
461 {
462 if(list[j] == this.items[i].item[0]) {
463 //console.log("Item to splice = " + this.items[i].item[0].getAttribute('class'));
464 this.items.splice(i,1);
465 found_match = true;
466 break;
467 }
468 }
469 };
470 if (!found_match)
471 i++;
472 else
473 break;
474 }
475 };
476
477 $.ui.plugin.add("draggable", "connectToSortable", {
478 start: function(event, ui) {
479 //console.log("FUNCTION start draggable connectToSortable");
480 var inst = $(this).data("draggable"), o = inst.options,
481 uiSortable = $.extend({}, ui, { item: inst.element });
482 inst.sortables = [];
483 $(o.connectToSortable).each(function() {
484 var sortable = $.data(this, 'sortable');
485 if (sortable && !sortable.options.disabled) {
486 inst.sortables.push({
487 instance: sortable,
488 shouldRevert: sortable.options.revert
489 });
490 sortable._refreshItems(); //Do a one-time refresh at start to refresh the containerCache
491 sortable._trigger("activate", event, uiSortable);
492 }
493 });
494
495 },
496 stop: function(event, ui) {
497
498 //console.log("FUNCTION stop draggable connectToSortable");
499 //If we are still over the sortable, we fake the stop event of the sortable, but also remove helper
500 var inst = $(this).data("draggable"),
501 uiSortable = $.extend({}, ui, { item: inst.element });
502
503 $.each(inst.sortables, function() {
504 if(this.instance.isOver) {
505
506 this.instance.isOver = 0;
507
508 inst.cancelHelperRemoval = true; //Don't remove the helper in the draggable instance
509 this.instance.cancelHelperRemoval = false; //Remove it in the sortable instance (so sortable plugins like revert still work)
510
511 //The sortable revert is supported, and we have to set a temporary dropped variable on the draggable to support revert: 'valid/invalid'
512 if(this.shouldRevert) this.instance.options.revert = true;
513
514 //Trigger the stop of the sortable
515 //console.log("Draggable tells sortable to stop");
516 this.instance._mouseStop(event);
517
518 this.instance.options.helper = this.instance.options._helper;
519
520 //If the helper has been the original item, restore properties in the sortable
521 if(inst.options.helper == 'original')
522 this.instance.currentItem.css({ top: 'auto', left: 'auto' });
523
524 } else {
525 this.instance.cancelHelperRemoval = false; //Remove the helper in the sortable instance
526 this.instance._trigger("deactivate", event, uiSortable);
527 }
528
529 });
530
531 },
532 drag: function(event, ui) {
533 //console.log("FUNCTION drag draggable connectToSortable");
534
535 var inst = $(this).data("draggable"), self = this;
536
537 var checkPos = function(o) {
538 var dyClick = this.offset.click.top, dxClick = this.offset.click.left;
539 var helperTop = this.positionAbs.top, helperLeft = this.positionAbs.left;
540 var itemHeight = o.height, itemWidth = o.width;
541 var itemTop = o.top, itemLeft = o.left;
542
543 return $.ui.isOver(helperTop + dyClick, helperLeft + dxClick, itemTop, itemLeft, itemHeight, itemWidth);
544 };
545
546 var intersecting_items = new Array();
547
548 $.each(inst.sortables, function(i) {
549
550 //Copy over some variables to allow calling the sortable's native _intersectsWith
551 this.instance.positionAbs = inst.positionAbs;
552 this.instance.helperProportions = inst.helperProportions;
553 this.instance.offset.click = inst.offset.click;
554
555 if(this.instance._intersectsWith(this.instance.containerCache)) {
556
557 //If it intersects, we use a little isOver variable and set it once, so our move-in stuff gets fired only once
558 //if(!this.instance.isOver) {
559
560 //console.log('Line 1113');
561
562 // this.instance.isOver = 1;
563
564 intersecting_items.push(this.instance); // sam
565 //} //sam
566
567 //Now we fake the start of dragging for the sortable instance,
568 //by cloning the list group item, appending it to the sortable and using it as inst.currentItem
569 //We can then fire the start event of the sortable with our passed browser event, and our own helper (so it doesn't create a new one)
570 //sam this.instance.currentItem = $(self).clone().appendTo(this.instance.element).data("sortable-item", true);
571 //sam this.instance.options._helper = this.instance.options.helper; //Store helper option to later restore it
572 //sam this.instance.options.helper = function() { return ui.helper[0]; };
573
574 //sam event.target = this.instance.currentItem[0];
575 //sam this.instance._mouseCapture(event, true);
576 //sam this.instance._mouseStart(event, true, true);
577
578 //Because the browser event is way off the new appended portlet, we modify a couple of variables to reflect the changes
579 //sam this.instance.offset.click.top = inst.offset.click.top;
580 //sam this.instance.offset.click.left = inst.offset.click.left;
581 //sam this.instance.offset.parent.left -= inst.offset.parent.left - this.instance.offset.parent.left;
582 //sam this.instance.offset.parent.top -= inst.offset.parent.top - this.instance.offset.parent.top;
583
584 //sam inst._trigger("toSortable", event);
585 //sam inst.dropped = this.instance.element; //draggable revert needs that
586 //hack so receive/update callbacks work (mostly)
587 //sam inst.currentItem = inst.element;
588 //sam this.instance.fromOutside = inst;
589
590 //sam brace
591
592 //Provided we did all the previous steps, we can fire the drag event of the sortable on every draggable drag, when it intersects with the sortable
593 //sam if(this.instance.currentItem) this.instance._mouseDrag(event);
594
595 } else {
596
597 //If it doesn't intersect with the sortable, and it intersected before,
598 //we fake the drag stop of the sortable, but make sure it doesn't remove the helper by using cancelHelperRemoval
599 if(this.instance.isOver) {
600
601 console.log("UNSETTING ISOVER");
602 console.log("ON ITEM="+this.instance.currentItem[0].getAttribute('class'))
603 this.instance.isOver = 0;
604 this.instance.cancelHelperRemoval = true;
605
606 //Prevent reverting on this forced stop
607 this.instance.options.revert = false;
608
609 // The out event needs to be triggered independently
610 this.instance._trigger('out', event, this.instance._uiHash(this.instance));
611
612 this.instance._mouseStop(event, true);
613 this.instance.options.helper = this.instance.options._helper;
614
615 //Now we remove our currentItem, the list group clone again, and the placeholder, and animate the helper back to it's original size
616 //console.log("DO WE GET HERE?");
617 this.instance.currentItem.remove();
618 if(this.instance.placeholder) this.instance.placeholder.remove();
619
620 inst._trigger("fromSortable", event);
621 inst.dropped = false; //draggable revert needs that
622
623 }
624
625 }
626 });
627
628 //sam
629 //console.log("Contents of intersecting_items");
630 var innermostContainer = null, innermostIndex = null;
631 for (i=0;i<intersecting_items.length;i++)
632 {
633 //console.log('ITEM: '+intersecting_items[i].element[0].getAttribute('class'));
634
635 if(innermostContainer && $.ui.contains(intersecting_items[i].element[0], innermostContainer.element[0]))
636 continue;
637
638 innermostContainer = intersecting_items[i];
639 innermostIndex = i;
640
641 }
642
643 for (i=0;i<intersecting_items.length;i++)
644 {
645 if(intersecting_items[i] != innermostContainer)
646 if(intersecting_items[i].isOver) {
647
648 console.log("UNSETTING ISOVER");
649 console.log("ON ITEM="+intersecting_items[i].currentItem[0].getAttribute('class'))
650 intersecting_items[i].isOver = 0;
651 intersecting_items[i].cancelHelperRemoval = true;
652
653 //Prevent reverting on this forced stop
654 intersecting_items[i].options.revert = false;
655
656 // The out event needs to be triggered independently
657 intersecting_items[i]._trigger('out', event, intersecting_items[i]._uiHash(intersecting_items[i]));
658
659 intersecting_items[i]._mouseStop(event, true);
660 intersecting_items[i].options.helper = intersecting_items[i].options._helper;
661
662 //Now we remove our currentItem, the list group clone again, and the placeholder, and animate the helper back to it's original size
663 //console.log("DO WE GET HERE?");
664 if(intersecting_items[i].currentItem) intersecting_items[i].currentItem.remove();
665 if(intersecting_items[i].placeholder) intersecting_items[i].placeholder.remove();
666
667 inst._trigger("fromSortable", event);
668 inst.dropped = false; //draggable revert needs that
669 }
670
671 intersecting_items[i].isOver = 0;
672
673 }
674
675 if(innermostContainer && !innermostContainer.isOver)
676 {
677 console.log("INNER="+innermostContainer.element[0].getAttribute('class'));
678 console.log("SETTING ISOVER");
679 innermostContainer.isOver = 1;
680
681 //Now we fake the start of dragging for the sortable instance,
682 //by cloning the list group item, appending it to the sortable and using it as inst.currentItem
683 //We can then fire the start event of the sortable with our passed browser event, and our own helper (so it doesn't create a new one)
684
685 if(innermostContainer.currentItem) innermostContainer.currentItem.remove();
686 if(innermostContainer.placeholder) innermostContainer.placeholder.remove();
687
688 innermostContainer.currentItem = $(self).clone().appendTo(innermostContainer.element).data("sortable-item", true);
689
690 innermostContainer.options._helper = innermostContainer.options.helper; //Store helper option to later restore it
691 innermostContainer.options.helper = function() { return ui.helper[0]; };
692
693 console.log("EVENT TARGET="+innermostContainer.currentItem[0].getAttribute('class'));
694 event.target = innermostContainer.currentItem[0];
695 innermostContainer._mouseCapture(event, true);
696 innermostContainer._mouseStart(event, true, true);
697
698 //Because the browser event is way off the new appended portlet, we modify a couple of variables to reflect the changes
699 innermostContainer.offset.click.top = inst.offset.click.top;
700 innermostContainer.offset.click.left = inst.offset.click.left;
701 innermostContainer.offset.parent.left -= inst.offset.parent.left - innermostContainer.offset.parent.left;
702 innermostContainer.offset.parent.top -= inst.offset.parent.top - innermostContainer.offset.parent.top;
703
704 inst._trigger("toSortable", event);
705 inst.dropped = innermostContainer.element; //draggable revert needs that
706 //hack so receive/update callbacks work (mostly)
707 inst.currentItem = inst.element;
708 innermostContainer.fromOutside = inst;
709
710 //sam brace
711 }
712
713 if(innermostContainer)
714 {
715 //Provided we did all the previous steps, we can fire the drag event of the sortable on every draggable drag, when it intersects with the sortable
716 if(innermostContainer.currentItem) innermostContainer._mouseDrag(event);
717 }
718
719 }
720});
721
722 /*
723 var iframe = document.getElementById('iframe');
724 var iframe_document = iframe.document;
725
726 if(iframe.contentDocument)
727 {
728 iframe_document = iframe.contentDocument; // For NS6
729 console.log("Chose content document");
730 }
731 else if(iframe.contentWindow)
732 {
733 iframe_document = iframe.contentWindow.document; // For IE5.5 and IE6
734 console.log("Chose content window");
735 }
736
737 // Edit the hrefs in preview_html - search for <a href="format?a=b&rt=r&s=ClassifierBrowse&c=simpleht&cl=CL1.2">
738 var start_index = 0;
739 var end_index = 0;
740 while(start_index != -1)
741 {
742 start_index = preview_html.indexOf("href=\"format", start_index);
743 console.log("start index = " + start_index);
744 if(start_index != -1)
745 {
746 end_index = preview_html.indexOf("\">", start_index);
747 console.log("end_index = " + end_index);
748 a = preview_html.substring(0,end_index);
749 b = preview_html.substring(end_index);
750 preview_html = a.concat("&excerptid=results", b);
751 console.log(preview_html);
752 start_index = end_index + "&excerptid=results\">".length;
753 }
754 }
755
756 // Split the html code in to three parts
757 var first_index = preview_html.indexOf("<ul id=\"results\"");
758 console.log("First index is "+first_index);
759 var second_index = preview_html.indexOf("</ul>", first_index) + "</ul>".length;
760 console.log("Second index is "+second_index);
761
762 var first_half = preview_html.substring(0, first_index);
763 var iframe_code = preview_html.substring(first_index, second_index);
764 var second_half = preview_html.substring(second_index);
765
766 //$('#my_categories').innerHTML = first_half.concat(second_half);
767 document.getElementById("my_categories").innerHTML = first_half.concat(second_half);
768
769 // Put the content in the iframe
770 if(initialised_iframe == "false")
771 {
772 console.log("Initialised iframe with preview html");
773 console.log(preview_html);
774 iframe_document.open();
775 iframe_document.writeln(iframe_code); //.concat("&excerptid=gs_content"));
776 iframe_document.close();
777 initialised_iframe = "true";
778 }
779 */
780
781 /*
782 $(iframe_document.documentElement.innerHTML).find('a').each(function() {
783 console.log("data "+$(this).data('href'));
784 console.log("getAttribute "+this.getAttribute('href'));
785 console.log("attr "+$(this).attr('href'));
786 console.log("this.href "+this.href);
787 var original = this.href; //$(this).attr('href');
788 // check if greenstone link ie. starts with format
789 //var original = $(this).data('href');
790 var modified = original.toString().concat("&excerptid=gs_content");
791 console.log("* *");
792 console.log(modified);
793 console.log("* *");
794 //this.href = modified;
795 //$(this).attr('href',modified);
796 //$(this).data('href', modified);
797 $(this).attr({ 'href': modified });
798 //console.log($(this).attr('href'));
799 console.log("data "+$(this).data('href'));
800 console.log("getAttribute "+this.getAttribute('href'));
801 console.log("attr "+$(this).attr('href'));
802 console.log("this.href "+this.href);
803 console.log("***********************");
804 });
805 */
806
807 /******************************************/
808 /* DRAGGABLES */
809 /******************************************/
810
811 $(".draggable_gsf_template").draggable({
812 cursor: 'crosshair',
813 connectToSortable: '#formatStatement',
814 helper: 'clone',
815 revert: 'invalid'
816 });
817
818 $(".draggable_table").draggable({
819 cursor: 'crosshair',
820 connectToSortable: '.gsf_template',
821 helper: 'clone',
822 revert: 'invalid'
823 });
824
825 $(".draggable_tr").draggable({
826 cursor: 'crosshair',
827 connectToSortable: '.gsf_table',
828 helper: 'clone',
829 revert: 'invalid'
830 })
831
832 $(".draggable_td").draggable({
833 cursor: 'crosshair',
834 //connectToSortable: '.td',
835 helper: 'clone',
836 revert: 'invalid'
837 })
838
839 $(".draggable_gsf_text").draggable({
840 cursor: 'crosshair',
841 connectToSortable: '.td-div, .gsf_when, .gsf_otherwise, .gsf_link, .gsf_choose_metadata, .gsf_default',
842 helper: 'clone',
843 revert: 'invalid'
844 });
845
846 $(".draggable_gsf_choose_metadata").draggable({
847 cursor: 'crosshair',
848 connectToSortable: '.td-div, .gsf_link, .gsf_when, .gsf_otherwise',
849 helper: 'clone',
850 revert: 'invalid'
851 });
852
853 //$(".element_type_gsf_metadata").draggable({
854 $(".draggable_gsf_metadata").draggable({
855 cursor: 'crosshair',
856 connectToSortable: '.gsf_choose_metadata, .gsf_when, .gsf_otherwise, .gsf_link, .td-div',
857 helper: 'clone',
858 revert: 'invalid'
859 });
860
861 $(".draggable_gsf_link").draggable({
862 cursor: 'crosshair',
863 connectToSortable: '.td-div, .gsf_when, .gsf_otherwise, .gsf_link',
864 helper: 'clone',
865 revert: 'invalid'
866 });
867
868 // switch, when, otherwise, icon
869 $(".draggable_gsf_switch").draggable({
870 cursor: 'crosshair',
871 connectToSortable: '.td-div, .gsf_link',
872 helper: 'clone',
873 revert: 'invalid'
874 });
875
876 $(".draggable_gsf_when").draggable({
877 cursor: 'crosshair',
878 connectToSortable: '.gsf_switch',
879 helper: 'clone',
880 revert: 'invalid'
881 });
882
883 $(".draggable_gsf_otherwise").draggable({
884 cursor: 'crosshair',
885 connectToSortable: '.gsf_switch',
886 helper: 'clone',
887 revert: 'invalid'
888 });
889
890 $(".draggable_gsf_icon").draggable({
891 cursor: 'crosshair',
892 connectToSortable: '.td-div, .gsf_link, .gsf_choose, .gsf_when, .gsf_otherwise',
893 helper: 'clone',
894 revert: 'invalid'
895 });
896
897
898 /******************************************/
899 /* SORTABLES */
900 /******************************************/
901
902 bind_td_sortable();
903 bind_all_sortables();
904
905 $('#formatStatement').sortable({
906 cursor: 'pointer',
907 tolerance: 'pointer',
908 items: '.gsf_template',
909 placeholder:'placeholder',
910 //'nested':'div'
911 stop: function(event, ui) {
912 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('css_gsf_template')) { replace_with(ui.item,gsf_template_element); }
913 }
914 });
915
916 $('div.gsf_template').children(".block,.table").slideUp(300);
917});
918
919/*******************************************************************************/
920
921function bind_all_sortables()
922{
923 console.log('function bind_all_sortables()');
924 bind_template_sortable();
925 bind_choose_metadata_sortable();
926 bind_link_sortable();
927 bind_switch_sortable();
928 bind_when_sortable();
929 bind_otherwise_sortable();
930
931 bind_tables();
932
933 bind_block_mouseover();
934 bind_minmax_remove();
935}
936
937function bind_tables()
938{
939 console.log('function bind_tables()');
940
941 $('#sectionHeader').click(function () {
942 console.log('section Header click *');
943 return true;
944 });
945
946 $('#sectionContainer').click(function () {
947 console.log('section Container click *');
948 return true;
949 });
950
951 $(".td-div").resizable({
952 alsoResize: 'parent',
953 handles: 'w,e',
954 stop: function(event, ui) {
955 console.log('Resize table on stop');
956 resize_tables($(this));
957 }, });
958
959 $(".droppable").droppable({
960 accept: '.element_type_td',
961 tolerance: 'pointer',
962 activate: function(event, ui) { $(this).addClass("droppable_hl");},
963 deactivate: function(event, ui) { $(this).removeClass("droppable_hl"); },
964 drop: function(event, ui) {
965 var neverempty = document.createElement("div");
966 neverempty.setAttribute("class","neverempty block");
967 neverempty.setAttribute("style","height:50px");
968 neverempty.setAttribute("style","display:block");
969 var text = document.createTextNode('NEVER EMPTY');
970 neverempty.appendChild(text);
971 var td = document.createElement("td");
972 var div = document.createElement("div");
973 div.setAttribute("title","td-div");
974 div.setAttribute("class","td-div block");
975 div.setAttribute("style","margin-left:0px");
976 div.setAttribute("width","25px");
977 td.appendChild(div);
978 div.appendChild(neverempty);
979 var sep = document.createElement("td");
980 sep.setAttribute("class","droppable");
981 sep.setAttribute("width","10px");
982 $(this).after(sep);
983 $(this).after(td);
984 bind_tables();
985 resize_tables($(this));
986 bind_td_sortable();
987 bind_block_mouseover();
988 }
989 });
990
991}
992
993function replace_with(item, me)
994{
995 // Search me for select
996 if(me.search("select") != -1)
997 {
998 // If select exists, then find CURRENT_SELECT_VALUE
999 if(me.search(CURRENT_SELECT_VALUE) != -1)
1000 {
1001 var index = me.search(CURRENT_SELECT_VALUE);
1002 if(index == -1)
1003 console.log("Did not find " + CURRENT_SELECT_VALUE);
1004 else
1005 {
1006 console.log("Found " + CURRENT_SELECT_VALUE + " at index " + index);
1007 index = index + CURRENT_SELECT_VALUE.length + 1;
1008 console.log("Attempt inserting select at new index "+index);
1009 a = me.substring(0,index);
1010 b = me.substring(index);
1011 me = a.concat("selected",b);
1012 }
1013 }
1014 }
1015
1016 item.replaceWith(me); //'<div class="element element-txt">This text box has been added!</div>');
1017
1018 resize_tables(item);
1019
1020 bind_all_sortables();
1021}
1022
1023function resize_tables(item)
1024{
1025 var max_height = 0;
1026 (item.parents('.table')).each(function(index) {
1027 $(this).children().children().children().each(function() {
1028 var sum_one = 0;
1029 var sum_two = 0;
1030 $(this).children('.block').each(function() { sum_one = sum_one + $(this).height();
1031 $(this).children('.block').each(function() { sum_two = sum_two + $(this).height(); } );
1032 console.log("My height is " + $(this).height() + ", sum height 2 is " + sum_two);
1033 });
1034 console.log("My height is " + $(this).height() + ", sum height 1 is " + sum_one);
1035 if (sum_two > max_height)
1036 max_height = sum_two;
1037 });
1038 });
1039 equalHeights(item,max_height);
1040}
1041
1042function bind_template_sortable()
1043{
1044 //console.log('function bind_template_sortable()');
1045 $('.gsf_template').sortable({
1046 'cursor':'pointer',
1047 'tolerance': 'pointer',
1048 'items':'.table', //.gsf_choose_metadata, .gsf_metadata',
1049 'placeholder':'placeholder',
1050 //'nested':'.gsf:metadata'
1051 stop: function(event, ui) {
1052 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_table')) { replace_with(ui.item, "<table class=\"table\" border=\"2\"></table>"); }
1053 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_choose_metadata')) { replace_with(ui.item, gsf_choose_metadata_element); }
1054 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); }
1055 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_link')) { replace_with(ui.item, gsf_link_element); }
1056 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_switch')) { replace_with(ui.item, gsf_switch_element); }
1057 }
1058 });
1059
1060 $('.gsf_template').click(function () {
1061 console.log('gsf_template class click');
1062 return false;
1063 });
1064
1065}
1066
1067function bind_td_sortable()
1068{
1069
1070 $('tr').sortable({
1071 'cursor':'pointer',
1072 'tolerance': 'intersect',
1073 'items':'.column',
1074 'placeholder':'placeholder_td',
1075 'connectWith':'column'});
1076
1077 $('.td-div').sortable({
1078 'cursor':'pointer',
1079 'tolerance': 'pointer',
1080 'items':'.gsf_metadata, .gsf_choose_metadata, .gsf_link, .gsf_switch',
1081 'placeholder':'placeholder',
1082 receive: function(event, ui) { alert("Attempted to receive"); },
1083 stop: function(event, ui) {
1084 // gsf metadata
1085 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); }
1086 // gsf choose metadata
1087 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_choose_metadata')) { replace_with(ui.item, gsf_choose_metadata_element); }
1088 // gsf link
1089 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_link')) { replace_with(ui.item, gsf_link_element); }
1090 // gsf switch
1091 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_switch')) { replace_with(ui.item, gsf_switch_element); }
1092
1093 }
1094
1095 });
1096
1097 $('.td-div').click(function () {
1098 //console.log('td class click');
1099 return true;
1100 });
1101
1102
1103
1104}
1105
1106
1107function bind_choose_metadata_sortable()
1108{
1109 //console.log('function bind_choose_metadata_sortable()');
1110 $('.gsf_choose_metadata').sortable({
1111 'cursor':'pointer',
1112 'tolerance': 'pointer',
1113 'items':'.gsf_metadata, .gsf_text, .gsf_default',
1114 'placeholder':'placeholder',
1115 'connectWith':'.gsf_choose_metadata',
1116 //'nested':'.gsf:metadata'
1117 stop: function(event, ui) {
1118 // gsf metadata
1119 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); }
1120 // gsf text
1121 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_text')) { replace_with(ui.item, gsf_text_element); }
1122 // gsf default
1123 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_default')) { replace_with(ui.item, gsf_default_element); }
1124
1125 bind_all_sortables();
1126 }
1127 });
1128}
1129
1130function bind_link_sortable()
1131{
1132 //console.log('function bind_link_sortable()');
1133 $('.gsf_link').sortable({
1134 'cursor':'pointer',
1135 'tolerance': 'pointer',
1136 'items':'.leaf, .gsf_link, .gsf_switch, .gsf_choose',
1137 'placeholder':'placeholder',
1138 'connectWith':'.gsf_link',
1139 //'nested':'.gsf:metadata'
1140 stop: function(event, ui) {
1141 // gsf icon
1142 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_icon')) { replace_with(ui.item, gsf_icon_element); }
1143 // gsf text
1144 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_text')) { replace_with(ui.item, "<input type=\"text\" name=\"rawtextinput\" size=\"10\"/>"); }
1145 // gsf metadata
1146 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); }
1147 // gsf link
1148 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_link')) { replace_with(ui.item, gsf_link_element); }
1149 // gsf switch
1150 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_switch')) { replace_with(ui.item, gsf_switch_element); }
1151 // gsf choose
1152 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_choose_metadata')) { replace_with(ui.item, gsf_choose_metadata_element); }
1153 }
1154 });
1155}
1156
1157function bind_switch_sortable()
1158{
1159 //console.log('function bind_switch_sortable()');
1160 $('.gsf_switch').sortable({
1161 'cursor':'pointer',
1162 'tolerance': 'pointer',
1163 'items':'.gsf_metadata, .gsf_when, .gsf_otherwise, .gsf_text',
1164 'placeholder':'placeholder',
1165 'connectWith':'.gsf_switch',
1166 //'nested':'.gsf:metadata'
1167 stop: function(event, ui) {
1168 // gsf when
1169 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_when')) { replace_with(ui.item, gsf_when_element); }
1170 // gsf otherwise
1171 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_otherwise')) { replace_with(ui.item, gsf_otherwise_element); }
1172 // gsf metadata
1173 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); }
1174 // gsf text
1175 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_text')) { replace_with(ui.item, gsf_text_element); }
1176 }
1177 });
1178}
1179
1180function bind_when_sortable()
1181{
1182 //console.log('function bind_when_sortable()');
1183 $('.gsf_when').sortable({
1184 'cursor':'pointer',
1185 'tolerance': 'pointer',
1186 'items':'.leaf, .gsf_link, .gsf_choose',
1187 'placeholder':'placeholder',
1188 //'nested':'.gsf:metadata'
1189 stop: function(event, ui) {
1190 // gsf metadata
1191 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); }
1192 // gsf icon
1193 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_icon')) { replace_with(ui.item, gsf_icon_element); }
1194 // gsf text
1195 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_text')) { replace_with(ui.item, gsf_text_element); }
1196 // gsf link
1197 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_link')) { replace_with(ui.item, gsf_link_element); }
1198 // gsf choose
1199 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_choose')) { replace_with(ui.item, gsf_choose_element); }
1200 }
1201 });
1202}
1203
1204function bind_otherwise_sortable()
1205{
1206 //console.log('function bind_otherwise_sortable()');
1207 $('.gsf_otherwise').sortable({
1208 'cursor':'pointer',
1209 'tolerance': 'pointer',
1210 'items':'.leaf, .gsf_link, .gsf_choose',
1211 'placeholder':'placeholder',
1212 //'nested':'.gsf:metadata'
1213 stop: function(event, ui) {
1214 // gsf metadata
1215 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); }
1216 // gsf text
1217 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_text')) { replace_with(ui.item, "<input type=\"text\" name=\"rawtextinput\" size=\"10\"/>"); }
1218 // gsf icon
1219 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_icon')) { replace_with(ui.item, gsf_icon_element); }
1220 // gsf link
1221 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_link')) { replace_with(ui.item, gsf_link_element); }
1222 // gsf choose
1223 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('draggable_gsf_choose')) { replace_with(ui.item, gsf_choose_element); }
1224 }
1225 });
1226}
1227
1228function bind_block_mouseover()
1229{
1230 //console.log('function bind_block_mouseover()');
1231 $(".block").mouseover(function()
1232 {
1233 $(this).parents().css("border", "");
1234 $(this).css("border", "2px solid blue");
1235 return false;
1236 }).mouseout(function(){
1237 $(this).css("border", "");
1238 return false;
1239 });
1240}
1241
1242function bind_minmax_remove()
1243{
1244 console.log('function bind_minmax_remove()');
1245 $('a.minmax').bind('click', toggleContent);
1246 $('a.remove').bind('click', removeContent);
1247};
1248
1249var removeContent = (function () {
1250 //console.log('var removeContent = (function ()');
1251 // this -> a -> td -> tr -> tbody -> table -> div
1252 //$(this).parent().parent().parent().parent().parent().remove();
1253 $(this).closest(".block").remove();
1254 });
1255
1256
1257var toggleContent = function(e)
1258{
1259 console.log('parent: ' + $(this).html());
1260 if ($(this).html() == '[+]'){ //targetContent.css('display') == 'none') {
1261 $(this).closest(".block").children(".table, .block").slideDown(300);
1262 $(this).html('[-]');
1263 $(this).removeClass("ui-icon-plusthick");
1264 $(this).addClass("ui-icon-minusthick");
1265 } else {
1266 $(this).closest(".block").children(".table, .block").slideUp(300);
1267 $(this).html('[+]');
1268 $(this).removeClass("ui-icon-minusthick");
1269 $(this).addClass("ui-icon-plusthick");
1270 }
1271 return false;
1272};
1273
1274function serialize(s)
1275{
1276 serial = $.SortSerialize(s);
1277 alert(serial.hash);
1278};
1279
1280function equalHeights(item, height) {
1281 //console.log('function equalHeights(item, height)');
1282 (item.parents('.table')).each(function(index) {
1283 $(this).children().children().children().each(function() {
1284 $(this).height(height);
1285 $(this).children().height(height);
1286 });
1287 });
1288};
1289
Note: See TracBrowser for help on using the repository browser.