More actions
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* Any JavaScript here will be loaded for users using the mobile site */
/* Adds links to the sidebar menu
* A workaround for MobileFrontend not supporting customization yet
* Ref: https://www.mediawiki.org/wiki/Topic:Vqy1kx6q4e0bzvyb
*/
var timer = setInterval(function() {
if ($('.menu ul:first').length) {
console.log("mobile menu exists");
clearInterval(timer);
$('.menu ul:first').after(
'<ul> \
<li><a href="#"> \
<span>Navigation</span> \
</a> \
</li> \
<li><a href="/wiki/BlazBlue_(Franchise)" \
class="mw-ui-icon mw-ui-icon-before"> \
<span>About BlazBlue</span></a> \
</li> \
<li><a href="/wiki/Characters" \
class="mw-ui-icon mw-ui-icon-before"> \
<span>Characters</span></a> \
</li> \
<li><a href="/wiki/Locations" \
class="mw-ui-icon mw-ui-icon-before"> \
<span>Locations</span></a> \
</li> \
<li><a href="/wiki/Category:Terms_and_Setting" \
class="mw-ui-icon mw-ui-icon-before"> \
<span>World Setting</span></a> \
</li> \
<li><a href="/wiki/Category:Items" \
class="mw-ui-icon mw-ui-icon-before"> \
<span>Items</span></a> \
</li> \
<li><a href="/wiki/Category:Events" \
class="mw-ui-icon mw-ui-icon-before"> \
<span>Events</span></a> \
</li> \
<li><a href="/wiki/Category:Species" \
class="mw-ui-icon mw-ui-icon-before"> \
<span>Species</span></a> \
</li> \
<li><a href="/wiki/Category:Organizations" \
class="mw-ui-icon mw-ui-icon-before"> \
<span>Organizations</span></a> \
</li> \
<li><a href="/wiki/Merchandise" \
class="mw-ui-icon mw-ui-icon-before"> \
<span>Merchandise</span></a> \
</li> \
</ul> \
<ul class="level1"> \
<li><a href="#"> \
<span>Community</span></a> \
</li> \
<ul class ="level2"> \
<li><a href="/wiki/Help:Manual_of_Style" \
class="mw-ui-icon mw-ui-icon-before"> \
<span>Manual of Style</span></a> \
</li> \
<li><a href="/wiki/Help:ToDo" \
class="mw-ui-icon mw-ui-icon-before"> \
<span>To Do List</span></a> \
</li> \
<li><a href="https://discord.gg/7TnmT7X" \
class="mw-ui-icon mw-ui-icon-before"> \
<span>Discord</span></a> \
</li> \
<li><a href="https://www.facebook.com/TheBlazBlueWiki" \
class="mw-ui-icon mw-ui-icon-before"> \
<span>Facebook</span></a> \
</li> \
<li><a href="https://twitter.com/BlazBlue_Wiki" \
class="mw-ui-icon mw-ui-icon-before"> \
<span>Twitter</span></a> \
</li> \
<li><a href="https://ko-fi.com/blazblue" \
class="mw-ui-icon mw-ui-icon-before"> \
<span>Support us on Ko-fi</span></a> \
</li> \
</ul> \
</ul>'
);
$(".menu").find(".level2").hide(); // hide level2 until level1 is clicked
$(".level1").click(function(event){
$(this).find(".level2").slideToggle(500);
}); // if level1 is clicked, dropdown level2
}
}, 100); // check every 100ms
/*
* see also MediaWiki:Gadget-DropdownFilter.js
*/
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);
// 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;
}