20,299
edits
(restoring all debug messages; the function is in fact firing but not working sometimes) |
(finished TODO item) |
||
| (17 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* JavaScript brought over from Wikipedia appears first. JS code written for our wiki comes second, under the heading CUSTOM ONI WIKI ADDITIONS. */ | |||
/* WIKIPEDIA CARRY-OVERS */ | |||
/* The original code on Wikipedia's Common.js page should be checked once in a while for updates to, or removal of, this code */ | |||
/** extract a URL parameter from the current URL ********** | /** extract a URL parameter from the current URL ********** | ||
* From [[en:User:Lupin/autoedit.js]] | * From [[en:User:Lupin/autoedit.js]] | ||
| Line 14: | Line 19: | ||
return null; | return null; | ||
} | } | ||
/** &withJS= URL parameter ******* | /** &withJS= URL parameter ******* | ||
* Allow to try custom scripts from MediaWiki space | * Allow to try custom scripts from MediaWiki space | ||
* without editing [[Special:Mypage/ | * without editing [[Special:Mypage/skinname.js]] | ||
*/ | */ | ||
var extraJS = getURLParamValue("withJS"); | var extraJS = getURLParamValue("withJS"); | ||
| Line 25: | Line 30: | ||
} | } | ||
/* Modify the Search page to offer alternative search engines by loading [[MediaWiki:Common.js/search.js]] */ | |||
mw.loader.load('/w/index.php?title=MediaWiki:Common.js/search.js&action=raw&ctype=text/javascript'); | |||
/* | /** | ||
* Collapsible tables; reimplemented with mw-collapsible | |||
{ | * Styling is also in place to avoid FOUC | ||
* | |||
* Allows tables to be collapsed, showing only the header. See [[Help:Collapsing]]. | |||
* @version 3.0.0 (2018-05-20) | |||
* @source https://www.mediawiki.org/wiki/MediaWiki:Gadget-collapsibleTables.js | |||
* @author [[User:R. Koot]] | |||
* @author [[User:Krinkle]] | |||
* @author [[User:TheDJ]] | |||
* @deprecated Since MediaWiki 1.20: Use class="mw-collapsible" instead which | |||
* is supported in MediaWiki core. Shimmable since MediaWiki 1.32 | |||
* | |||
* @param {jQuery} $content | |||
*/ | |||
function makeCollapsibleMwCollapsible( $content ) { | |||
var $tables = $content | |||
.find( 'table.collapsible:not(.mw-collapsible)' ) | |||
.addClass( 'mw-collapsible' ); | |||
$.each( $tables, function ( index, table ) { | |||
// mw.log.warn( 'This page is using the deprecated class collapsible. Please replace it with mw-collapsible.'); | |||
if ( $( table ).hasClass( 'collapsed' ) ) { | |||
$( table ).addClass( 'mw-collapsed' ); | |||
// mw.log.warn( 'This page is using the deprecated class collapsed. Please replace it with mw-collapsed.'); | |||
} | |||
} ); | |||
if ( $tables.length > 0 ) { | |||
mw.loader.using( 'jquery.makeCollapsible' ).then( function () { | |||
$tables.makeCollapsible(); | |||
} ); | |||
} | |||
} | } | ||
mw.hook( 'wikipage.content' ).add( makeCollapsibleMwCollapsible ); | |||
{ | |||
/** | |||
* Add support to mw-collapsible for autocollapse, innercollapse and outercollapse | |||
* | |||
* Maintainers: TheDJ | |||
*/ | |||
function mwCollapsibleSetup( $collapsibleContent ) { | |||
var $element, | |||
$toggle, | |||
autoCollapseThreshold = 2; | |||
$.each( $collapsibleContent, function ( index, element ) { | |||
$element = $( element ); | |||
if ( $element.hasClass( 'collapsible' ) ) { | |||
$element.find( 'tr:first > th:first' ).prepend( $element.find( 'tr:first > * > .mw-collapsible-toggle' ) ); | |||
} | |||
if ( $collapsibleContent.length >= autoCollapseThreshold && $element.hasClass( 'autocollapse' ) ) { | |||
$element.data( 'mw-collapsible' ).collapse(); | |||
} else if ( $element.hasClass( 'innercollapse' ) ) { | |||
if ( $element.parents( '.outercollapse' ).length > 0 ) { | |||
$element.data( 'mw-collapsible' ).collapse(); | |||
} | |||
} | |||
// because of colored backgrounds, style the link in the text color | |||
// to ensure accessible contrast | |||
$toggle = $element.find( '.mw-collapsible-toggle' ); | |||
if ( $toggle.length ) { | |||
// Make the toggle inherit text color (Updated for T333357 2023-04-29) | |||
if ( $toggle.parent()[ 0 ].style.color ) { | |||
$toggle.css( 'color', 'inherit' ); | |||
$toggle.find( '.mw-collapsible-text' ).css( 'color', 'inherit' ); | |||
} | |||
} | |||
} ); | |||
} | } | ||
mw.hook( 'wikipage.collapsibleContent' ).add( mwCollapsibleSetup ); | |||
/* | /* CUSTOM ONI WIKI ADDITIONS */ | ||
if ( | |||
/* Focus us on the Search box if we're on the Main Page, so we can immediately start typing */ | |||
if (mw.config.get('wgIsMainPage')) | |||
{ | { | ||
$(function() | |||
{ | { | ||
$('#searchInput').focus(); | |||
}); | |||
} | } | ||
/** Hover tables ********************************************************* | /** Hover tables ********************************************************* | ||
| Line 108: | Line 140: | ||
} | } | ||
} | } | ||
function initHoverTables() | function initHoverTables() | ||
{ | { | ||
| Line 130: | Line 161: | ||
} | } | ||
} | } | ||
$(initHoverTables); | $(initHoverTables); | ||
| Line 154: | Line 184: | ||
gif_img.src = gif_src.replace('.gif', '.jpg'); | gif_img.src = gif_src.replace('.gif', '.jpg'); | ||
} | } | ||
function initHoverGIFs() | function initHoverGIFs() | ||
{ | { | ||
| Line 168: | Line 197: | ||
} | } | ||
} | } | ||
$(initHoverGIFs); | $(initHoverGIFs); | ||
/***** Auto-sorting tables ******** | |||
/** | |||
* Auto-sorts sortable tables by a given column (why is this not built-in?!) | * Auto-sorts sortable tables by a given column (why is this not built-in?!) | ||
* You must opt into this feature by placing "autosort" in the list of | * You must opt into this feature by placing "autosort" in the list of | ||
| Line 517: | Line 206: | ||
* Maintainers: [[User:Iritscen]] | * Maintainers: [[User:Iritscen]] | ||
*/ | */ | ||
// For some reason, the arrow buttons and headerSort classes are not attached to sortable tables immediately upon the "load" event, and we need those, so we wait a bit before trying to sort | |||
function sortTimer() | |||
{ | |||
setTimeout(function() | |||
{ | |||
sortSortableTables(); | |||
}, (1 * 1000)); | |||
} | |||
function sortSortableTables() | function sortSortableTables() | ||
{ | { | ||
console.log("Sorting the autosort tables."); | |||
// Iterate over all <div> elements | // Iterate over all <div> elements | ||
var divs = document.getElementsByTagName("div"); | var divs = document.getElementsByTagName("div"); | ||
| Line 546: | Line 242: | ||
if ($(theTable).hasClass(colOption)) | if ($(theTable).hasClass(colOption)) | ||
{ | { | ||
//console.log("Table " + j + " wants to sort by column " + col); | |||
sortColumnNum = col; | sortColumnNum = col; | ||
| Line 553: | Line 249: | ||
if (!allTHs) | if (!allTHs) | ||
{ | { | ||
console.log("Failed to get 'th' elements!"); | |||
continue; | continue; | ||
} | } | ||
for (var k = 0; k < allTHs.length; k++) | for (var k = 0; k < allTHs.length; k++) | ||
{ | { | ||
//console.log("Class names for 'th' # " + k + " are " + allTHs[k].className); | |||
if ($(allTHs[k]).hasClass("headerSort")) | if ($(allTHs[k]).hasClass("headerSort")) | ||
{ | { | ||
| Line 564: | Line 260: | ||
if (curColumnNum == sortColumnNum) | if (curColumnNum == sortColumnNum) | ||
{ | { | ||
console.log("Clicking sort button (ID " + k + ") for column " + sortColumnNum); | |||
$(allTHs[k]).trigger("click"); // use jQuery's trigger() to send click event to this arrow | $(allTHs[k]).trigger("click"); // use jQuery's trigger() to send click event to this arrow | ||
return; | return; | ||
| Line 577: | Line 273: | ||
} | } | ||
} | } | ||
$(sortTimer); | |||
/***** Auto-formatting dates ******** | |||
* Re-formats a date placed by [[Template:LocaleDate]] to match the | |||
* month/day order of the user's locale. | |||
* | |||
* Maintainers: [[User:Iritscen]] | |||
*/ | |||
function getLang() | |||
{ | |||
if (navigator.languages !== undefined) | |||
return navigator.languages[0]; | |||
return navigator.language; | |||
} | |||
/* Because CSS variables didn't seem to work for changing the .date-[day/month]::before rules, | |||
this function manually trawls the stylesheets until it finds those rules and changes them */ | |||
function changeDateSeparator(component, separator) | |||
{ | |||
const styleSheets = document.styleSheets; | |||
var ruleIndex; | |||
for (var i = 0; i < styleSheets.length; i++) | |||
{ | |||
const rules = styleSheets[i].cssRules || styleSheets[i].rules; | |||
for (var j = 0; j < rules.length; j++) | |||
{ | |||
if (rules[j].selectorText === '.mw-parser-output .date-'+component+'::before') | |||
{ | |||
ruleIndex = j; | |||
break; | |||
} | |||
} | |||
if (ruleIndex !== undefined) | |||
{ | |||
// Update the content of the existing rule | |||
styleSheets[i].deleteRule(ruleIndex); | |||
styleSheets[i].insertRule('.date-'+component+'::before{content:"'+separator+'";}', ruleIndex); | |||
break; | |||
} | |||
} | |||
} | |||
function localizeDates() | |||
{ | { | ||
// | const lang = getLang(); | ||
const root = document.querySelector(':root'); | |||
}); | |||
if (root == undefined || lang == undefined) | |||
return; | |||
if (lang != "en-US") // Template:LocaleDate prints dates in U.S.-style by default | |||
{ | |||
root.style.setProperty('--month-order', '2'); | |||
root.style.setProperty('--day-order', '1'); | |||
changeDateSeparator('month', '/'); | |||
changeDateSeparator('day', ''); | |||
} | |||
} | |||
$(localizeDates); | |||