How to use URI anchor

the work flow will look like:

    onclick--------->setAnchor
	|		    |
	|		    |
    setPosition<---------onHashChange ###Set up help function to use $.uriAnchor in shell.js
changeAnchorPart = function(arg_map){
    var
        anchor_map_revise = copyAnchorMap(),
        bool_return = true,
        key_name, key_name_dep;

    //begin merge changes
    LOOPKEY :
        for(key_name in arg_map){
            if(arg_map.hasOwnProperty(key_name)){ //in case of conflict

                if(key_name.indexOf('_') === 0 ){continue LOOPKEY;}  //TODO
                anchor_map_revise[key_name] = arg_map[key_name];

                key_name_dep = '_'+key_name;
                if(arg_map[key_name_dep]){
                    anchor_map_revise[key_name_dep] = arg_map[key_name_dep];
                }
                else{
                    delete anchor_map_revise[key_name_dep];
                    delete anchor_map_revise['_s'+key_name_dep]
                }
            }
        }

    try{
        $.uriAnchor.setAnchor(anchor_map_revise);
    }
    catch (error){
        //replace uri with existing state
        $.uriAnchor.setAnchor(stateMap.anchor_map, null, true); //true means don't save wrong state history
        bool_return = false;
    }


    return bool_return; //TODO 
  };

Modify the onHashChange listener to our requirements

onHashChange = function(){
    var
        anchor_map_previous = copyAnchorMap(),
        anchor_map_proposed,
        _s_login_previous, _s_login_proposed,
        s_login_proposed,
        is_login_ok = true;

    try{
        anchor_map_proposed = $.uriAnchor.makeAnchorMap();
    }
    catch(error){
        $.uriAnchor.setAnchor(anchor_map_previous, null, true);
        return false;
    }

    stateMap.anchor_map = anchor_map_proposed;

    //convenience vars
    _s_login_previous = anchor_map_previous._s_login;
    _s_login_proposed = anchor_map_proposed._s_login;

    //if anchor changed, magic happened here!
    if(! anchor_map_previous || _s_login_previous !== _s_login_proposed){
        s_login_proposed = anchor_map_proposed.login;
        switch (s_login_proposed){
            case 'open':
                is_login_ok = zugzug.acct.setSliderPosition('open');
                break;
            case 'close':
                is_login_ok = zugzug.acct.setSliderPosition('close');
                break;
            default :   //TODO
                is_login_ok = true;
                delete anchor_map_proposed.login;
                $.uriAnchor.setAnchor(anchor_map_proposed, null, true);
        }
    }

    if(!is_login_ok){
        if(anchor_map_previous){
            $.uriAnchor.setAnchor(anchor_map_previous, null, true);
            stateMap.anchor_map = anchor_map_previous;
        }
        else{
            delete anchor_map_proposed.login;
            $.uriAnchor.setAnchor(anchor_map_proposed, null, true);
        }
    }
    return false;
  };

here through the judgement on the s_login_proposed , we decide what to do on the acct.js

Some initialization in shell.js

-here in the configMap set the supported option: anchor_schema_map : { login : { open : true, closed : true} }

-in initModule setup the acct and uri_anchor with the options

    zugzug.acct.configModule({
        set_login_anchor : setLoginAnchor

    });
    zugzug.acct.initModule(jqueryMap.$acct);

    $.uriAnchor.configModule({
        schema_map : configMap.anchor_schema_map
    });

• and trigger listener in shell.js

    $(window)
        .bind('hashchange', onHashChange)
        .trigger('hashchange');
  

Modify the event listener in acct.js and shell.js

• in shell.js we transfer the function to acct.js

        zugzug.acct.configModule({
        set_login_anchor : setLoginAnchor
    });
  

• in acct.js bind the event handler to that function in shell.js onClickToggle = function(){ var set_login_anchor = configMap.set_login_anchor; if(stateMap.position_type === ‘open’){ set_login_anchor(‘close’); } else if(stateMap.position_type ===’close’){ set_login_anchor(‘open’); } return false; };

and bind the DOM element with it jqueryMap.$button.click(onClickToggle);

here the MAGIC HAPPEN : set the setPostion function

    setSliderPosition = function(position_type, callback){
	var height_px, animate_time;

	if(stateMap.position_type === position_type){
	    return true;    //command successful
	}

	switch(position_type){
	    case 'open' :
	        height_px = stateMap.open_height_px;
	        animate_time = configMap.login_open_time;
	        break;
	    case 'close' :
	        height_px = 0;
	        animate_time = configMap.login_close_time;
	        break;
	    default:
	        return false;
	}

	stateMap.position_type = '';
	jqueryMap.$login.toggle(animate_time,function(){   //TODO
	    if(callback){
	        callback(jqueryMap.$slider);
	    }
	});
	return true;
    };

-and the setup the configMap with it

    var configMap = {
	    acct_html :acct_html,
	    support_option:{
	        login_open_time : true,
	        login_close_time : true,
	        set_login_anchor : true
	    },

	    login_open_time : 200,
	    login_close_time : 100,
	    set_login_anchor: null
	},

	stateMap = {
	    position_type : 'close',    //TODO double seted
	    open_height_px : 200,
	    open_width_px : 300
	},

-return the method to shell.js

return {
	setSliderPosition : setSliderPosition,
	configModule : configModule,
	initModule : initModule
    }

How to modify with other anchor map

• first need to change the anchor_schema_map in config_map in shell.js
• then change the onHashChange method in shell.js
• change the method which passed to acct.js (e.g setInfoAnchor)