MediaWiki:Common.js
From Game Detectives Wiki
/* Scripts within main function will load on all pages for all users */
// BEGIN MAIN FUNCTION
(function main() {
/* BEGIN COWBOY CHANGES
// Propegation Test
// jQuery on every page
END COWBOY CHANGES */
/* BEGIN IDEAS
// Investigation List page popup in bottom right to notify of popup on-click functionality
// Load images when popup is opened instead of loading image into every row to optimize load performance
// Alternately explore using {{tableDraw}} to put static hidden images on page when the row's query is made
// taking load off JS since elements do not need to be created on each page load.
// Detection of weird characters in titles to form them correctly for links and content (ie + -> %2B)
// Subtle info popup to inform about row click popup on investigation list page
// EditorTools functionality
// Much sweeter main page
// When you get a page that doesn't exist, use smw to query about it. If a page is found that way, redirect to it
// In this way, case-misspellings like Inside arg will correct if a page exists with that name, ie Inside ARG (the actual page)
// Scrollbar for when content overflows floating TOC or create float as a jQuery UI popup instead of element
// Responsive popup behavior - resize if viewport isn't large enough for 900px version
// Responsive tocFloat behavior - scrollbar when y overflows
END IDEAS */
// BEGIN FUNCTION AND VARIABLE DEFINITION SPACE
/* Function to load jQuery into a page */
function jQueryLoad(code) {
var jQuery = document.createElement('script');
jQuery.setAttribute('src', '//code.jquery.com/jquery-3.3.1.min.js');
jQuery.setAttribute('async', 'true');
jQuery.setAttribute('integrity', 'sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=');
jQuery.setAttribute('crossorigin', 'anonymous');
jQueryLoad.onload = (function () {
console.log('jQuery version ' + jQuery.src + ' is loaded.');
jQuery.onload = code;
})();
document.getElementsByTagName('head')[0].appendChild(jQuery);
}
/* Function to load jQuery (prerequisite) and jQueryUI into a page */
function jQueryUILoad(code) {
var jQueryUI = document.createElement('script');
jQueryUI.setAttribute('src', '//code.jquery.com/ui/1.12.1/jquery-ui.min.js');
jQueryUI.setAttribute('integrity', 'sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=');
jQueryUI.setAttribute('crossorigin', 'anonymous');
var jQueryCSS = document.createElement('link');
jQueryCSS.setAttribute('rel', 'stylesheet');
jQueryCSS.setAttribute('href', '//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css');
document.getElementsByTagName('head')[0].appendChild(jQueryUI);
document.getElementsByTagName('head')[0].appendChild(jQueryCSS);
jQueryUILoad.onload = (function () {
console.log('jQueryUI version ' + jQueryUI.src + ' is loaded.');
jQueryUI.onload = code;
})();
}
/* Function to capture page's URL from meta properties */
var checkURL = (function checkURL() {
var metas = document.getElementsByTagName('meta');
for (var i = 0; i < metas.length; i++) {
if (metas[i].getAttribute('property') === 'og:url') {
return metas[i].getAttribute('content');
}
}
return '';
})();
// END FUNCTION AND VARIABLE DEFINITION SPACE
// BEGIN CODE SPACE
/* User Verification */
setTimeout(function() {
var whoAmI = (function () {
var claim = '';
if(document.getElementById('pt-userpage')) {
claim = document.getElementById('pt-userpage').innerText;
}
if (claim.match('Mattyb') || claim.match('Lucario') || claim.match('Crash') || claim.match('Picapi')) {
return true;
}
else {
return false;
}
})();
// Obstruct prying eyes
// Bail out if it isn't a common code page
if (checkURL.match('Common.')) {
(function hideCode() {
if (whoAmI === false) {
document.getElementById('content').innerHTML = '<span>[REDACTED]</span><!--nothingtoseehere ?-->';
//document.getElementsByClassName('mw-code')[0].innerText = '[REDACTED]';
//document.getElementById('ca-viewsource').style = 'display:none';
//document.getElementById('ca-history').style = 'display:none';
}
})();
}
}, 50);
/* Say Hello */
// Console art ad
if (checkURL.match('Main_Page')) {
console.log('\n' +
' ........ \n' +
' hs+:.````` ` ` ````.:+sh \n' +
' _ on+so/:.` ` ` ` ` ` ` ` ` ` ` ` .:\\os+no _ \n' +
' /e ` ` ` ` ` ` W E L C O M E `T`O` ` ` ` ` ` e\\ \n' +
' c` ` ` ` ` G A M E `D`E`T`E`C`T`I`V`E`S` ` ` ` ` r \n' +
' H ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` `t \n' +
' e.` ` ` ` ` ` ` ` ` -:. ` ` `.:-` ` ` ` ` ` ` ` ` .a \n' +
' c-` ` ` ` ` ` ` ` `/dNNNh/--/hNNNd/ ` ` ` ` ` ` ` ` `p \n' +
' K+.` ` ` ` ` ` ` ` `+NNNNNNNNNNNNNNNN+ ` ` ` ` ` ` ` ` `+N \n' +
'+ ` ` ` ` ` ` ` ` ` sNNNNNNNNNNNNNNNNNNs ` ` ` ` ` ` ` ` ` o\n' +
'O` ` ` ` ` ` ` ` ` sNNNNNNNNNNNNNNNNNNNNs ` ` ` ` ` ` ` ` `+\n' +
'U ` ` ` ` ` ` ` ` oNNNNNNNNNNNNNNNNNNNNNNo ` ` ` ` ` ` ` ` s\n' +
'T` ` ` ` ` ` ` ` /mmmmmmmmmmmmmmmmmmmmmmmm/ ` ` ` ` ` ` ` `u\n' +
'+ ` ` ` ` ` .:+oymNNNNNNNNNNNNNNNNNNNNNNNNmyo+:. ` ` ` ` ` +\n' +
'O` ` ` -:+shhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhbb+:- ` ` `D Like what you see? Get Involved!\n' +
'U ` ` ` ` ` ` ` ` ` ./oosso/-``./+ooo+:. ` ` ` ` ` ` ` ` ` N\n' +
'R` ` ` ` ` ` ` ` ` -mNNNNNNNm::mNNNNNNNd- ` ` ` ` ` ` ` ` `I https://discord.gamedetectives.net\n' +
'+ ` ` ` ` ` ` ` ` `-mNNNNNNNh..hNNNNNNNm.` ` ` ` ` ` ` ` ``F https://twitter.com/G_detectives\n' +
'A` ` ` ` ` ` ` ` ` `:dNNNNh/```./hNNNNd-` ` ` ` ` ` ` ` ` `+ https://gamedetectives.net\n' +
'R ` ` ` ` ` ` ` ` ` `.:+/-````````-/+: ` ` ` ` ` ` ` ` ` ` D\n' +
'G` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` E\n' +
'+/` ` ` ` .os+:.` ` ` ` ` ` ` ` ` ` ` ` ` ` .:+so.` ` ` ` `O Want cooler stuff? Support GD on Patreon!\n' +
' A ` ` ` ` .racecar/.` ` ` ` ` ` ` ` ` ./racecar.` ` ` ` `c \n' +
' `c ` ` ` ` `sNNNNNNs ` ` ` ` ` ` ` ` `sNNNNNNs ` ` ` ` `s` https://www.patreon.com/gamedetectives/\n' +
' a` `/oxbyttamNNNNNmy+. ` ` ` ` ` `.+ymNNNNNmattybxo/ ` i \n' +
' D/` .diNNNNNNNNNNER+:os/. ` ` `./so:+NNNNNNNNNNNNOd.` /d \n' +
' `e-` :mNNNNNNNNNNNNm-``-++:` :++-``-mNNNNNNNNNNNNm:` -+` \n' +
' `M.` /mNNNNNNNNNNNNd.```-shhs-```.dNNNNNNNNNNNNm/` .N` \n' +
' `Y.` :mNNNNNNNNNNNNs`.yummmmuy.`sNNNNNNNNNNNNm:` .i` \n' +
' `+.` -hNNNNNNNNNNNN/smmmmmmmms/NNNNNNNNNNNNh-` .+` \n' +
' V:` .omNNNNNNNNNNmmmmmmmmmmmmNNNNNNNNNNom.` :s \n' +
' I+. `-omNNNNNNNNNNmmmmmmmmNNNNNNNNNNom-` .u \n' +
' `S: ` :hNNNNNNNNNNmmmmmmNNNNNNNNNNh: ` :+` \n' +
' `i:` `:ymNNNNNNNmmmmmmNNNNNNNmy:` `:N` \n' +
' `t/.` .+hNNNNNNmmmmNNNNNNh+. `./I` \n' +
' `+u: ` -ohmNNHmmENNmho- ` :jO` \n' +
' `s+: ` ./shmmhs/. ` :t+` \n' +
' `on/.` `..` `./dI` \n' +
' ``+R/--/eD`` '
);
}
else {
console.log('\n' +
' ........ \n' +
' hs+:.````` ` ` ````.:+sh \n' +
' _ on+so/:.` ` ` ` ` ` ` ` ` ` ` ` .:\\os+no _ \n' +
' /e ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` e\\ \n' +
' c` ` ` ` ` G A M E `D`E`T`E`C`T`I`V`E`S` ` ` ` ` r \n' +
' H ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` `t \n' +
' e.` ` ` ` ` ` ` ` ` -:. ` ` `.:-` ` ` ` ` ` ` ` ` .a \n' +
' c-` ` ` ` ` ` ` ` `/dNNNh/--/hNNNd/ ` ` ` ` ` ` ` ` `p \n' +
' K+.` ` ` ` ` ` ` ` `+NNNNNNNNNNNNNNNN+ ` ` ` ` ` ` ` ` `+N \n' +
'+ ` ` ` ` ` ` ` ` ` sNNNNNNNNNNNNNNNNNNs ` ` ` ` ` ` ` ` ` o\n' +
'O` ` ` ` ` ` ` ` ` sNNNNNNNNNNNNNNNNNNNNs ` ` ` ` ` ` ` ` `+\n' +
'U ` ` ` ` ` ` ` ` oNNNNNNNNNNNNNNNNNNNNNNo ` ` ` ` ` ` ` ` s\n' +
'T` ` ` ` ` ` ` ` /mmmmmmmmmmmmmmmmmmmmmmmm/ ` ` ` ` ` ` ` `u\n' +
'+ ` ` ` ` ` .:+oymNNNNNNNNNNNNNNNNNNNNNNNNmyo+:. ` ` ` ` ` +\n' +
'O` ` ` -:+shhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhbb+:- ` ` `D Like what you see? Get Involved!\n' +
'U ` ` ` ` ` ` ` ` ` ./oosso/-``./+ooo+:. ` ` ` ` ` ` ` ` ` N\n' +
'R` ` ` ` ` ` ` ` ` -mNNNNNNNm::mNNNNNNNd- ` ` ` ` ` ` ` ` `I https://discord.gamedetectives.net\n' +
'+ ` ` ` ` ` ` ` ` `-mNNNNNNNh..hNNNNNNNm.` ` ` ` ` ` ` ` ``F https://twitter.com/G_detectives\n' +
'A` ` ` ` ` ` ` ` ` `:dNNNNh/```./hNNNNd-` ` ` ` ` ` ` ` ` `+ https://gamedetectives.net\n' +
'R ` ` ` ` ` ` ` ` ` `.:+/-````````-/+: ` ` ` ` ` ` ` ` ` ` D\n' +
'G` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` E\n' +
'+/` ` ` ` .os+:.` ` ` ` ` ` ` ` ` ` ` ` ` ` .:+so.` ` ` ` `O Want cooler stuff? Support GD on Patreon!\n' +
' A ` ` ` ` .racecar/.` ` ` ` ` ` ` ` ` ./racecar.` ` ` ` `c \n' +
' `c ` ` ` ` `sNNNNNNs ` ` ` ` ` ` ` ` `sNNNNNNs ` ` ` ` `s` https://www.patreon.com/gamedetectives/\n' +
' a` `/oxbyttamNNNNNmy+. ` ` ` ` ` `.+ymNNNNNmattybxo/ ` i \n' +
' D/` .diNNNNNNNNNNER+:os/. ` ` `./so:+NNNNNNNNNNNNOd.` /d \n' +
' `e-` :mNNNNNNNNNNNNm-``-++:` :++-``-mNNNNNNNNNNNNm:` -+` \n' +
' `M.` /mNNNNNNNNNNNNd.```-shhs-```.dNNNNNNNNNNNNm/` .N` \n' +
' `Y.` :mNNNNNNNNNNNNs`.yummmmuy.`sNNNNNNNNNNNNm:` .i` \n' +
' `+.` -hNNNNNNNNNNNN/smmmmmmmms/NNNNNNNNNNNNh-` .+` \n' +
' V:` .omNNNNNNNNNNmmmmmmmmmmmmNNNNNNNNNNom.` :s \n' +
' I+. `-omNNNNNNNNNNmmmmmmmmNNNNNNNNNNom-` .u \n' +
' `S: ` :hNNNNNNNNNNmmmmmmNNNNNNNNNNh: ` :+` \n' +
' `i:` `:ymNNNNNNNmmmmmmNNNNNNNmy:` `:N` \n' +
' `t/.` .+hNNNNNNmmmmNNNNNNh+. `./I` \n' +
' `+u: ` -ohmNNHmmENNmho- ` :jO` \n' +
' `s+: ` ./shmmhs/. ` :t+` \n' +
' `on/.` `..` `./dI` \n' +
' ``+R/--/eD`` '
);
}
/* Load jQuery on every page */
// All code requiring use of jQuery must be placed in this function
jQueryLoad(function() {
// Code using jQueryUI must be placed in this function
jQueryUILoad(function () {
/* Popup onclick for SMW matty tables */
// Bail out if it isn't the Investigation List page
if (checkURL.match('List_of_Investigations')) {
(function tablePopup() {
// Get rid of category links (they ugly)
if (document.getElementById('catlinks') != null) {
document.getElementById('catlinks').style = 'display:none';
}
// Define vars
var animationReady = false;
var clicked;
var cnt = 0;
// Create variable clicked to capture clicked elements
this.addEventListener('click', clicked = function (event) {
return $(event.target);
});
// Iterate n to loop through each table row
for (var n = 1; cnt === 0; n++) {
var tableRow = 'tableRow' + n;
// Check that the table row exists
if ($(tableRow) != null) {
// Select the table row and set it's ID selector
var row = document.getElementById(tableRow);
// Break the loop if the row is null
if (row === null) {
break;
}
// Set the id for the dialog elements that are hidden on the page and a identifier for the dialog on screen
var dialogID = '#dialog' + n;
var uiID = 1;
// Add the click event listener and popup function to the given row
row.addEventListener('click', function (dialogID, clicked) {
// Check if what has been clicked is a table element of some kind
if (!clicked.target.parentElement.id.toString().match('tableRow')) ;
//Only proceed if not a link
else {
// Create the popup & define settings
$(dialogID).dialog({
modal: true,
minHeight: 300,
minWidth: 600,
width: 900,
dialogClass: dialogID,
position: {my: 'center', at: 'center', of: '#' + clicked.target.parentElement.id},
create: function () {
// When creating a given dialog, grab the title and form it into a link
var thisDialog = document.getElementById('ui-id-' + uiID);
var title = thisDialog.innerHTML;
thisDialog.innerHTML = '<span style="color: #b02e2e !important; padding-left:74px !important;"><a href="https://wiki.gamedetectives.net/index.php?title=' + title + '">' + title + '</a></span>';
uiID++;
},
open: function () {
setTimeout(function () {
animationReady = true;
}, 500);
},
show: {effect: 'clip', direction: 'vertical', duration: 500, easing: 'swing', delay: 100},
hide: 'fade',
beforeClose: function () {
// Before a dialog closes, animate the border using transfer
$(dialogID).transfer({
to: '#' + clicked.target.parentElement.id,
});
},
close: function (row) {
// Once the dialog closes, figure out which row it came from by capturing the current value of row
return function () {
var thisRowID = row.target.getAttribute('id').replace('dialog', '#tableRow');
// Add animation classes to the given row
$(thisRowID).addClass('tableAnimation');
// Remove the animation classes as soon as the animation is finished
setTimeout(function () {
$(thisRowID).removeClass('tableAnimation');
}, 500);
}(row);
},
buttons: [
{
text: 'Close',
icon: 'ui-icon-closethick',
click: function () {
// Close the dialog when the close button is clicked
$(this).dialog('close');
}
}
]
});
}
// Bind dialogID to function
}.bind(null, dialogID));
// Force animations and css styles on grumpy rows
if (document.getElementById('tableCol1-' + n).innerText.match('2077')) {
$(row).addClass('tableRowCP');
}
else if (document.getElementById('tableCol1-' + n).innerText.match('2015')) {
$(row).addClass('tableRow');
}
// Define variables to be used for the title of the popup by grabbing the title from the name col of the row the popup came from
var nameCol = document.getElementById('tableCol1-' + n).innerText;
var nameColID = nameCol.replace(/ /g, '_');
// Define variables for populating popup content from code and from user
var dialogContent = '';
var userDialogContent = '';
// Check if there is user-defined popup content for a given ARG
if (document.getElementById(nameColID + '-popup') != null) {
// If there is, set a var to it
userDialogContent = document.getElementById(nameColID + '-popup').innerHTML;
}
// If there isn't, set a var to a premade string
else {
dialogContent = 'Popup content for ' + nameCol + ' coming soon!';
}
// Insert the popup's HTML into the row is belongs to and add content
row.innerHTML += ('<div style="display:none" id="dialog' + n + '"' + ' title="' + nameCol + '"' + n + '"></a>' + '\n' +
'<div>' + dialogContent + '\n' +
userDialogContent + '</div>\n' +
'</div>');
}
}
// Listen for document clicks on the modal overlay to enable closing of dialog when clicking outside popup
$(document).click(function (clicked) {
if (clicked.target.classList[0] === 'ui-widget-overlay' && animationReady === true) {
$('.ui-dialog-titlebar-close').trigger('click');
animationReady = false;
}
});
})();
}
/* Script for building EditorTools page */
// Bail out if it isn't the Editor Tools page
/*if (checkURL.match('EditorTools')) {
jQueryUILoad(function() {
// Using jQuery
$.ajax( {
url: remoteUrlWithOrigin,
data: queryData,
dataType: 'json',
type: 'POST',
headers: { 'Api-User-Agent': 'GameDetectives EditorTools (https://wiki.gamedetectives.net/index.php?title=EditorTools; [email protected])' },
success: function(data) {
// do something with data
}
} );
} );
}*/
});
/* Function to create floating TOC */
// Check if a TOC element is found
if ($('#toc')[0]) {
(function tocMagic() {
function Utils() {
}
Utils.prototype = {
constructor: Utils,
isElementInView: function getCurrentView(element, fullyInView) {
var pageTop = $(window).scrollTop();
var pageBottom = pageTop + $(window).height();
var elementTop = $(element).offset().top;
var elementBottom = elementTop + $(element).height();
if (fullyInView === true) {
return ((pageTop < elementTop) && (pageBottom > elementBottom));
} else {
return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
}
}
};
var Utils = new Utils();
var isElementInView = Utils.isElementInView($('#toc'), false);
var elementViewCount = 0;
var tocFloatContainer = document.createElement('div');
tocFloatContainer.setAttribute('class', 'tocFloatContainer');
tocFloatContainer.setAttribute('id', 'tocFloatContainer');
var tocFloat = document.createElement('div');
tocFloat.setAttribute('id', 'tocFloat');
tocFloat.setAttribute('class', 'toc tocFloat');
tocFloat.setAttribute('style', 'display:none;');
tocFloat.innerHTML += document.getElementById('toc').innerHTML;
document.getElementById('mw-content-text').appendChild(tocFloatContainer);
document.getElementById('tocFloatContainer').appendChild(tocFloat);
function floatTOC() {
if (!isElementInView && document.documentElement.scrollTop >= $('#toc').offset().top + $('#toc').height()) {
if (elementViewCount === 0) {
$('#tocFloat').fadeIn(500, 0);
}
elementViewCount++;
}
else {
elementViewCount = 0;
$('#tocFloat').fadeOut(500, 0);
}
}
floatTOC();
document.onscroll = function () {
isElementInView = Utils.isElementInView($('#toc'), false);
floatTOC();
};
})();
}
});
// END CODE SPACE
})(); // END MAIN FUNCTION
