First jQuery Plugin (jSteps,(Name to be revised)), Advise on how to optimize it?

Discussion in 'jQuery' started by hyperspace2012, Feb 5, 2012.

  1. #1
    Hello Everybody,

    I have just developed my first jQuery plugin and I've got pretty much everything functioning. I just wanted to know if I've done everything in a satisfactory manner. Looking for speed optimizations, file size optimizations, etc.

    About the plugin:

    The plugin is a simple implementation of a form with multiple steps. It contains a next and previous button and hides/shows them automatically. It also has a button for the last page which for my purposes is a save_form button. There is also a possibility of adding messages to each step so that a user can be informed of what the page should be used for and shows a messages of how many remaining steps there are. It will calculate everything so basically just need to add messages if wanted.

    The Code:

    
    (function($) {
        $.jSteps = function(element, options) {
            /* Configure the default settings */
            var defaults = {
                next_button: '#button_next',
                prev_button: '#button_prev',
                save_button: '#button_save',
                messages: new Array(),
                status_div:    '#step_status .last',
                info_div: '#step_status .first',
                current_step: 0,
                total_steps: 0,
                scroll_x: 0,
                scroll_y: 0
            };    
    
            var plugin = this;
            plugin.settings = { }
            
            var element = $(element);
            element = element;
            
            var s;
            
            plugin.init = function() {
                plugin.settings = $.extend({}, defaults, options);
                s = plugin.settings;
                s.total_steps = element.children('div').length;
                /* Hide all of the steps on the page */
                element.children('div').each(function() {
                    $(this).hide();
                });
                /* Show only the first step at init */
                element.children('div').eq(plugin.settings.current_step).show();
                plugin.update_progress();
                plugin.update_information();
                plugin.sort_buttons();
            }
            
            /* Show a message about the current step we are on */        
            plugin.update_progress = function() {
                $(s.status_div).text('Step '+(s.current_step+1)+' of ' +s.total_steps);
            }
            
            /* Show a message that has been defined within the steps array for a div */
            plugin.update_information = function() {
                alert(plugin.settings.messages[plugin.settings.current_step]);
                $(s.info_div).text(plugin.settings.messages[plugin.settings.current_step]);
            }
                
            /* Wrapper for the travel function */        
            plugin.next = function() {
                travel('NEXT');
            }
            
            /* Wrapper for the travel function */
            plugin.prev = function() {
                travel('PREV');    
            }
            
            /* Decide which buttons should be shown on the current step */        
            plugin.sort_buttons = function() {
                switch(s.current_step) {
                    case 0:
                        $(s.next_button).show();
                        $(s.prev_button).hide();
                        $(s.save_button).hide();
                    break;
                    case s.total_steps:
                        $(s.next_button).hide();
                        $(s.save_button).show();
                    break;
                    default:
                        $(s.next_button).show();
                        $(s.prev_button).show();
                        $(s.save_button).hide();
                    break;
                }    
            }
            
            /* Show and hide the next or previous step */        
            var travel = function(Direction) {
                if(Direction == 'NEXT') {
                    element.children('div').eq(s.current_step+1).show();
                    element.children('div').eq(s.current_step).hide();
                    s.current_step += 1;
                } else if(Direction == 'PREV') {
                    element.children('div').eq(s.current_step-1).show();
                    element.children('div').eq(s.current_step).hide();
                    s.current_step -= 1;
                }
                plugin.sort_buttons();
                plugin.update_information();
                plugin.update_progress();
                /* Scroll to a position that has been defined */
                window.scrollTo(s.scroll_x, s.scroll_y);
            }
            plugin.init();
        }
        $.fn.jSteps = function(options) {
            return this.each(function() {
                if (undefined == $(this).data('jSteps')) {
                    var plugin = new $.jSteps(this, options);
                    $(this).data('jSteps', plugin);
                }
                /* When the next button has been clicked travel to the next step */
                $(plugin.settings.next_button).click(function() { 
                    plugin.next(); 
                    return false; 
                });
                /* when the previous button has been clicked travel to the previous step */
                $(plugin.settings.prev_button).click(function() { 
                    plugin.prev(); 
                    return false; 
                });
            });
        }
    })(jQuery);
    
    Code (markup):
    Default Usage:

    HTML

    
    <div id="step_status">
            <span class="first"></span>
            <span class="last"></span>
    </div>
    <div id="step_information" class="step">
           <div id="step_one">Step One</div>
           <div id="step_two">Step Two</div>
           <div id="step_three">Step Three</div>
    </div>
    <div id="step_navigation">
        <div class="previous_button">
            <input type="submit" id="button_prev" name="button_prev" value="Prev Step" />
        </div>
        <div class="forward_button">
            <input type="submit" id="button_next" name="button_next" value="Next Step" />
            <input type="submit" id="button_save" name="button_save" value="Save" />
        </div>
    </div>
    
    Code (markup):
    jQuery Load

    
    var messages = new Array(
                'Description One',
                'Description Two',
                'Description Three'
    );
    
    $('.step').jSteps(
       {
          messages: messages
       }
    );
    
    Code (markup):
    Also thanks to this boilerplate design for jQuery plugins that I found
    http://stefangabos.ro/jquery/jquery-plugin-boilerplate-revisited/

    Thanks for your considerations and look forward to responses.
     
    hyperspace2012, Feb 5, 2012 IP