MediaWiki:Mobile.js

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

// For filtering items
var elementsToFilter = {};

var gameSelectOptions = '{ \
  "name":"gameSelect",\
  "attribute":"data-game",\
  "options":[ \
        ["Game", ""],\
        ["BBCT", ""],\
        ["BBCS", ""],\
        ["BBCSEX", ""],\
        ["BBCP", ""],\
        ["BBCPEX", ""],\
        ["BBCF", ""],\
        ["BBTAG", ""]\
    ]\
}';

$(document).ready(function() {
    // For filtering items
    elementsToFilter = document.getElementsByClassName("filter-element");

    createDropdownSelects();
});

function createDropdownSelects() {
    var selectRowElement = document.getElementById("selectRow");
    if (!selectRowElement) {
        return;
    }
    selectRowElement.setAttribute("style", "padding: 6px;");
    
    var gameSelect = document.getElementById('gameSelectDiv');
    createDropdownSelect(gameSelect, gameSelectOptions);
}

function createDropdownSelect(dropdownDiv, optionList) {
    var i = 0;
    var dropdown = JSON.parse(optionList);
    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>";
    }

    dropdownDiv.innerHTML += html;
}

// Check each row to see if it is in the filter
// Filters only one dropdown
function filter(filterDiv, attribute) {  
  resetFiltersApplied();
  
  var filterValue = document.getElementById(filterDiv).value;
  
    // Go through all the hero grid icons
    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 an icon/row 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.opacity = "inline-block";
        }
    }
}