Changeset 26924

Show
Ignore:
Timestamp:
26.02.2013 09:46:30 (7 years ago)
Author:
sjm84
Message:

Some major upgrades to incorperate a visual editor

Files:
1 modified

Legend:

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

    r26646 r26924  
    1010    var _elements = new Array(); 
    1111    var _itemSelected = false; //Used to prevent multiple elements from being highlighted 
     12    var _editModeText = false; 
     13    var _selectedTemplate; 
    1214     
    1315    //Page elements 
    1416    var _mainDiv; 
    15     var _textDiv; 
     17     
     18    var _textEditor; 
     19    var _vEditor; 
     20     
     21    var _templateSelector; 
    1622    var _editor; 
    1723    var _editingDiv; 
     
    2026    var _xmlStatusBar; 
    2127    var _saveButton; 
     28    var _swapEditorButton; 
    2229     
    2330    //Editor state-keeping variables 
     
    2734    var _currentMatch; 
    2835    var _currentNamespace; 
     36    var _isVisualEditor = true; 
    2937     
    3038    var createDebugDiv = function() 
     
    3442        { 
    3543            "position":"fixed", 
    36             "font-size":"0.7em", 
     44            "font-size":"0.8em", 
    3745            "bottom":"0px", 
    3846            "width":"100%", 
     
    4654        var toolBarDiv = $("<div>"); 
    4755        toolBarDiv.css({"height":"40px"}); 
     56 
    4857        var buttonDiv = $("<div>"); 
    4958        buttonDiv.css("float", "left"); 
    5059        toolBarDiv.append(buttonDiv); 
    51         _textDiv = $("<div>"); 
    52         _textDiv.css({"overflow":"auto", "width":"100%"}); 
     60 
     61        _templateSelector = $("<div>", {"id":"templateSelector"}); 
     62        _templateSelector.css({"overflow":"auto", "width":"100%"}); 
    5363 
    5464        var pickElementButton = $("<input type=\"button\" value=\"Enable debugging\">"); 
     
    120130                    _xmlStatusBar.attr("title", error); 
    121131                    _saveButton.attr("disabled", "disabled"); 
     132                    _swapEditorButton.attr("disabled", "disabled"); 
    122133                    return; 
    123134                } 
     
    130141                    _saveButton.removeAttr("disabled"); 
    131142                } 
     143                if(_swapEditorButton.val() == "Switch to Visual Editor") 
     144                { 
     145                    _swapEditorButton.removeAttr("disabled"); 
     146                } 
    132147            } 
    133148             
     
    139154            if(_editor) 
    140155            { 
    141                 var xmlString = _editor.getValue().replace(/&/g, "&amp;"); 
     156                var xmlString; 
     157                if(_isVisualEditor) 
     158                { 
     159                    xmlString = new XMLSerializer().serializeToString(_vEditor.getXML()); 
     160                } 
     161                else 
     162                { 
     163                    xmlString = _editor.getValue(); 
     164                } 
     165                xmlString = xmlString.replace(/&/g, "&amp;"); 
     166                 
    142167                try 
    143168                { 
     
    184209        }); 
    185210         
    186         var minimiseButton = $("<img>", {"src":gs.imageURLs.collapse}); 
    187         minimiseButton.css({"cursor":"pointer", "float":"right", "margin-right":"20px"}); 
    188         minimiseButton.click(function() 
    189         { 
    190             if($(this).attr("src") == gs.imageURLs.collapse) 
    191             { 
    192                 _textDiv.hide(); 
    193                 $(this).attr("src", gs.imageURLs.expand); 
    194             } 
    195             else 
    196             { 
    197                 _textDiv.show(); 
    198                 $(this).attr("src", gs.imageURLs.collapse); 
    199             } 
    200         }); 
    201          
     211        _swapEditorButton = $("<input type=\"button\" value=\"Switch to XML Editor\">"); 
     212        _swapEditorButton.click(function() 
     213        { 
     214            if(_vEditor && _textEditor) 
     215            { 
     216                if(_isVisualEditor) 
     217                { 
     218                    _vEditor.getMainDiv().hide(); 
     219                    var containerNode = _vEditor.getXML().firstChild; 
     220                    var templateNode = containerNode.firstChild; 
     221                    while(templateNode) 
     222                    { 
     223                        if(templateNode.nodeType == 1) 
     224                        { 
     225                            break; 
     226                        } 
     227                        templateNode = templateNode.nextSibling; 
     228                    } 
     229                    var xmlText = new XMLSerializer().serializeToString(templateNode); 
     230                    _editor.setValue(xmlText); 
     231                    _editor.clearSelection(); 
     232                    _textEditor.show(); 
     233                    _swapEditorButton.val("Switch to Visual Editor"); 
     234                    _isVisualEditor = false; 
     235                } 
     236                else 
     237                { 
     238                    _textEditor.hide(); 
     239                    var xmlText = _editor.getValue(); 
     240                    _vEditor.getMainDiv().remove(); 
     241                    _vEditor = new visualXMLEditor(xmlText); 
     242                    _editingDiv.append(_vEditor.getMainDiv()); 
     243                    _vEditor.selectRootElement(); 
     244                    _vEditor.getMainDiv().show(); 
     245                    _swapEditorButton.val("Switch to XML Editor"); 
     246                    _isVisualEditor = true; 
     247                } 
     248            } 
     249        }); 
     250 
    202251        var clear = $("<span>"); 
    203252        clear.css("clear", "both"); 
    204          
    205         toolBarDiv.append(minimiseButton); 
    206253        toolBarDiv.append(clear); 
    207254         
     
    211258        buttonDiv.append(_xmlStatusBar); 
    212259        buttonDiv.append(_saveButton); 
     260        buttonDiv.append(_swapEditorButton); 
     261 
     262        _mainDiv.append(toolBarDiv); 
    213263        _mainDiv.append(_editingDiv); 
    214         _mainDiv.append(toolBarDiv); 
    215         _mainDiv.append(_textDiv); 
     264        _mainDiv.append("<div>Templates:</div>"); 
     265        _mainDiv.append(_templateSelector); 
    216266    } 
    217267     
     
    249299        infoContainer.click(function() 
    250300        { 
     301            if(_selectedTemplate) 
     302            { 
     303                _selectedTemplate.css("border", _selectedTemplate.prevBorder); 
     304            } 
     305            _selectedTemplate = infoContainer; 
     306            _selectedTemplate.prevBorder = _selectedTemplate.css("border"); 
     307            _selectedTemplate.css("border", "red 1px solid"); 
     308         
    251309            _currentFilepath = filepath; 
    252310            _currentNodename = nodename; 
     
    275333                } 
    276334             
    277                 var textEditor = $("<div>", {"id":"textEditor"}); 
    278                 textEditor.css({"width":"100%"}); 
    279                 textEditor.val(template); 
     335                _textEditor = $("<div>", {"id":"textEditor"}); 
     336                _textEditor.css({"width":"100%", "height":"300px"}); 
     337                _textEditor.val(template); 
     338                 
     339                if(_isVisualEditor) 
     340                { 
     341                    _textEditor.hide(); 
     342                } 
    280343                 
    281344                _editingDiv.empty(); 
    282345                _editingDiv.append($("<p>" + filepath + "</p>")); 
    283                 _editingDiv.append(textEditor); 
     346                _editingDiv.append(_textEditor); 
     347                 
     348                _vEditor = new visualXMLEditor(template); 
     349                _editingDiv.append(_vEditor.getMainDiv()); 
     350                _vEditor.selectRootElement(); 
     351                 
     352                if(!_isVisualEditor) 
     353                { 
     354                    _vEditor.getMainDiv().hide(); 
     355                } 
    284356                 
    285357                _editor = ace.edit("textEditor"); 
     
    289361                _editor.clearSelection(); 
    290362                 
    291                 textEditor.css({"min-height":"200px", "border-top":"5px solid #444"}); 
    292                 textEditor.resizable({handles: 'n', resize:function() 
    293                 { 
    294                     textEditor.css({top:"0px"}); 
     363                _textEditor.css({"min-height":"200px", "border-top":"5px solid #444"}); 
     364                _textEditor.resizable({handles: 'n', resize:function() 
     365                { 
     366                    _textEditor.css({top:"0px"}); 
    295367                    _editor.resize(); 
    296368                }}); 
     369 
    297370                 
    298371                _closeEditorButton.removeAttr("disabled"); 
     
    313386        }); 
    314387    } 
    315      
     388 
    316389    var addMouseEventsToDebugElements = function(debugElems) 
    317390    { 
     
    367440                    var name = $(this).attr("name"); 
    368441                    var match = $(this).attr("match"); 
    369  
     442                     
    370443                    var infoContainer = $("<div>"); 
    371                     infoContainer.css({"cursor":"pointer", "border":"1px dashed #AAAAAA", "margin":"5px"}); 
    372                     var elementDIV = $("<div>"); 
    373  
    374                     elementDIV.css("font-size", "1.1em"); 
    375  
    376                     infoContainer.append(elementDIV); 
     444                    infoContainer.addClass("gbTemplateContainer"); 
    377445                     
    378446                    _elements.push(infoContainer); 
     
    380448                    addMouseEventsToInfoContainer(infoContainer, filepath, nodename, namespace, name, match); 
    381449                     
     450                    /* 
    382451                    var attrstr = ""; 
    383452                    var illegalNames = ["nodename", "filename", "style", "debug", "id", "class"]; 
     
    394463                    }); 
    395464 
    396                     elementDIV.text("<" + fullNodename + " " + attrstr + ">"); 
    397                      
    398                     _textDiv.prepend(infoContainer); 
     465                    infoContainer.text("<" + fullNodename + " " + attrstr + ">"); 
     466                    */ 
     467                     
     468                    if(name && name.length > 0) 
     469                    { 
     470                        infoContainer.text(name); 
     471                    } 
     472                    if(match && match.length > 0) 
     473                    { 
     474                        infoContainer.text(match); 
     475                    } 
     476                     
     477                    if(_templateSelector.children("div").length > 0) 
     478                    { 
     479                        var spacer = $("<div>&gt;&gt;</div>"); 
     480                        spacer.addClass("gbSpacer"); 
     481 
     482                        _templateSelector.prepend(spacer); 
     483                        _elements.push(spacer); 
     484                    } 
     485                     
     486                    _templateSelector.prepend(infoContainer); 
     487                     
     488                    resizeContainers(); 
    399489                }); 
    400490                 
     
    414504            } 
    415505        }); 
     506    } 
     507     
     508    var resizeContainers = function() 
     509    { 
     510        var templates = _templateSelector.children(".gbTemplateContainer"); 
     511        var spacers = _templateSelector.children(".gbSpacer"); 
     512         
     513        var templateWidth = (79/templates.length) + "%"; 
     514        templates.css("width", templateWidth); 
     515         
     516        if(spacers.length > 0) 
     517        { 
     518            var spacersWidth = (19/spacers.length) + "%"; 
     519            spacers.css("width", spacersWidth); 
     520        } 
    416521    } 
    417522