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 = "";

for (i; i < dropdown.options.length; i++) { html += "" + dropdown.options[i][0] + " "; }

/* 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    $('  ').prependTo($header);    // if the table is collapsed, then we want it to start out collapsed    var showTable = $(this).hasClass('mw-collapsed');    toggleCollapsibleTable($(this), !showTable);

var $toggleSpan = $header.firstChild; $($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, function {     $(this).css('display','none');    }); innerText = 'Expand'; $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('display',''); $table.find('tr').not(':first-of-type').css('opacity',''); innerText = 'Collapse'; $toggle.addClass('mw-collapsible-toggle-expanded'); $toggle.removeClass('mw-collapsible-toggle-collapsed'); $table.removeClass('mw-collapsed'); } $text[0].innerHTML = innerText; }