ebollens / efx Goto Github PK

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);
});

Right now, the only event that the library supports is click. This should be modified so that effects drivers can be registered for any type of events.

Accordion is actually a subset of tabs - where the tabs are organized within the accordion as a whole. As such, I think it makes sense to possible rearrange the naming convention of accordion versus tabs so that its actually called tabs and then we just provide a subset of markup that shows how to make an accordion from it.

Right now, efx toggle will hide an element as desired, however I only want to use it at a certain breakpoint.

To remedy this, I've set a media query to display:none on the menu at a smaller breakpoint, hoping that efx would toggle it to visible, but the button with the effect attached to it does not have an effect.

When I remove the media query, behavior returns to normal.

Is there a better way to do this?

/cc @ebollens @chris4ucla

I'm not sure what or if anything can be done about this, but it doesn't appear to work on span elements for keyboard navigation purposes.

Right now, if you invoke .efx() multiple times applying to the same trigger, it attaches the events multiple times. This should not be allowed, as it will cause the effect to happen multiple times.

Ensure that the data-target receives focus, such as in:

<a data-target="#tab-1">Tab 1</a>

The kicker here is not the a tag, which probably does, but rather than any data-target should always receive focus.