User:Locke/common.js: Difference between revisions
Jump to navigation
Jump to search
Want an adless experience? Log in or Create an account.
(moved to Gadget-PatrolAll.js) |
(revised Tabs script that should work with tabs that are added to the DOM after page load (e.g. edit preview, mobile)) |
||
Line 1: | Line 1: | ||
/* | |||
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 ( !$.inArray( e.type, (tabset.data( 'tabTarget' ) || '').split( ' ' ) ) ) { | |||
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' ); | |||
} ); | |||
} ); |
Revision as of 03:25, 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 ( !$.inArray( e.type, (tabset.data( 'tabTarget' ) || '').split( ' ' ) ) ) { 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' ); } ); } );