17,230
edits
No edit summary |
(do away with tabstate, instead walk the DOM to find selections) |
||
Line 30: | Line 30: | ||
$( function() { | $( function() { | ||
$( 'body' ).on( 'mouseover click', '.zdw-tab', function( e ) { | $( 'body' ).on( 'mouseover click', '.zdw-tab', function( e ) { | ||
var tab = $( this ); | var tab = $( this ); | ||
Line 42: | Line 39: | ||
} | } | ||
// get | // activate the tab | ||
tabset.find( '.zdw-tab' ).removeClass( 'active' ); | |||
tab.addClass( 'active' ); | |||
// get target tabcontainer | |||
var target = tabset.data( 'tabTarget' ); | var target = tabset.data( 'tabTarget' ); | ||
var container = target ? $( '#' + target ) : tabset.closest( '.zdw-tabcontainer' ); | |||
// get all tabsets for container | |||
var tabsets = target ? | |||
$( '.zdw-tabset[data-tab-target="' + target + '"]' ) : // get all tabsets with the same target | |||
container.find( '.zdw-tabset' ).filter( function() { // get all child tabsets | |||
return $( this ).closest( '.zdw-tabcontainer' ).is( container ); // that aren't nested inside other containers | |||
} ); | |||
// get | // get selections | ||
var | var selections = {} | ||
tabsets.each( function() { | |||
var ts = $( this ); | |||
selections[ ts.data( 'tabSelector' ) || 'default' ] = ts.find( '.active' ).data( 'tabSelection' ); | |||
} | } ); | ||
// | // make sure this tabset takes priority in case multiple tabsets use the same selector | ||
selections[ tabset.data( 'tabSelector' ) || 'default' ] = tab.data( 'tabSelection' ); | |||
// | // hide contents (except nested contents) | ||
container.find( '.zdw-tabcontent' ).filter( function() { | |||
return $( this ).closest( '.zdw-tabcontainer' ).is( container ); | |||
} ).hide(); | |||
// show the selected content | // show the selected content | ||
var selectors = Object.keys( selections ).map( function( s ) { | |||
var | return '[data-tab-content-' + s + '="' + selections[ s ] + '"]'; | ||
} ); | |||
container.find( '.zdw-tabcontent' + selectors.join( '' ) ).show(); | |||
} ); | } ); | ||
} ); | } ); |