MediaWiki:Common.js

/* Scripts within main function will load on all pages for all users */

(function main() {


  /* 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 '';
  })();


  /* 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;
    })();

    // Insert jQuery script into page's HTML
    document.getElementsByTagName('head')[0].appendChild(jQuery);
  }


  /* Function to load jQuery (prerequisite) and jQueryUI into a page */

  function jQueryUILoad(code) {

    jQueryLoad(function () {

      var jQueryUI = document.createElement('script');
      jQueryUI.setAttribute('src', '//code.jquery.com/ui/1.12.1/jquery-ui.min.js');
      jQueryUI.setAttribute('integrity', 'sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=');
      jQueryUI.setAttribute('crossorigin', 'anonymous');

      var jQueryCSS = document.createElement('link');
      jQueryCSS.setAttribute('rel', 'stylesheet');
      jQueryCSS.setAttribute('href', '//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css');

      document.getElementsByTagName('head')[0].appendChild(jQueryUI);
      document.getElementsByTagName('head')[0].appendChild(jQueryCSS);

      jQueryUILoad.onload = (function () {
        console.log('jQueryUI version ' + jQueryUI.src + ' is loaded.');
        jQueryUI.onload = code;
      })();
    });
  }


  /* Function to obstruct prying eyes */

  // Bail out if it isn't a common code page
  if (checkURL.match('Common.')) {
    (function hideCode() {
      setTimeout(function () {
        document.getElementsByClassName('mw-code')[0].innerText = '[REDACTED]';
        document.getElementById('ca-viewsource').style = 'display:none';
        document.getElementById('ca-history').style = 'display:none';
      }, 5);
    })();
  }


  /* Function for popup onclick for SMW matty tables */

  // Bail out if it isn't the investigation page
  if (checkURL.match('List_of_Investigations')) {
    (function tablePopup() {

      jQueryUILoad(function () {

        // Define vars
        var $ = window.jQuery;
        var animationReady = false;
        var clicked;
        var cnt = 0;

        // Create variable clicked to capture clicked elements
        this.addEventListener('click', clicked = function (event) {
          return $(event.target);
        });

        // Iterate n to loop through each table row
        for (var n = 1; cnt === 0; n++) {

          var tableRow = 'tableRow' + n;

          // Check that the table row exists
          if ($(tableRow) != null) {

            // Select the table row and set it's ID selector
            var row = document.getElementById(tableRow);

            // Break the loop if the row is null
            if (row === null) {
              break;
            }

            // Set the id for the dialog elements that are hidden on the page and a identifier for the dialog on screen
            var dialogID = '#dialog' + n;
            var uiID = 1;

            // Add classes to the table's rows to enable animations and styling
            if (n === 24) {
              $(row).addClass('tableRow');
            }
            if (n % 2 === 0) {
              $(row).addClass('tableRowEven');
            }
            else {
              $(row).addClass('tableRowOdd');
            }

            // Add the click event listener and popup function to the given row
            row.addEventListener('click', function (dialogID, clicked) {

              // Check if what has been clicked is a table element of some kind
              if (!clicked.target.parentElement.id.toString().match('tableRow')) ;

              //Only proceed if not a link
              else {

                // Create the popup & define settings
                $(dialogID).dialog({
                  modal: true,
                  minHeight: 300,
                  minWidth: 600,
                  width: 900,
                  dialogClass: dialogID,
                  position: {my: 'center', at: 'center', of: '#' + clicked.target.parentElement.id},
                  create: function () {

                    // When creating a given dialog, grab the title and form it into a link
                    var thisDialog = document.getElementById('ui-id-' + uiID);
                    var title = thisDialog.innerHTML;
                    thisDialog.innerHTML = '<span style="color: #b02e2e !important; padding-left:74px !important;"><a href="https://wiki.gamedetectives.net/index.php?title=' + title + '">' + title + '</a></span>';
                    uiID++;
                  },

                  open: function () {
                    setTimeout(function () {
                      animationReady = true;
                    }, 500);
                  },
                  show: {effect: 'clip', direction: 'vertical', duration: 500, easing: 'swing', delay: 100},
                  hide: 'fade',
                  beforeClose: function () {

                    // Before a dialog closes, animate the border using transfer
                    $(dialogID).transfer({
                      to: '#' + clicked.target.parentElement.id,
                    });
                  },
                  close: function (row) {

                    // Once the dialog closes, figure out which row it came from by capturing the current value of row
                    return function () {
                      var thisRow = row.target.getAttribute('id');
                      var thisRowID = row.target.getAttribute('id').replace('dialog', '#tableRow');

                      // Add animation classes to the given row depending on whether odd or even
                      if (thisRow.replace('dialog', '') % 2 === 0) {
                        $(thisRowID).addClass('tableAnimationEven');
                      }
                      else {
                        $(thisRowID).addClass('tableAnimationOdd');
                      }

                      // Remove the animation classes as soon as the animation is finished
                      setTimeout(function () {
                        $(thisRowID).removeClass('tableAnimationEven');
                        $(thisRowID).removeClass('tableAnimationOdd');
                      }, 500);
                    }(row);
                  },
                  buttons: [
                    {
                      text: 'Close',
                      icon: 'ui-icon-closethick',
                      click: function () {

                        // Close the dialog when the close button is clicked
                        $(this).dialog('close');
                      }
                    }
                  ]
                });
              }

              // Bind dialogID to function
            }.bind(null, dialogID));

            // Define variables to be used for the title of the popup by grabbing the title from the name col of the row the popup came from
            var nameCol = document.getElementById('tableCol1-' + n).innerText;
            var nameColID = nameCol.replace(/ /g, '_');

            // Define variables for populating popup content from code and from user
            var dialogContent = '';
            var userDialogContent = '';

            // Check if there is user-defined popup content for a given ARG
            if (document.getElementById(nameColID + '-popup') != null) {

              // If there is, set a var to it
              userDialogContent = document.getElementById(nameColID + '-popup').innerHTML;
            }

            // If there isn't, set a var to a premade string
            else {
              dialogContent = 'Popup content for ' + nameCol + ' coming soon!';
            }

            // Insert the popup's HTML into the row is belongs to and add content
            row.innerHTML += ('<div style="display:none" id="dialog' + n + '"' + ' title="' + nameCol + '"' + n + '"></a>' + '\n' +
              '<div>' + dialogContent + '\n' +
              userDialogContent + '</div>\n' +
              '</div>');
          }
        }

        // Listen for document clicks on the modal overlay to enable closing of dialog when clicking outside popup
        $(document).click(function (clicked) {
          if (clicked.target.classList[0] === 'ui-widget-overlay' && animationReady === true) {
            $('.ui-dialog-titlebar-close').trigger('click');
            animationReady = false;
          }
        });
      });
      document.getElementById('catlinks').style = 'display:none';
    })();
  }


  /* Script for building EditorTools page */

  if (checkURL.match('EditorTools')) {
    console.log('Editor Tools Page');
  }
})();