MediaWiki:Common.js

/* Scripts here will load on all pages for all users */
/* Script for popup onclick for SMW matty tables */

(function () {

  // Define jQuery scripts and settings
  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');

  // Function to capture page's URL from meta properties
  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 '';
  }

  // Check the URL and bail out if it isn't the investigation page
  if(checkURL() === 'https://wiki.gamedetectives.net/index.php?title=List_of_Investigations') {

    // Count to break loop
    var cnt = 0;

    // Wait for jQuery to load
    jQuery.onload = function (jQueryUI, jQueryCSS) {

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

      // Wait for jQuery UI to load
      jQueryUI.onload = function () {

        // Define jQuery prefix
        var $ = window.jQuery;
        var clicked;

        // Create variable clicked to capture clicked elements
        $(document).click(function (event) {
          clicked = $(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 % 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.srcElement.toString().match('\\[object HTMLT')) ;

              //Only proceed if not a link
              else {

                // Create the popup
                $(dialogID).dialog({ // Define popup settings
                  modal: true,
                  minHeight: 300,
                  minWidth: 600,
                  width: 900,
                  dialogClass: dialogID,
                  position: {my: 'center', at: 'center', of: '#' + clicked.path[1].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:60px !important;"><a href="https://wiki.gamedetectives.net/index.php?title=' + title + '">' + title + '</a></span>';
                    uiID++;
                  },
                  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.path[1].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') {
            $('.ui-dialog-titlebar-close').trigger('click');
          }
        });
      };

      // Bind jQueryUI and jQueryCSS to onload
    }.bind(null, jQueryUI, jQueryCSS);
  }

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