Changeset 26492


Ignore:
Timestamp:
2012-11-21T15:56:26+13:00 (11 years ago)
Author:
sjm84
Message:

Next iteration of the "Greenbug" interface. Saving now works. Still need to make gsf stuff work though.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • main/trunk/greenstone3/web/interfaces/default/js/debug_scripts.js

    r26462 r26492  
    11function DebugWidget()
    22{
     3    //************************
    34    //Private member variables
     5    //************************
     6   
     7    //Debugger state-keeping variables
    48    var _debugOn = false;
    59    var _pauseSelector = false;
    610    var _elements = new Array();
    711    var _itemSelected = false; //Used to prevent multiple elements from being highlighted
     12   
     13    //Page elements
    814    var _mainDiv;
    915    var _textDiv;
     16    var _editingDiv;
    1017    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;
    1128   
    1229    var createDebugDiv = function()
    1330    {
    14         _mainDiv = $("<div>", {"id":"debugDiv", "class":"ui-corner-all"});
     31        _mainDiv = $("<div>", {"id":"debugDiv"});
    1532        _mainDiv.css(
    1633        {
    … …  
    1835            "font-size":"0.7em",
    1936            "bottom":"0px", 
    20             "height":"25%",
    21             "width":"100%", 
     37            "height":"300px",
     38            "width":"100%",
    2239            "background":"white",
    2340            "border":"1px black solid",
    24             "padding":"5px"
    25         });
    26 
     41            "padding":"5px",
     42            "z-index":100
     43        });
     44
     45        _editingDiv = $("<div>");
    2746        var toolBarDiv = $("<div>");
    28         toolBarDiv.css({"height":"15%"});
     47        toolBarDiv.css({"height":"40px"});
     48        var buttonDiv = $("<div>");
     49        buttonDiv.css("float", "left");
     50        toolBarDiv.append(buttonDiv);
    2951        _textDiv = $("<div>");
    30         _textDiv.css({"overflow":"auto", "width":"100%", "height":"85%", "margin-top":"5px"});
     52        _textDiv.css({"overflow":"auto", "width":"100%", "height":"260px"});
     53
    3154        var pickElementButton = $("<input type=\"button\" value=\"Enable debugging\">");
    3255        pickElementButton.click(function()
    … …  
    5174            }
    5275        });
     76
    5377        _unpauseButton = $("<input type=\"button\" value=\"Select new element\" disabled=\"disabled\">");
    5478        _unpauseButton.click(function()
    … …  
    6185        });
    6286       
    63         toolBarDiv.append(pickElementButton);
    64         toolBarDiv.append(_unpauseButton);
     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);
    65201        _mainDiv.append(toolBarDiv);
    66202        _mainDiv.append(_textDiv);
    … …  
    82218        var leftBorderDiv = $("<div>");
    83219        var rightBorderDiv = $("<div>");
    84        
     220
    85221        topBorderDiv.css({"position":"absolute", "top":e.offset().top + "px", "left":e.offset().left + "px", "height":"0px", "width":e.width() + "px", "border":"1px solid red"});
    86222        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"});
    87223        leftBorderDiv.css({"position":"absolute", "top":e.offset().top + "px", "left":e.offset().left + "px", "height":e.height() + "px", "width":"0px", "border":"1px solid red"});
    88224        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"});
    89        
     225
    90226        $("body").append(topBorderDiv, bottomBorderDiv, leftBorderDiv, rightBorderDiv);
    91        
     227
    92228        _elements.push(topBorderDiv);
    93229        _elements.push(bottomBorderDiv);
    … …  
    96232    }
    97233   
     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   
    98290    var addMouseEventsToDebugElements = function(debugElems)
    99291    {
    … …  
    111303            if(_debugOn && !_pauseSelector)
    112304            {
    113                 var surroundingDiv = $("<div>");
    114                 surroundingDiv.css("cursor","pointer");
     305                var infoContainer = $("<div>");
     306                infoContainer.css({"cursor":"pointer", "border":"1px dashed #AAAAAA", "margin":"5px"});
    115307                var fromDIV = $("<div>");
    116308                var elementDIV = $("<div>");
    117                 elementDIV.css("margin-bottom", "0.6em");
    118 
    119                 surroundingDiv.append(fromDIV);
    120                 surroundingDiv.append(elementDIV);
    121                
    122                 _elements.push(surroundingDiv);
    123 
    124                 surroundingDiv.click(function()
    125                 {
    126                     var editArea = $("<textarea>");
    127                     $.ajax();
    128                 });
    129                
    130                 surroundingDiv.mouseover(function()
    131                 {
    132                     $(this).data("background", $(this).css("background"));
    133                     $(this).css("background", "yellow");
    134                 });
    135                
    136                 surroundingDiv.mouseout(function()
    137                 {
    138                     $(this).css("background", $(this).data("background"));
    139                 });
     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);
    140327               
    141328                var nodeName = $(this).attr("nodename");
    … …  
    156343                elementDIV.text("<" + nodeName + " " + attrstr + ">");
    157344               
    158                 _textDiv.prepend(surroundingDiv);
     345                _textDiv.prepend(infoContainer);
    159346               
    160347                if(!_itemSelected)
Note: See TracChangeset for help on using the changeset viewer.