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

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

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