MediaWiki:Common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

/* 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);
		}
	}

});