MediaWiki:Common.js

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

  // Count to break loop
  var cnt = 0;

  // Wait for jQuery scripts to load
  //jQuery.onload = function () {
    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 = '#dialog' + n;
          var rowNum = n;
          var uiID = 1;

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

            console.log(clicked);
            //console.log(clicked.srcElement.toString());

            // 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
              $(rowID).dialog({ // Define popup settings
                modal: true,
                minHeight: 300,
                minWidth: 600,
                width: 900,
                dialogClass: rowID,
                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 () {
                  $(rowID).transfer({
                    to: '#' + clicked.path[1].id,
                  });
                },
                close: function () {
                  console.log('working?');
                  // Animate table row flashes here
                },
                buttons: [
                  {
                    text: 'Close',
                    icon: 'ui-icon-closethick',
                    click: function () {
                      $(this).dialog('close');
                    }
                  }
                ]
              });
            }

            // Bind rowID to function
          }.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 + '"></a>' + '\n' +
              '<p>Coming Soon ' + 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);
})();