MediaWiki:Common.js: Difference between revisions
Jump to navigation
Jump to search
Want an adless experience? Log in or Create an account.
mNo edit summary |
(inline Toggle.js and Tabs.js to reduce calls to load.php) |
||
(38 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
/* Any JavaScript here will be loaded for all users on every page load. */ | /* Any JavaScript here will be loaded for all users on every page load. */ | ||
/* Toggle.js */ | |||
/** | |||
Toggles the display of elements on a page | |||
Author/contact: Austin Che http://openwetware.org/wiki/User:Austin_J._Che | |||
See http://openwetware.org/wiki/OpenWetWare:Toggle for examples and documentation | |||
*/ | |||
// | // indexed array of toggler ids to array of associated toggle operations | ||
// each operation is a two element array, the first being the type, the second a class name or array of elements | |||
// operation types are strings like "_reset" or "" for the default toggle operation | |||
var togglers = new Array(); | |||
var allClasses = new Object(); // associative map of class names to page elements | |||
function | function toggler(id) | ||
{ | { | ||
var toBeToggled = togglers[id]; | |||
if (!toBeToggled) | |||
if( | return; | ||
// if some element is in list more than once, it will be toggled multiple times | |||
for (var i = 0; i < toBeToggled.length; i++) | |||
{ | { | ||
// get array of elements to operate on | |||
var toggles = toBeToggled[i][1]; | |||
var | if (typeof(toggles) == "string") | ||
if( | |||
{ | { | ||
if (toggles.charAt(0) == '-') | |||
{ | |||
// treat as an element ID, not as class | |||
toggles = document.getElementById(toggles.substring(1)); | |||
if (toggles) | |||
toggles = new Array(toggles); | |||
} | |||
else | |||
toggles = allClasses[toggles]; | |||
} | } | ||
if (!toggles || !toggles.length) | |||
continue; | |||
var | var op = toBeToggled[i][0]; // what the operation will be | ||
switch (op) | |||
{ | { | ||
case "_reset": | |||
for (var j = 0; j < toggles.length; j++) | |||
toggles[j].style.display = toggles[j]._toggle_original_display; | |||
break; | |||
case "_show": | |||
for (var j = 0; j < toggles.length; j++) | |||
toggles[j].style.display = ''; | |||
break; | |||
case "_hide": | |||
for (var j = 0; j < toggles.length; j++) | |||
toggles[j].style.display = 'none'; | |||
break; | |||
case "": | |||
default: | |||
// Toggle | |||
for (var j = 0; j < toggles.length; j++) | |||
toggles[j].style.display = ((toggles[j].style.display == 'none') ? '' : 'none'); | |||
break; | |||
} | } | ||
} | } | ||
} | } | ||
function createTogglerLink(toggler, id) | |||
{ | { | ||
var toggle = document.createElement("a"); | |||
toggle.className = 'toggler-link'; | |||
toggle.setAttribute('id', 'toggler' + id); | |||
toggle.setAttribute('onclick', 'javascript:toggler("' + id + '");'); | |||
toggle.setAttribute('style', 'cursor: pointer'); | |||
var child = toggler.firstChild; | |||
toggler.removeChild(child); | |||
toggle.appendChild(child); | |||
toggler.insertBefore(toggle, toggler.firstChild); | |||
} | } | ||
function toggleInit() | |||
{ | |||
var togglerElems = new Array(); | |||
var toggleGroup = new Array(); | |||
// | // initialize/clear any old information | ||
togglers = new Array(); | |||
allClasses = new Object(); | |||
// make list of all document classes | |||
var elems = document.getElementsByTagName("*"); | |||
var numelems = elems.length; | |||
for (var i = 0; i < elems.length; i++) | |||
{ | { | ||
var elem = elems[i]; | |||
if (!elem.className) | |||
var | continue; | ||
elem._toggle_original_display = elem.style.display; | |||
var togglerID = -1; | |||
var elemClasses = elem.className.toString().split(' '); // get list of classes | |||
for (var j = 0; j < elemClasses.length; j++) | |||
{ | { | ||
var elemClass = elemClasses[j]; | |||
if (! allClasses[elemClass]) | |||
allClasses[elemClass] = new Array(); | |||
allClasses[elemClass].push(elem); | |||
// all the special classes begin with _toggle | |||
if (elemClass.substring(0, 7) != "_toggle") | |||
continue; | |||
if (elemClass == "_togglegroup") | |||
toggleGroup = new Array(); | |||
else if (elemClass == "_toggle") | |||
toggleGroup.push(elem); | |||
else if (elemClass.substring(0, 12) == "_toggle_init") | |||
{ | |||
// set initial value for display (ignore the original CSS set value) | |||
// understands _toggle_initshow and _toggle_inithide | |||
var disp = elemClass.substring(12); | |||
if (disp == "show") | |||
elem.style.display = ''; | |||
else if (disp == "hide") | |||
elem.style.display = 'none'; | |||
elem._toggle_original_display = disp; | |||
} | |||
else if (elemClass.substring(0, 8) == "_toggler") | |||
{ | |||
if (togglerID == -1) | |||
{ | |||
togglerID = togglers.length; | |||
togglers[togglerID] = new Array(); | |||
togglerElems[togglerID] = elem; | |||
} | |||
// all classes are of form _toggler_op-CLASS | |||
// figure out what class we're toggling | |||
// if none is specified, then we use the current toggle group | |||
var toBeToggled; | |||
var hyphen = elemClass.indexOf('-'); | |||
if (hyphen != -1) | |||
toBeToggled = elemClass.substring(hyphen+1); | |||
else | |||
{ | |||
toBeToggled = toggleGroup; | |||
hyphen = elemClass.length; | |||
} | |||
var op = elemClass.substring(8, hyphen); | |||
togglers[togglerID].push(new Array(op, toBeToggled)); | |||
} | |||
} | } | ||
} | } | ||
{ | // add javascript links to all toggler elements | ||
for (var i = 0; i < togglerElems.length; i++) | |||
createTogglerLink(togglerElems[i], i); | |||
} | |||
function owwsitesearch(f){ | |||
f.q.value='site:http://zeldadungeon.net/wiki/'+ | |||
f.base.value+'++'+f.qfront.value | |||
} | |||
$(toggleInit()); | |||
/* End of Togglejs */ | |||
/* Tabs.js */ | |||
/* | |||
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 "zdw-tabcontainer" | |||
-add a unique id | |||
Next, add content to the target: | |||
-each must be a div and a direct child to the target | |||
-add class "zdw-tabcontent" | |||
-add attribute "data-tab-content" to hold the unique (for this target) identifying string | |||
--for multiple selectors, use multiple "data-tab-content-selectorname" attributes | |||
Then, add selectors: | |||
-they can go anywhere, inside or outside of the target | |||
-add class "zdw-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 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(); | |||
} ); | |||
} ); | |||
/* End of Tabs.js */ | |||
if ( $( '.zdw-paged-gallery' ).length ) { | |||
mw.loader.load( '/wiki/index.php?title=MediaWiki:PagedGallery.js&action=raw&ctype=text/javascript' ); | |||
} | } | ||
/* add Templates and Sandbox links to the Toolbox */ | |||
mw.loader.using(['mediawiki.util']).then(function() { | |||
mw.util.addPortletLink( 'p-tb', '/wiki/Category:Templates', 'Templates', 't-templates', 'Available Templates' ); | |||
mw.util.addPortletLink( 'p-tb', '/wiki/Zelda Dungeon Wiki:Sandbox', 'Sandbox', 't-sandbox', 'Sandbox for testing changes' ); | |||
}); | }); | ||
} | |||
/* fix word wrapping in ToC by adding 1 pixel to each ul in the ToC */ | |||
/* | |||
var uls = document.getElementById('toc').getElementsByTagName('ul')[0].getElementsByTagName('ul'); | |||
for(var i=0; i<uls.length; ++i) { uls[i].style.width = uls[i].clientWidth + 1 + "px"; } | |||
*/ |
Latest revision as of 04:21, May 1, 2023
/* Any JavaScript here will be loaded for all users on every page load. */ /* Toggle.js */ /** Toggles the display of elements on a page Author/contact: Austin Che http://openwetware.org/wiki/User:Austin_J._Che See http://openwetware.org/wiki/OpenWetWare:Toggle for examples and documentation */ // indexed array of toggler ids to array of associated toggle operations // each operation is a two element array, the first being the type, the second a class name or array of elements // operation types are strings like "_reset" or "" for the default toggle operation var togglers = new Array(); var allClasses = new Object(); // associative map of class names to page elements function toggler(id) { var toBeToggled = togglers[id]; if (!toBeToggled) return; // if some element is in list more than once, it will be toggled multiple times for (var i = 0; i < toBeToggled.length; i++) { // get array of elements to operate on var toggles = toBeToggled[i][1]; if (typeof(toggles) == "string") { if (toggles.charAt(0) == '-') { // treat as an element ID, not as class toggles = document.getElementById(toggles.substring(1)); if (toggles) toggles = new Array(toggles); } else toggles = allClasses[toggles]; } if (!toggles || !toggles.length) continue; var op = toBeToggled[i][0]; // what the operation will be switch (op) { case "_reset": for (var j = 0; j < toggles.length; j++) toggles[j].style.display = toggles[j]._toggle_original_display; break; case "_show": for (var j = 0; j < toggles.length; j++) toggles[j].style.display = ''; break; case "_hide": for (var j = 0; j < toggles.length; j++) toggles[j].style.display = 'none'; break; case "": default: // Toggle for (var j = 0; j < toggles.length; j++) toggles[j].style.display = ((toggles[j].style.display == 'none') ? '' : 'none'); break; } } } function createTogglerLink(toggler, id) { var toggle = document.createElement("a"); toggle.className = 'toggler-link'; toggle.setAttribute('id', 'toggler' + id); toggle.setAttribute('onclick', 'javascript:toggler("' + id + '");'); toggle.setAttribute('style', 'cursor: pointer'); var child = toggler.firstChild; toggler.removeChild(child); toggle.appendChild(child); toggler.insertBefore(toggle, toggler.firstChild); } function toggleInit() { var togglerElems = new Array(); var toggleGroup = new Array(); // initialize/clear any old information togglers = new Array(); allClasses = new Object(); // make list of all document classes var elems = document.getElementsByTagName("*"); var numelems = elems.length; for (var i = 0; i < elems.length; i++) { var elem = elems[i]; if (!elem.className) continue; elem._toggle_original_display = elem.style.display; var togglerID = -1; var elemClasses = elem.className.toString().split(' '); // get list of classes for (var j = 0; j < elemClasses.length; j++) { var elemClass = elemClasses[j]; if (! allClasses[elemClass]) allClasses[elemClass] = new Array(); allClasses[elemClass].push(elem); // all the special classes begin with _toggle if (elemClass.substring(0, 7) != "_toggle") continue; if (elemClass == "_togglegroup") toggleGroup = new Array(); else if (elemClass == "_toggle") toggleGroup.push(elem); else if (elemClass.substring(0, 12) == "_toggle_init") { // set initial value for display (ignore the original CSS set value) // understands _toggle_initshow and _toggle_inithide var disp = elemClass.substring(12); if (disp == "show") elem.style.display = ''; else if (disp == "hide") elem.style.display = 'none'; elem._toggle_original_display = disp; } else if (elemClass.substring(0, 8) == "_toggler") { if (togglerID == -1) { togglerID = togglers.length; togglers[togglerID] = new Array(); togglerElems[togglerID] = elem; } // all classes are of form _toggler_op-CLASS // figure out what class we're toggling // if none is specified, then we use the current toggle group var toBeToggled; var hyphen = elemClass.indexOf('-'); if (hyphen != -1) toBeToggled = elemClass.substring(hyphen+1); else { toBeToggled = toggleGroup; hyphen = elemClass.length; } var op = elemClass.substring(8, hyphen); togglers[togglerID].push(new Array(op, toBeToggled)); } } } // add javascript links to all toggler elements for (var i = 0; i < togglerElems.length; i++) createTogglerLink(togglerElems[i], i); } function owwsitesearch(f){ f.q.value='site:http://zeldadungeon.net/wiki/'+ f.base.value+'++'+f.qfront.value } $(toggleInit()); /* End of Togglejs */ /* Tabs.js */ /* 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 "zdw-tabcontainer" -add a unique id Next, add content to the target: -each must be a div and a direct child to the target -add class "zdw-tabcontent" -add attribute "data-tab-content" to hold the unique (for this target) identifying string --for multiple selectors, use multiple "data-tab-content-selectorname" attributes Then, add selectors: -they can go anywhere, inside or outside of the target -add class "zdw-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 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(); } ); } ); /* End of Tabs.js */ if ( $( '.zdw-paged-gallery' ).length ) { mw.loader.load( '/wiki/index.php?title=MediaWiki:PagedGallery.js&action=raw&ctype=text/javascript' ); } /* add Templates and Sandbox links to the Toolbox */ mw.loader.using(['mediawiki.util']).then(function() { mw.util.addPortletLink( 'p-tb', '/wiki/Category:Templates', 'Templates', 't-templates', 'Available Templates' ); mw.util.addPortletLink( 'p-tb', '/wiki/Zelda Dungeon Wiki:Sandbox', 'Sandbox', 't-sandbox', 'Sandbox for testing changes' ); }); /* fix word wrapping in ToC by adding 1 pixel to each ul in the ToC */ /* var uls = document.getElementById('toc').getElementsByTagName('ul')[0].getElementsByTagName('ul'); for(var i=0; i<uls.length; ++i) { uls[i].style.width = uls[i].clientWidth + 1 + "px"; } */