User:Locke/common.js: Difference between revisions

Revision as of 05:59, 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 "tabtarget"
  -add a unique id

Next, add content to the target:
  -each must be a div and a direct child to the target
  -add class "tabcontent2"
  -add attribute "data-tab-content" to hold the unique (for this target) identifying string
  --for multiple selectors, this string is an ordered, space-separated list of selections for each selector
  --otherwise, it can be anything

Then, add selectors:
  -they can go anywhere, inside or outside of the target
  -add class "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 an integer if you wish to have more than one tabset for the same selector
  --by default, tabsets start at 0 and increment by 1 for each subsequent definition

Finally, add tabs:
  -they must be descendants of their respective tabsets
  -add class "tab2"
  -set attribute "data-tab-selection" to a unique (for this selector) identifying string
  --this will get combined with the selections of other selectors to form the string found in "data-tab-content" in the target
  --for example, data-tab-selection="April" in selector 0 plus data-tab-selection="1st" in selector 1 will match data-tab-content="April 1st"
*/

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

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

  // activate the tab
  tabset.find( '.zdw-tab' ).removeClass( 'active' );
  tab.addClass( 'active' );

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

  // get selections
  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
  var selectors = Object.keys( selections ).map( function( s ) {
console.log(s, selections[s]);
    return '[data-tab-content-' + s + '="' + selections[ s ] + '"]';
  } );
console.log(selectors.join(''));
  container.find( '.zdw-tabcontent' + selectors.join( '' ) ).show();
} );
} );