MediaWiki:Common.js: Difference between revisions

MediaWiki interface page
No edit summary
No edit summary
 
(6 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. */


/**
$(document).ready(function() {
* Find all header rows in a thead-less table and put them in a <thead> tag.
* This only treats a row as a header row if it contains only <th>s (no <td>s)
$('.hitbox-toggle-off').click(function() {
* and if it is preceded entirely by header rows. The algorithm stops when
$('.hitbox-toggle-off').hide();
* it encounters the first non-header row.
$('.move-image').hide();
*
$('.caption').hide();
* After this, it will look at all rows at the bottom for footer rows
$('.hitbox-toggle-on').show();
* And place these in a tfoot using similar rules.
$('.hitbox-image').show();
*
$('.hitboxCaption').show();
* This function was copied from MediaWiki's jquery.tablesorter module
});
* @param {jQuery} $table object for a <table>
*/


function emulateTHeadAndFoot( $table ) {
$('.hitbox-toggle-on').click(function() {
var $thead, $tfoot, i, len,
$('.hitbox-toggle-on').hide();
$rows = $table.find( '> tbody > tr' );
$('.hitbox-image').hide();
if ( !$table.get( 0 ).tHead ) {
$('.hitboxCaption').hide();
$thead = $( '<thead>' );
$('.hitbox-toggle-off').show();
$rows.each( function () {
$('.move-image').show();
if ( $( this ).children( 'td' ).length ) {
$('.caption').show();
// This row contains a <td>, so it's not a header row
});
// Stop here
 
return false;
        $('.movehitbox').prop('loading', 'lazy');
// Add placeholder text to Upload Summary
$('#wpUploadDescription').attr("placeholder",
"Add a description here.\n" +
"If you're uploading a new file, make sure to categorize!\n" +
"Example:\n" +
"[[Category:Skullgirls]]\n" +
"[[Category:Filia]]");
//==== Movelist Toggles ====
if (document.getElementsByClassName("movelist-toggles").length > 0) {
// Variable to track th current movelist
var currentMovelist = -1;
// Sets the current movelist based on the URL
setMovelistByUrlSection();
// Adds the movelist swap function to the movelist toggle buttons
$('.movelist-toggle-button').each(addToggles);
// Adds the "setMovelistByUrlSection" function to all "a" type elements
// This is so that if a link is clicked, it will set the correct movelist
//$('a').click(setMovelistByUrlSection);
/*$('a').each(function() {
var $t = $(this);
var $tString = $t.attr("href");
var url = window.location.href;
if($tString.substring(0, $tString.indexOf("#")) ==
});*/
$(window).bind('hashchange', function() {
console.log("hashchange");
setMovelistByUrlSection();
});
/*$(window).bind('popstate', function() {
console.log("popstate");
setMovelistByUrlSection();
});*/
// Sets the movelist based on the section in the URL
function setMovelistByUrlSection() {
// Get the page URL
var pageUrl = window.location.href;
var nextMovelist = 1;
// If page URL contains "#", proceed
if (pageUrl.indexOf("#") > 0) {
// Get section, which is the "#" and everything after it
var targetSection = pageUrl.substring(pageUrl.indexOf("#"));
// Check all class "movelist" elements
// This is under the assumption that movelists are manually labeled correctly starting from 1 and incrementing.
var maxIterations = $('.movelist').length;
var i = 1;
var sectionNotFound = true;
/* This for-loop doesn't work for some reason (syntax error???), so I made a while-loop version below
for (let i=1; i <= maxIterations; i++) {
console.log("checking movelist-"+i);
// If the movelist contains the target section
if ($('#movelist-' + i).find(targetSection).length > 0) {
// Set the nextMoveList to this movelist and break the for loop
nextMovelist = i;
console.log("found " + targetSection + "in movelist-"+i);
break;
}
}*/
while(i <= maxIterations && sectionNotFound) {
console.log("checking movelist-"+i);
// If the movelist contains the target section
if ($('#movelist-' + i).find(targetSection).length > 0) {
// Set the nextMoveList to this movelist and break the for loop
nextMovelist = i;
console.log("found " + targetSection + "in movelist-"+i);
sectionNotFound = false;
}
i++;
}
}
// Display the movelist
if (currentMovelist != nextMovelist) {
currentMovelist = nextMovelist;
displayMovelist(currentMovelist);
}
}
$thead.append( this );
if(sectionNotFound == false)
} );
$('html,body').animate({scrollTop: $(targetSection).offset().top},'slow');
$table.find( ' > tbody:first' ).before( $thead );
}
}
if ( !$table.get( 0 ).tFoot ) {
// Swap the movelist
$tfoot = $( '<tfoot>' );
function swapMovelistByButton(e) {
len = $rows.length;
// Variable for the element data "id" for movelist that was clicked
for ( i = len - 1; i >= 0; i-- ) {
var movelistToggleClicked = $(this).data("id");
if ( $( $rows[ i ] ).children( 'td' ).length ) {
// A string just for counting it's length of the movelist-toggle ID
break;
var movelistIdString = "movelist-toggle-";
// Variable snipping on the number value of the movelist
// This assumes that it is a number appended to these movelists
var nextMovelist = movelistToggleClicked.substring(movelistIdString.length);
// Changse the movelist if it's not the currently selected one
if (currentMovelist != nextMovelist) {
currentMovelist = nextMovelist;
displayMovelist(currentMovelist);
}
}
$tfoot.prepend( $( $rows[ i ] ) );
}
}
$table.append( $tfoot );
// Display the target movelist
function displayMovelist(target) {
// Hides all movelists
hideAllMovelists();
// Displays the target movelist
$("#movelist-" + target).css("display", "block");
// Highlights the current movelist toggle button by changing its classes around
$("#movelist-toggle-" + target).removeClass("movelist-toggle-off").addClass("movelist-toggle-on");
}
// Hides all movelists
function hideAllMovelists() {
// Sets all movelists "display" to "none"
$(".movelist").css("display", "none");
// Removes highlights from all movelist toggle buttons by changing its classes around
$('.movelist-toggle-button').removeClass("movelist-toggle-on").addClass("movelist-toggle-off");
}
// Adds toggles to movelist toggle buttons
function addToggles() {
// Adds data "id" which is just equal to the buttons attribute id
$(this).data("id", $(this).attr("id"));
// Run "swapMovelistByButton" function when this is clicked
$(this).click(swapMovelistByButton);
}
}
}
}


mw.hook('wikipage.content').add( function( $content ) {
});
// Do this for stickytable, but sortable does it on it's own already
$content.find('.stickytable ').each( function ( i, table ) {
if ( table.tBodies && !table.tHead ) {
// No thead found. Look for rows with <th>s and
// move them into a <thead> tag or a <tfoot> tag
emulateTHeadAndFoot( $(table).addClass('mw-sticky-header') );
}
} );
} );

Latest revision as of 18:40, 7 October 2022

/* Any JavaScript here will be loaded for all users on every page load. */

$(document).ready(function() {
	
	$('.hitbox-toggle-off').click(function() {
		$('.hitbox-toggle-off').hide();
		$('.move-image').hide();
		$('.caption').hide();
		$('.hitbox-toggle-on').show();
		$('.hitbox-image').show();
		$('.hitboxCaption').show();
	});

	$('.hitbox-toggle-on').click(function() {
		$('.hitbox-toggle-on').hide();
		$('.hitbox-image').hide();
		$('.hitboxCaption').hide();
		$('.hitbox-toggle-off').show();
		$('.move-image').show();
		$('.caption').show();
	});

        $('.movehitbox').prop('loading', 'lazy');
	
	// Add placeholder text to Upload Summary
	$('#wpUploadDescription').attr("placeholder",
		"Add a description here.\n" +
		"If you're uploading a new file, make sure to categorize!\n" +
		"Example:\n" +
		"[[Category:Skullgirls]]\n" +
		"[[Category:Filia]]");
	//==== Movelist Toggles ====
	if (document.getElementsByClassName("movelist-toggles").length > 0) {
		// Variable to track th current movelist
		var currentMovelist = -1;
		
		// Sets the current movelist based on the URL
		setMovelistByUrlSection();
		// Adds the movelist swap function to the movelist toggle buttons
		$('.movelist-toggle-button').each(addToggles);
		// Adds the "setMovelistByUrlSection" function to all "a" type elements
		// This is so that if a link is clicked, it will set the correct movelist
		//$('a').click(setMovelistByUrlSection);
		/*$('a').each(function() {
			var $t = $(this);
			var $tString = $t.attr("href");
			var url = window.location.href;
			if($tString.substring(0, $tString.indexOf("#")) == 
		});*/
		$(window).bind('hashchange', function() {
			console.log("hashchange");
			setMovelistByUrlSection();
		});
		
		/*$(window).bind('popstate', function() {
			console.log("popstate");
			setMovelistByUrlSection();
		});*/
		
		// Sets the movelist based on the section in the URL
		function setMovelistByUrlSection() {
			// Get the page URL
			var pageUrl = window.location.href;
			var nextMovelist = 1;
			
			// If page URL contains "#", proceed
			if (pageUrl.indexOf("#") > 0) {
				// Get section, which is the "#" and everything after it
				var targetSection = pageUrl.substring(pageUrl.indexOf("#"));
				
				// Check all class "movelist" elements
				// This is under the assumption that movelists are manually labeled correctly starting from 1 and incrementing.
				var maxIterations = $('.movelist').length;
				var i = 1;
				var sectionNotFound = true;
				/* This for-loop doesn't work for some reason (syntax error???), so I made a while-loop version below
				for (let i=1; i <= maxIterations; i++) {
					console.log("checking movelist-"+i);
					// If the movelist contains the target section
					if ($('#movelist-' + i).find(targetSection).length > 0) {
						// Set the nextMoveList to this movelist and break the for loop
						nextMovelist = i;
						console.log("found " + targetSection + "in movelist-"+i);
						break;
					}
				}*/
				while(i <= maxIterations && sectionNotFound) {
					console.log("checking movelist-"+i);
					// If the movelist contains the target section
					if ($('#movelist-' + i).find(targetSection).length > 0) {
						// Set the nextMoveList to this movelist and break the for loop
						nextMovelist = i;
						console.log("found " + targetSection + "in movelist-"+i);
						sectionNotFound = false;
					}
					i++;
				}
			}
			// Display the movelist
			if (currentMovelist != nextMovelist) {
				currentMovelist = nextMovelist;
				displayMovelist(currentMovelist);
			}
			if(sectionNotFound == false)
				$('html,body').animate({scrollTop: $(targetSection).offset().top},'slow');
		}
		
		// Swap the movelist
		function swapMovelistByButton(e) {
			// Variable for the element data "id" for movelist that was clicked
			var movelistToggleClicked = $(this).data("id");
			// A string just for counting it's length of the movelist-toggle ID
			var movelistIdString = "movelist-toggle-";
			
			// Variable snipping on the number value of the movelist
			// This assumes that it is a number appended to these movelists
			var nextMovelist = movelistToggleClicked.substring(movelistIdString.length);
			
			// Changse the movelist if it's not the currently selected one
			if (currentMovelist != nextMovelist) {
				currentMovelist = nextMovelist;
				displayMovelist(currentMovelist);
			}
		}
		
		// Display the target movelist
		function displayMovelist(target) {
			// Hides all movelists
			hideAllMovelists();
			// Displays the target movelist
			$("#movelist-" + target).css("display", "block");
			// Highlights the current movelist toggle button by changing its classes around
			$("#movelist-toggle-" + target).removeClass("movelist-toggle-off").addClass("movelist-toggle-on");
		}
		
		// Hides all movelists
		function hideAllMovelists() {
			// Sets all movelists "display" to "none"
			$(".movelist").css("display", "none");
			// Removes highlights from all movelist toggle buttons by changing its classes around
			$('.movelist-toggle-button').removeClass("movelist-toggle-on").addClass("movelist-toggle-off");
		}
		
		// Adds toggles to movelist toggle buttons
		function addToggles() {
			// Adds data "id" which is just equal to the buttons attribute id
			$(this).data("id", $(this).attr("id"));
			// Run "swapMovelistByButton" function when this is clicked
			$(this).click(swapMovelistByButton);
		}
	}

});