source: main/trunk/greenstone3/web/interfaces/default/js/debug_scripts.js@ 27218

Last change on this file since 27218 was 27218, checked in by sjm84, 11 years ago

Added back, forwards and current selection buttons, also various improvements and fixes
  • Property svn:executable set to *
File size: 29.1 KB
Line 
1function DebugWidget()
2{
3 //************************
4 //Private member variables
5 //************************
6
7 //The this variable
8 var _greenbug = this;
9
10 //Template tracker class
11 var TemplateTracker = function()
12 {
13 var templates = new Array();
14 var currentIndex = -1;
15
16 this.push = function(object)
17 {
18 if(currentIndex < templates.length - 1 && templates.length > 0)
19 {
20 templates.splice(currentIndex + 1, templates.length - 1 - currentIndex);
21 }
22 templates[++currentIndex] = object;
23
24 _forwardButton.button("option", "disabled", true);
25 if(templates.length > 1)
26 {
27 _backButton.button("option", "disabled", false);
28 }
29 }
30
31 this.next = function()
32 {
33 if(currentIndex == templates.length - 1)
34 {
35 return;
36 }
37
38 if(currentIndex + 1 == templates.length - 1)
39 {
40 _forwardButton.button("option", "disabled", true);
41 }
42 _backButton.button("option", "disabled", false);
43
44 return templates[++currentIndex];
45 }
46
47 this.previous = function()
48 {
49 if(currentIndex == 0)
50 {
51 return;
52 }
53
54 if(currentIndex - 1 == 0)
55 {
56 _backButton.button("option", "disabled", true);
57 }
58 _forwardButton.button("option", "disabled", false);
59
60 return templates[--currentIndex];
61 }
62
63 this.peekPrevious = function()
64 {
65 if(currentIndex == 0)
66 {
67 return;
68 }
69
70 return templates[currentIndex - 1];
71 }
72
73 this.peekNext = function()
74 {
75 if(currentIndex == templates.length - 1)
76 {
77 return;
78 }
79
80 return templates[currentIndex + 1];
81 }
82 }
83
84 var _templateTracker = new TemplateTracker();
85
86 //Debugger state-keeping variables
87 var _debugOn = false;
88 var _pauseSelector = false;
89 var _elements = new Array();
90 var _itemSelected = false; //Used to prevent multiple elements from being highlighted
91 var _editModeText = false;
92 var _fromSelection = false;
93 var _selectedInfoContainers = new Array();
94
95 //Page elements
96 var _mainDiv;
97
98 var _textEditor;
99 var _vEditor;
100
101 var _navArea;
102 var _fileSelector;
103 var _templateSelector;
104 var _editor;
105 var _editingDiv;
106 var _xmlStatusBar;
107
108 //Buttons
109 var _backButton;
110 var _forwardButton;
111 var _currentSelectionButton;
112 var _enableSelectorButton;
113 var _closeEditorButton;
114 var _saveButton;
115 var _swapEditorButton;
116
117 //Editor state-keeping variables
118 var _currentFileName;
119 var _currentLocation;
120 var _currentNodename;
121 var _currentName;
122 var _currentMatch;
123 var _currentNamespace;
124 var _isVisualEditor = true;
125
126 var _styleFunctions = new Array();
127
128 //Used to reload the page while keeping the state of the editor
129 var partialPageReload = function(callback)
130 {
131 $.ajax(document.URL)
132 .success(function(response)
133 {
134 //Get the body text from the response
135 var bodyStartIndex = response.indexOf("<body");
136 var bodyEndIndex = response.indexOf("</body>");
137 var bodyText = response.substring(bodyStartIndex, bodyEndIndex + 7);
138
139 //Get the current top area and container
140 var topLevelTopArea = $("#topArea");
141 var topLevelContainer = $("#container");
142
143 //Create a temporary div and put the html into it
144 var tempDiv = $("<div>");
145 tempDiv.html(bodyText);
146
147 //Replace the contents of the old elements with the new elements
148 var topArea = tempDiv.find("#topArea");
149 var container = tempDiv.find("#container");
150 topLevelTopArea.html(topArea.html());
151 topLevelContainer.html(container.html());
152
153 //Update the events for the debug elements that currently don't have events associated with them
154 var debugElems = $('debug, [debug="true"]').filter(function(){return (!($.data(this, "events"))) ? true : false});
155 addMouseEventsToDebugElements(debugElems);
156 })
157 .error(function()
158 {
159 alert("There was an error reloading the page, please reload manually.");
160 });
161
162 if(callback)
163 {
164 callback();
165 }
166 }
167
168 //Some functions need to be called after an element is added to the page. So we store them and call them later.
169 var callStyleFunctions = function()
170 {
171 for(var i = 0; i < _styleFunctions.length; i++)
172 {
173 var sFunction = _styleFunctions[i];
174 sFunction();
175 }
176 }
177
178 var changeToSelectedElement = function(templateIndex, templateList)
179 {
180 _templateSelector.children("select").empty();
181
182 for(var i = 0; i < templateList.length; i++)
183 {
184 _templateSelector.children("select").append($(templateList[i]).clone(true));
185 }
186
187 if(templateIndex === undefined)
188 {
189 _templateSelector.find("option").first().trigger("change", [true]);
190 }
191 else
192 {
193 _templateSelector.find("option").filter(function(){return $(this).data("index") == templateIndex}).first().trigger("change", [true]);
194 }
195 return;
196 }
197
198 var createNavButtons = function(buttonDiv)
199 {
200 var navButtonHolder = $("<div>").css("float", "left");
201
202 var backForwardFunction = function(e)
203 {
204 var template;
205 if($(e.target).attr("id") == "veBack")
206 {
207 template = _templateTracker.previous();
208 }
209 else
210 {
211 template = _templateTracker.next();
212 }
213
214 if(!template)
215 {
216 return;
217 }
218
219 _fileSelector.find("option").filter(function(){return $(this).data("index") == template.fileIndex}).prop("selected", true);
220
221 changeToSelectedElement(template.templateIndex, template.list);
222 }
223
224 _backButton = $("<button>Back button</button>").attr("id", "veBack");
225 _backButton.click(backForwardFunction);
226 _styleFunctions.push(function(){_backButton.button({icons:{primary:"ui-icon-triangle-1-w"}, text:false, disabled:true})});
227
228 _forwardButton = $("<button>Forward button</button>").attr("id", "veForwards");
229 _forwardButton.click(backForwardFunction);
230 _styleFunctions.push(function(){_forwardButton.button({icons:{primary:"ui-icon-triangle-1-e"}, text:false, disabled:true})});
231
232 //Changes the template list to what is currently selected
233 _currentSelectionButton = $("<button>Current selection button</button>");
234 _currentSelectionButton.click(function()
235 {
236 _fileSelector.find("option").eq(0).prop("selected", true);
237 changeToSelectedElement(undefined, _selectedInfoContainers);
238
239 var selectedCopy = new Array();
240 for(var i = 0; i < _selectedInfoContainers.length; i++)
241 {
242 selectedCopy[i] = _selectedInfoContainers[i];
243 }
244
245 _templateTracker.push({fileIndex:-1, templateIndex:0, list:selectedCopy});
246 });
247 _styleFunctions.push(function(){_currentSelectionButton.button({icons:{primary:"ui-icon-pencil"}, text:false, disabled:true})});
248
249 navButtonHolder.append(_backButton);
250 navButtonHolder.append(_forwardButton);
251 navButtonHolder.append(_currentSelectionButton);
252 buttonDiv.append(navButtonHolder);
253 }
254
255 //Create the area where the buttons are stored
256 var createControlButtons = function(buttonDiv)
257 {
258 //Used to enable the selector to get the templates of a particular area of the page
259 _enableSelectorButton = $("<button>Select an element</button>");
260 _enableSelectorButton.click(function()
261 {
262 _enableSelectorButton.button("option", "label", "Select new element");
263 $("a").click(function(e)
264 {
265 e.preventDefault();
266 });
267 _debugOn = true;
268 _pauseSelector = false;
269 _enableSelectorButton.button("option", "disabled", true);
270 });
271 _styleFunctions.push(function(){_enableSelectorButton.button({icons:{primary:"ui-icon-pencil"}})});
272
273 //Used to minimise/restore the editor
274 _closeEditorButton = $("<button>Close editor</button>");
275 _closeEditorButton.click(function()
276 {
277 if(_closeEditorButton.button("option", "label") == "Close editor")
278 {
279 _closeEditorButton.button("option", "label", "Open editor");
280 _editingDiv.hide();
281 }
282 else
283 {
284 _closeEditorButton.button("option", "label", "Close editor");
285 _editingDiv.show();
286 }
287 });
288 _closeEditorButton.css("float", "right");
289 _styleFunctions.push(function(){_closeEditorButton.button({icons:{secondary:"ui-icon-newwin"}, disabled:true})});
290
291 //Used to save any changes that have been made to this template
292 _saveButton = $("<button>Save changes</button>");
293 _saveButton.click(function()
294 {
295 if(_editor)
296 {
297 var xmlString;
298 if(_isVisualEditor)
299 {
300 _vEditor.savePendingEdits();
301 xmlString = new XMLSerializer().serializeToString(_vEditor.getXML());
302 }
303 else
304 {
305 xmlString = _editor.getValue();
306 }
307 xmlString = xmlString.replace(/&/g, "&amp;");
308
309 try
310 {
311 var xml = $.parseXML('<testContainer xmlns:xslt="http://www.w3.org/1999/XSL/Transform" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:java="http://xml.apache.org/xslt/java" xmlns:util="xalan://org.greenstone.gsdl3.util.XSLTUtil" xmlns:gslib="http://www.greenstone.org/skinning" xmlns:gsf="http://www.greenstone.org/greenstone3/schema/ConfigFormat">' + xmlString + "</testContainer>");
312 }
313 catch(error)
314 {
315 alert("Could not save as there is a problem with the XML.");
316 return;
317 }
318
319 var url = gs.xsltParams.library_name;
320 var parameters = {"a":"g", "rt":"r", "s":"SaveXMLTemplateToFile", "s1.locationName":_currentLocation, "s1.fileName":_currentFileName, "s1.interfaceName":gs.xsltParams.interface_name, "s1.siteName":gs.xsltParams.site_name, "s1.collectionName":gs.cgiParams.c, "s1.namespace":_currentNamespace, "s1.nodename":_currentNodename, "s1.xml":xmlString};
321
322 if(_currentName && _currentName.length > 0){parameters["s1.name"] = _currentName;}
323 if(_currentMatch && _currentMatch.length > 0){parameters["s1.match"] = _currentMatch;}
324
325 _saveButton.button("option", "disabled", true);
326 $.blockUI({message:'<div class="ui-state-active">Saving, please wait...</div>'});
327
328 $.post(url, parameters)
329 .success(function()
330 {
331 $.ajax(gs.xsltParams.library_name + "?a=s&sa=c")
332 .success(function()
333 {
334 partialPageReload(function(){$.unblockUI();});
335 })
336 .error(function()
337 {
338 $.unblockUI();
339 alert("Error reloading collection.");
340 })
341 .complete(function()
342 {
343 _saveButton.button("option", "disabled", false);
344 });
345 })
346 .error(function()
347 {
348 alert("There was an error sending the request to the server, please try again.");
349 });
350 }
351 });
352 _styleFunctions.push(function(){_saveButton.button({icons:{primary:"ui-icon-disk"}, disabled:true})});
353
354 //Used to switch between the XML and Visual editors
355 _swapEditorButton = $("<button>Switch to XML editor</button>");
356 _swapEditorButton.button().click(function()
357 {
358 if(_vEditor && _textEditor)
359 {
360 if(_isVisualEditor)
361 {
362 _vEditor.savePendingEdits();
363 _vEditor.getMainDiv().hide();
364 var containerNode = _vEditor.getXML().firstChild;
365 var templateNode = containerNode.firstChild;
366 while(templateNode)
367 {
368 if(templateNode.nodeType == 1)
369 {
370 break;
371 }
372 templateNode = templateNode.nextSibling;
373 }
374 var xmlText = new XMLSerializer().serializeToString(templateNode);
375 _editor.setValue(xmlText);
376 _editor.clearSelection();
377 var UndoManager = require("ace/undomanager").UndoManager;
378 _editor.getSession().setUndoManager(new UndoManager());
379 _textEditor.show();
380 _swapEditorButton.button("option", "label", "Switch to visual editor");
381 _isVisualEditor = false;
382 _xmlStatusBar.show();
383 }
384 else
385 {
386 _textEditor.hide();
387 var xmlText = _editor.getValue();
388 _vEditor.getMainDiv().remove();
389 _vEditor = new visualXMLEditor(xmlText);
390 _editingDiv.append(_vEditor.getMainDiv());
391 _vEditor.selectRootElement();
392 _vEditor.getMainDiv().show();
393 _swapEditorButton.button("option", "label", "Switch to XML editor");
394 _isVisualEditor = true;
395 _xmlStatusBar.hide();
396 }
397 }
398 });
399 _styleFunctions.push(function(){_swapEditorButton.button({icons:{primary:"ui-icon-refresh"}})});
400
401 undoButton = $("<button>Undo</button>");
402 undoButton.click(function()
403 {
404 if(_isVisualEditor)
405 {
406 _vEditor.undo();
407 }
408 else
409 {
410 _editor.undo();
411 }
412 });
413 _styleFunctions.push(function(){undoButton.button({icons:{primary:"ui-icon-arrowreturnthick-1-w"}})});
414
415 buttonDiv.append(_enableSelectorButton);
416 buttonDiv.append(_closeEditorButton);
417 buttonDiv.append(_saveButton);
418 buttonDiv.append(_swapEditorButton);
419 buttonDiv.append(undoButton);
420 }
421
422 //Used to monitor the state of the XML in the XML editor and will notify the user if there is an error
423 var createXMLStatusBar = function(buttonDiv)
424 {
425 _xmlStatusBar = $("<span>");
426 _xmlStatusBar.css("padding", "5px");
427 _xmlStatusBar.addClass("ui-corner-all");
428 _styleFunctions.push(function(){_xmlStatusBar.hide();});
429
430 //Check the XML for errors every 2 seconds
431 setInterval(function()
432 {
433 if(_editor)
434 {
435 var xmlString = _editor.getValue();
436 try
437 {
438 var xml = $.parseXML('<testContainer xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:java="http://xml.apache.org/xslt/java" xmlns:util="xalan://org.greenstone.gsdl3.util.XSLTUtil" xmlns:gslib="http://www.greenstone.org/skinning" xmlns:gsf="http://www.greenstone.org/greenstone3/schema/ConfigFormat">' + xmlString + "</testContainer>");
439 }
440 catch(error)
441 {
442 console.log(error);
443 _xmlStatusBar.text("XML ERROR! (Mouse over for details)");
444 _xmlStatusBar.addClass("ui-state-error");
445 _xmlStatusBar.removeClass("ui-state-active");
446 _xmlStatusBar.attr("title", error);
447 _saveButton.button("option", "disabled", true);
448 _swapEditorButton.button("option", "disabled", true);
449 return;
450 }
451
452 _xmlStatusBar.text("XML OK!");
453 _xmlStatusBar.addClass("ui-state-active");
454 _xmlStatusBar.removeClass("ui-state-error");
455 _xmlStatusBar.removeAttr("title");
456 if(_saveButton.button("option", "label") == "Save changes")
457 {
458 _saveButton.button("option", "disabled", false);
459 }
460 if(_swapEditorButton.button("option", "label") == "Switch to visual editor")
461 {
462 _swapEditorButton.button("option", "disabled", false);
463 }
464 }
465 }, 2000);
466 buttonDiv.append(_xmlStatusBar);
467 }
468
469 //Create the elements that allow
470 var createFileAndTemplateSelectors = function(buttonDiv)
471 {
472 _templateSelector = $("<div>", {"id":"veTemplateSelector", "class":"ui-state-default ui-corner-all"});
473 _templateSelector.append($("<span>Templates: <span>"));
474 var templateSelectBox = $("<select>").append("<option>-- No templates --</option>");
475 templateSelectBox.change(function(e, triggered)
476 {
477 var selected = templateSelectBox.find(":selected");
478 var changeFunction = selected.data("changeFunction");
479 if(changeFunction)
480 {
481 changeFunction();
482 }
483
484 if(!triggered)
485 {
486 _templateTracker.push({fileIndex:_fileSelector.find(":selected").data("index"), templateIndex:selected.data("index"), list:templateSelectBox.children("option").clone(true)});
487 }
488 });
489 _templateSelector.append(templateSelectBox);
490 _fileSelector = $("<div>", {"id":"veFileSelector"});
491 buttonDiv.append(_fileSelector);
492 buttonDiv.append(_templateSelector);
493
494 //Populate the file selector
495 var url = gs.xsltParams.library_name + "?a=g&rt=r&s=GetXSLTFilesForCollection&s1.interfaceName=" + gs.xsltParams.interface_name + "&s1.siteName=" + gs.xsltParams.site_name + "&s1.collectionName=" + gs.cgiParams.c;
496 $.ajax(url)
497 .success(function(response)
498 {
499 var listStartIndex = response.indexOf("<fileListJSON>") + "<fileListJSON>".length;
500 var listEndIndex = response.indexOf("</fileListJSON>");
501
502 var listString = response.substring(listStartIndex, listEndIndex).replace(/&quot;/g, "\"").replace(/\\/g, "/");
503 var list = eval(listString);
504
505 var fileSelectBox = $("<select>");
506 fileSelectBox.append($("<option>-- Select a file --</option>").data("index", -1));
507 _fileSelector.addClass("ui-state-default");
508 _fileSelector.addClass("ui-corner-all");
509 _fileSelector.append("<span>Files: </span>");
510 _fileSelector.append(fileSelectBox);
511
512 for(var i = 0; i < list.length; i++)
513 {
514 var item = list[i];
515 var option = $("<option>" + item.path + " (" + item.location + ")</option>").data("index", i);
516 option.data("fileItem", item);
517 fileSelectBox.append(option);
518 }
519
520 fileSelectBox.change(function()
521 {
522 var selectedItem = fileSelectBox.find(":selected");
523
524 if(!selectedItem.data("fileItem"))
525 {
526 return;
527 }
528
529 var getURL = gs.xsltParams.library_name + "?a=g&rt=r&s=GetTemplateListFromFile&s1.fileName=" + selectedItem.data("fileItem").path + "&s1.locationName=" + selectedItem.data("fileItem").location + "&s1.interfaceName=" + gs.xsltParams.interface_name + "&s1.siteName=" + gs.xsltParams.site_name + "&s1.collectionName=" + gs.cgiParams.c;
530 $.ajax(getURL)
531 .success(function(templateResponse)
532 {
533 var templateListStart = templateResponse.indexOf("<templateList>") + "<templateList>".length;
534 var templateListEnd = templateResponse.indexOf("</templateList>");
535 var templateListString = templateResponse.substring(templateListStart, templateListEnd).replace(/&quot;/g, "\"");
536 var templateList = eval(templateListString);
537
538 _templateSelector.children("select").empty();
539 if(templateList.length == 0)
540 {
541 _templateSelector.children("select").append($("<option>-- No templates --</option>").data("index", -1));
542 }
543
544 for(var i = 0; i < templateList.length; i++)
545 {
546 var filename = selectedItem.data("fileItem").path;
547 var location = selectedItem.data("fileItem").location;
548 var namespace = templateList[i].namespace;
549 var nodename = "template";
550 var name = templateList[i].name;
551 var match = templateList[i].match;
552
553 if(name)
554 {
555 name = templateList[i].name.replace(/&apos;/g, "'").replace(/&quot;/g, "\"").replace(/&amp;/g, "&");
556 }
557 if(match)
558 {
559 match = templateList[i].match.replace(/&apos;/g, "'").replace(/&quot;/g, "\"").replace(/&amp;/g, "&");
560 }
561
562 var infoContainer = $("<option>");
563
564 _elements.push(infoContainer);
565
566 addChangeEventToInfoContainer(infoContainer, filename, location, nodename, namespace, name, match);
567
568 if(name && name.length > 0)
569 {
570 infoContainer.text(name);
571 }
572 if(match && match.length > 0)
573 {
574 infoContainer.text(match);
575 }
576
577 infoContainer.data("index", i);
578 _templateSelector.children("select").append(infoContainer);
579 }
580
581 _templateSelector.children("select").trigger("change");
582 });
583 });
584 })
585 .error(function()
586 {
587 console.log("Error retrieving XSLT files");
588 });
589 }
590
591 //The function that creates all the necessary elements for Greenbug
592 var createDebugDiv = function()
593 {
594 _mainDiv = $("<div>", {"id":"debugDiv"});
595 _mainDiv.css(
596 {
597 "position":"fixed",
598 "font-size":"0.8em",
599 "bottom":"0px",
600 "width":"100%",
601 "background":"white",
602 "border":"1px black solid",
603 "padding":"5px",
604 "z-index":100
605 });
606
607 _editingDiv = $("<div>");
608 var toolBarDiv = $("<div>");
609 toolBarDiv.css({"height":"40px"});
610 toolBarDiv.append("<div>", {style:"clear:both;"});
611
612 var buttonDiv = $("<div>");
613 toolBarDiv.append(buttonDiv);
614 createNavButtons(buttonDiv);
615 createControlButtons(buttonDiv);
616 createFileAndTemplateSelectors(buttonDiv);
617 createXMLStatusBar(buttonDiv);
618
619 _styleFunctions.push(function(){$(".ui-button").css({"margin-right":"0.5em"});});
620
621 _mainDiv.append(toolBarDiv);
622 _mainDiv.append(_editingDiv);
623 _mainDiv.append(_navArea);
624 }
625
626 //Clear all selected elements on the page
627 var clearAll = function()
628 {
629 _itemSelected = false;
630 $(_elements).each(function()
631 {
632 $(this).remove();
633 });
634 }
635
636 //Put a border around the given element
637 var highlightElement = function(e)
638 {
639 var topBorderDiv = $("<div>");
640 var bottomBorderDiv = $("<div>");
641 var leftBorderDiv = $("<div>");
642 var rightBorderDiv = $("<div>");
643
644 topBorderDiv.css({"position":"absolute", "top":e.offset().top + "px", "left":e.offset().left + "px", "height":"0px", "width":e.width() + "px", "border":"1px solid red"});
645 bottomBorderDiv.css({"position":"absolute", "top":(e.offset().top + e.height()) + "px", "left":e.offset().left + "px", "height":"0px", "width":e.width() + "px", "border":"1px solid red"});
646 leftBorderDiv.css({"position":"absolute", "top":e.offset().top + "px", "left":e.offset().left + "px", "height":e.height() + "px", "width":"0px", "border":"1px solid red"});
647 rightBorderDiv.css({"position":"absolute", "top":e.offset().top + "px", "left":(e.offset().left + e.width()) + "px", "height":e.height() + "px", "width":"0px", "border":"1px solid red"});
648
649 $("body").append(topBorderDiv, bottomBorderDiv, leftBorderDiv, rightBorderDiv);
650
651 _elements.push(topBorderDiv);
652 _elements.push(bottomBorderDiv);
653 _elements.push(leftBorderDiv);
654 _elements.push(rightBorderDiv);
655 }
656
657 //Change the current template in the XML and Visual editor
658 this.changeCurrentTemplate = function(location, filename, nodename, namespace, name, match)
659 {
660 _currentFileName = filename;
661 _currentLocation = location;
662 _currentNodename = nodename;
663 _currentNamespace = namespace;
664 _currentName = name;
665 _currentMatch = match;
666
667 var responseName = "requestedNameTemplate";
668
669 var url = gs.xsltParams.library_name + "?a=g&rt=r&s=GetXMLTemplateFromFile&s1.fileName=" + filename + "&s1.interfaceName=" + gs.xsltParams.interface_name + "&s1.siteName=" + gs.xsltParams.site_name + "&s1.collectionName=" + gs.cgiParams.c + "&s1.locationName=" + location + "&s1.namespace=" + namespace + "&s1.nodename=" + nodename;
670 if(match && match.length > 0){url += "&s1.match=" + match; responseName = "requestedMatchTemplate";}
671 if(name && name.length > 0){url += "&s1.name=" + name;}
672
673 $.ajax(url)
674 .success(function(response)
675 {
676 var template;
677 if(response.search(responseName) != -1)
678 {
679 var startIndex = response.indexOf("<" + responseName + ">") + responseName.length + 2;
680 var endIndex = response.indexOf("</" + responseName + ">");
681 template = response.substring(startIndex, endIndex);
682 }
683 else
684 {
685 return;
686 }
687
688 _textEditor = $("<div>", {"id":"textEditor"});
689 _textEditor.css({"width":"100%", "height":"300px"});
690 _textEditor.val(template);
691
692 if(_isVisualEditor)
693 {
694 _textEditor.hide();
695 }
696
697 _editingDiv.empty();
698 _editingDiv.append($("<p>Location: " + location + " <br/>Filename: " + filename + "</p>"));
699 _editingDiv.append(_textEditor);
700
701 _vEditor = new visualXMLEditor(template);
702 _editingDiv.append(_vEditor.getMainDiv());
703 _vEditor.setGreenbug(_greenbug);
704 _vEditor.selectRootElement();
705 $("#veToolboxDiv").height($("#veEditorContainer").height());
706
707 _vEditor.setFileLocation(location);
708 _vEditor.setFileName(filename);
709
710 if(!_isVisualEditor)
711 {
712 _vEditor.getMainDiv().hide();
713 }
714
715 _editor = ace.edit("textEditor");
716 _editor.getSession().setMode("ace/mode/xml");
717 _editor.getSession().setUseSoftTabs(false);
718 _editor.setValue(template);
719 _editor.clearSelection();
720 var UndoManager = require("ace/undomanager").UndoManager;
721 _editor.getSession().setUndoManager(new UndoManager());
722
723 _textEditor.css({"min-height":"200px", "border-top":"5px solid #444"});
724 _textEditor.resizable({handles: 'n', resize:function()
725 {
726 _textEditor.css({top:"0px"});
727 _editor.resize();
728 }});
729
730 _closeEditorButton.button("option", "disabled", false);
731 if(_closeEditorButton.button("option", "label") == "Open editor")
732 {
733 _closeEditorButton.button("option", "label", "Close editor");
734 _editingDiv.show();
735 }
736 })
737 .error(function()
738 {
739 console.log("Error getting the XML template from the file");
740 });
741 }
742
743 //Store the function that is called when this template is selected from the list
744 var addChangeEventToInfoContainer = function(infoContainer, filename, location, nodename, namespace, name, match)
745 {
746 infoContainer.data("changeFunction", function()
747 {
748 _greenbug.changeCurrentTemplate(location, filename, nodename, namespace, name, match);
749 });
750 }
751
752 //Turns a filename into it's location (i.e. interface/site/collection) and name
753 this.fileNameToLocationAndName = function(filepath)
754 {
755 var location;
756 var filename;
757 //Use the filepath to work out where this file is from
758 if(filepath.search(/[\/\\]interfaces[\/\\]/) != -1)
759 {
760 location = "interface";
761 filename = filepath.replace(/.*[\/\\]transform[\/\\]/, "");
762 }
763 else if(filepath.search(/[\/\\]sites[\/\\].*[\/\\]collect[\/\\].*[\/\\]etc[\/\\]/) != -1)
764 {
765 location = "collectionConfig";
766 filename = filepath.replace(/.*[\/\\]sites[\/\\].*[\/\\]collect[\/\\].*[\/\\]etc[\/\\]/, "");
767 }
768 else if(filepath.search(/[\/\\]sites[\/\\].*[\/\\]collect[\/\\].*[\/\\]transform[\/\\]/) != -1)
769 {
770 location = "collection";
771 filename = filepath.replace(/.*[\/\\]sites[\/\\].*[\/\\]collect[\/\\].*[\/\\]transform[\/\\]/, "");
772 }
773 else if(filepath.search(/[\/\\]sites[\/\\].*[\/\\]transform[\/\\]/) != -1)
774 {
775 location = "site";
776 filename = filepath.replace(/.*[\/\\]sites[\/\\].*[\/\\]transform[\/\\]/, "");
777 }
778
779 return {location:location, filename:filename};
780 }
781
782 //Add the mouse events to the <debug> elemetns that are called when the selector is anabled
783 var addMouseEventsToDebugElements = function(debugElems)
784 {
785 debugElems.click(function(e)
786 {
787 if(_debugOn)
788 {
789 e.stopPropagation();
790 $("a").off("click");
791 _debugOn = false;
792 _pauseSelector = true;
793 _enableSelectorButton.button("option", "disabled", false);
794 _templateSelector.children("select").trigger("change", [true]);
795 _fileSelector.children("select").val("none");
796
797 var selectedCopy = new Array();
798 for(var i = 0; i < _selectedInfoContainers.length; i++)
799 {
800 selectedCopy[i] = _selectedInfoContainers[i];
801 }
802
803 _currentSelectionButton.button("option", "disabled", false);
804
805 _templateTracker.push({fileIndex:-1, list:selectedCopy, templateIndex:0});
806 }
807 });
808
809 debugElems.mouseover(function()
810 {
811 if(_debugOn && !_pauseSelector)
812 {
813 _fileSelector.find("select").val("none");
814
815 var nodes = new Array();
816 if($(this).is("table, tr"))
817 {
818 var size = parseInt($(this).attr("debugSize"));
819 for(var i = 0; i < size; i++)
820 {
821 var tempNode = $("<div>");
822 tempNode.tempAttrs = new Array();
823 $(this.attributes).each(function()
824 {
825 if(this.value.charAt(0) == '[')
826 {
827 var values = eval(this.value);
828 if(values[i] == "")
829 {
830 return;
831 }
832 tempNode.attr(this.name, values[i]);
833 tempNode.tempAttrs.push({name:this.name, value:values[i]});
834 }
835 });
836 nodes.push(tempNode);
837 }
838 }
839 else
840 {
841 nodes.push(this);
842 }
843
844 $(nodes).each(function()
845 {
846 var filepath = $(this).attr("filename");
847 var fullNodename = $(this).attr("nodename");
848 var colonIndex = fullNodename.indexOf(":");
849 var namespace = fullNodename.substring(0, colonIndex);
850 var nodename = fullNodename.substring(colonIndex + 1);
851 var name = $(this).attr("name");
852 var match = $(this).attr("match");
853
854 var file = _greenbug.fileNameToLocationAndName(filepath);
855
856 var infoContainer = $("<option>");
857
858 _elements.push(infoContainer);
859
860 addChangeEventToInfoContainer(infoContainer, file.filename, file.location, nodename, namespace, name, match);
861
862 if(name && name.length > 0)
863 {
864 infoContainer.text(name);
865 }
866 if(match && match.length > 0)
867 {
868 infoContainer.text(match);
869 }
870
871 _templateSelector.children("select").append(infoContainer);
872 infoContainer.data("index", infoContainer.index());
873 _selectedInfoContainers.push(infoContainer.clone(true));
874 });
875
876 if(!_itemSelected)
877 {
878 _itemSelected = true;
879 highlightElement($(this));
880 }
881 }
882 });
883
884 debugElems.mouseout(function()
885 {
886 if(_debugOn && !_pauseSelector)
887 {
888 clearAll();
889 _templateSelector.children("select").empty();
890 _selectedInfoContainers = new Array();
891 }
892 });
893 }
894
895 //Remove <debug> elements from the title
896 var fixTitle = function()
897 {
898 $("title").text($("title").text().replace(/<[^>]*>/g, ""));
899 }
900
901 //Initialise Greenbug
902 this.init = function()
903 {
904 //We only want this on if we have debug elements in the page
905 var debugElems = $('debug, [debug="true"]');
906 if(!debugElems.length)
907 {
908 var enableGBButtonHolder = $("<div>", {"title":"Enable Greenbug", "id":"gbEnableButton", "class":"ui-state-default ui-corner-all"});
909 enableGBButtonHolder.append($("<img>", {"src":gs.imageURLs.greenBug}));
910 enableGBButtonHolder.click(function()
911 {
912 var url = document.URL;
913 url = url.replace(/[\?&]debug=0/g, "").replace(/[\?&]debug=1/g, "");
914
915 if(url.indexOf("?") == url.length - 1)
916 {
917 document.location.href = url += "debug=1";
918 }
919 else if(url.indexOf("?") != -1)
920 {
921 document.location.href = url += "&debug=1";
922 }
923 else
924 {
925 document.location.href = url += "?debug=1";
926 }
927 });
928 $("body").append(enableGBButtonHolder);
929 return;
930 }
931
932 createDebugDiv();
933 $("body").append(_mainDiv);
934
935 callStyleFunctions();
936
937 addMouseEventsToDebugElements(debugElems);
938 fixTitle();
939 }
940}
941
942//The code entry point
943$(window).load(function()
944{
945 var debugWidget = new DebugWidget();
946 debugWidget.init();
947});
Note: See TracBrowser for help on using the repository browser.