Mark Active Triggers in Tabs

[ebollens]

Tabbed navigation in ucla-oarc-web/WebBlocks#298 demonstrates a use case where it would be awful nice to have a way of recognizing which tab target is active. Right now, there's no state modified when a trigger is active. Let's introduce a new data-active attribute for this.

First off, the initializer should be modified:

if(!_.inState(target, 'show'))
    _.addState(target, 'hide')
else
    trigger.attr('data-active', true)

Then, we need to switch this state during the click handler:

$.each(_.getState(target), function(idx,state){
    var containerMatch = state.match(/^c\[(.*)\]$/);
    if(containerMatch)
        $('[data-tabs~="'+state+'"]').each(function(){
            $.each(_.getState($(this)), function(idx,state){
                var targetMatch = state.match(/^t\[(.*)\]$/);
                if(targetMatch)
                    $('#'+targetMatch[1]).removeAttr('data-active');
            })
        })
});

$.each(_.getState(target), function(idx,state){
    var targetMatch = state.match(/^t\[(.*)\]$/);
    if(targetMatch)
        $('#'+targetMatch[1]).attr('data-active', true);
});