User:Locke/common.js: Difference between revisions

Want an adless experience? Log in or Create an account.

User:Locke/common.js (view source)

Revision as of 05:42, June 27, 2020

94 bytes removed , June 27, 2020

do away with tabstate, instead walk the DOM to find selections

Locke

Bureaucrats, Interface administrators, Administrators

17,230

edits

@@ Line 30: / Line 30: @@
 $( function() {
-var tabstate = {};
-var autoTargetCtr = 0;
 $( 'body' ).on( 'mouseover click', '.zdw-tab', function( e ) {
    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' );
-   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();
 } );
 } );