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

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

The editor is now resizable
  • 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 }});
296
297 _closeEditorButton.removeAttr("disabled");
298 })
299 .error(function()
300 {
301 console.log("ERROR");
302 });
303 });
304 infoContainer.mouseover(function()
305 {
306 $(this).data("background", $(this).css("background"));
307 $(this).css("background", "yellow");
308 });
309 infoContainer.mouseout(function()
310 {
311 $(this).css("background", $(this).data("background"));
312 });
313 }
314
315 var addMouseEventsToDebugElements = function(debugElems)
316 {
317 debugElems.click(function()
318 {
319 if(_debugOn)
320 {
321 _pauseSelector = true;
322 _unpauseButton.removeAttr("disabled");
323 }
324 });
325
326 debugElems.mouseover(function()
327 {
328 if(_debugOn && !_pauseSelector)
329 {
330 var nodes = new Array();
331 if($(this).is("table, tr"))
332 {
333 var size = parseInt($(this).attr("debugSize"));
334 for(var i = 0; i < size; i++)
335 {
336 var tempNode = $("<div>");
337 tempNode.tempAttrs = new Array();
338 $(this.attributes).each(function()
339 {
340 if(this.value.charAt(0) == '[')
341 {
342 var values = eval(this.value);
343 if(values[i] == "")
344 {
345 return;
346 }
347 tempNode.attr(this.name, values[i]);
348 tempNode.tempAttrs.push({name:this.name, value:values[i]});
349 }
350 });
351 nodes.push(tempNode);
352 }
353 }
354 else
355 {
356 nodes.push(this);
357 }
358
359 $(nodes).each(function()
360 {
361 var filepath = $(this).attr("filename");
362 var fullNodename = $(this).attr("nodename");
363 var colonIndex = fullNodename.indexOf(":");
364 var namespace = fullNodename.substring(0, colonIndex);
365 var nodename = fullNodename.substring(colonIndex + 1);
366 var name = $(this).attr("name");
367 var match = $(this).attr("match");
368
369 var infoContainer = $("<div>");
370 infoContainer.css({"cursor":"pointer", "border":"1px dashed #AAAAAA", "margin":"5px"});
371 var elementDIV = $("<div>");
372
373 elementDIV.css("font-size", "1.1em");
374
375 infoContainer.append(elementDIV);
376
377 _elements.push(infoContainer);
378
379 addMouseEventsToInfoContainer(infoContainer, filepath, nodename, namespace, name, match);
380
381 var attrstr = "";
382 var illegalNames = ["nodename", "filename", "style", "debug", "id", "class"];
383
384 var attributes = ((this.tempAttrs) ? this.tempAttrs : this.attributes);
385
386 $(attributes).each(function()
387 {
388 for(var i = 0; i < illegalNames.length; i++)
389 {
390 if(this.name == illegalNames[i]){return;}
391 }
392 attrstr += this.name + "=\"" + this.value + "\" ";
393 });
394
395 elementDIV.text("<" + fullNodename + " " + attrstr + ">");
396
397 _textDiv.prepend(infoContainer);
398 });
399
400 if(!_itemSelected)
401 {
402 _itemSelected = true;
403 highlightElement($(this));
404 }
405 }
406 });
407
408 debugElems.mouseout(function()
409 {
410 if(_debugOn && !_pauseSelector)
411 {
412 clearAll();
413 }
414 });
415 }
416
417 this.init = function()
418 {
419 //We only want this on if we have debug elements in the page
420 var debugElems = $('debug, [debug="true"]');
421 if(!debugElems.length)
422 {
423 console.log("No debug tags present, debugging disabled.");
424 return;
425 }
426
427 createDebugDiv();
428 $("body").append(_mainDiv);
429
430 addMouseEventsToDebugElements(debugElems);
431 }
432
433}
434
435$(window).load(function()
436{
437 var debugWidget = new DebugWidget();
438 debugWidget.init();
439});
Note: See TracBrowser for help on using the repository browser.