MediaWiki:Mobile.js

/* Any JavaScript here will be loaded for users using the mobile site */

  var elementsToFilter = {}; /* for createDropdownSelects() */

  $(document).ready(function() {
    createDropdownSelects();
    createCollapsibleTables();
  });
  
/* For filtering items with Template:DropdownFilter */
  function createDropdownSelects() {
    var selectionParameters = document.getElementById("selectionOptions");
    var selectRowElement = document.getElementById("selectRow");
    if (!selectRowElement || !selectionParameters) {
        return;
    }
    selectRowElement.setAttribute("style", "padding: 6px;");

    var dropdownSelectionOptions = selectionParameters.innerHTML;
    createDropdownSelect(dropdownSelectionOptions);
  }

  function createDropdownSelect(optionList) {
    var i = 0;
    var dropdown = JSON.parse(optionList);

    /* read options from the JSON */
    var dropdownDiv = document.getElementById(dropdown.divID);
    elementsToFilter = document.getElementsByClassName(dropdown.applyToElementsWithThisClass);

    /* create the options to populate the dropdown with */
    var html = "<select id=\"" + dropdown.name + "\" name=\"" + dropdown.name + "\" class=\"form-control\" onchange=\"filter('" + dropdown.name + "','" + dropdown.attribute + "'" + ")\">";

    for (i; i < dropdown.options.length; i++) {
        html += "<option ";
        if (i === 0) {
            html += "selected=\"selected\"";
        }
        if (dropdown.options[i][1] !== "") {
          html +=  "disabled=\"" + dropdown.options[i][1] + "\"";
        }
        html += "value=\"" + dropdown.options[i][0] + "\">" 
             + dropdown.options[i][0] + "</option>";
    }

    /* populate the dropdown */
    dropdownDiv.innerHTML += html;
  }

  /* 
   * Called from the onChange() event of a select element.
   * Checks each row or element to see if its attribute contains at least one match with the selected value of the dropdown
   * Filters only one dropdown
   */
  function filter(filterDiv, attribute) {  
    resetFiltersApplied();

    var filterValue = document.getElementById(filterDiv).value;

    if (!filterValue) /* selected option is undefined, so do nothing (rather than hiding everything) */ return;

    // Go through all of the items to filter through
    for (var i = 0; i < elementsToFilter.length; i++) {
      var data = elementsToFilter[i].getAttribute(attribute);
      var words = data.split(' ');
      
      var showRow = false;
      for (var w in words) {
        showRow = showRow || (words[w] == filterValue);
        // console.log(filterValue + " " + words[w] + " " + showRow);
      }
        
      // Apply the filter
      applyFilterAction(elementsToFilter[i], showRow);
    }
  }

  // This method handlecs the CSS changes if a div matches the filter
  function applyFilterAction(element, applyFilter) {
    if (element.nodeName == "DIV") {
        if (!applyFilter) {
          element.style.display = "none";
        } else {
          element.style.display = "inline-block";
        }
    }
  }

  // Reset any filters applied to elements.
  function resetFiltersApplied() {
    for (var i = 0; i < elementsToFilter.length; i++) {
      if (elementsToFilter[i].nodeName == "DIV") {
        elementsToFilter[i].style.display = "inline-block";
      }
    }
  }
  
/* Manually rewrite mw-collapsible functionality */

/* 
 * find mw-collapsible and if mw-collapsible-collapsed then collapse the table 
 */
function createCollapsibleTables() {
  
  var $tables = [];
  var $tables = $('.mw-collapsible');
  
  if ($tables.length === 0) return;
  
  $tables.each(function() {
    // Find first row
    var $rows = $(this).find('tr');
    if ($rows.length === 0) return;
    
    var $header = $rows[0].firstChild; //the first th or tr
    
    // insert Expand/Collapse button
    $('<span class="mw-collapsible-toggle mw-collapsible-toggle-default" role="button" tabindex="0"><a class="mw-collapsible-text"></a></span>').prependTo($header);
    
    var showTable = $(this).hasClass('mw-collapsed');
    var $toggleSpan = $header.firstChild;

    toggleCollapsibleTable($(this), showTable);

    $($toggleSpan).click(function() {
      var $parent = $(this).parents('.mw-collapsible');
      var showTable = $parent.hasClass('mw-collapsed');
      toggleCollapsibleTable($parent, showTable);
    });
    
  });
}

function toggleCollapsibleTable($table, showTable) {
  // hide or show contents based on presence of mw-collapsed
  var $toggle = $table.find('.mw-collapsible-toggle');
  var $text = $table.find('.mw-collapsible-text');
  var innerText = '';
  
  if (!showTable) { // hide contents
    $table.find('tr').not(':first-of-type').fadeTo("slow",0);
    innerText = 'Collapse';
    $toggle.addClass('mw-collapsible-toggle-collapsed');
    $toggle.removeClass('mw-collapsible-toggle-expanded');
    $table.addClass('mw-collapsed');
  } else { // show contents
    $table.find('tr').not(':first-of-type').css('opacity','');
    innerText = 'Expand';
    $toggle.addClass('mw-collapsible-toggle-expanded');
    $toggle.removeClass('mw-collapsible-toggle-collapsed');
    $table.removeClass('mw-collapsed');
  }
  $text[0].innerHTML = innerText;
}