MediaWiki:Common.js: Difference between revisions
Jump to navigation
Jump to search
mNo edit summary |
m (Screw the for-loop, let me do the while-loop version) |
||
Line 246: | Line 246: | ||
// Get section, which is the "#" and everything after it | // Get section, which is the "#" and everything after it | ||
var targetSection = pageUrl.substring(pageUrl.indexOf("#")); | var targetSection = pageUrl.substring(pageUrl.indexOf("#")); | ||
console.log("movelist count: " + maxIterations); | |||
// Check all class "movelist" elements | // Check all class "movelist" elements | ||
// This is under the assumption that movelists are manually labeled correctly starting from 1 and incrementing. | // This is under the assumption that movelists are manually labeled correctly starting from 1 and incrementing. | ||
var maxIterations = $('.movelist').length; | var maxIterations = $('.movelist').length; | ||
var i = 1; | |||
for (let i = 1; i <= maxIterations; i++) { | var sectionNotFound = true; | ||
/*for (let i=1; i <= maxIterations; i++) { | |||
console.log("checking movelist-"+i); | console.log("checking movelist-"+i); | ||
// If the movelist contains the target section | // If the movelist contains the target section | ||
Line 260: | Line 262: | ||
break; | 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++; | |||
} | } | ||
} | } |
Revision as of 00:17, 5 October 2021
/* 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');
}
$('.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 hold the page URL which is set in "setMovelistByUrlSection" function
var pageUrl;
// 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);
// Sets the movelist based on the section in the URL
function setMovelistByUrlSection() {
// Get the page URL
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("#"));
console.log("movelist count: " + maxIterations);
// 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;
/*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);
}
}
// 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);
}
}
});