MediaWiki:Tabs.js: Difference between revisions

Latest revision as of 00:41, August 18, 2020

/*
Tabs script based on data attributes for arbitrary target selection and limited structure restrictions

First, create a target out of any element (usually a div):
  -add class "zdw-tabcontainer"
  -add a unique id

Next, add content to the target:
  -each must be a div and a direct child to the target
  -add class "zdw-tabcontent"
  -add attribute "data-tab-content" to hold the unique (for this target) identifying string
  --for multiple selectors, use multiple "data-tab-content-selectorname" attributes

Then, add selectors:
  -they can go anywhere, inside or outside of the target
  -add class "zdw-tabset"
  -set attribute "data-tab-target" to the target's id
  -set attribute "data-tab-type" to "click" or "hover" to control how the tabs are activated
  -optional: set attribute "data-tab-selector" to some string if you wish to have more than one tabset for the same selector

Finally, add tabs:
  -they must be descendants of their respective tabsets
  -add class "zdw-tab"
  -optional: set attribute "data-tab-selection" to a unique (for this selector) identifying string
  --this will be compared to "data-tab-content-selectorname" in the target
*/

$( function() {
$( 'body' ).on( 'mouseover click', '.zdw-tab', function( e ) {
  var tab = $( this );
  var tabset = tab.closest( '.zdw-tabset' );
  var selector = tabset.data( 'tabSelector' );

  // first check if we care about this event
  if ( (tabset.data( 'tabType' ) || '').split( ' ' ).indexOf( e.type ) == -1 ) {
    return;
  }

  // get target tabcontainer
  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
    } );

  // deactivate other tabs sharing the same selector and activate this one
  tabsets.filter( function() { return $( this ).data( 'tabSelector' ) == selector; } ).find( '.zdw-tab' ).removeClass( 'active' );
  tab.addClass( 'active' );

  // get selections
  var selections = {}
  tabsets.each( function() {
    var ts = $( this );
    var s = ts.data( 'tabSelector' );
    selections[ s == undefined ? '' : '-' + s ] = ts.find( '.active' ).data( 'tabSelection' );
  } );

  // make sure this tabset takes priority in case multiple tabsets use the same selector
  selections[ selector == undefined ? '' : '-' + selector ] = tab.data( 'tabSelection' );

  // hide contents (except nested contents)
  container.find( '.zdw-tabcontent' ).filter( function() {
    return target || $( this ).closest( '.zdw-tabcontainer' ).is( container );
  } ).hide();

  // show the selected content
  var selectors = Object.keys( selections ).map( function( s ) {
    return '[data-tab-content' + s + '="' + selections[ s ] + '"]';
  } );
  container.find( '.zdw-tabcontent' + selectors.join( '' ) ).show();
} );
} );