Changeset 26492

Show
Ignore:
Timestamp:
21.11.2012 15:56:26 (7 years ago)
Author:
sjm84
Message:

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

Files:
1 modified

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)