Changeset 27013

Show
Ignore:
Timestamp:
06.03.2013 10:54:08 (7 years ago)
Author:
sjm84
Message:

Using jquery ui buttons instead of regular buttons

Files:
1 modified

Legend:

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

    r27008 r27013  
    2323    var _editingDiv; 
    2424    var _unpauseButton; 
    25     var _closeEditorButtonButton; 
     25    var _closeEditorButton; 
    2626    var _xmlStatusBar; 
    2727    var _saveButton; 
     
    3535    var _currentNamespace; 
    3636    var _isVisualEditor = true; 
     37     
     38    var _styleFunctions = new Array(); 
    3739     
    3840    var partialPageReload = function() 
     
    7072    } 
    7173     
     74    var callStyleFunctions = function() 
     75    { 
     76        for(var i = 0; i < _styleFunctions.length; i++) 
     77        { 
     78            var sFunction = _styleFunctions[i]; 
     79            sFunction(); 
     80        } 
     81    } 
     82     
    7283    var createDebugDiv = function() 
    7384    { 
     
    96107        _templateSelector.css({"overflow":"auto", "width":"100%"}); 
    97108 
    98         var pickElementButton = $("<input type=\"button\" value=\"Enable debugging\">"); 
    99         pickElementButton.button().click(function() 
     109        var pickElementButton = $("<button>Enable debugging</button>"); 
     110        pickElementButton.click(function() 
    100111        { 
    101112            if(!_debugOn) 
    102113            { 
    103                 pickElementButton.attr("value", "Disable debugging"); 
     114                pickElementButton.button("option", "label", "Disable debugging"); 
    104115                $("a").click(function(e) 
    105116                { 
     
    110121            else 
    111122            { 
    112                 pickElementButton.attr("value", "Enable debugging"); 
     123                pickElementButton.button("option", "label", "Enable debugging"); 
    113124                $("a").off("click"); 
    114125                clearAll(); 
    115                 _unpauseButton.attr("disabled", "disabled"); 
    116                 _unpauseButton.addClass("ui-state-disabled"); 
     126                _unpauseButton.button("option", "disabled", true); 
    117127                _pauseSelector = false; 
    118128                _debugOn = false; 
    119129            } 
    120130        }); 
    121  
    122         _unpauseButton = $("<input type=\"button\" value=\"Select new element\">"); 
    123         _unpauseButton.button().click(function() 
     131        _styleFunctions.push(function(){pickElementButton.button({icons:{primary:"ui-icon-power"}})}); 
     132 
     133        _unpauseButton = $("<button>Select new element</button>"); 
     134        _unpauseButton.click(function() 
    124135        { 
    125136            if(_pauseSelector) 
    126137            { 
    127138                _pauseSelector = false; 
    128                 $(this).attr("disabled", "disabled"); 
    129                 $(this).addClass("ui-state-disabled"); 
    130             } 
    131         }); 
    132         _unpauseButton.attr("disabled", "disabled"); 
    133         _unpauseButton.addClass("ui-state-disabled"); 
    134          
    135         _closeEditorButton = $("<input type=\"button\" value=\"Close editor\">"); 
    136         _closeEditorButton.button().click(function() 
    137         { 
    138             if($(this).val() == "Close editor") 
    139             { 
    140                 $(this).val("Open editor"); 
     139                _unpauseButton.button("option", "disabled", true); 
     140            } 
     141        }); 
     142        _styleFunctions.push(function(){_unpauseButton.button({icons:{primary:"ui-icon-pencil"}, disabled:true})}); 
     143         
     144        _closeEditorButton = $("<button>Close editor</button>"); 
     145        _closeEditorButton.click(function() 
     146        { 
     147            if(_closeEditorButton.button("option", "label") == "Close editor") 
     148            { 
     149                _closeEditorButton.button("option", "label", "Open editor"); 
    141150                _editingDiv.hide(); 
    142151            } 
    143152            else 
    144153            { 
    145                 $(this).val("Close editor"); 
     154                _closeEditorButton.button("option", "label", "Close editor"); 
    146155                _editingDiv.show(); 
    147156            } 
    148157        }); 
    149         _closeEditorButton.attr("disabled", "disabled"); 
    150         _closeEditorButton.addClass("ui-state-disabled"); 
    151          
    152         _xmlStatusBar = $("<span>"); 
    153         _xmlStatusBar.css("padding", "5px"); 
    154         _xmlStatusBar.addClass("ui-corner-all"); 
    155          
    156         //Check the XML for errors every 2 seconds 
    157         setInterval(function() 
    158         { 
    159             if(_editor) 
    160             { 
    161                 var xmlString = _editor.getValue(); 
    162                 try 
    163                 { 
    164                     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>"); 
    165                 } 
    166                 catch(error) 
    167                 { 
    168                     console.log(error); 
    169                     _xmlStatusBar.text("XML ERROR! (Mouse over for details)"); 
    170                     _xmlStatusBar.addClass("ui-state-error"); 
    171                     _xmlStatusBar.removeClass("ui-state-active"); 
    172                     _xmlStatusBar.attr("title", error); 
    173                     _saveButton.attr("disabled", "disabled"); 
    174                     _saveButton.addClass("ui-state-disabled"); 
    175                     _swapEditorButton.attr("disabled", "disabled"); 
    176                     _swapEditorButton.addClass("ui-state-disabled"); 
    177                     return; 
    178                 } 
    179                  
    180                 _xmlStatusBar.text("XML OK!"); 
    181                 _xmlStatusBar.addClass("ui-state-active"); 
    182                 _xmlStatusBar.removeClass("ui-state-error"); 
    183                 _xmlStatusBar.removeAttr("title"); 
    184                 if(_saveButton.val() == "Save changes") 
    185                 { 
    186                     _saveButton.removeAttr("disabled"); 
    187                     _saveButton.removeClass("ui-state-disabled"); 
    188                 } 
    189                 if(_swapEditorButton.val() == "Switch to Visual Editor") 
    190                 { 
    191                     _swapEditorButton.removeAttr("disabled"); 
    192                     _swapEditorButton.removeClass("ui-state-disabled"); 
    193                 } 
    194             } 
    195              
    196         }, 2000); 
    197          
    198         _saveButton = $("<input type=\"button\" value=\"Save changes\">"); 
    199         _saveButton.button().click(function() 
     158        _styleFunctions.push(function(){_closeEditorButton.button({icons:{primary:"ui-icon-newwin"}, disabled:true})}); 
     159         
     160        _saveButton = $("<button>Save changes</button>"); 
     161        _saveButton.click(function() 
    200162        { 
    201163            if(_editor) 
     
    228190                if(_currentMatch && _currentMatch.length > 0){parameters["s1.match"] = _currentMatch;} 
    229191 
    230                 _saveButton.val("Saving..."); 
    231                 _saveButton.attr("disabled", "disabled"); 
    232                 _saveButton.addClass("ui-state-default"); 
     192                _saveButton.button("option", "label", "Saving..."); 
     193                _saveButton.button("option", "disabled", true); 
    233194 
    234195                $.post(url, parameters) 
     
    246207                    .complete(function() 
    247208                    { 
    248                         _saveButton.val("Save changes"); 
    249                         _saveButton.removeAttr("disabled"); 
    250                         _saveButton.removeClass("ui-state-default"); 
     209                        _saveButton.button("option", "label", "Save changes"); 
     210                        _saveButton.button("option", "disabled", false); 
    251211                        partialPageReload(); 
    252212                    }); 
     
    258218            } 
    259219        }); 
    260         _saveButton.attr("disabled", "disabled"); 
    261         _saveButton.addClass("ui-state-disabled"); 
    262          
    263         _swapEditorButton = $("<input type=\"button\" value=\"Switch to XML Editor\">"); 
     220        _styleFunctions.push(function(){_saveButton.button({icons:{primary:"ui-icon-disk"}, disabled:true})}); 
     221         
     222        _swapEditorButton = $("<button>Switch to XML Editor</button>"); 
    264223        _swapEditorButton.button().click(function() 
    265224        { 
     
    283242                    _editor.clearSelection(); 
    284243                    _textEditor.show(); 
    285                     _swapEditorButton.val("Switch to Visual Editor"); 
     244                    _swapEditorButton.button("option", "label", "Switch to Visual Editor"); 
    286245                    _isVisualEditor = false; 
    287246                } 
     
    295254                    _vEditor.selectRootElement(); 
    296255                    _vEditor.getMainDiv().show(); 
    297                     _swapEditorButton.val("Switch to XML Editor"); 
     256                    _swapEditorButton.button("option", "label", "Switch to XML Editor"); 
    298257                    _isVisualEditor = true; 
    299258                } 
    300259            } 
    301260        }); 
    302          
    303         undoButton = $("<input type=\"button\" value=\"Undo\">"); 
    304         undoButton.button().click(function() 
     261        _styleFunctions.push(function(){_swapEditorButton.button({icons:{primary:"ui-icon-refresh"}})}); 
     262         
     263        undoButton = $("<button>Undo</button>"); 
     264        undoButton.click(function() 
    305265        { 
    306266            if(_isVisualEditor) 
     
    313273            } 
    314274        }); 
    315  
     275        _styleFunctions.push(function(){undoButton.button({icons:{primary:"ui-icon-arrowreturnthick-1-w"}})}); 
     276 
     277        _xmlStatusBar = $("<span>"); 
     278        _xmlStatusBar.css("padding", "5px"); 
     279        _xmlStatusBar.addClass("ui-corner-all"); 
     280         
     281        //Check the XML for errors every 2 seconds 
     282        setInterval(function() 
     283        { 
     284            if(_editor) 
     285            { 
     286                var xmlString = _editor.getValue(); 
     287                try 
     288                { 
     289                    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>"); 
     290                } 
     291                catch(error) 
     292                { 
     293                    console.log(error); 
     294                    _xmlStatusBar.text("XML ERROR! (Mouse over for details)"); 
     295                    _xmlStatusBar.addClass("ui-state-error"); 
     296                    _xmlStatusBar.removeClass("ui-state-active"); 
     297                    _xmlStatusBar.attr("title", error); 
     298                    _saveButton.button("option", "disabled", true); 
     299                    _swapEditorButton.button("option", "disabled", true); 
     300                    return; 
     301                } 
     302                 
     303                _xmlStatusBar.text("XML OK!"); 
     304                _xmlStatusBar.addClass("ui-state-active"); 
     305                _xmlStatusBar.removeClass("ui-state-error"); 
     306                _xmlStatusBar.removeAttr("title"); 
     307                if(_saveButton.button("option", "label") == "Save changes") 
     308                { 
     309                    _saveButton.button("option", "disabled", false); 
     310                } 
     311                if(_swapEditorButton.button("option", "label") == "Switch to Visual Editor") 
     312                { 
     313                    _swapEditorButton.button("option", "disabled", false); 
     314                } 
     315            } 
     316             
     317        }, 2000); 
     318         
    316319        var clear = $("<span>"); 
    317320        clear.css("clear", "both"); 
     
    325328        buttonDiv.append(undoButton); 
    326329        buttonDiv.append(_xmlStatusBar); 
    327  
     330         
     331        _styleFunctions.push(function(){$(".ui-button").css({"margin-right":"0.5em"});}); 
     332         
    328333        _mainDiv.append(toolBarDiv); 
    329334        _mainDiv.append(_editingDiv); 
     
    434439                }}); 
    435440 
    436                  
    437                 _closeEditorButton.removeAttr("disabled"); 
    438                 _closeEditorButton.removeClass("ui-state-disabled"); 
     441                _closeEditorButton.button("option", "disabled", true); 
    439442            }) 
    440443            .error(function() 
     
    461464            { 
    462465                _pauseSelector = true; 
    463                 _unpauseButton.removeAttr("disabled"); 
    464                 _unpauseButton.removeClass("ui-state-disabled"); 
     466                _unpauseButton.button("option", "disabled", false); 
    465467            } 
    466468        }); 
     
    602604        $("body").append(_mainDiv); 
    603605         
    604         $(".ui-button").css({"padding":"0.2em", "margin-right":"0.5em"}); 
     606        callStyleFunctions(); 
    605607 
    606608        addMouseEventsToDebugElements(debugElems);