Difference between revisions of "MediaWiki:Common.js"

From Game Detectives Wiki
Jump to: navigation, search
(disabled on-click popup)
 
(162 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* Scripts here will load on all pages for all users */
+
/* Scripts within main function will load on all pages for all users */
/* Script for popup onclick for SMW matty tables */
 
  
(function () {
+
// BEGIN MAIN FUNCTION
  
  /* Define jQuery scripts and settings */
+
(function main() {
  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');
 
  
  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');
 
  
   // Count to break loop
+
   /* BEGIN COWBOY CHANGES
  var cnt = 0;
 
  
   // Wait for jQuery to load
+
   // Propegation Test
   jQuery.onload = function (jQueryUI, jQueryCSS) {
+
 
 +
  // 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');
  
    // Only insert UI and CSS once jQuery has definitely loaded (or else jQuery undefined)
 
 
     document.getElementsByTagName('head')[0].appendChild(jQueryUI);
 
     document.getElementsByTagName('head')[0].appendChild(jQueryUI);
 
     document.getElementsByTagName('head')[0].appendChild(jQueryCSS);
 
     document.getElementsByTagName('head')[0].appendChild(jQueryCSS);
  
     // Wait for jQuery UI to load
+
     jQueryUILoad.onload = (function () {
    jQueryUI.onload = function () {
+
      console.log('jQueryUI version ' + jQueryUI.src + ' is loaded.');
 +
      jQueryUI.onload = code;
 +
    })();
 +
  }
  
      // Define jQuery prefix
+
  /* Function which returns true if an element is in view partially or fully and false if it is not */
      var $ = window.jQuery;
 
  
      // Create variable clicked to capture data about which element is clicked
+
  function elementNotInView(elem, fullyInView, below, farLeft) {
      $(document).click(function (event) {
 
        var clicked = $(event.target).text();
 
      });
 
  
      // Iterate n to loop through each table row
+
    function Utils() {
      for (var n = 1; cnt === 0; n++) {
 
  
        var tableRow = 'tableRow' + n;
+
    }
  
         // Check that the table row exists
+
    Utils.prototype = {
         if ($(tableRow) != null) {
+
      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();
  
          // Select the table row and set it's ID selector
+
        var isFullyInView = ((pageTop < elementTop) && (pageBottom > elementBottom));
          var row = document.getElementById(tableRow);
+
        var isBelow = (window.scrollY >= elementBottom);
          var dialogID = '#dialog' + n;
+
        var isFarLeft = (window.scrollX === 0);
          var uiID = 1;
 
  
           if(row === null) {
+
        if (fullyInView === true && below === true && farLeft === true) {
             break;
+
          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';
 
           }
 
           }
  
           if(n%2 === 0) {
+
           // Define vars
             $(row).addClass('tableRowEven');
+
          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 {
 
           else {
             $(row).addClass('tableRowOdd');
+
             $('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++;
 
           }
 
           }
 +
        }
  
          // Add the click event listener and popup function to the given row
+
        $('#tocFloatContainer ul li a span.toctext, #tocFloatContainer ul li ul li a span.toctext')[tocIndex].classList.add('highlight');
          row.addEventListener('click', function (dialogID, clicked) {
+
        $('.highlight')[0].scrollIntoView(false);
 +
      }, 250);
 +
    }
  
            // Check if what has been clicked is a table element of some kind
+
    /* Function to create floating Navigation menu */
            if (!clicked.srcElement.toString().match('\\[object HTMLT')) ;
+
    // Check if a menu panel element is found
 +
    if ($('#mw-panel')[0]) {
 +
     
 +
      var nav1 = $('#p-navigation');
 +
      var nav2 = $('#p-tb');
  
            //Only proceed if not a link
+
      if (elementNotInView('#p-logo', false, true, true)) {
            else {
+
        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');
 +
      }
 +
    }
  
              // Create the popup
+
    // All code to be run when the document is scrolled should go in this function or use an event listener
              $(dialogID).dialog({ // Define popup settings
+
    document.onscroll = function () {
                modal: true,
+
 
                minHeight: 300,
+
      if ($('#toc')[0]) {
                minWidth: 600,
+
 
                width: 900,
+
        if (elementNotInView('#toc', false, true, true)) {
                dialogClass: dialogID,
+
          $('#tocFloatContainer div.toc').fadeIn(500, 0);
                position: {my: 'center', at: 'center', of: '#' + clicked.path[1].id},
+
          $('#tocFloatContainer').fadeIn(500, 0);
                open: function () {
+
        }
                  var thisDialog = document.getElementById('ui-id-' + uiID);
+
        else {
                  var title = thisDialog.innerHTML;
+
          $('#tocFloatContainer div.toc').fadeOut(250, 0);
                  thisDialog.innerHTML = '<span style="color: #b02e2e !important; padding-left:60px !important;"><a href="https://wiki.gamedetectives.net/index.php?title=' + title + '">' + title + '</a></span>';
+
          $('#tocFloatContainer').fadeOut(250, 0);
                  uiID++;
+
        }
                },
 
                show: {effect: 'clip', direction: 'vertical', duration: 500, easing: 'swing', delay: 100},
 
                hide: 'fade',
 
                beforeClose: function (event, ui) {
 
                  $(dialogID).transfer({
 
                    to: '#' + clicked.path[1].id,
 
                  });
 
                },
 
                close: function (row) {
 
                  return function() {
 
                    var thisRow = row.target.getAttribute('id');
 
                    var thisRowID = row.target.getAttribute('id').replace('dialog', '#tableRow');
 
                    if (thisRow.replace('dialog', '') % 2 === 0) {
 
                      $(thisRowID).addClass('tableAnimationEven');
 
                    }
 
                    else {
 
                      $(thisRowID).addClass('tableAnimationOdd');
 
                    }
 
  
                    setTimeout(function() {
+
        lastTocIndex = tocIndex;
                      $(thisRowID).removeClass('tableAnimationEven');
 
                      $(thisRowID).removeClass('tableAnimationOdd');
 
                    }, 500);
 
                  }(row);
 
                },
 
                buttons: [
 
                  {
 
                    text: 'Close',
 
                    icon: 'ui-icon-closethick',
 
                    click: function () {
 
                      $(this).dialog('close');
 
                    }
 
                  }
 
                ]
 
              });
 
            }
 
  
             // Bind dialogID to function
+
        while(tocIndex + 2 < $('.mw-parser-output :header').length && window.scrollY >= $('.mw-parser-output :header')[tocIndex + 2].offsetTop) {
           }.bind(null, dialogID));
+
          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');
 +
        }
  
          // Define a variable to be used for the title of the popup
+
        if (tocIndex !== lastTocIndex) {
          var nameCol = document.getElementById('tableCol1-' + n).innerText;
+
           if(lastTocIndex > -1) {
          var nameColID = nameCol.replace(/ /g,'_');
+
             $('#tocFloatContainer ul li a span.toctext, #tocFloatContainer ul li ul li a span.toctext')[lastTocIndex].classList.remove('highlight');
          var dialogContent = '';
 
          var userDialogContent = '';
 
           if (document.getElementById(nameColID + '-popup') != null) {
 
             userDialogContent = document.getElementById(nameColID + '-popup').innerHTML;
 
 
           }
 
           }
           else {
+
           if(elementNotInView('#toc', false, true, true)) {
             dialogContent = 'Popup content for ' + nameCol + ' coming soon! {{#show:' + nameColID + '|?argDescription}}';
+
             $('#tocFloatContainer ul li a span.toctext, #tocFloatContainer ul li ul li a span.toctext')[tocIndex].classList.add('highlight');
 +
            $('.highlight')[0].scrollIntoView(false);
 
           }
 
           }
 +
        }
 +
      }
  
           // Define the popup's title and content and insert the popup's HTML into the document
+
      if ($('#mw-panel')[0]) {
           $('#bodyContent').innerHTML += ('<div style="display:none" id="dialog' + n + '"' + ' title="' + nameCol + '"' + n + '"></a>' + '\n' +
+
 
            '<div>' + dialogContent + '\n' +
+
        var nav1 = $('#p-navigation');
             userDialogContent + '</div>\n' +
+
        var nav2 = $('#p-tb');
             '</div>');
+
 
 +
        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);
 
         }
 
         }
 
       }
 
       }
 +
 
     };
 
     };
  }.bind(null, jQueryUI, jQueryCSS);
 
  
   // Insert jQuery script into page's HTML
+
   });
  document.getElementsByTagName('head')[0].appendChild(jQuery);
+
 
})();
+
  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