Difference between revisions of "MediaWiki:Common.js"
From Game Detectives Wiki
| Line 20: | Line 20: | ||
// Investigation List page popup in bottom right to notify of popup on-click functionality | // 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) | // Detection of weird characters in titles to form them correctly for links and content (ie + -> %2B) | ||
| Line 33: | Line 37: | ||
// Responsive popup behavior - resize if viewport isn't large enough for 900px version | // Responsive popup behavior - resize if viewport isn't large enough for 900px version | ||
| + | |||
| + | // Position TOC float as absolute sticky for mobile (below 512px). This is better than fixed as fixed causes the TOC to | ||
| + | // remain permanently in view as the user zooms and pans the page. Absolute sticky would allow TOC to fix to sidebar | ||
| + | // but travel down the browser window as the user pans down the page, without floating the TOC over page content. | ||
// Programmatic back to top button | // Programmatic back to top button | ||
| Line 41: | Line 49: | ||
// Programmatic argHeader | // Programmatic argHeader | ||
// - implement without affecting page draw in a significant way | // - implement without affecting page draw in a significant way | ||
| + | |||
| + | // bottom calculation for isElementVisible is incorrect. Value is too low. Check math | ||
// Investigate MW actions/hooks | // Investigate MW actions/hooks | ||
// - any useful for current implementations? | // - any useful for current implementations? | ||
| − | |||
| − | |||
| − | |||
END IDEAS */ | END IDEAS */ | ||
| Line 641: | Line 648: | ||
}); | }); | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
// END CODE SPACE | // END CODE SPACE | ||
Revision as of 17:31, 15 September 2018
/* 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)
// Responsive popup behavior - resize if viewport isn't large enough for 900px version
// Position TOC float as absolute sticky for mobile (below 512px). This is better than fixed as fixed causes the TOC to
// remain permanently in view as the user zooms and pans the page. Absolute sticky would allow TOC to fix to sidebar
// but travel down the browser window as the user pans down the page, without floating the TOC over page content.
// Programmatic back to top button
// - appears on page scroll after main image is not in view
// - better, more consistent styling
// - break support for template button after implement
// Programmatic argHeader
// - implement without affecting page draw in a significant way
// bottom calculation for isElementVisible is incorrect. Value is too low. Check math
// Investigate MW actions/hooks
// - any useful for current implementations?
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 which returns true if an element is in view partially or fully and false if it is not */
function elementInView(elem, fullyInView, below, farLeft) {
function Utils() {
}
Utils.prototype = {
constructor: Utils,
isElementInView: function getCurrentView(element, fullyInView, below, farLeft) {
var pageTop = $(window).scrollTop();
var pageBottom = pageTop + $(window).height();
var elementTop = $(element).offset().top;
var elementBottom = elementTop + $(element).height();
var isFullyInView = ((pageTop < elementTop) && (pageBottom > elementBottom));
var isBelow = (window.scrollY > elementTop + elementBottom);
var isFarLeft = (window.scrollX === 0);
if (fullyInView === true && below === true && farLeft === true) {
return (isFullyInView && isBelow && isFarLeft);
}
else if (fullyInView === true && below === true) {
return (isFullyInView && isBelow);
}
else if (below === true && farLeft === true) {
return (isBelow && isFarLeft);
}
else if (fullyInView === true && farLeft === true) {
return (isFullyInView && isFarLeft);
}
else if (below === true) {
return (isBelow);
}
else if (fullyInView === true) {
return (isFullyInView);
}
else if (farLeft === true) {
return (isFarLeft);
}
else {
return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
}
}
};
var Utils = new Utils();
var isElementInView = Utils.isElementInView(elem, fullyInView, below, farLeft);
var isVisible = false;
function checkElement() {
if (!isElementInView) {
isVisible = false;
}
else {
isVisible = true;
}
}
checkElement();
return isVisible;
}
/* 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 '';
})();
var uiID = 1;
// END FUNCTION AND VARIABLE DEFINITION SPACE
// BEGIN CODE SPACE
/* User Verification */
// Check who it is
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
(function () {
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;
// 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 {
// Prepare to lazy-load an image if required
var title = clicked.target.parentElement.children[0].innerText;
var arg = title.replace(/ /g, '_');
var thisPlaceholderId = arg + 'defaultImagePlaceholder';
if (!document.getElementById(thisPlaceholderId)) {
thisPlaceholderId = arg + 'imagePlaceholder';
}
// Lazy-load the image if it's row is clicked on and it hasn't already been loaded
if(!document.getElementById(arg + 'dialogImage') && document.getElementById('dialog' + clicked.target.id.replace('tableRow', '').replace('tableCol1-', '').replace('tableCol2-', '').replace('tableCol3-', '').replace('tableCol4-', '').replace('tableCol5-', '')).innerText !== 'Popup content for ' + title + ' coming soon!') {
var thisImage = document.getElementById(thisPlaceholderId).innerText.replace('File:', 'Special:Filepath/').replace('Image:', 'Special:Filepath/');
var getThisPlaceholder = document.getElementById(thisPlaceholderId);
var thisPlaceholderReplacement = document.createElement('span');
thisPlaceholderReplacement.innerHTML = '<a href="https://wiki.gamedetectives.net/index.php?title=' + arg + '"><img id="' + arg + 'dialogImage" class="dialogImage" src="https://wiki.gamedetectives.net/index.php?title=' + thisImage + '" alt="' + title + '"></a>';
getThisPlaceholder.parentNode.replaceChild(thisPlaceholderReplacement, getThisPlaceholder);
}
// Create the popup & define settings
$(dialogID).dialog({
modal: true,
minHeight: 'auto',
minWidth: 400,
width: 701,
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 title = document.getElementById('ui-id-' + uiID).innerText;
document.getElementById('ui-id-' + uiID).innerHTML = '<span style="color: #b02e2e !important; padding-left:74px !important;"><a href="https://wiki.gamedetectives.net/index.php?title=' + title.replace(/ /g, '_') + '">' + title + '</a></span>';
uiID++;
},
open: function () {
setTimeout(function () {
animationReady = true;
}, 500);
},
show: {effect: 'clip', direction: 'vertical', duration: 500, easing: 'swing'},
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: 'Read More',
icon: 'ui-icon-document',
click: function () {
// Redirect to the given ARG's page if the button is clicked
window.location.href = 'https://wiki.gamedetectives.net/index.php?title=' + title.replace(/ /g, '_');
}
},
{
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 = document.getElementById('tableCol1-' + n).innerText.replace(/ /g, '_');
// Define variables for populating popup content from code and from user
var dialogContent = '';
// 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
dialogContent = 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 it belongs to and add content
row.innerHTML += ('<div style="display:none" id="dialog' + n + '"' + ' title="' + nameCol + '"' + n + '"></a><div>' + dialogContent + '</div></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;)' },
success: function(data) {
// do something with data
}
} );
} );
}*/
});
/* Function to create floating TOC */
// Check if a TOC element is found
if ($('#toc')[0]) {
var tocFloatContainer = document.createElement('div');
tocFloatContainer.setAttribute('class', 'tocFloatContainer');
tocFloatContainer.setAttribute('id', 'tocFloatContainer');
tocFloatContainer.setAttribute('style', 'display:none;');
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);
if (elementInView('#toc', false, true, true)) {
$('#tocFloat').fadeIn(500, 0);
$('#tocFloatContainer').fadeIn(500, 0);
}
else {
$('#tocFloat').fadeOut(500, 0);
$('#tocFloatContainer').fadeOut(500, 0);
}
}
/* Function to create floating Navigation menu */
// Check if a menu panel element is found
if ($('#mw-panel')[0]) {
var nav1 = $('#p-navigation');
var nav2 = $('#p-tb');
if (elementInView('#p-logo', false, true, true)) {
if(nav1.css('visibility') !== 'hidden') {
nav1.fadeIn(500, 0);
}
if(nav2.css('visibility') !== 'hidden') {
nav2.fadeIn(500, 0);
}
nav1.css({'position': 'fixed', 'top': '0', 'left': '0.5%'});
nav1.addClass('navFloat');
nav2.css({'position': 'fixed', 'top': '120px', 'left': '0.5%'});
nav2.addClass('navFloat');
} else {
nav1.css('position', 'relative');
nav1.removeClass('navFloat');
nav2.css('position', 'relative');
nav2.removeClass('navFloat');
}
}
// All code to be run when the document is scrolled should go in this function or use an event listener
document.onscroll = function () {
if ($('#toc')[0]) {
if (elementInView('#toc', false, true, true)) {
$('#tocFloat').fadeIn(500, 0);
$('#tocFloatContainer').fadeIn(500, 0);
}
else {
$('#tocFloat').fadeOut(250, 0);
$('#tocFloatContainer').fadeOut(250, 0);
}
}
if ($('#mw-panel')[0]) {
var nav1 = $('#p-navigation');
var nav2 = $('#p-tb');
if (elementInView('#p-logo', false, true, true)) {
if(nav1.css('visibility') !== 'hidden') {
nav1.fadeIn(500, 0);
}
if(nav2.css('visibility') !== 'hidden') {
nav2.fadeIn(500, 0);
}
if(nav1.css('position') !== 'fixed') {
nav1.css({'position': 'fixed', 'top': '0', 'left': '0.5%'});
nav1.addClass('navFloat');
nav2.css({'position': 'fixed', 'top': '120px', 'left': '0.5%'});
nav2.addClass('navFloat');
}
}
else if (elementInView('#p-logo', false, false, true)) {
if(nav1.css('visibility') !== 'hidden') {
nav1.fadeIn(500, 0);
}
if(nav2.css('visibility') !== 'hidden') {
nav2.fadeIn(500, 0);
}
if(nav1.css('position') !== 'relative') {
nav1.css({'position': 'relative', 'top': '0'});
nav1.removeClass('navFloat');
nav2.css({'position': 'relative', 'top': '0'});
nav2.removeClass('navFloat');
}
}
else if(elementInView('#p-logo', false, false, false)) {
nav1.fadeIn(500, 0);
nav2.fadeIn(500, 0);
if(nav1.css('position') !== 'relative') {
nav1.css({'position': 'relative', 'top': '0'});
nav1.removeClass('navFloat');
nav2.css({'position': 'relative', 'top': '0'});
nav2.removeClass('navFloat');
}
}
else {
nav1.fadeOut(250, 0);
nav2.fadeOut(250, 0);
}
}
};
});
// END CODE SPACE
})(); // END MAIN FUNCTION
