Changeset 27013


Ignore:
Timestamp:
2013-03-06T10:54:08+13:00 (11 years ago)
Author:
sjm84
Message:

Using jquery ui buttons instead of regular buttons

File:
1 edited

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);
Note: See TracChangeset for help on using the changeset viewer.