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

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

Some minor changes to the Greenbug editor
  • Property svn:executable set to *
File size: 12.7 KB
Line 
1function DebugWidget()
2{
3 //************************
4 //Private member variables
5 //************************
6
7 //Debugger state-keeping variables
8 var _debugOn = false;
9 var _pauseSelector = false;
10 var _elements = new Array();
11 var _itemSelected = false; //Used to prevent multiple elements from being highlighted
12
13 //Page elements
14 var _mainDiv;
15 var _textDiv;
16 var _editor;
17 var _editingDiv;
18 var _unpauseButton;
19 var _closeEditorButtonButton;
20 var _xmlStatusBar;
21 var _saveButton;
22
23 //Editor state-keeping variables
24 var _currentFilepath;
25 var _currentNodename;
26 var _currentName;
27 var _currentMatch;
28 var _currentNamespace;
29
30 var createDebugDiv = function()
31 {
32 _mainDiv = $("<div>", {"id":"debugDiv"});
33 _mainDiv.css(
34 {
35 "position":"fixed",
36 "font-size":"0.7em",
37 "bottom":"0px",
38 "height":"40px",
39 "width":"100%",
40 "background":"white",
41 "border":"1px black solid",
42 "padding":"5px",
43 "z-index":100
44 });
45
46 _editingDiv = $("<div>");
47 var toolBarDiv = $("<div>");
48 toolBarDiv.css({"height":"40px"});
49 var buttonDiv = $("<div>");
50 buttonDiv.css("float", "left");
51 toolBarDiv.append(buttonDiv);
52 _textDiv = $("<div>");
53 _textDiv.css({"overflow":"auto", "width":"100%", "height":"260px"});
54
55 var pickElementButton = $("<input type=\"button\" value=\"Enable debugging\">");
56 pickElementButton.click(function()
57 {
58 if(!_debugOn)
59 {
60 pickElementButton.attr("value", "Disable debugging");
61 $("a").click(function(e)
62 {
63 e.preventDefault();
64 });
65 _debugOn = true;
66 }
67 else
68 {
69 pickElementButton.attr("value", "Enable debugging");
70 $("a").off("click");
71 clearAll();
72 _unpauseButton.attr("disabled", "disabled");
73 _pauseSelector = false;
74 _debugOn = false;
75 }
76 });
77
78 _unpauseButton = $("<input type=\"button\" value=\"Select new element\" disabled=\"disabled\">");
79 _unpauseButton.click(function()
80 {
81 if(_pauseSelector)
82 {
83 _pauseSelector = false;
84 $(this).attr("disabled", "disabled");
85 }
86 });
87
88 _closeEditorButton = $("<input type=\"button\" value=\"Close editor\" disabled=\"disabled\">");
89 _closeEditorButton.click(function()
90 {
91 if($(this).val() == "Close editor")
92 {
93 $(this).val("Open editor");
94 _editingDiv.hide();
95 _mainDiv.css("height", (_mainDiv.height() - 200) + "px");
96 }
97 else
98 {
99 $(this).val("Close editor");
100 _editingDiv.show();
101 _mainDiv.css("height", (_mainDiv.height() + 200) + "px");
102 }
103 });
104
105 _xmlStatusBar = $("<span>");
106 _xmlStatusBar.css("padding", "5px");
107
108 //Check the XML for errors every 2 seconds
109 setInterval(function()
110 {
111 if(_editor)
112 {
113 var xmlString = _editor.getValue();
114 try
115 {
116 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>");
117 }
118 catch(error)
119 {
120 console.log(error);
121 _xmlStatusBar.text("XML ERROR! (Mouse over for details)");
122 _xmlStatusBar.css({"color":"white", "background":"red"});
123 _xmlStatusBar.attr("title", error);
124 _saveButton.attr("disabled", "disabled");
125 return;
126 }
127
128 _xmlStatusBar.text("XML OK!");
129 _xmlStatusBar.css({"color":"white", "background": "green"});
130 _xmlStatusBar.removeAttr("title");
131 if(_saveButton.val() == "Save changes")
132 {
133 _saveButton.removeAttr("disabled");
134 }
135 }
136
137 }, 2000);
138
139 _saveButton = $("<input type=\"button\" value=\"Save changes\" disabled=\"disabled\">");
140 _saveButton.click(function()
141 {
142 if(_editor)
143 {
144 var xmlString = _editor.getValue().replace(/&/g, "&amp;");
145 try
146 {
147 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>");
148 }
149 catch(error)
150 {
151 alert("Could not save as there is a problem with the XML.");
152 return;
153 }
154
155 var url = gs.xsltParams.library_name;
156 var parameters = {"a":"g", "rt":"r", "s":"SaveXMLTemplateToFile", "s1.filePath":_currentFilepath, "s1.namespace":_currentNamespace, "s1.nodename":_currentNodename, "s1.xml":xmlString};
157
158 if(_currentName && _currentName.length > 0){parameters["s1.name"] = _currentName;}
159 if(_currentMatch && _currentMatch.length > 0){parameters["s1.match"] = _currentMatch;}
160
161 _saveButton.val("Saving...");
162 _saveButton.attr("disabled", "disabled");
163
164 $.post(url, parameters)
165 .success(function()
166 {
167 $.ajax(gs.xsltParams.library_name + "?a=s&sa=c")
168 .success(function()
169 {
170 alert("The template has been saved successfully.");
171 })
172 .error(function()
173 {
174 alert("Error reloading collection.");
175 })
176 .complete(function()
177 {
178 _saveButton.val("Save changes");
179 _saveButton.removeAttr("disabled");
180 });
181 })
182 .error(function()
183 {
184 alert("There was an error sending the request to the server, please try again.");
185 });
186 }
187 });
188
189 var minimiseButton = $("<img>", {"src":gs.imageURLs.expand});
190 minimiseButton.css({"cursor":"pointer", "float":"right", "margin-right":"20px"});
191 minimiseButton.click(function()
192 {
193 if($(this).attr("src") == gs.imageURLs.collapse)
194 {
195 _textDiv.hide();
196 $(this).attr("src", gs.imageURLs.expand);
197 _mainDiv.css("height", (_mainDiv.height() - 260) + "px");
198 }
199 else
200 {
201 _textDiv.show();
202 $(this).attr("src", gs.imageURLs.collapse);
203 _mainDiv.css("height", (_mainDiv.height() + 260) + "px");
204 }
205 });
206
207 var clear = $("<span>");
208 clear.css("clear", "both");
209
210 toolBarDiv.append(minimiseButton);
211 toolBarDiv.append(clear);
212
213 buttonDiv.append(pickElementButton);
214 buttonDiv.append(_unpauseButton);
215 buttonDiv.append(_closeEditorButton);
216 buttonDiv.append(_xmlStatusBar);
217 buttonDiv.append(_saveButton);
218 _mainDiv.append(_editingDiv);
219 _mainDiv.append(toolBarDiv);
220 _mainDiv.append(_textDiv);
221 }
222
223 var clearAll = function()
224 {
225 _itemSelected = false;
226 $(_elements).each(function()
227 {
228 $(this).remove();
229 });
230 }
231
232 var highlightElement = function(e)
233 {
234 var topBorderDiv = $("<div>");
235 var bottomBorderDiv = $("<div>");
236 var leftBorderDiv = $("<div>");
237 var rightBorderDiv = $("<div>");
238
239 topBorderDiv.css({"position":"absolute", "top":e.offset().top + "px", "left":e.offset().left + "px", "height":"0px", "width":e.width() + "px", "border":"1px solid red"});
240 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"});
241 leftBorderDiv.css({"position":"absolute", "top":e.offset().top + "px", "left":e.offset().left + "px", "height":e.height() + "px", "width":"0px", "border":"1px solid red"});
242 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"});
243
244 $("body").append(topBorderDiv, bottomBorderDiv, leftBorderDiv, rightBorderDiv);
245
246 _elements.push(topBorderDiv);
247 _elements.push(bottomBorderDiv);
248 _elements.push(leftBorderDiv);
249 _elements.push(rightBorderDiv);
250 }
251
252 var addMouseEventsToInfoContainer = function(infoContainer, filepath, nodename, namespace, name, match)
253 {
254 infoContainer.click(function()
255 {
256 _currentFilepath = filepath;
257 _currentNodename = nodename;
258 _currentNamespace = namespace;
259 _currentName = name;
260 _currentMatch = match;
261
262 var responseName = "requestedNameTemplate";
263
264 var url = gs.xsltParams.library_name + "?a=g&rt=r&s=RetrieveXMLTemplateFromFile&s1.filePath=" + _currentFilepath + "&s1.namespace=" + _currentNamespace + "&s1.nodename=" + _currentNodename;
265 if(_currentMatch && _currentMatch.length > 0){url += "&s1.match=" + _currentMatch; responseName = "requestedMatchTemplate";}
266 if(_currentName && _currentName.length > 0){url += "&s1.name=" + _currentName;}
267 $.ajax(url)
268 .success(function(response)
269 {
270 var template;
271 if(response.search(responseName) != -1)
272 {
273 var startIndex = response.indexOf("<" + responseName + ">") + responseName.length + 2;
274 var endIndex = response.indexOf("</" + responseName + ">");
275 template = response.substring(startIndex, endIndex);
276 }
277 else
278 {
279 return;
280 }
281
282 var editArea = $("<div>", {"id":"textEditor"});
283 editArea.css({"width":"100%", "height":"180px"});
284 editArea.val(template);
285
286 _editingDiv.empty();
287 _editingDiv.append(editArea);
288 _editingDiv.css({"height":"190px"});
289
290 _editor = ace.edit("textEditor");
291 _editor.getSession().setMode("ace/mode/xml");
292 _editor.getSession().setUseSoftTabs(false);
293 _editor.setValue(template);
294 _editor.clearSelection();
295 console.log(_editor);
296
297 _mainDiv.css({"height":"500px"});
298
299 _closeEditorButton.removeAttr("disabled");
300 })
301 .error(function()
302 {
303 console.log("ERROR");
304 });
305 });
306 infoContainer.mouseover(function()
307 {
308 $(this).data("background", $(this).css("background"));
309 $(this).css("background", "yellow");
310 });
311 infoContainer.mouseout(function()
312 {
313 $(this).css("background", $(this).data("background"));
314 });
315 }
316
317 var addMouseEventsToDebugElements = function(debugElems)
318 {
319 debugElems.click(function()
320 {
321 if(_debugOn)
322 {
323 _pauseSelector = true;
324 _unpauseButton.removeAttr("disabled");
325 }
326 });
327
328 debugElems.mouseover(function()
329 {
330 if(_debugOn && !_pauseSelector)
331 {
332 var nodes = new Array();
333 if($(this).is("table, tr"))
334 {
335 var size = parseInt($(this).attr("debugSize"));
336 for(var i = 0; i < size; i++)
337 {
338 var tempNode = $("<div>");
339 tempNode.tempAttrs = new Array();
340 $(this.attributes).each(function()
341 {
342 if(this.value.charAt(0) == '[')
343 {
344 var values = eval(this.value);
345 if(values[i] == "")
346 {
347 return;
348 }
349 tempNode.attr(this.name, values[i]);
350 tempNode.tempAttrs.push({name:this.name, value:values[i]});
351 }
352 });
353 nodes.push(tempNode);
354 }
355 }
356 else
357 {
358 nodes.push(this);
359 }
360
361 $(nodes).each(function()
362 {
363 var filepath = $(this).attr("filename");
364 var fullNodename = $(this).attr("nodename");
365 var colonIndex = fullNodename.indexOf(":");
366 var namespace = fullNodename.substring(0, colonIndex);
367 var nodename = fullNodename.substring(colonIndex + 1);
368 var name = $(this).attr("name");
369 var match = $(this).attr("match");
370
371 var infoContainer = $("<div>");
372 infoContainer.css({"cursor":"pointer", "border":"1px dashed #AAAAAA", "margin":"5px"});
373 var fromDIV = $("<div>");
374 var elementDIV = $("<div>");
375
376 elementDIV.css("font-size", "1.1em");
377 fromDIV.css("font-size", "0.9em");
378
379 infoContainer.append(fromDIV);
380 infoContainer.append(elementDIV);
381
382 _elements.push(infoContainer);
383
384 addMouseEventsToInfoContainer(infoContainer, filepath, nodename, namespace, name, match);
385
386 var attrstr = "";
387 var illegalNames = ["nodename", "filename", "style", "debug", "id", "class"];
388
389 var attributes = ((this.tempAttrs) ? this.tempAttrs : this.attributes);
390
391 $(attributes).each(function()
392 {
393 for(var i = 0; i < illegalNames.length; i++)
394 {
395 if(this.name == illegalNames[i]){return;}
396 }
397 attrstr += this.name + "=\"" + this.value + "\" ";
398 });
399
400 fromDIV.text("From " + filepath + ":");
401 elementDIV.text("<" + fullNodename + " " + attrstr + ">");
402
403 _textDiv.prepend(infoContainer);
404 });
405
406 if(!_itemSelected)
407 {
408 _itemSelected = true;
409 highlightElement($(this));
410 }
411 }
412 });
413
414 debugElems.mouseout(function()
415 {
416 if(_debugOn && !_pauseSelector)
417 {
418 clearAll();
419 }
420 });
421 }
422
423 this.init = function()
424 {
425 //We only want this on if we have debug elements in the page
426 var debugElems = $('debug, [debug="true"]');
427 if(!debugElems.length)
428 {
429 console.log("No debug tags present, debugging disabled.");
430 return;
431 }
432
433 createDebugDiv();
434 $("body").append(_mainDiv);
435
436 addMouseEventsToDebugElements(debugElems);
437 }
438
439}
440
441$(window).load(function()
442{
443 var debugWidget = new DebugWidget();
444 debugWidget.init();
445});
Note: See TracBrowser for help on using the repository browser.