MediaWiki:Tabs.js: Difference between revisions

Jump to navigation Jump to search
Want an adless experience? Log in or Create an account.

MediaWiki:Tabs.js (view source)

Revision as of 00:41, August 18, 2020

119 bytes removed ,  August 18, 2020
fix hiding deselected content when it's not in a container
(I give up.)
(fix hiding deselected content when it's not in a container)
 
(14 intermediate revisions by the same user not shown)
Line 1: Line 1:
/*
/*
Developed by Robert Nyman, http://www.robertnyman.com
Tabs script based on data attributes for arbitrary target selection and limited structure restrictions
Code/licensing: http://code.google.com/p/getelementsbyclassname/
*/
var getElementsByClassName = function (className, tag, elm){
if (document.getElementsByClassName) {
getElementsByClassName = function (className, tag, elm) {
elm = elm || document;
var elements = elm.getElementsByClassName(className),
nodeName = (tag)? new RegExp("\\b" + tag + "\\b", "i") : null,
returnElements = [],
current;
for(var i=0, il=elements.length; i<il; i+=1){
current = elements[i];
if(!nodeName || nodeName.test(current.nodeName)) {
returnElements.push(current);
}
}
return returnElements;
};
}
else if (document.evaluate) {
getElementsByClassName = function (className, tag, elm) {
tag = tag || "*";
elm = elm || document;
var classes = className.split(" "),
classesToCheck = "",
xhtmlNamespace = "http://www.w3.org/1999/xhtml",
namespaceResolver = (document.documentElement.namespaceURI === xhtmlNamespace)? xhtmlNamespace : null,
returnElements = [],
elements,
node;
for(var j=0, jl=classes.length; j<jl; j+=1){
classesToCheck += "[contains(concat(' ', @class, ' '), ' " + classes[j] + " ')]";
}
try {
elements = document.evaluate(".//" + tag + classesToCheck, elm, namespaceResolver, 0, null);
}
catch (e) {
elements = document.evaluate(".//" + tag + classesToCheck, elm, null, 0, null);
}
while ((node = elements.iterateNext())) {
returnElements.push(node);
}
return returnElements;
};
}
else {
getElementsByClassName = function (className, tag, elm) {
tag = tag || "*";
elm = elm || document;
var classes = className.split(" "),
classesToCheck = [],
elements = (tag === "*" && elm.all)? elm.all : elm.getElementsByTagName(tag),
current,
returnElements = [],
match;
for(var k=0, kl=classes.length; k<kl; k+=1){
classesToCheck.push(new RegExp("(^|\\s)" + classes[k] + "(\\s|$)"));
}
for(var l=0, ll=elements.length; l<ll; l+=1){
current = elements[l];
match = false;
for(var m=0, ml=classesToCheck.length; m<ml; m+=1){
match = classesToCheck[m].test(current.className);
if (!match) {
break;
}
}
if (match) {
returnElements.push(current);
}
}
return returnElements;
};
}
return getElementsByClassName(className, tag, elm);
};


var getChildrenByTagName = function(parent, name) {
First, create a target out of any element (usually a div):
var nodeList = [];
  -add class "zdw-tabcontainer"
for (var child = parent.firstChild; child != null; child = child.nextSibling) {
  -add a unique id
if (child.nodeType == 1 && name == child.nodeName) { nodeList.push(child); }
}
return nodeList;
};


/* Move tabs from the tabcontent section to the tab section */
Next, add content to the target:
/* This assumes that every tabcontent div is paired with one tab div. */
  -each must be a div and a direct child to the target
var destinations = getElementsByClassName("tab");
  -add class "zdw-tabcontent"
var tabcontents = getElementsByClassName("tabcontent");
  -add attribute "data-tab-content" to hold the unique (for this target) identifying string
for( var i = 0; i < tabcontents.length; ++i ) {
  --for multiple selectors, use multiple "data-tab-content-selectorname" attributes
var tabs = getChildrenByTagName(tabcontents[i], "UL");
 
for( var j = 0; j < tabs.length; ++j ) {
Then, add selectors:
/* Move from tabcontents ul to tab ul */
  -they can go anywhere, inside or outside of the target
destinations[i].firstChild.appendChild(tabs[j].firstChild);
  -add class "zdw-tabset"
/* Remove the now empty tabcontents ul */
  -set attribute "data-tab-target" to the target's id
tabcontents[i].removeChild(tabs[j]);
  -set attribute "data-tab-type" to "click" or "hover" to control how the tabs are activated
}
  -optional: set attribute "data-tab-selector" to some string if you wish to have more than one tabset for the same selector
}
 
Finally, add tabs:
  -they must be descendants of their respective tabsets
  -add class "zdw-tab"
  -optional: set attribute "data-tab-selection" to a unique (for this selector) identifying string
  --this will be compared to "data-tab-content-selectorname" in the target
*/
 
$( function() {
$( 'body' ).on( 'mouseover click', '.zdw-tab', function( e ) {
  var tab = $( this );
  var tabset = tab.closest( '.zdw-tabset' );
  var selector = tabset.data( 'tabSelector' );
 
  // first check if we care about this event
  if ( (tabset.data( 'tabType' ) || '').split( ' ' ).indexOf( e.type ) == -1 ) {
    return;
  }
 
  // 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
    } );
 
  // deactivate other tabs sharing the same selector and activate this one
  tabsets.filter( function() { return $( this ).data( 'tabSelector' ) == selector; } ).find( '.zdw-tab' ).removeClass( 'active' );
  tab.addClass( 'active' );
 
  // get selections
  var selections = {}
  tabsets.each( function() {
    var ts = $( this );
    var s = ts.data( 'tabSelector' );
    selections[ s == undefined ? '' : '-' + s ] = ts.find( '.active' ).data( 'tabSelection' );
  } );
 
  // make sure this tabset takes priority in case multiple tabsets use the same selector
  selections[ selector == undefined ? '' : '-' + selector ] = tab.data( 'tabSelection' );
 
  // hide contents (except nested contents)
  container.find( '.zdw-tabcontent' ).filter( function() {
    return target || $( 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();
} );
} );
Retrieved from "https://www.zeldadungeon.net/wiki/Special:MobileDiff/55977...243766"

Navigation menu