Using jQuery to Create Hot-Keys for Web Widgets

I recently created a "dashboard" for one of my project and with jQuery, it was actually pretty easy and fun. Here is a simplified model of what I did.

First of all, you will need to download and include jQuery CORE, jQuery UI, and a hot-key plug-in in your web application. You can get the instruction on how to do that from here.

Here is the basic style I am using to create the boxes:

    .content { width: 450px; }
    .dashboard { border: solid 1px #ccc; }
    .wrapper { height:100%;}
    .displayrestore { clear:both; margin: 0 2px 0 2px; height:100px; overflow:auto; }
    .displaymaximize { clear: both; display:none;}
    div.maximize { clear:both; width:450px; height: 250px; font-size:2em; background-color: #888;}
    div.restore { width:200px; clear:none; float:left; margin-right:8px;background-color: #ddd;}
    div.minimize { width:200px; clear:none; float:left; margin-right:8px;}

Here is the script to initialize my hot-keys and setting all the widget boxes to "restore" mode. As you can see that each div is bound to a hot-key ("ctrl-1", etc) and they are all bound to "ctrl-m" to minimize all and to "ctrl-r" to restore all.

        var speed = "normal";
        var MainArea = "Main";
        var DashboardArea = "Dashboard";

        $(document).ready(function() {
            for (var i = 0; i < $("#" + DashboardArea).children().length; i++) {
                displayRestore($("#" + DashboardArea).children()[i].id.substring(DashboardArea.length));
            }
            $.hotkeys.add('Ctrl+r', function() {
                for (var i = 0; i < $("#" + DashboardArea).children().length; i++) {
                    displayRestore($("#" + DashboardArea).children()[i].id.substring(DashboardArea.length));
                }
            });
            $.hotkeys.add('Ctrl+m', function() {
                for (var i = 0; i < $("#" + DashboardArea).children().length; i++) {
                    displayMinimize($("#" + DashboardArea).children()[i].id.substring(DashboardArea.length));
                }
            });
            $.hotkeys.add('Ctrl+1', function() { displayCascadeMaximize('ItemOne'); });
            $.hotkeys.add('Ctrl+2', function() { displayCascadeMaximize('ItemTwo'); });
            $.hotkeys.add('Ctrl+3', function() { displayCascadeMaximize('ItemThree'); });
            $.hotkeys.add('Ctrl+4', function() { displayCascadeMaximize('ItemFour'); });
            $.hotkeys.add('Ctrl+5', function() { displayCascadeMaximize('ItemFive'); });
            $.hotkeys.add('Ctrl+6', function() { displayCascadeMaximize('ItemSix'); });
        });

Below is the function to handle maximize event to the widget. It checks first whether there is any widget in maximize mode inside the "main" container and if there is any, restore it then maximize the one intended to be maximized.

        function displayCascadeMaximize(source) {
            // restore what is currently in max mode
            if ($("#" + MainArea).children().length > 0)
                displayRestore($("#" + MainArea).children()[0].id);

            // display selected widget in main area with maximize view
            displayMaximize(source);
        }

        function displayMaximize(source) {
            // create a clone of selected widget and put in main area
            $("#" + MainArea).html($("#" + source));

            // display maximize mode
            $("#" + source + "Maximize").show(speed);
            $("#" + source + "Restore").hide(speed);

            // adjust css
            $("#" + source).removeClass("restore");
            $("#" + source).removeClass("minimize");
            $("#" + source).addClass("maximize");
        }

The handler for restore is pretty straight forward. It checks whether the "source" intended to be restored is in the "main" container or not and based on that execute the correct restore process.

        function displayRestore(source) {
            if ($("#" + source).parent()[0].id == MainArea) {
                // if source is in main area then remove it from main area and show in Dashboard area
                $("#" + DashboardArea + source).html($("#" + MainArea).html());
                $("#" + MainArea).html("");
                $("#" + DashboardArea + " #" + source).show(speed);

                if ($("#" + DashboardArea + " #" + source).hasClass("restore")) { }
                else {
                    $("#" + DashboardArea + " #" + source + "Maximize").hide(speed);
                    $("#" + DashboardArea + " #" + source + "Restore").show(speed);

                    $("#" + DashboardArea + " #" + source).addClass("restore");
                    $("#" + DashboardArea + " #" + source).removeClass("minimize");
                    $("#" + DashboardArea + " #" + source).removeClass("maximize");
                }
            }
            else {
                // if source is in Dashboard area
                $("#" + source + "Maximize").hide(speed);
                $("#" + source + "Restore").show(speed);

                $("#" + source).addClass("restore");
                $("#" + source).removeClass("minimize");
                $("#" + source).removeClass("maximize");
            }
        }

The handler for restore is pretty much the same as restore - except it executes minimize instead of restore.

        function displayMinimize(source) {
            if ($("#" + source).parent()[0].id == MainArea) {
                // if source is in main area then remove it from main area and show in Dashboard area
                $("#" + DashboardArea + source).html($("#" + MainArea).html());
                $("#" + MainArea).html("");
                $("#" + DashboardArea + " #" + source).show(speed);

                if ($("#" + DashboardArea + " #" + source).hasClass("minimize")) { }
                else {
                    $("#" + DashboardArea + " #" + source + "Maximize").hide(speed);
                    $("#" + DashboardArea + " #" + source + "Restore").hide(speed);

                    $("#" + DashboardArea + " #" + source).addClass("minimize");
                    $("#" + DashboardArea + " #" + source).removeClass("restore");
                    $("#" + DashboardArea + " #" + source).removeClass("maximize");
                }
            }
            else {
                // if source is in Dashboard area
                $("#" + source + "Maximize").hide(speed);
                $("#" + source + "Restore").hide(speed);

                $("#" + source).addClass("minimize");
                $("#" + source).removeClass("restore");
                $("#" + source).removeClass("maximize");
            }
        }

The HTML:

    

        

        

        

            

                

                    

                        Item One in Restore Mode
                    
                    

                        Item One in Maximize Mode
                    
                    
 
                
            
            

                

                    

                        Item Two in Restore Mode
                    
                    

                        Item Two in Maximize Mode
                    
                    
 
                
            
            
            

                

                    

                        Item Three in Restore Mode
                    
                    

                        Item Three in Maximize Mode
                    
                    
 
                
            
            
            

                

                    

                        Item Four in Restore Mode
                    
                    

                        Item Four in Maximize Mode
                    
                    
 
                
            
            
            

                

                    

                        Item Five in Restore Mode
                    
                    

                        Item Five in Maximize Mode
                    
                    
 
                
            
            
            

                

                    

                        Item Six in Restore Mode
                    
                    

                        Item Six in Maximize Mode