User:Locke/common.js: Difference between revisions

From Zelda Dungeon Wiki
Jump to navigation Jump to search
Want an adless experience? Log in or Create an account.
No edit summary
(do away with tabstate, instead walk the DOM to find selections)
Line 30: Line 30:


$( function() {
$( function() {
var tabstate = {};
var autoTargetCtr = 0;
$( '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 or set target tabcontainer
  // 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' );
   if ( !target ) {
   var container = target ? $( '#' + target ) : tabset.closest( '.zdw-tabcontainer' );
    // target wasn't specified, so use the nearest container
 
    var container = tabset.closest( '.zdw-tabcontainer' )
  // get all tabsets for container
     if ( !container ) {
  var tabsets = target ?
      console.err( 'Tabset did not specify a target, and no parent tab container was found' );
     $( '.zdw-tabset[data-tab-target="' + target + '"]' ) : // get all tabsets with the same target
      return;
     container.find( '.zdw-tabset' ).filter( function() { // get all child tabsets
    }
       return $( this ).closest( '.zdw-tabcontainer' ).is( container ); // that aren't nested inside other containers
     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
   // get selections
   var selector = tabset.data( 'tabSelector' );
   var selections = {}
  if ( selector == undefined ) { // 0 is okay
  tabsets.each( function() {
     selector = tabstate[ target ].length;
     var ts = $( this );
     tabset.attr( 'data-tab-selector', selector );
     selections[ ts.data( 'tabSelector' ) || 'default' ] = ts.find( '.active' ).data( 'tabSelection' );
   }
   } );


   // get tab selection
   // make sure this tabset takes priority in case multiple tabsets use the same selector
   var selection = tab.data( 'tabSelection' );
   selections[ tabset.data( 'tabSelector' ) || 'default' ] = tab.data( 'tabSelection' );


   // deselect and hide everything
   // hide contents (except nested contents)
   tabset.find( '.zdw-tab' ).removeClass( 'active' );
   container.find( '.zdw-tabcontent' ).filter( function() {
  $( '#' + target + ' .zdw-tabcontent' ).not( '#' + target + ' .zdw-tabs .zdw-tabcontent' ).hide(); // don't hide nested contents
    return $( this ).closest( '.zdw-tabcontainer' ).is( container );
  } ).hide();


   // show the selected content and activate the tab
   // show the selected content
  tabstate[ target ][ selector ] = selection;
   var selectors = Object.keys( selections ).map( function( s ) {
   var content = tabstate[ target ].join( ' ' );
    return '[data-tab-content-' + s + '="' + selections[ s ] + '"]';
  $( '#' + target + ' div[data-tab-content="' + content + '"]' ).show();
  } );
   tab.addClass( 'active' );
   container.find( '.zdw-tabcontent' + selectors.join( '' ) ).show();
} );
} );
} );
} );

Revision as of 05:42, 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 ) {
    return '[data-tab-content-' + s + '="' + selections[ s ] + '"]';
  } );
  container.find( '.zdw-tabcontent' + selectors.join( '' ) ).show();
} );
} );