Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

I have a feeling I might be doing it wrong, what major things would you improve in this code?

The code is basically handling a tour on first login, showing it only for first login users (activated externally via calling activate) and preventing the step to apear again if the user has already seen it.

I intentionally used only the basic building blocks of backbone.js to a bare minimum, e.g. I didn't use templates as the DOM at this moment is given as is, and the HTML elements are not "backbone" friendly

var tourModel, tourView;

(function($){
    var VISITED = "visited";
    function cookieName(step){
        return "tour_step" + step;
    }
    function isStepVisited(step){
        return $.cookie(cookieName(step)) === VISITED;
    }
    function setStepVisited(step){
        $.cookie(cookieName(step.number),VISITED);
    }
    var TourModel = Backbone.Model.extend({
        active: false, //private flag
        defaults: {
            step: {
                number:1, 
                display:false
            }
        },
        activate:function(){
            this.active = true;
        },
        close:function(){
            this.toggleStep(this.get("step").number, false);
        },
        toggleStep: function(step, show){
            //if this is active (e.g. first time login) and the user haven't seen this step yet (e.g. cookie isn't set) or if this is closing the step (!show) then continue, else ignore
            if(!show || this.active && !isStepVisited(step)){
                this.set("step",{number:step, display:show});
            }
        },
        initialize: function(){
            this.on("change:step",function(model,step){
                if(step.display){
                    setStepVisited(step);
                }
            });
        }
    });

    tourModel = new TourModel();
})(jQuery);


(function($){

    var closeStepOne = function(){
        $("#step1").hide(); 
        $("#rss, #gorss, #mySitesTab").glowToggle(false);
    };
    var closeStepTwo = function(){
        $("#step2").hide(); 
        $(".help-text-drag, #gallery").glowToggle(false);
    };

    var stepFunctions = {
            1:function (show){
                if(show) {
                    $("#step1").show();
                    $("#rss, #gorss, #mySitesTab").glowToggle(true);
                    $("#rssInputs, #mySitesTab").expose({
                        closeOnEscape : true,
                        closeOnClick : false,
                        close:function(){
                            closeStepOne();
                        }
                    });
                } else {
                    closeStepOne();
                    $("#mySitesTab").expose("remove");
                }
            },
            2:function (show){
                if(show) {

                    $("#step2").show();
                    $(".help-text-drag, #gallery").glowToggle(true);

                    $(".help-text-drag, #step2, #gallery").expose({
                        closeOnEscape : true,
                        closeOnClick : false,
                        close:function(){
                            closeStepTwo();
                            //$("#rss, #gorss, #mySitesTab").glowToggle(false);
                        }
                    });
                    $("#step2").css("z-index","1003");
                } else {
                    closeStepTwo();
                     $("#gallery").expose("remove");
                }
            }
         };

    var TourView = Backbone.View.extend({

        model: tourModel,
        initialize: function() {
            this.model.on( 'change:step', this.render, this );
        },
        render: function(model,step) {
            //alert(JSON.stringify(step,4));
            stepFunctions[step.number](step.display);
        }
    });

    tourView = new TourView();
    //view private functions

})(jQuery);


$(function(){

    $(".tourCloseButton").click(function(){
       tourModel.close(); 
    });

});
share|improve this question
1  
I don't see anything wrong with your code. –  Larry Battle Sep 21 '12 at 17:04

1 Answer 1

Alternative Approach:

In your case, I believe that the use of a model is not really necessary for this task. I would construct this using a master view with child views for each step:

A TourView that contains a variable tracking which step is currently active and listenting for an event from it's child views for navigation.

A TourStep1View .. TourStepNView for each step of the tutorial whose render function contains corresponding show and close function contains the hide.

Launch the TourView and have it render a child view for the first step. The child view should throw an event to signal the parent view to swap it out for the next child view.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.