Difference between revisions of "MediaWiki:Common.js"
From Game Detectives Wiki
(disabled on-click popup) |
|||
(219 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
− | + | /* 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 | ||
+ | |||
+ | // 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 | ||
+ | |||
+ | // 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 | ||
+ | |||
+ | // Investigate MW actions/hooks | ||
+ | // - any useful for current implementations? | ||
+ | |||
+ | // Listen for clicks on the hide link when the TOC is floating. If clicked, replace with an element | ||
+ | // that has a show link. animate the change. | ||
+ | |||
+ | 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 elementNotInView(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 >= 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; | ||
+ | |||
+ | var tocIndex = 0; | ||
+ | var lastTocIndex; | ||
+ | |||
+ | // END FUNCTION AND VARIABLE DEFINITION SPACE | ||
+ | |||
+ | |||
+ | |||
+ | // BEGIN CODE SPACE | ||
+ | |||
+ | /* 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 ` ` ` ` ` ` ` ` ` ./oNNNo\\- -/oNNNo\\. ` ` ` ` ` ` ` ` ` 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` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` R\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 { | else { | ||
− | cnt++; | + | 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 ` ` ` ` ` ` ` ` ` ./oNNNo\\- -/oNNNo\\. ` ` ` ` ` ` ` ` ` 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` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` R\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 | ||
+ | // Disabled as of 2/5/2022 | ||
+ | /* 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 + '"></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]) { | ||
+ | |||
+ | setTimeout(function() { | ||
+ | |||
+ | var tocFloatContainer = document.createElement('div'); | ||
+ | tocFloatContainer.setAttribute('class', 'tocFloatContainer'); | ||
+ | tocFloatContainer.setAttribute('id', 'tocFloatContainer'); | ||
+ | tocFloatContainer.setAttribute('style', 'display:none;'); | ||
+ | |||
+ | var tocFloat = $('#toc').clone(); | ||
+ | tocFloat.id = 'tocFloat'; | ||
+ | tocFloat.addClass('toc', 'tocFloat'); | ||
+ | |||
+ | document.getElementById('mw-content-text').appendChild(tocFloatContainer); | ||
+ | tocFloat.appendTo('#tocFloatContainer'); | ||
+ | |||
+ | $('a.togglelink')[1].addEventListener('click', function () { | ||
+ | |||
+ | if ($('a.togglelink')[1].innerText === 'hide') { | ||
+ | $('a.togglelink')[1].innerText = 'show'; | ||
+ | $('#tocFloatContainer').addClass('tocFloatHidden'); | ||
+ | } | ||
+ | else { | ||
+ | $('a.togglelink')[1].innerText = 'hide'; | ||
+ | $('#tocFloatContainer').removeClass('tocFloatHidden'); | ||
+ | } | ||
+ | |||
+ | $('#tocFloatContainer div.toc ul').slideToggle('fast'); | ||
+ | |||
+ | }); | ||
+ | |||
+ | if (elementNotInView('#toc', false, true, true)) { | ||
+ | $('#tocFloatContainer div.toc').fadeIn(500, 0); | ||
+ | $('#tocFloatContainer').fadeIn(500, 0); | ||
+ | } | ||
+ | else { | ||
+ | $('#tocFloatContainer div.toc').fadeOut(500, 0); | ||
+ | $('#tocFloatContainer').fadeOut(500, 0); | ||
+ | } | ||
+ | |||
+ | for (var i = tocIndex + 2; i < $('.mw-parser-output :header').length; i++) { | ||
+ | if (window.scrollY >= $('.mw-parser-output :header')[i].offsetTop) { | ||
+ | tocIndex++; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | $('#tocFloatContainer ul li a span.toctext, #tocFloatContainer ul li ul li a span.toctext')[tocIndex].classList.add('highlight'); | ||
+ | $('.highlight')[0].scrollIntoView(false); | ||
+ | }, 250); | ||
} | } | ||
− | if( | + | |
− | + | /* 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 (elementNotInView('#p-logo', false, true, true)) { | ||
+ | nav1.addClass('navFloat'); | ||
+ | nav2.addClass('navFloat'); | ||
+ | if(nav1.css('visibility') !== 'hidden') { | ||
+ | nav1.fadeIn(500, 0); | ||
+ | } | ||
+ | if(nav2.css('visibility') !== 'hidden') { | ||
+ | nav2.fadeIn(500, 0); | ||
+ | } | ||
+ | } | ||
+ | else { | ||
+ | nav1.removeClass('navFloat'); | ||
+ | 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 (elementNotInView('#toc', false, true, true)) { | ||
+ | $('#tocFloatContainer div.toc').fadeIn(500, 0); | ||
+ | $('#tocFloatContainer').fadeIn(500, 0); | ||
+ | } | ||
+ | else { | ||
+ | $('#tocFloatContainer div.toc').fadeOut(250, 0); | ||
+ | $('#tocFloatContainer').fadeOut(250, 0); | ||
+ | } | ||
+ | |||
+ | lastTocIndex = tocIndex; | ||
+ | |||
+ | while(tocIndex + 2 < $('.mw-parser-output :header').length && window.scrollY >= $('.mw-parser-output :header')[tocIndex + 2].offsetTop) { | ||
+ | tocIndex++; | ||
+ | if(lastTocIndex > -1) { | ||
+ | $('#tocFloatContainer ul li a span.toctext, #tocFloatContainer ul li ul li a span.toctext')[lastTocIndex].classList.remove('highlight'); | ||
+ | } | ||
+ | } | ||
+ | while(tocIndex + 1 > 0 && tocIndex + 1 < $('.mw-parser-output :header').length && window.scrollY <= $('.mw-parser-output :header')[tocIndex + 1].offsetTop) { | ||
+ | tocIndex--; | ||
+ | $('#tocFloatContainer ul li a span.toctext, #tocFloatContainer ul li ul li a span.toctext')[lastTocIndex].classList.remove('highlight'); | ||
+ | } | ||
+ | |||
+ | if (tocIndex !== lastTocIndex) { | ||
+ | if(lastTocIndex > -1) { | ||
+ | $('#tocFloatContainer ul li a span.toctext, #tocFloatContainer ul li ul li a span.toctext')[lastTocIndex].classList.remove('highlight'); | ||
+ | } | ||
+ | if(elementNotInView('#toc', false, true, true)) { | ||
+ | $('#tocFloatContainer ul li a span.toctext, #tocFloatContainer ul li ul li a span.toctext')[tocIndex].classList.add('highlight'); | ||
+ | $('.highlight')[0].scrollIntoView(false); | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | |||
+ | if ($('#mw-panel')[0]) { | ||
+ | |||
+ | var nav1 = $('#p-navigation'); | ||
+ | var nav2 = $('#p-tb'); | ||
+ | |||
+ | if (elementNotInView('#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.addClass('navFloat'); | ||
+ | nav2.addClass('navFloat'); | ||
+ | } | ||
+ | } | ||
+ | else if (elementNotInView('#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.removeClass('navFloat'); | ||
+ | nav2.removeClass('navFloat'); | ||
+ | } | ||
+ | } | ||
+ | else if(elementNotInView('#p-logo', false, false, false)) { | ||
+ | nav1.fadeIn(500, 0); | ||
+ | nav2.fadeIn(500, 0); | ||
+ | if(nav1.css('position') !== 'relative') { | ||
+ | nav1.removeClass('navFloat'); | ||
+ | nav2.removeClass('navFloat'); | ||
+ | } | ||
+ | } | ||
+ | else { | ||
+ | nav1.fadeOut(250, 0); | ||
+ | nav2.fadeOut(250, 0); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | }; | ||
+ | |||
+ | }); | ||
+ | |||
+ | setTimeout(function() { | ||
+ | var leftNavMobile = document.createElement('div'); | ||
+ | leftNavMobile.innerHTML = document.getElementById('p-tb').innerHTML; | ||
+ | leftNavMobile.id = 'leftNavMobile'; | ||
+ | leftNavMobile.classList.add('navMobile'); | ||
+ | leftNavMobile.style.display = 'none'; | ||
+ | |||
+ | var rightNavMobile = document.createElement('div'); | ||
+ | rightNavMobile.innerHTML = document.getElementById('p-navigation').innerHTML; | ||
+ | rightNavMobile.id = 'rightNavMobile'; | ||
+ | rightNavMobile.classList.add('navMobile'); | ||
+ | rightNavMobile.style.display = 'none'; | ||
+ | |||
+ | document.getElementById('mw-head').appendChild(rightNavMobile); | ||
+ | document.getElementById('mw-head').appendChild(leftNavMobile); | ||
+ | |||
+ | }, 250); | ||
+ | |||
+ | // END CODE SPACE | ||
+ | |||
+ | |||
+ | |||
+ | })(); // END MAIN FUNCTION |
Latest revision as of 03:07, 6 February 2022
/* 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 // 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 // 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 // Investigate MW actions/hooks // - any useful for current implementations? // Listen for clicks on the hide link when the TOC is floating. If clicked, replace with an element // that has a show link. animate the change. 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 elementNotInView(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 >= 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; var tocIndex = 0; var lastTocIndex; // END FUNCTION AND VARIABLE DEFINITION SPACE // BEGIN CODE SPACE /* 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 ` ` ` ` ` ` ` ` ` ./oNNNo\\- -/oNNNo\\. ` ` ` ` ` ` ` ` ` 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` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` R\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 ` ` ` ` ` ` ` ` ` ./oNNNo\\- -/oNNNo\\. ` ` ` ` ` ` ` ` ` 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` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` R\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 // Disabled as of 2/5/2022 /* 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 + '"></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]) { setTimeout(function() { var tocFloatContainer = document.createElement('div'); tocFloatContainer.setAttribute('class', 'tocFloatContainer'); tocFloatContainer.setAttribute('id', 'tocFloatContainer'); tocFloatContainer.setAttribute('style', 'display:none;'); var tocFloat = $('#toc').clone(); tocFloat.id = 'tocFloat'; tocFloat.addClass('toc', 'tocFloat'); document.getElementById('mw-content-text').appendChild(tocFloatContainer); tocFloat.appendTo('#tocFloatContainer'); $('a.togglelink')[1].addEventListener('click', function () { if ($('a.togglelink')[1].innerText === 'hide') { $('a.togglelink')[1].innerText = 'show'; $('#tocFloatContainer').addClass('tocFloatHidden'); } else { $('a.togglelink')[1].innerText = 'hide'; $('#tocFloatContainer').removeClass('tocFloatHidden'); } $('#tocFloatContainer div.toc ul').slideToggle('fast'); }); if (elementNotInView('#toc', false, true, true)) { $('#tocFloatContainer div.toc').fadeIn(500, 0); $('#tocFloatContainer').fadeIn(500, 0); } else { $('#tocFloatContainer div.toc').fadeOut(500, 0); $('#tocFloatContainer').fadeOut(500, 0); } for (var i = tocIndex + 2; i < $('.mw-parser-output :header').length; i++) { if (window.scrollY >= $('.mw-parser-output :header')[i].offsetTop) { tocIndex++; } } $('#tocFloatContainer ul li a span.toctext, #tocFloatContainer ul li ul li a span.toctext')[tocIndex].classList.add('highlight'); $('.highlight')[0].scrollIntoView(false); }, 250); } /* 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 (elementNotInView('#p-logo', false, true, true)) { nav1.addClass('navFloat'); nav2.addClass('navFloat'); if(nav1.css('visibility') !== 'hidden') { nav1.fadeIn(500, 0); } if(nav2.css('visibility') !== 'hidden') { nav2.fadeIn(500, 0); } } else { nav1.removeClass('navFloat'); 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 (elementNotInView('#toc', false, true, true)) { $('#tocFloatContainer div.toc').fadeIn(500, 0); $('#tocFloatContainer').fadeIn(500, 0); } else { $('#tocFloatContainer div.toc').fadeOut(250, 0); $('#tocFloatContainer').fadeOut(250, 0); } lastTocIndex = tocIndex; while(tocIndex + 2 < $('.mw-parser-output :header').length && window.scrollY >= $('.mw-parser-output :header')[tocIndex + 2].offsetTop) { tocIndex++; if(lastTocIndex > -1) { $('#tocFloatContainer ul li a span.toctext, #tocFloatContainer ul li ul li a span.toctext')[lastTocIndex].classList.remove('highlight'); } } while(tocIndex + 1 > 0 && tocIndex + 1 < $('.mw-parser-output :header').length && window.scrollY <= $('.mw-parser-output :header')[tocIndex + 1].offsetTop) { tocIndex--; $('#tocFloatContainer ul li a span.toctext, #tocFloatContainer ul li ul li a span.toctext')[lastTocIndex].classList.remove('highlight'); } if (tocIndex !== lastTocIndex) { if(lastTocIndex > -1) { $('#tocFloatContainer ul li a span.toctext, #tocFloatContainer ul li ul li a span.toctext')[lastTocIndex].classList.remove('highlight'); } if(elementNotInView('#toc', false, true, true)) { $('#tocFloatContainer ul li a span.toctext, #tocFloatContainer ul li ul li a span.toctext')[tocIndex].classList.add('highlight'); $('.highlight')[0].scrollIntoView(false); } } } if ($('#mw-panel')[0]) { var nav1 = $('#p-navigation'); var nav2 = $('#p-tb'); if (elementNotInView('#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.addClass('navFloat'); nav2.addClass('navFloat'); } } else if (elementNotInView('#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.removeClass('navFloat'); nav2.removeClass('navFloat'); } } else if(elementNotInView('#p-logo', false, false, false)) { nav1.fadeIn(500, 0); nav2.fadeIn(500, 0); if(nav1.css('position') !== 'relative') { nav1.removeClass('navFloat'); nav2.removeClass('navFloat'); } } else { nav1.fadeOut(250, 0); nav2.fadeOut(250, 0); } } }; }); setTimeout(function() { var leftNavMobile = document.createElement('div'); leftNavMobile.innerHTML = document.getElementById('p-tb').innerHTML; leftNavMobile.id = 'leftNavMobile'; leftNavMobile.classList.add('navMobile'); leftNavMobile.style.display = 'none'; var rightNavMobile = document.createElement('div'); rightNavMobile.innerHTML = document.getElementById('p-navigation').innerHTML; rightNavMobile.id = 'rightNavMobile'; rightNavMobile.classList.add('navMobile'); rightNavMobile.style.display = 'none'; document.getElementById('mw-head').appendChild(rightNavMobile); document.getElementById('mw-head').appendChild(leftNavMobile); }, 250); // END CODE SPACE })(); // END MAIN FUNCTION