User:Locke/common.js: Difference between revisions

Revision as of 03:44, 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() {
var tabstate = {};
var autoTargetCtr = 0;

$( '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;
  }

  // get or set target tabcontainer
  var target = tabset.data( 'tabTarget' );
  if ( !target ) {
    // target wasn't specified, so use the nearest container
    var container = tabset.closest( '.zdw-tabcontainer' )
    if ( !container ) {
      console.err( 'Tabset did not specify a target, and no parent tab container was found' );
      return;
    }
    target = container.attr( 'id' );
    if ( !target ) {
      // container didn't specify an id, so generate a new one
      target = 'tabtarget-' + ++autoTargetCtr;
      container.attr( 'id', target );
    } // otherwise it was specified or another tabset generated it already
    tabset.attr( 'data-tab-target', target );
  }
  tabstate[ target ] = tabstate[ target ] || [];

  // get or set tabset selector
  var selector = tabset.data( 'tabSelector' );
  if ( selector == undefined ) { // 0 is okay
    selector = tabstate[ target ].length;
    tabset.attr( 'data-tab-selector', selector );
  }

  // get tab selection
  var selection = tab.data( 'tabSelection' );

  // deselect and hide everything
  tabset.find( '.zdw-tab' ).removeClass( 'active' );
  $( '#' + target + ' .zdw-tabcontent' ).not( '#' + target + ' .zdw-tabs .zdw-tabcontent' ).hide(); // don't hide nested contents

  // show the selected content and activate the tab
  tabstate[ target ][ selector ] = selection;
  var content = tabstate[ target ].join( ' ' );
  $( '#' + target + ' div[data-tab-content="' + content + '"]' ).show();
  tab.addClass( 'active' );
} );
} );