Difference between revisions of "MediaWiki:Common.js"

Revision as of 21:44, 19 August 2018

/* 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','https://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','https://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
  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;

      // Create variable clicked to capture data about which element is clicked
      $(document).click(function (event) {
        var clicked = $(event.target).text();
      });

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

        // Check that the table row exists
        if (document.getElementById('tableRow' + n)) {

          // Select the table row and set it's ID selector
          var row = document.getElementById('tableRow' + n);
          var rowID = 'tableRow' + n;
          var dialogID = '#dialog' + n;
          var uiID = 1;

          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, row) {

            // 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},
                open: function (event, ui) {
                  var title = document.getElementById('ui-id-' + uiID).innerHTML;
                  document.getElementById('ui-id-' + uiID).innerHTML = '<span style="color: #b02e2e !important; padding-left:66px !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 () {
                  $(dialogID).transfer({
                    to: '#' + clicked.path[1].id,
                  });
                },
                close: function (row) {
                  return function() {
                    if (row.target.getAttribute('id').replace('dialog', '') % 2 === 0) {
                      $(row.target.getAttribute('id').replace('dialog', '#tableRow')).addClass('tableAnimationEven');
                    }
                    else {
                      $(row.target.getAttribute('id').replace('dialog', '#tableRow')).addClass('tableAnimationOdd');
                    }

                    setTimeout(function() {
                      $(row.target.getAttribute('id').replace('dialog', '#tableRow')).removeClass('tableAnimationEven');
                      $(row.target.getAttribute('id').replace('dialog', '#tableRow')).removeClass('tableAnimationOdd');
                    }, 500);
                  }(row);
                },
                buttons: [
                  {
                    text: 'Close',
                    icon: 'ui-icon-closethick',
                    click: function () {
                      $(this).dialog('close');
                    }
                  }
                ]
              });
            }

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

          // Define a variable to be used for the title of the popup
          var nameCol = document.getElementById('tableCol1-' + n).innerText;
          var nameColID = nameCol.replace(/ /g,'_');
          var dialogContent = '';
          if (document.getElementById(nameColID + '-popup') != null) {
            dialogContent = document.getElementById(nameColID + '-popup').innerText;
          }
          else {
            dialogContent = 'Popup content for ' + nameCol + ' coming soon!';
          }

          // Define the popup's title and content and insert the popup's HTML into the document
          row.innerHTML += ('<div style="display:none" id="dialog' + n + '"' + ' title="' + nameCol + '"' + n + '"></a>' + '\n' +
            '<p>' + dialogContent + '</p>\n' +
            '</div>');
        }

        // Detect when a given row does not exist
        else {
          cnt++;
        }

        // If two rows are detected to not exist, assume the tables have ended and break the loop
        if (cnt > 0) {
          break;
        }
      }
    };
  }.bind(null, jQueryUI, jQueryCSS);

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