MediaWiki:Tabs.js: Difference between revisions

Revision as of 09:01, June 27, 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 $( 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();
} );
} );



/* Legacy tabs */

var getChildrenByTagName = function(parent, name) {
	var nodeList = [];
	for (var child = parent.firstChild; child != null; child = child.nextSibling) {
		if (child.nodeType == 1 && name == child.nodeName) { nodeList.push(child); }
	}
	return nodeList;
};

/* Move tabs from the tabcontent section to the tab section */
/* This assumes that every tabcontent div is paired with one tab div. */
var destinations = document.getElementsByClassName("tab");
var tabcontents = document.getElementsByClassName("tabcontent");
for( var i = 0; i < tabcontents.length; ++i ) {
	var tabs = getChildrenByTagName(tabcontents[i], "UL");
	for( var j = 0; j < tabs.length; ++j ) {
		/* Move from tabcontents ul to tab ul */
		destinations[i].firstChild.appendChild(tabs[j].firstChild);
		/* Remove the now empty tabcontents ul */
		tabcontents[i].removeChild(tabs[j]);
	}
}