MediaWiki:Common.js

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

$(document).ready(function() {
	
	// Load ActionSlideshow.js
	if ($(".action-slideshow-container")) {
		//mw.loader.load('/index.php?title=MediaWiki:ActionSlideshow.js&action=raw&ctype=text/javascript');
	}
	
	$('.language-toggle-jp').click(function(){
	    $('.en-text').hide();
	    $('.language-toggle-jp').hide();
	    $('.jp-text').show();
	    $('.language-toggle-en').show();
	});
	
	$('.language-toggle-en').click(function(){
	    $('.jp-text').hide();
	    $('.language-toggle-en').hide();
	    $('.en-text').show();
	    $('.language-toggle-jp').show();
	});
	
	$('.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]]");
	
	var shown = 1;
	$(".EFZ-FF-Toggle").click(function() {
		if (shown == 1) {
			$(".EFZ-FF").css("display", "none");
			$(".EFZ-SF").css("display", "block");
			shown = 2;
		} else {
			$(".EFZ-SF").css("display", "none");
			$(".EFZ-FF").css("display", "block");
			shown = 1;
		}
	});
	
	$('.lazyimg').prop('loading', 'lazy');
	
	// ==================== Move Data Tooltips ====================
	// Orignally copied from https://valnirrok.gamepedia.com/MediaWiki:Common.js
	// SageVarq edited this code and added more comments trying to understand and make it work with Mizuumi Wiki
	// This specifically is made for move tooltips as a side effect of Cargo set up
	if (document.getElementsByClassName("tt-move").length > 0) {
		// The tooltip element
		// Initialized in "addTooltips" function
		// Using the various functions in this code, the tooltip will populate with target page snippets
		var $tooltipWindow;
		// A variable to track the active hover link
		// This is set everytime the "loadTip" function
		var activeHoverLink = null;
		// Array to store tooltip cache so that it doesn't need to reload them if they've been hovered over before
		var tipCache = [];
		
		// Hide the tooltip
		function hideTip() {
			// Clear html of "tooltipWindow"
			// Remove the class "tooltip-ready"
			// Add the class "tooltip-hidden"
			// Change css style "visibility" to "hidden"
			$tooltipWindow.html("").removeClass("tooltip-ready").addClass("tooltip-hidden").css("visibility", "hidden");
			
			// Set "activeHoverLink" to "null"
			activeHoverLink = null;
		}
		
		// Display the tooltip
		function displayTip(e) {
			// If tooltipWindow is not ":empty"
			// Remove the class "tooltip-hidden"
			// Add the class "tooltip-ready"
			// Change the css style "visibility" to "visible"
			$tooltipWindow.not(":empty").removeClass("tooltip-hidden").addClass("tooltip-ready");
			moveTip(e);
			$tooltipWindow.css("visibility", "visible");
			moveTip(e);
		}
		
		// Moves the tooltip
		function moveTip(e) {
			// Set a temporary variable to the not ":empty" tooltipWindow for ease of coding
			var $tt = $tooltipWindow.not(":empty");
			var $ttContent = $tt.find('.tooltip-content');
			
			// Set variables for the new position
			// Sets the position based on if the cursor is more or less than half of the window dimensions.
			var newTop = e.clientY + ((e.clientY > ($(window).height() / 2)) ? -($ttContent.innerHeight() + 20) : 20);
			var newLeft = e.clientX + ((e.clientX > ($(window).width() / 2)) ? -($ttContent.innerWidth() + 20) : 20);
			
			// Using "newTop" and "newLeft" to set the css style "top" and "left" of the tooltip
			// Also set css style "position" to "fixed"
			$tt.css({
				"position": "fixed",
				"top": newTop + "px",
				"left": newLeft + "px"
			});
		}
		
		// Load the tooltip
		function loadTip(e) {
			// Set a variable to the current event's element
			// This is passed in from the "bindTT" function
			// This will already have a "tt" data and "targetSection" data in it
			var $currentE = $(this);
			
			// Assign "activeHoverLink" to the the "currentE"
			activeHoverLink = $currentE;
			
			// Find the class "tt-move-link" in "currentE"
			// This must be the span element that contains the overview page link
			var $overviewLink = $currentE.find('.tt-move-link > a');
			
			// Find the class "tt-move-data" in "currentE"
			// This must be the span element that contains the data page link
			var $dataLink = $currentE.find('.tt-move-data > a');
			
			// If both "targetOverviewLink" and "targetDataLink" do not equal null, proceed
			if ($overviewLink.html() != null && $dataLink.html() != null) {
				// Remove the existing hover text
				$currentE.removeAttr("title");
				$overviewLink.removeAttr("title");
				$dataLink.removeAttr("title");
				
				// Set "dataUrl" to the end portion of a MediaWiki URL using the 'datapage' data assigned in 'bindTT' function
				// Also select only the elements with 'targetSection' id
				// Replaces the following in 'datapage' data with HTML compatibale versions:
				//// ' ' with '_'
				//// '?' with '%3F'
				// Replaces the '.' with '\.' in 'targetSection'
				/// ==EXPLANATION BELOW SINCE IT WAS FRUSTRATING FOR ME TO FIGURE OUT==
				/// The reason is when you input special characters in id attributes in wikitext
				/// You get the HTML code version but using a '.' instead of an '%'
				/// And CSS selectors don't like '.' in names, so you have to escape the '.'
				/// For example: the id attribute 'X~66' turns into 'X.7E66'
				/// So the below code changes it to 'X\.7E66', which can be properly selected with the CSS selector '#X\.7E66'
				/// Long story, short: You have to replace the special character within the special character so CSS selectors can work on it.
				var dataUrl = "/index.php?title=" + $currentE.data("dataPage").replace(/ /g, "_").replace(/\?/g, "%3F").replace(/\&/g, "%26") + "&action=render " + $currentE.data("targetSection").replace(/\./g, "\\.");
				console.log(dataUrl);
				
				// If this tipCache of this url already exists
				if (tipCache[dataUrl] != null) {
					// Then set 'tooltipWindow' to that previously stored tooltip
					$tooltipWindow.html(tipCache[dataUrl]);
					// And display it
					displayTip(e);
					// And leave this function
					return;
				}
				
				// When "tooltipWindow" is loaded, load the data from "dataUrl"
				$tooltipWindow.load(dataUrl, function() {
					// If "currentE" is no longer the same as "activeHoverLink", leave this function
					if ($currentE != activeHoverLink)
						return;
					
					// If the HTML loaded from "dataUrl" is empty, then display an error message
					if ($tooltipWindow.html() == "")
						$tooltipWindow.html('<div class="tooltip-content"><b>Error</b><br />This target either has no tooltip<br />or was not intended to have one.</div>');
					
					// Take the loaded content and find the elements with 'tooltip-content' class and remove their 'display' css
					$tooltipWindow.find(".tooltip-content").css("display", "");
					
					// Store the current "tooltipWindow" contents in "tipCache" array for the current "dataUrl"
					// This allows it to be recalled later by the user instead of having to load it again
					tipCache[dataUrl] = $tooltipWindow.html();
					
					// Display this tooltip
					displayTip(e);
				});
			}
		}
		
		// Adds the tooltips functions to an element
		function bindTT() {
			// The current element which has class "tt-move"
			// Passed from the "ttMouseOver" function
			var $currentElement = $(this);
			
			// The data element with class "tt-move-data" in "currentElement"
			var $dataElement = $currentElement.find('.tt-move-data > a');
			
			// If data element contains the "#" character, proceed
			// The "#" character means that the URL is pointing to a section on the data page
			if ($dataElement.attr("href").indexOf('#') >= 0) {
				// Add data "datapage" to "currentElement" containing the title of "dataElement"
				// Replace "?" with HTML friendly "%3F"
				// Add "loadTip" function on hover in and "hideTip" functions on hover out
				// Add "moveTip" function on mouse move on
				$currentElement.data("dataPage", $dataElement.attr("title").replace(" page does not exist)", "").replace("?", "%3F")).hover(loadTip, hideTip).mousemove(moveTip);
				
				// Add "targetSection" data to "currentElement" containing the link of "dataElement" from the "#" to the end
				$currentElement.data("targetSection", $dataElement.attr("href").substring($dataElement.attr("href").indexOf("#")));
			}
		}
		
		// Main function that adds tooltips to the page
		function addTooltips() {
			// Add an empty div to be used as the tooltip window
			$('body').append('<div id="tt-window" class="htt"></div>');
			
			// Assign "tooltipWindow" to the above created div since it is id "tt-window"
			$tooltipWindow = $("#tt-window");
			
			// Run function "bindTT" on each element with class "tt-move"
			$('.tt-move').each(bindTT);
		}
		
		// Run the above main function
		$(addTooltips);
	}
	
	//==== 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);
		}
	}
});