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

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

Next iteration of the "Greenbug" interface. Saving now works. Still need to make gsf stuff work though.
  • Property svn:executable set to *
File size: 11.2 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 _editingDiv;
17 var _unpauseButton;
18 var _closeEditorButtonButton;
19 var _xmlStatusBar;
20 var _saveButton;
21
22 //Editor state-keeping variables
23 var _currentFilepath;
24 var _currentNodename;
25 var _currentName;
26 var _currentMatch;
27 var _currentNamespace;
28
29 var createDebugDiv = function()
30 {
31 _mainDiv = $("<div>", {"id":"debugDiv"});
32 _mainDiv.css(
33 {
34 "position":"fixed",
35 "font-size":"0.7em",
36 "bottom":"0px",
37 "height":"300px",
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%", "height":"260px"});
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 _mainDiv.css("height", "300px");
95 }
96 else
97 {
98 $(this).val("Close editor");
99 _editingDiv.show();
100 _mainDiv.css("height", "500px");
101 }
102 });
103
104 _xmlStatusBar = $("<span>");
105 _xmlStatusBar.css("padding", "5px");
106
107 //Check the XML for errors every 2 seconds
108 setInterval(function()
109 {
110 var editor = _editingDiv.find("textarea");
111 if(editor.length)
112 {
113 var xmlString = editor.val();
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 _saveButton.removeAttr("disabled");
132 }
133
134 }, 2000);
135
136 _saveButton = $("<input type=\"button\" value=\"Save changes\" disabled=\"disabled\">");
137 _saveButton.click(function()
138 {
139 var editor = _editingDiv.find("textarea");
140 if(editor.length)
141 {
142 var xmlString = editor.val();
143 try
144 {
145 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>");
146 }
147 catch(error)
148 {
149 alert("Could not save as there is a problem with the XML.");
150 return;
151 }
152
153 var url = gs.xsltParams.library_name;
154 var parameters = {"a":"g", "rt":"r", "s":"SaveXMLTemplateToFile", "s1.filePath":_currentFilepath, "s1.namespace":_currentNamespace, "s1.nodename":_currentNodename, "s1.xml":xmlString};
155
156 if(_currentName && _currentName.length > 0){parameters["s1.name"] = _currentName;}
157 if(_currentMatch && _currentMath.length > 0){parameters["s1.match"] = _currentMatch;}
158
159 $.post(url, parameters)
160 .success(function()
161 {
162 alert("The template has been saved successfully.");
163 })
164 .error(function()
165 {
166 alert("There was an error sending the request to the server, please try again.");
167 });
168 }
169 });
170
171 var minimiseButton = $("<img>", {"src":gs.imageURLs.collapse});
172 minimiseButton.css({"cursor":"pointer", "float":"right", "margin-right":"20px"});
173 minimiseButton.click(function()
174 {
175 if($(this).attr("src") == gs.imageURLs.collapse)
176 {
177 _textDiv.hide();
178 $(this).attr("src", gs.imageURLs.expand);
179 _mainDiv.css("height", (_mainDiv.height() - 260) + "px");
180 }
181 else
182 {
183 _textDiv.show();
184 $(this).attr("src", gs.imageURLs.collapse);
185 _mainDiv.css("height", (_mainDiv.height() + 260) + "px");
186 }
187 });
188
189 var clear = $("<span>");
190 clear.css("clear", "both");
191
192 toolBarDiv.append(minimiseButton);
193 toolBarDiv.append(clear);
194
195 buttonDiv.append(pickElementButton);
196 buttonDiv.append(_unpauseButton);
197 buttonDiv.append(_closeEditorButton);
198 buttonDiv.append(_xmlStatusBar);
199 buttonDiv.append(_saveButton);
200 _mainDiv.append(_editingDiv);
201 _mainDiv.append(toolBarDiv);
202 _mainDiv.append(_textDiv);
203 }
204
205 var clearAll = function()
206 {
207 _itemSelected = false;
208 $(_elements).each(function()
209 {
210 $(this).remove();
211 });
212 }
213
214 var highlightElement = function(e)
215 {
216 var topBorderDiv = $("<div>");
217 var bottomBorderDiv = $("<div>");
218 var leftBorderDiv = $("<div>");
219 var rightBorderDiv = $("<div>");
220
221 topBorderDiv.css({"position":"absolute", "top":e.offset().top + "px", "left":e.offset().left + "px", "height":"0px", "width":e.width() + "px", "border":"1px solid red"});
222 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"});
223 leftBorderDiv.css({"position":"absolute", "top":e.offset().top + "px", "left":e.offset().left + "px", "height":e.height() + "px", "width":"0px", "border":"1px solid red"});
224 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"});
225
226 $("body").append(topBorderDiv, bottomBorderDiv, leftBorderDiv, rightBorderDiv);
227
228 _elements.push(topBorderDiv);
229 _elements.push(bottomBorderDiv);
230 _elements.push(leftBorderDiv);
231 _elements.push(rightBorderDiv);
232 }
233
234 var addMouseEventsToInfoContainer = function(infoContainer, filepath, nodename, namespace, name, match)
235 {
236 infoContainer.click(function()
237 {
238 _currentFilepath = filepath;
239 _currentNodename = nodename;
240 _currentNamespace = namespace;
241 _currentName = name;
242 _currentMatch = match;
243
244 var url = gs.xsltParams.library_name + "?a=g&rt=r&s=RetrieveXMLTemplateFromFile&s1.filePath=" + _currentFilepath + "&s1.namespace=" + _currentNamespace + "&s1.nodename=" + _currentNodename;
245 if(_currentName && _currentName.length > 0){url += "&s1.name=" + _currentName;}
246 if(_currentMatch && _currentMatch.length > 0){url += "&s1.match=" + _currentMatch;}
247 $.ajax(url)
248 .success(function(response)
249 {
250 var template;
251 if(response.search(/<requestedTemplate>/) != -1)
252 {
253 var startIndex = response.indexOf("<requestedTemplate>") + ("<requestedTemplate>").length;
254 var endIndex = response.indexOf("</requestedTemplate>");
255 template = response.substring(startIndex, endIndex);
256 }
257 else
258 {
259 return;
260 }
261
262 var editArea = $("<textarea>");
263 editArea.css({"width":"98%", "height":"180px"});
264 editArea.val(template);
265
266 _editingDiv.empty();
267 _editingDiv.append(editArea);
268 _editingDiv.css({"height":"190px"});
269
270 _mainDiv.css({"height":"500px"});
271
272 _closeEditorButton.removeAttr("disabled");
273 })
274 .error(function()
275 {
276 console.log("ERROR");
277 });
278 });
279 infoContainer.mouseover(function()
280 {
281 $(this).data("background", $(this).css("background"));
282 $(this).css("background", "yellow");
283 });
284 infoContainer.mouseout(function()
285 {
286 $(this).css("background", $(this).data("background"));
287 });
288 }
289
290 var addMouseEventsToDebugElements = function(debugElems)
291 {
292 debugElems.click(function()
293 {
294 if(_debugOn)
295 {
296 _pauseSelector = true;
297 _unpauseButton.removeAttr("disabled");
298 }
299 });
300
301 debugElems.mouseover(function()
302 {
303 if(_debugOn && !_pauseSelector)
304 {
305 var infoContainer = $("<div>");
306 infoContainer.css({"cursor":"pointer", "border":"1px dashed #AAAAAA", "margin":"5px"});
307 var fromDIV = $("<div>");
308 var elementDIV = $("<div>");
309
310 elementDIV.css("font-size", "1.1em");
311 fromDIV.css("font-size", "0.9em");
312
313 infoContainer.append(fromDIV);
314 infoContainer.append(elementDIV);
315
316 _elements.push(infoContainer);
317
318 var filepath = $(this).attr("filename");
319 var fullNodename = $(this).attr("nodename");
320 var colonIndex = fullNodename.indexOf(":");
321 var namespace = fullNodename.substring(0, colonIndex);
322 var nodename = fullNodename.substring(colonIndex + 1);
323 var name = $(this).attr("name");
324 var match = $(this).attr("match");
325
326 addMouseEventsToInfoContainer(infoContainer, filepath, nodename, namespace, name, match);
327
328 var nodeName = $(this).attr("nodename");
329 var filename = $(this).attr("filename");
330 var attrstr = "";
331 var illegalNames = ["nodename", "filename", "style", "debug", "id", "class"];
332
333 $(this.attributes).each(function()
334 {
335 for(var i = 0; i < illegalNames.length; i++)
336 {
337 if(this.name == illegalNames[i]){return;}
338 }
339 attrstr += this.name + "=\"" + this.value + "\" ";
340 });
341
342 fromDIV.text("From " + filename + ":");
343 elementDIV.text("<" + nodeName + " " + attrstr + ">");
344
345 _textDiv.prepend(infoContainer);
346
347 if(!_itemSelected)
348 {
349 _itemSelected = true;
350 highlightElement($(this));
351 }
352 }
353 });
354
355 debugElems.mouseout(function()
356 {
357 if(_debugOn && !_pauseSelector)
358 {
359 clearAll();
360 }
361 });
362 }
363
364 this.init = function()
365 {
366 //We only want this on if we have debug elements in the page
367 var debugElems = $('debug, [debug="true"]');
368 if(!debugElems.length)
369 {
370 console.log("No debug tags present, debugging disabled.");
371 return;
372 }
373
374 createDebugDiv();
375 $("body").append(_mainDiv);
376
377 addMouseEventsToDebugElements(debugElems);
378 }
379
380}
381
382$(window).load(function()
383{
384 var debugWidget = new DebugWidget();
385 debugWidget.init();
386});
Note: See TracBrowser for help on using the repository browser.