- Timestamp:
- 2013-03-27T12:04:48+13:00 (11 years ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
main/trunk/greenstone3/web/interfaces/default/js/debug_scripts.js
r27129 r27130 4 4 //Private member variables 5 5 //************************ 6 6 7 7 //The this variable 8 8 var _greenbug = this; 9 9 10 10 //Debugger state-keeping variables 11 11 var _debugOn = false; … … 15 15 var _editModeText = false; 16 16 var _selectedTemplate; 17 17 18 18 //Page elements 19 19 var _mainDiv; 20 20 21 21 var _textEditor; 22 22 var _vEditor; 23 23 24 24 var _navArea; 25 25 var _fileSelector; … … 27 27 var _editor; 28 28 var _editingDiv; 29 var _ unpauseButton;29 var _selectNewElementButton; 30 30 var _closeEditorButton; 31 31 var _xmlStatusBar; 32 32 var _saveButton; 33 33 var _swapEditorButton; 34 34 35 35 //Editor state-keeping variables 36 36 var _currentFileName; … … 41 41 var _currentNamespace; 42 42 var _isVisualEditor = true; 43 43 44 44 var _styleFunctions = new Array(); 45 45 46 //Used to reload the page while keeping the state of the editor 46 47 var partialPageReload = function(callback) 47 48 { … … 53 54 var bodyEndIndex = response.indexOf("</body>"); 54 55 var bodyText = response.substring(bodyStartIndex, bodyEndIndex + 7); 55 56 56 57 //Get the current top area and container 57 58 var topLevelTopArea = $("#topArea"); 58 59 var topLevelContainer = $("#container"); 59 60 60 61 //Create a temporary div and put the html into it 61 62 var tempDiv = $("<div>"); 62 63 tempDiv.html(bodyText); 63 64 64 65 //Replace the contents of the old elements with the new elements 65 66 var topArea = tempDiv.find("#topArea"); … … 67 68 topLevelTopArea.html(topArea.html()); 68 69 topLevelContainer.html(container.html()); 69 70 70 71 //Update the events for the debug elements that currently don't have events associated with them 71 72 var debugElems = $('debug, [debug="true"]').filter(function(){return (!($.data(this, "events"))) ? true : false}); … … 76 77 alert("There was an error reloading the page, please reload manually."); 77 78 }); 78 79 79 80 if(callback) 80 81 { … … 82 83 } 83 84 } 84 85 86 //Some functions need to be called after an element is added to the page. So we store them and call them later. 85 87 var callStyleFunctions = function() 86 88 { … … 91 93 } 92 94 } 93 95 96 //Create the area where the buttons are stored 94 97 var createButtonDiv = function(buttonDiv) 95 98 { 96 var pickElementButton = $("<button>Enable selector</button>"); 97 pickElementButton.click(function() 99 //Used to enable the selector to get the templates of a particular area of the page 100 var enableSelectorButton = $("<button>Enable selector</button>"); 101 enableSelectorButton.click(function() 98 102 { 99 103 if(!_debugOn) 100 104 { 101 pickElementButton.button("option", "label", "Disable selector");105 enableSelectorButton.button("option", "label", "Disable selector"); 102 106 $("a").click(function(e) 103 107 { … … 108 112 else 109 113 { 110 pickElementButton.button("option", "label", "Enable selector");114 enableSelectorButton.button("option", "label", "Enable selector"); 111 115 $("a").off("click"); 112 116 clearAll(); 113 _ unpauseButton.button("option", "disabled", true);117 _selectNewElementButton.button("option", "disabled", true); 114 118 _pauseSelector = false; 115 119 _debugOn = false; 116 120 } 117 121 }); 118 _styleFunctions.push(function(){pickElementButton.button({icons:{primary:"ui-icon-power"}})}); 119 120 _unpauseButton = $("<button>Select new element</button>"); 121 _unpauseButton.click(function() 122 _styleFunctions.push(function(){enableSelectorButton.button({icons:{primary:"ui-icon-power"}})}); 123 124 //Used to change what is currently selected 125 _selectNewElementButton = $("<button>Select new element</button>"); 126 _selectNewElementButton.click(function() 122 127 { 123 128 if(_pauseSelector) 124 129 { 125 130 _pauseSelector = false; 126 _unpauseButton.button("option", "disabled", true); 127 } 128 }); 129 _styleFunctions.push(function(){_unpauseButton.button({icons:{primary:"ui-icon-pencil"}, disabled:true})}); 130 131 _selectNewElementButton.button("option", "disabled", true); 132 } 133 }); 134 _styleFunctions.push(function(){_selectNewElementButton.button({icons:{primary:"ui-icon-pencil"}, disabled:true})}); 135 136 //Used to minimise/restore the editor 131 137 _closeEditorButton = $("<button>Close editor</button>"); 132 138 _closeEditorButton.click(function() … … 145 151 _closeEditorButton.css("float", "right"); 146 152 _styleFunctions.push(function(){_closeEditorButton.button({icons:{secondary:"ui-icon-newwin"}, disabled:true})}); 147 153 154 //Used to save any changes that have been made to this template 148 155 _saveButton = $("<button>Save changes</button>"); 149 156 _saveButton.click(function() … … 162 169 } 163 170 xmlString = xmlString.replace(/&/g, "&"); 164 171 165 172 try 166 173 { … … 172 179 return; 173 180 } 174 181 175 182 var url = gs.xsltParams.library_name; 176 183 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}; … … 207 214 }); 208 215 _styleFunctions.push(function(){_saveButton.button({icons:{primary:"ui-icon-disk"}, disabled:true})}); 209 216 217 //Used to switch between the XML and Visual editors 210 218 _swapEditorButton = $("<button>Switch to XML editor</button>"); 211 219 _swapEditorButton.button().click(function() … … 253 261 }); 254 262 _styleFunctions.push(function(){_swapEditorButton.button({icons:{primary:"ui-icon-refresh"}})}); 255 263 256 264 undoButton = $("<button>Undo</button>"); 257 265 undoButton.click(function() … … 267 275 }); 268 276 _styleFunctions.push(function(){undoButton.button({icons:{primary:"ui-icon-arrowreturnthick-1-w"}})}); 269 270 buttonDiv.append( pickElementButton);271 buttonDiv.append(_ unpauseButton);277 278 buttonDiv.append(enableSelectorButton); 279 buttonDiv.append(_selectNewElementButton); 272 280 buttonDiv.append(_closeEditorButton); 273 281 buttonDiv.append(_saveButton); … … 275 283 buttonDiv.append(undoButton); 276 284 } 277 285 286 //Used to monitor the state of the XML in the XML editor and will notify the user if there is an error 278 287 var createXMLStatusBar = function(buttonDiv) 279 288 { … … 282 291 _xmlStatusBar.addClass("ui-corner-all"); 283 292 _styleFunctions.push(function(){_xmlStatusBar.hide();}); 284 293 285 294 //Check the XML for errors every 2 seconds 286 295 setInterval(function() … … 304 313 return; 305 314 } 306 315 307 316 _xmlStatusBar.text("XML OK!"); 308 317 _xmlStatusBar.addClass("ui-state-active"); … … 318 327 } 319 328 } 320 321 329 }, 2000); 322 330 buttonDiv.append(_xmlStatusBar); 323 331 } 324 332 333 //Create the elements that allow 325 334 var createFileAndTemplateSelectors = function(buttonDiv) 326 335 { … … 338 347 }); 339 348 _templateSelector.append(templateSelectBox); 340 _fileSelector = $("<div>", {"id":"veFileSelector" , "class":"ui-state-default ui-corner-all"});349 _fileSelector = $("<div>", {"id":"veFileSelector"}); 341 350 buttonDiv.append(_fileSelector); 342 351 buttonDiv.append(_templateSelector); 343 } 344 352 353 //Populate the file selector 354 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; 355 $.ajax(url) 356 .success(function(response) 357 { 358 var listStartIndex = response.indexOf("<fileListJSON>") + "<fileListJSON>".length; 359 var listEndIndex = response.indexOf("</fileListJSON>"); 360 361 var listString = response.substring(listStartIndex, listEndIndex).replace(/"/g, "\"").replace(/\\/g, "/"); 362 var list = eval(listString); 363 364 var selectBox = $("<select>"); 365 selectBox.append($("<option>-- Select a file --</option>", {value:"none"})); 366 _fileSelector.addClass("ui-state-default"); 367 _fileSelector.addClass("ui-corner-all"); 368 _fileSelector.append("<span>Files: </span>"); 369 _fileSelector.append(selectBox); 370 for(var i = 0; i < list.length; i++) 371 { 372 var item = list[i]; 373 var option = $("<option>" + item.path + " (" + item.location + ")</option>", {value:item.path}); 374 option.data("fileItem", item); 375 selectBox.append(option); 376 } 377 378 selectBox.change(function() 379 { 380 var selectedItem = selectBox.find(":selected"); 381 382 if(!selectedItem.data("fileItem")) 383 { 384 return; 385 } 386 387 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; 388 $.ajax(getURL) 389 .success(function(templateResponse) 390 { 391 var templateListStart = templateResponse.indexOf("<templateList>") + "<templateList>".length; 392 var templateListEnd = templateResponse.indexOf("</templateList>"); 393 var templateListString = templateResponse.substring(templateListStart, templateListEnd).replace(/"/g, "\""); 394 var templateList = eval(templateListString); 395 396 clearAll(); 397 398 _templateSelector.children("select").empty(); 399 if(templateList.length == 0) 400 { 401 _templateSelector.children("select").append("<option>-- No templates --</option>"); 402 } 403 else 404 { 405 _templateSelector.children("select").append("<option>-- Select a template --</option>"); 406 } 407 408 for(var i = 0; i < templateList.length; i++) 409 { 410 var fileName = selectedItem.data("fileItem").path; 411 var location = selectedItem.data("fileItem").location; 412 var namespace = templateList[i].namespace; 413 var nodename = "template"; 414 var name = templateList[i].name; 415 var match = templateList[i].match; 416 417 if(name) 418 { 419 name = templateList[i].name.replace(/'/g, "'").replace(/"/g, "\"").replace(/&/g, "&"); 420 } 421 if(match) 422 { 423 match = templateList[i].match.replace(/'/g, "'").replace(/"/g, "\"").replace(/&/g, "&"); 424 } 425 426 var infoContainer = $("<option>"); 427 428 _elements.push(infoContainer); 429 430 addChangeEventToInfoContainer(infoContainer, fileName, location, nodename, namespace, name, match); 431 432 if(name && name.length > 0) 433 { 434 infoContainer.text(name); 435 } 436 if(match && match.length > 0) 437 { 438 infoContainer.text(match); 439 } 440 441 _templateSelector.children("select").append(infoContainer); 442 } 443 }); 444 }); 445 }) 446 .error(function() 447 { 448 console.log("Error retrieving XSLT files"); 449 }); 450 } 451 452 //The function that creates all the necessary elements for Greenbug 345 453 var createDebugDiv = function() 346 454 { … … 368 476 createFileAndTemplateSelectors(buttonDiv); 369 477 createXMLStatusBar(buttonDiv); 370 371 //Populate the file selector 372 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; 373 $.ajax(url) 374 .success(function(response) 375 { 376 var listStartIndex = response.indexOf("<fileListJSON>") + "<fileListJSON>".length; 377 var listEndIndex = response.indexOf("</fileListJSON>"); 378 379 var listString = response.substring(listStartIndex, listEndIndex).replace(/"/g, "\"").replace(/\\/g, "/"); 380 var list = eval(listString); 381 382 var selectBox = $("<select>"); 383 selectBox.append($("<option>-- Select a file --</option>", {value:"none"})); 384 _fileSelector.append("<span>Files: </span>"); 385 _fileSelector.append(selectBox); 386 for(var i = 0; i < list.length; i++) 387 { 388 var item = list[i]; 389 var option = $("<option>" + item.path + " (" + item.location + ")</option>", {value:item.path}); 390 option.data("fileItem", item); 391 selectBox.append(option); 392 } 393 394 selectBox.change(function() 395 { 396 var selectedItem = selectBox.find(":selected"); 397 398 if(!selectedItem.data("fileItem")) 399 { 400 return; 401 } 402 403 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; 404 $.ajax(getURL) 405 .success(function(templateResponse) 406 { 407 var templateListStart = templateResponse.indexOf("<templateList>") + "<templateList>".length; 408 var templateListEnd = templateResponse.indexOf("</templateList>"); 409 var templateListString = templateResponse.substring(templateListStart, templateListEnd).replace(/"/g, "\""); 410 var templateList = eval(templateListString); 411 412 clearAll(); 413 414 _templateSelector.children("select").empty(); 415 if(templateList.length == 0) 416 { 417 _templateSelector.children("select").append("<option>-- No templates --</option>"); 418 } 419 else 420 { 421 _templateSelector.children("select").append("<option>-- Select a template --</option>"); 422 } 423 424 for(var i = 0; i < templateList.length; i++) 425 { 426 var fileName = selectedItem.data("fileItem").path; 427 var location = selectedItem.data("fileItem").location; 428 var namespace = templateList[i].namespace; 429 var nodename = "template"; 430 var name = templateList[i].name; 431 var match = templateList[i].match; 432 433 if(name) 434 { 435 name = templateList[i].name.replace(/'/g, "'").replace(/"/g, "\"").replace(/&/g, "&"); 436 } 437 if(match) 438 { 439 match = templateList[i].match.replace(/'/g, "'").replace(/"/g, "\"").replace(/&/g, "&"); 440 } 441 442 var infoContainer = $("<option>"); 443 444 _elements.push(infoContainer); 445 446 addMouseEventsToInfoContainer(infoContainer, fileName, location, nodename, namespace, name, match); 447 448 if(name && name.length > 0) 449 { 450 infoContainer.text(name); 451 } 452 if(match && match.length > 0) 453 { 454 infoContainer.text(match); 455 } 456 457 if(_templateSelector.children("div").length > 0) 458 {/* 459 var spacer = $("<div>>></div>"); 460 spacer.addClass("gbSpacer"); 461 462 _templateSelector.prepend(spacer); 463 _elements.push(spacer); 464 */ 465 } 466 467 _templateSelector.children("select").append(infoContainer); 468 469 //resizeContainers(); 470 } 471 }); 472 }); 473 }) 474 .error(function() 475 { 476 console.log("Error retrieving XSLT files"); 477 }); 478 478 479 479 _styleFunctions.push(function(){$(".ui-button").css({"margin-right":"0.5em"});}); 480 480 481 481 _mainDiv.append(toolBarDiv); 482 482 _mainDiv.append(_editingDiv); 483 483 _mainDiv.append(_navArea); 484 484 } 485 485 486 //Clear all selected elements on the page 486 487 var clearAll = function() 487 488 { … … 492 493 }); 493 494 } 494 495 496 //Put a border around the given element 495 497 var highlightElement = function(e) 496 498 { … … 512 514 _elements.push(rightBorderDiv); 513 515 } 514 516 517 //Change the current template in the XML and Visual editor 515 518 this.changeCurrentTemplate = function(location, fileName, nodename, namespace, name, match) 516 519 { 517 520 var responseName = "requestedNameTemplate"; 518 521 519 522 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; 520 523 if(match && match.length > 0){url += "&s1.match=" + match; responseName = "requestedMatchTemplate";} … … 535 538 return; 536 539 } 537 540 538 541 _textEditor = $("<div>", {"id":"textEditor"}); 539 542 _textEditor.css({"width":"100%", "height":"300px"}); 540 543 _textEditor.val(template); 541 544 542 545 if(_isVisualEditor) 543 546 { 544 547 _textEditor.hide(); 545 548 } 546 549 547 550 _editingDiv.empty(); 548 551 _editingDiv.append($("<p>Location: " + location + " <br/>Filename: " + fileName + "</p>")); 549 552 _editingDiv.append(_textEditor); 550 553 551 554 _vEditor = new visualXMLEditor(template); 552 555 _editingDiv.append(_vEditor.getMainDiv()); 553 556 _vEditor.setGreenbug(_greenbug); 554 557 _vEditor.selectRootElement(); 555 558 556 559 if(!_isVisualEditor) 557 560 { 558 561 _vEditor.getMainDiv().hide(); 559 562 } 560 563 561 564 _editor = ace.edit("textEditor"); 562 565 _editor.getSession().setMode("ace/mode/xml"); … … 566 569 var UndoManager = require("ace/undomanager").UndoManager; 567 570 _editor.getSession().setUndoManager(new UndoManager()); 568 571 569 572 _textEditor.css({"min-height":"200px", "border-top":"5px solid #444"}); 570 573 _textEditor.resizable({handles: 'n', resize:function() … … 583 586 .error(function() 584 587 { 585 console.log("ERROR"); 586 }); 587 } 588 589 var addMouseEventsToInfoContainer = function(infoContainer, fileName, location, nodename, namespace, name, match) 588 console.log("Error getting the XML template from the file"); 589 }); 590 } 591 592 //Store the function that is called when this template is selected from the list 593 var addChangeEventToInfoContainer = function(infoContainer, fileName, location, nodename, namespace, name, match) 590 594 { 591 595 infoContainer.data("changeFunction", function() … … 598 602 _selectedTemplate.prevBorder = _selectedTemplate.css("border"); 599 603 _selectedTemplate.css("border", "red 1px solid"); 600 604 601 605 _currentFileName = fileName; 602 606 _currentLocation = location; … … 605 609 _currentName = name; 606 610 _currentMatch = match; 607 611 608 612 _greenbug.changeCurrentTemplate(location, fileName, nodename, namespace, name, match); 609 613 }); 610 /* 611 infoContainer.mouseover(function() 612 { 613 $(this).removeClass("ui-state-default"); 614 $(this).addClass("ui-state-active"); 615 }); 616 infoContainer.mouseout(function() 617 { 618 $(this).addClass("ui-state-default"); 619 $(this).removeClass("ui-state-active"); 620 }); 621 */ 622 } 623 614 } 615 616 //Add the mouse events to the <debug> elemetns that are called when the selector is anabled 624 617 var addMouseEventsToDebugElements = function(debugElems) 625 618 { … … 629 622 { 630 623 _pauseSelector = true; 631 _ unpauseButton.button("option", "disabled", false);624 _selectNewElementButton.button("option", "disabled", false); 632 625 } 633 626 }); … … 680 673 var location; 681 674 var fileName; 675 //Use the filepath to work out where this file is from 682 676 if(filepath.search(/[\/\\]interfaces[\/\\]/) != -1) 683 677 { … … 705 699 _elements.push(infoContainer); 706 700 707 add MouseEventsToInfoContainer(infoContainer, fileName, location, nodename, namespace, name, match);701 addChangeEventToInfoContainer(infoContainer, fileName, location, nodename, namespace, name, match); 708 702 709 703 if(name && name.length > 0) … … 716 710 } 717 711 718 if(_templateSelector.children("div").length > 0)719 {720 /*721 var spacer = $("<div>>></div>");722 spacer.addClass("gbSpacer");723 724 _templateSelector.prepend(spacer);725 _elements.push(spacer);726 */727 }728 729 712 _templateSelector.children("select").append(infoContainer); 730 731 //resizeContainers();732 713 }); 733 714 … … 750 731 }); 751 732 } 752 733 734 //Remove <debug> elements from the title 753 735 var fixTitle = function() 754 736 { 755 737 $("title").text($("title").text().replace(/<[^>]*>/g, "")); 756 738 } 757 758 /* 759 var resizeContainers = function() 760 { 761 var templates = _templateSelector.children(".gbTemplateContainer"); 762 var spacers = _templateSelector.children(".gbSpacer"); 763 764 var templateWidth = (79/templates.length) + "%"; 765 templates.css("width", templateWidth); 766 767 if(spacers.length > 0) 768 { 769 var spacersWidth = (19/spacers.length) + "%"; 770 spacers.css("width", spacersWidth); 771 } 772 } 773 */ 774 739 740 //Initialise Greenbug 775 741 this.init = function() 776 742 { … … 805 771 createDebugDiv(); 806 772 $("body").append(_mainDiv); 807 773 808 774 callStyleFunctions(); 809 775 … … 811 777 fixTitle(); 812 778 } 813 814 779 } 815 780 781 //The code entry point 816 782 $(window).load(function() 817 783 {
Note:
See TracChangeset
for help on using the changeset viewer.