Ignore:
Timestamp:
2013-03-27T12:04:48+13:00 (11 years ago)
Author:
sjm84
Message:

Some code tidying and well as adding more documentation

File:
1 edited

Legend:

Unmodified
Added
Removed
  • main/trunk/greenstone3/web/interfaces/default/js/debug_scripts.js

    r27129 r27130  
    44    //Private member variables
    55    //************************
    6    
     6
    77    //The this variable
    88    var _greenbug = this;
    9    
     9
    1010    //Debugger state-keeping variables
    1111    var _debugOn = false;
     
    1515    var _editModeText = false;
    1616    var _selectedTemplate;
    17    
     17
    1818    //Page elements
    1919    var _mainDiv;
    20    
     20
    2121    var _textEditor;
    2222    var _vEditor;
    23    
     23
    2424    var _navArea;
    2525    var _fileSelector;
     
    2727    var _editor;
    2828    var _editingDiv;
    29     var _unpauseButton;
     29    var _selectNewElementButton;
    3030    var _closeEditorButton;
    3131    var _xmlStatusBar;
    3232    var _saveButton;
    3333    var _swapEditorButton;
    34    
     34
    3535    //Editor state-keeping variables
    3636    var _currentFileName;
     
    4141    var _currentNamespace;
    4242    var _isVisualEditor = true;
    43    
     43
    4444    var _styleFunctions = new Array();
    45    
     45
     46    //Used to reload the page while keeping the state of the editor
    4647    var partialPageReload = function(callback)
    4748    {
     
    5354            var bodyEndIndex = response.indexOf("</body>");
    5455            var bodyText = response.substring(bodyStartIndex, bodyEndIndex + 7);
    55            
     56
    5657            //Get the current top area and container
    5758            var topLevelTopArea = $("#topArea");
    5859            var topLevelContainer = $("#container");
    59            
     60
    6061            //Create a temporary div and put the html into it
    6162            var tempDiv = $("<div>");
    6263            tempDiv.html(bodyText);
    63            
     64
    6465            //Replace the contents of the old elements with the new elements
    6566            var topArea = tempDiv.find("#topArea");
     
    6768            topLevelTopArea.html(topArea.html());
    6869            topLevelContainer.html(container.html());
    69            
     70
    7071            //Update the events for the debug elements that currently don't have events associated with them
    7172            var debugElems = $('debug, [debug="true"]').filter(function(){return (!($.data(this, "events"))) ? true : false});
     
    7677            alert("There was an error reloading the page, please reload manually.");
    7778        });
    78        
     79
    7980        if(callback)
    8081        {
     
    8283        }
    8384    }
    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.
    8587    var callStyleFunctions = function()
    8688    {
     
    9193        }
    9294    }
    93    
     95
     96    //Create the area where the buttons are stored
    9497    var createButtonDiv = function(buttonDiv)
    9598    {
    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()
    98102        {
    99103            if(!_debugOn)
    100104            {
    101                 pickElementButton.button("option", "label", "Disable selector");
     105                enableSelectorButton.button("option", "label", "Disable selector");
    102106                $("a").click(function(e)
    103107                {
     
    108112            else
    109113            {
    110                 pickElementButton.button("option", "label", "Enable selector");
     114                enableSelectorButton.button("option", "label", "Enable selector");
    111115                $("a").off("click");
    112116                clearAll();
    113                 _unpauseButton.button("option", "disabled", true);
     117                _selectNewElementButton.button("option", "disabled", true);
    114118                _pauseSelector = false;
    115119                _debugOn = false;
    116120            }
    117121        });
    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()
    122127        {
    123128            if(_pauseSelector)
    124129            {
    125130                _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
    131137        _closeEditorButton = $("<button>Close editor</button>");
    132138        _closeEditorButton.click(function()
     
    145151        _closeEditorButton.css("float", "right");
    146152        _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
    148155        _saveButton = $("<button>Save changes</button>");
    149156        _saveButton.click(function()
     
    162169                }
    163170                xmlString = xmlString.replace(/&/g, "&amp;");
    164                
     171
    165172                try
    166173                {
     
    172179                    return;
    173180                }
    174                
     181
    175182                var url = gs.xsltParams.library_name;
    176183                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};
     
    207214        });
    208215        _styleFunctions.push(function(){_saveButton.button({icons:{primary:"ui-icon-disk"}, disabled:true})});
    209        
     216
     217        //Used to switch between the XML and Visual editors
    210218        _swapEditorButton = $("<button>Switch to XML editor</button>");
    211219        _swapEditorButton.button().click(function()
     
    253261        });
    254262        _styleFunctions.push(function(){_swapEditorButton.button({icons:{primary:"ui-icon-refresh"}})});
    255        
     263
    256264        undoButton = $("<button>Undo</button>");
    257265        undoButton.click(function()
     
    267275        });
    268276        _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);
    272280        buttonDiv.append(_closeEditorButton);
    273281        buttonDiv.append(_saveButton);
     
    275283        buttonDiv.append(undoButton);
    276284    }
    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
    278287    var createXMLStatusBar = function(buttonDiv)
    279288    {
     
    282291        _xmlStatusBar.addClass("ui-corner-all");
    283292        _styleFunctions.push(function(){_xmlStatusBar.hide();});
    284        
     293
    285294        //Check the XML for errors every 2 seconds
    286295        setInterval(function()
     
    304313                    return;
    305314                }
    306                
     315
    307316                _xmlStatusBar.text("XML OK!");
    308317                _xmlStatusBar.addClass("ui-state-active");
     
    318327                }
    319328            }
    320            
    321329        }, 2000);
    322330        buttonDiv.append(_xmlStatusBar);
    323331    }
    324    
     332
     333    //Create the elements that allow
    325334    var createFileAndTemplateSelectors = function(buttonDiv)
    326335    {
     
    338347        });
    339348        _templateSelector.append(templateSelectBox);
    340         _fileSelector = $("<div>", {"id":"veFileSelector", "class":"ui-state-default ui-corner-all"});
     349        _fileSelector = $("<div>", {"id":"veFileSelector"});
    341350        buttonDiv.append(_fileSelector);
    342351        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(/&quot;/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(/&quot;/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(/&apos;/g, "'").replace(/&quot;/g, "\"").replace(/&amp;/g, "&");
     420                        }
     421                        if(match)
     422                        {
     423                            match = templateList[i].match.replace(/&apos;/g, "'").replace(/&quot;/g, "\"").replace(/&amp;/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
    345453    var createDebugDiv = function()
    346454    {
     
    368476        createFileAndTemplateSelectors(buttonDiv);
    369477        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(/&quot;/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(/&quot;/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(/&apos;/g, "'").replace(/&quot;/g, "\"").replace(/&amp;/g, "&");
    436                         }
    437                         if(match)
    438                         {
    439                             match = templateList[i].match.replace(/&apos;/g, "'").replace(/&quot;/g, "\"").replace(/&amp;/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>&gt;&gt;</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
    479479        _styleFunctions.push(function(){$(".ui-button").css({"margin-right":"0.5em"});});
    480        
     480
    481481        _mainDiv.append(toolBarDiv);
    482482        _mainDiv.append(_editingDiv);
    483483        _mainDiv.append(_navArea);
    484484    }
    485    
     485
     486    //Clear all selected elements on the page
    486487    var clearAll = function()
    487488    {
     
    492493        });
    493494    }
    494    
     495
     496    //Put a border around the given element
    495497    var highlightElement = function(e)
    496498    {
     
    512514        _elements.push(rightBorderDiv);
    513515    }
    514    
     516
     517    //Change the current template in the XML and Visual editor
    515518    this.changeCurrentTemplate = function(location, fileName, nodename, namespace, name, match)
    516519    {
    517520        var responseName = "requestedNameTemplate";
    518        
     521
    519522        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;
    520523        if(match && match.length > 0){url += "&s1.match=" + match; responseName = "requestedMatchTemplate";}
     
    535538                return;
    536539            }
    537        
     540
    538541            _textEditor = $("<div>", {"id":"textEditor"});
    539542            _textEditor.css({"width":"100%", "height":"300px"});
    540543            _textEditor.val(template);
    541            
     544
    542545            if(_isVisualEditor)
    543546            {
    544547                _textEditor.hide();
    545548            }
    546            
     549
    547550            _editingDiv.empty();
    548551            _editingDiv.append($("<p>Location: " + location + " <br/>Filename: " + fileName + "</p>"));
    549552            _editingDiv.append(_textEditor);
    550            
     553
    551554            _vEditor = new visualXMLEditor(template);
    552555            _editingDiv.append(_vEditor.getMainDiv());
    553556            _vEditor.setGreenbug(_greenbug);
    554557            _vEditor.selectRootElement();
    555            
     558
    556559            if(!_isVisualEditor)
    557560            {
    558561                _vEditor.getMainDiv().hide();
    559562            }
    560            
     563
    561564            _editor = ace.edit("textEditor");
    562565            _editor.getSession().setMode("ace/mode/xml");
     
    566569            var UndoManager = require("ace/undomanager").UndoManager;
    567570            _editor.getSession().setUndoManager(new UndoManager());
    568            
     571
    569572            _textEditor.css({"min-height":"200px", "border-top":"5px solid #444"});
    570573            _textEditor.resizable({handles: 'n', resize:function()
     
    583586        .error(function()
    584587        {
    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)
    590594    {
    591595        infoContainer.data("changeFunction", function()
     
    598602            _selectedTemplate.prevBorder = _selectedTemplate.css("border");
    599603            _selectedTemplate.css("border", "red 1px solid");
    600        
     604
    601605            _currentFileName = fileName;
    602606            _currentLocation = location;
     
    605609            _currentName = name;
    606610            _currentMatch = match;
    607        
     611
    608612            _greenbug.changeCurrentTemplate(location, fileName, nodename, namespace, name, match);
    609613        });
    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
    624617    var addMouseEventsToDebugElements = function(debugElems)
    625618    {
     
    629622            {
    630623                _pauseSelector = true;
    631                 _unpauseButton.button("option", "disabled", false);
     624                _selectNewElementButton.button("option", "disabled", false);
    632625            }
    633626        });
     
    680673                    var location;
    681674                    var fileName;
     675                    //Use the filepath to work out where this file is from
    682676                    if(filepath.search(/[\/\\]interfaces[\/\\]/) != -1)
    683677                    {
     
    705699                    _elements.push(infoContainer);
    706700
    707                     addMouseEventsToInfoContainer(infoContainer, fileName, location, nodename, namespace, name, match);
     701                    addChangeEventToInfoContainer(infoContainer, fileName, location, nodename, namespace, name, match);
    708702
    709703                    if(name && name.length > 0)
     
    716710                    }
    717711
    718                     if(_templateSelector.children("div").length > 0)
    719                     {
    720                         /*
    721                         var spacer = $("<div>&gt;&gt;</div>");
    722                         spacer.addClass("gbSpacer");
    723 
    724                         _templateSelector.prepend(spacer);
    725                         _elements.push(spacer);
    726                         */
    727                     }
    728 
    729712                    _templateSelector.children("select").append(infoContainer);
    730 
    731                     //resizeContainers();
    732713                });
    733714               
     
    750731        });
    751732    }
    752    
     733
     734    //Remove <debug> elements from the title
    753735    var fixTitle = function()
    754736    {
    755737        $("title").text($("title").text().replace(/<[^>]*>/g, ""));
    756738    }
    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
    775741    this.init = function()
    776742    {
     
    805771        createDebugDiv();
    806772        $("body").append(_mainDiv);
    807        
     773
    808774        callStyleFunctions();
    809775
     
    811777        fixTitle();
    812778    }
    813    
    814779}
    815780
     781//The code entry point
    816782$(window).load(function()
    817783{
Note: See TracChangeset for help on using the changeset viewer.