MediaWiki:Common.js: Difference between revisions

Latest revision as of 20:48, 19 October 2023

/* 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();
		$('.hitbox-caption').show();
	});

	$('.hitbox-toggle-on').click(function() {
		$('.hitbox-toggle-on').hide();
		$('.hitbox-image').hide();
		$('.hitbox-caption').hide();
		$('.hitbox-toggle-off').show();
		$('.move-image').show();
		$('.caption').show();
	});
	
	// 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);
	}
};