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

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

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