Difference between revisions of "MediaWiki:Common.js"

Revision as of 15:43, 15 August 2018

/* Scripts in this area will be loaded for all users on all pages */

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

(function () {

  // Init count to break loop
  var cnt = 0;


  // Define jQuery scripts and settings
  var jQuery = document.createElement('script');
  jQuery.setAttribute('src','//code.jquery.com/jquery-1.12.4.js');

  var jQueryUI = document.createElement('script');
  jQueryUI.setAttribute('src','//code.jquery.com/ui/1.12.1/jquery-ui.js');

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


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

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

      // 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 = '#dialog' + n;

          // Add the click event listener and popup function to the given row
          row.addEventListener('click', function (rowID) {
            $(rowID).dialog({
              modal: true,
              minHeight: 300,
              minWidth: 600,
              width: 900,
              dialogClass: '#mattyPopup',
              show: { effect: "blind", duration: 800 },
              hide: { effect: "explode", duration: 1000 },
              buttons: [
                {
                  text: 'Close',
                  icon: 'ui-icon-closethick',
                  click: function() {
                    $( this ).dialog( 'close' );
                  }
                }
              ]
            });
          }.bind(null, rowID));

          // Define a variable to be used for the title of the popup
          var nameCol = document.getElementById('tableCol1-' + n).innerText;

          // Define the popup's title and content and insert the popup's HTML into the given row's HTML
          row.innerHTML += '<div style="display:none" id="dialog' + n + '"' + ' title="' + nameCol + '"' + n + '">' + '\n' +
              '<p>Table Row Table Row Table Row Table Row Table Row Table Row Table Row Table Row Table Row Table Row Table Row Table Row Table Row Table Row Table Row ' + n + '</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;
        }
      }
    };
  };

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