MediaWiki:Common.js

/* Any JavaScript here will be loaded for all users on every page load. */

/* VARIABLES ***********************************************************************************************************************/

var currentPageUrl = window.location.href;
var currentPageEditUrl = mw.util.getUrl( null, { action: 'edit' } );
var currentPageName = mw.util.getUrl( null, null ).replace('/wiki/', '');
var currentPageNamespaceID = mw.config.get('wgNamespaceNumber');

//variables needed after page load
var buttons, contents, allLinks;

//variables needed for the infobutton
var infobutton, infopanel;


/* *********************************************************************************************************************************/











/* sticky edit button */

// display the button only if #mw-content is present, if we are not in the edit mode, and if we're not in the Special: or Community: namespace
if (document.body.contains(document.getElementById("mw-content")) && !currentPageUrl.includes("action=") && currentPageNamespaceID != -1 && currentPageNamespaceID != 3004)  {
document.getElementById("mw-content").insertAdjacentHTML('afterbegin', '<a href="https://walkscape.miraheze.org/' + currentPageEditUrl + '"><div id="custom-editbutton"><svg width="40" height="40" viewBox="-12 -10 50 50"><path d="M 20 2 L 26 8 L 8 26 L 2 26 L 2 20 Z M 16 6 L 22 12"></path></svg></div></a>');
}











///////////////////////////////////////// ADDING THE INFO BUTTON

var infotitle = currentPageName + '/doc';

// add the info button ONLY when we use the edit mode now
if (document.body.contains(document.getElementById("mw-content")) && (currentPageUrl.includes("action=edit") || currentPageUrl.includes("action=submit"))) 
{
mw.loader.using('mediawiki.api', function() {
	var api = new mw.Api();
	
	api.get( {
     action: "query",
     titles: [infotitle],
 } ).then( function( ret ) {
     $.each( ret.query.pages, function() {
         if ( this.missing !== "" ) {
             pageExists();
         }
     } );
 });
 
 
function pageExists() {
	api.get( {
    action: 'parse',
    page: infotitle,
    contentmodel: 'wikitext'
} ).done( function ( data ) {
	InsertInfoPanel( data.parse.text['*'] );
});
}
});
}




function InsertInfoPanel( text )
{
	
	//check which namespace we're in and adapt the text to it
	var infopanelTitle = 'Page';
	if (currentPageNamespaceID == 10) { //Template
		infopanelTitle = 'Template';
	}
	else if (currentPageNamespaceID == 828) { //Module
		infopanelTitle = 'Module';
	}
	
	// insert the panel and button
	document.getElementById("mw-content").insertAdjacentHTML('afterbegin', '<div id="custom-infobutton"></div><div id="custom-infopanel" style="display: none"><div id="custom-infopanel-title">' + infopanelTitle + ' Info</div><div id="custom-infopanel-content">' + text + '</div></div>');
	
	//set up containers
	infopanel = document.getElementById("custom-infopanel");
	infobutton = document.getElementById("custom-infobutton");
	
	//add an event listener to the button
	infobutton.addEventListener("click", infobuttonClicked);
}



function infobuttonClicked()
{
	if (infopanel.style.display == 'none')
	{
		infopanel.style.display = 'block';
	}
	else
	{
		infopanel.style.display = 'none';
	}
}











/* rename the "DISCUSSION" talk page button to "DOCUMENTATION" */
//if there is such a button and we're in the Template: namespace
if (document.body.contains(document.getElementById("ca-talk")) && currentPageNamespaceID == 10) {
document.getElementById("ca-talk").innerHTML = '<svg class="cosmos-button-icon" width="28" height="28" viewBox="-2 -2 20 20"><path d="M 4 2 Q 4 0 6 0 L 14 0 Q 16 0 16 2 L 8 2 Q 8 0 6 0 Q 4 0 4 2 L 4 12 Q 4 14 2 14 Q 0 14 0 12 L 2 12 L 0 12 Q 0 14 2 14 L 12 14 Q 14 14 14 12 L 14 4"></path></svg><span class="cosmos-button-text">Documentation</span>';
}



/*Breeding Calculator injection script */


if (document.body.contains(document.getElementById("calculator")))  {

// include jQuery
mw.loader.load( 'https://mercstoria.miraheze.org/w/index.php?title=MediaWiki:JQuery.js&action=raw&ctype=text/javascript' );
//mw.loader.load( 'https://mercstoria.miraheze.org/w/index.php?title=MediaWiki:LazyLoad.js&action=raw&ctype=text/javascript' );

// main div for calculator content
var myDiv = document.getElementById("calculator");
myDiv.style.fontFamily = 'verdana';

//create div element for hidden database
var hiddenDiv = document.createElement("div");
hiddenDiv.setAttribute("id", "hiddenBox");
hiddenDiv.setAttribute("style", "display:none");
myDiv.appendChild(hiddenDiv);


var breedable_dragons = {
  "Uncommon": [],
  "Rare": [],
  "Epic": [],
  "Legendary": [],
};

var dragons;
var dragon_index;

var common_dragons;
var uncommon_dragons;
var rare_dragons;
var epic_dragons;
var legendary_dragons;

var selected_type;
var target_dragon;

// load data from Template into hiddenBox
// parse textContent into variable dragons
$("#hiddenBox").load('https://dragontamer.miraheze.org/wiki/Template:Dragon_List_Data/Js-calc #data-container', function(){

    var dataContainer = this.textContent;

    dragons = JSON.parse(dataContainer)['dragons'];

    dragon_index = {};
    
    common_dragons = {};
    uncommon_dragons = {};
    rare_dragons = {};
    epic_dragons = {};
    legendary_dragons = {};

    for (var i = 0; i < dragons.length; i++) {

       dragon_index[dragons[i]['name']] = i
       
       if (dragons[i]['rarity'] == "Common") { common_dragons[dragons[i]['name']] = [ dragons[i]['element1'] , dragons[i]['element2'] ] ; }
       if (dragons[i]['rarity'] == "Uncommon") { uncommon_dragons[dragons[i]['name']] = [ dragons[i]['element1'] , dragons[i]['element2'] ] ; }
       if (dragons[i]['rarity'] == "Rare") { rare_dragons[dragons[i]['name']] = [ dragons[i]['element1'] , dragons[i]['element2'] ] ; }
       if (dragons[i]['rarity'] == "Epic") { epic_dragons[dragons[i]['name']] = [ dragons[i]['element1'] , dragons[i]['element2'] ] ; }
       if (dragons[i]['rarity'] == "Legendary") { legendary_dragons[dragons[i]['name']] = [ dragons[i]['element1'] , dragons[i]['element2'] ] ; }

       if (dragons[i]['breedable']) {
          if (dragons[i]['rarity'] == "Uncommon") { breedable_dragons['Uncommon'].push(dragons[i]['name']); }
          if (dragons[i]['rarity'] == "Rare") { breedable_dragons['Rare'].push(dragons[i]['name']); }
          if (dragons[i]['rarity'] == "Epic") { breedable_dragons['Epic'].push(dragons[i]['name']); }
          if (dragons[i]['rarity'] == "Legendary") { breedable_dragons['Legendary'].push(dragons[i]['name']); }
       }
    }

    

    

    define_dragons(dragons,dragon_index,common_dragons,uncommon_dragons,rare_dragons,epic_dragons,legendary_dragons);

    
});



//create select rarity type element
var selectListType = document.createElement("select");
selectListType.setAttribute("id", "breed_target_type");
selectListType.setAttribute("onchange", "show_breed_select()");
selectListType.style.width = '100%';
selectListType.style.textAlign = 'center';
myDiv.appendChild(selectListType);

//add placeholder option
var optionType = document.createElement("option");
optionType.setAttribute("selected", "True");
optionType.setAttribute("hidden", "True");
optionType.text = "select Rarity";
selectListType.appendChild(optionType);

//create select element
var selectList = document.createElement("select");
selectList.setAttribute("id", "breed_target");
selectList.setAttribute("onchange", "calc_dragons()");
selectList.style.width = '100%';
selectList.style.textAlign = 'center';
myDiv.appendChild(selectList);

//add placeholder option
var option = document.createElement("option");
option.setAttribute("selected", "True");
option.setAttribute("hidden", "True");
option.text = "select Dragon to breed";
selectList.appendChild(option);

//create target table element
var targetTable = document.createElement("table");
targetTable.setAttribute("id", "target_table");
targetTable.style.borderCollapse = "collapse"; 
targetTable.style.width = '100%';

var tr = document.createElement('tr');
var td = document.createElement('td');
td.setAttribute("id", "target_banner");
td.style.textAlign = 'center';
tr.appendChild(td);
targetTable.appendChild(tr);
myDiv.appendChild(targetTable);


//create result table element
var resultTable = document.createElement("table");
resultTable.setAttribute("id", "result_table");
resultTable.style.width = '100%';
resultTable.style.borderCollapse = "collapse";
resultTable.style.display= 'table';
myDiv.appendChild(resultTable);

//create info element
var infofooter = document.createElement("div");
infofooter.setAttribute("id", "infofooter");
infofooter.style.width = '100%';
infofooter.style.textAlign = 'center';
myDiv.appendChild(infofooter);

var select = document.getElementById("breed_target");

var elements = {
  1: "Nature",
  2: "Fire",
  3: "Water",
  4: "Electric",
  5: "Earth",
  6: "Metal",
  7: "Psychic",
  8: "Light",
  9: "Dark",
  10: "Chaos",
};

var elements_img = {
  null : "",
  "Nature": "<img src='https://static.miraheze.org/dragontamerwiki/a/a7/Nature.png'>",
  "Fire": "<img src='https://static.miraheze.org/dragontamerwiki/3/30/Fire.png'>",
  "Water": "<img src='https://static.miraheze.org/dragontamerwiki/9/9d/Water.png'>",
  "Electric": "<img src='https://static.miraheze.org/dragontamerwiki/2/2f/Electric.png'>",
  "Earth": "<img src='https://static.miraheze.org/dragontamerwiki/1/1e/Earth.png'>",
  "Metal": "<img src='https://static.miraheze.org/dragontamerwiki/e/e1/Metal.png'>",
  "Psychic": "<img src='https://static.miraheze.org/dragontamerwiki/2/21/Psychic.png'>",
  "Light": "<img src='https://static.miraheze.org/dragontamerwiki/a/a6/Light.png'>",
  "Dark": "<img src='https://static.miraheze.org/dragontamerwiki/0/0e/Dark.png'>",
  "Chaos": "<img src='https://static.miraheze.org/dragontamerwiki/8/8f/Chaos.png'>",
};

var elements_img_tiny = {
  null : "",
  "Nature": "<img height='20' src='https://static.miraheze.org/dragontamerwiki/a/a7/Nature.png'>",
  "Fire": "<img height='20' src='https://static.miraheze.org/dragontamerwiki/3/30/Fire.png'>",
  "Water": "<img height='20' src='https://static.miraheze.org/dragontamerwiki/9/9d/Water.png'>",
  "Electric": "<img height='20' src='https://static.miraheze.org/dragontamerwiki/2/2f/Electric.png'>",
  "Earth": "<img height='20' src='https://static.miraheze.org/dragontamerwiki/1/1e/Earth.png'>",
  "Metal": "<img height='20' src='https://static.miraheze.org/dragontamerwiki/e/e1/Metal.png'>",
  "Psychic": "<img height='20' src='https://static.miraheze.org/dragontamerwiki/2/21/Psychic.png'>",
  "Light": "<img height='20' src='https://static.miraheze.org/dragontamerwiki/a/a6/Light.png'>",
  "Dark": "<img height='20' src='https://static.miraheze.org/dragontamerwiki/0/0e/Dark.png'>",
  "Chaos": "<img height='20' src='https://static.miraheze.org/dragontamerwiki/8/8f/Chaos.png'>",
};

var breedable_types = ["Uncommon","Rare","Epic","Legendary"];


// include all options for type
for (var i = 0; i < breedable_types.length; i++) {
  var opt = breedable_types[i];
  var el = document.createElement("option");
  el.textContent = opt;
  el.value = opt;
  breed_target_type.appendChild(el);
}


// end of open code
}


function define_dragons(input,index,common,uncommon,rare,epic,legendary) {
   dragons = input;
   dragon_index = index;
   common_dragons = common;
   uncommon_dragons = uncommon;
   rare_dragons = rare;
   epic_dragons = epic;
   legendary_dragons = legendary;

}

function print_row(left, right,dragontype, info) {
  // Find a <table> element with id="myTable":

  var target_table = document.getElementById("target_table");
  var table = document.getElementById("result_table");
  var infofooter = document.getElementById("infofooter");
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);

  var left_content = "<table style='width:100%'><tr>";
  for (var i = 0; i < left.length; i++) {
    left_content += "<td>" + left[i] + "</td><td style='text-align:right'>" + elements_img_tiny[dragontype[left[i]][0]] + elements_img_tiny[dragontype[left[i]][1]] + "</td><tr>";
  }

  var right_content = "<table style='width:100%'><tr>";
  for (var i = 0; i < right.length; i++) {
    right_content += "<td>" + right[i] + "</td><td style='text-align:right'>" + elements_img_tiny[dragontype[right[i]][0]] + elements_img_tiny[dragontype[right[i]][1]] + "</td><tr>";
  }

  target_table.style.background = "#949494";
  row.style.border = "solid #949494";
  cell1.innerHTML = left_content;
  cell1.style.border = "solid #949494";
  cell2.innerHTML = right_content;
  cell2.style.border = "solid #949494";
  infofooter.innerHTML = info;
}

function clear_table() {
  var result_table = document.getElementById("result_table");
  result_table.innerHTML = "";
}

function remove_item(list, item) {
  const index = list.indexOf(item);
  if (index > -1) {
    list.splice(index, 1);
  }
  return list;
}

function show_breed_select() {

selected_type = document.getElementById("breed_target_type").value;

clearOptions(document.getElementById('breed_target'));

if (selected_type == "Uncommon") { 
   for (var i = 0; i < breedable_dragons["Uncommon"].length; i++) {
      var opt = breedable_dragons["Uncommon"][i];
      var el = document.createElement("option");
      el.textContent = opt;
      el.value = opt;
      breed_target.appendChild(el);
   }
}

if (selected_type == "Rare") { 
   for (var i = 0; i < breedable_dragons["Rare"].length; i++) {
      var opt = breedable_dragons["Rare"][i];
      var el = document.createElement("option");
      el.textContent = opt;
      el.value = opt;
      breed_target.appendChild(el);
   }
}

if (selected_type == "Epic") { 
   for (var i = 0; i < breedable_dragons["Epic"].length; i++) {
      var opt = breedable_dragons["Epic"][i];
      var el = document.createElement("option");
      el.textContent = opt;
      el.value = opt;
      breed_target.appendChild(el);
   }
}

if (selected_type == "Legendary") { 
   for (var i = 0; i < breedable_dragons["Legendary"].length; i++) {
      var opt = breedable_dragons["Legendary"][i];
      var el = document.createElement("option");
      el.textContent = opt;
      el.value = opt;
      breed_target.appendChild(el);
   }
}

}

function clearOptions(selectElement) {
   var i, L = selectElement.options.length - 1;
   for(i = L; i >= 1; i--) {
      selectElement.remove(i);
   }
}


function calc_dragons() {
  selected_type = document.getElementById("breed_target_type").value;
  target_dragon = document.getElementById("breed_target").value;

  document.getElementById("target_banner").innerHTML = "<div class='shadowbutton'><a href='https://dragontamer.miraheze.org/wiki/Dragon:" + target_dragon + "'><img style='width: 300px;max-width: 100%;' src=" + dragons[dragon_index[target_dragon]]['img'] + "></a></div><br>" + elements_img[dragons[dragon_index[target_dragon]]['element1']] + elements_img[dragons[dragon_index[target_dragon]]['element2']];

clear_table();

 // compute uncommon logic
if (selected_type == "Uncommon"){

    var element1 = dragons[dragon_index[target_dragon]]['element1'];
    var element2 = dragons[dragon_index[target_dragon]]['element2'];

    var  result_dragon1 = [];
    var  result_dragon2 = [];

    Object.keys(common_dragons).forEach(function(key) {

    if (common_dragons[key][0] == element1){
    result_dragon1.push(key);
    }
    if (common_dragons[key][0] == element2){
    result_dragon2.push(key);
    }});

    print_row(result_dragon1, result_dragon2,common_dragons,"Consider that only the combination with the highest probability is listed.");

}

 // compute rare logic
if (selected_type == "Rare"){
    var element1 = dragons[dragon_index[target_dragon]]['element1'];
    var element2 = dragons[dragon_index[target_dragon]]['element2'];

    var  result_dragon1 = [];
    var  result_dragon2 = [];

    Object.keys(uncommon_dragons).forEach(function(key) {

    if ((uncommon_dragons[key][0] == element1) || (uncommon_dragons[key][1] == element1)){
    result_dragon1.push(key);
    }
    if ((uncommon_dragons[key][0] == element2) || (uncommon_dragons[key][1] == element2)){
    result_dragon2.push(key);
    }});

    print_row(result_dragon1, result_dragon2,uncommon_dragons,"Consider that only the combinations with the highest probability are listed.");

}

 // compute epic logic
if (selected_type == "Epic"){
	
}


  // compute legendary logic
if (selected_type == "Legendary"){

  var unshared_element = dragons[dragon_index[target_dragon]]['element1'];

  if ((unshared_element == "Light") || (unshared_element == "Dark") || (unshared_element == "Chaos")) {
    unshared_element = dragons[dragon_index[target_dragon]]['element2'];
  }

  if (dragons[dragon_index[target_dragon]]['element2'] == "Light") {
    set = ["Electric", "Earth", "Metal"];
  }
  if (dragons[dragon_index[target_dragon]]['element2'] == "Dark") {
    set = ["Nature", "Fire", "Water", "Psychic"];
  }

  // remove unshared_element from set
  set = remove_item(set, unshared_element);

  for (var i = 0; i < set.length; i++) {
    var shared_element = set[i];
    var epic_shared_element = [];

    // filter for shared element
    
    Object.keys(epic_dragons).forEach(function(key) {
    	//console.log(key, epic_dragons[key]);
      if ((epic_dragons[key][0] == shared_element) || (epic_dragons[key][1] == shared_element)){
        epic_shared_element.push(key);
      }
		});

    var epic_mains = [];
    var remove_list = [];

    epic_shared_element.forEach(function (item, index) {
      //console.log(item, index);
      //console.log("comparing " + dragon + " & " + unshared_element);
      if ((epic_dragons[item][0] == unshared_element) || (epic_dragons[item][1] == unshared_element)) {
        epic_mains.push(item);
        remove_list.push(item);
      }
    });


	remove_list.forEach(function (item, index) {
      epic_shared_element = remove_item(epic_shared_element, item);
    });

    print_row(epic_mains, epic_shared_element,epic_dragons,"");
  }
 }
}





/* *********************************************************************************************************************************/


/* call specific functions when the page loads */

// old browsers or already loaded
if (document.readyState!="loading") AfterPageLoad();
// modern browsers
else if (document.addEventListener) document.addEventListener("DOMContentLoaded", AfterPageLoad);



/* FUNCTIONS **********************************************************************************************************************/




function AfterPageLoad()
{
StartTabs();
MakeLinksMyLanguage();
}





/* Add "Special:MyLanguage/" into the links to automatically redirect to proper language pages */

function MakeLinksMyLanguage() {
allLinks = document.querySelectorAll("a");
var linkRegex = new RegExp('\/wiki\/(?!Special:)(?!'+currentPageName+'#)', 'g');

for (var i = 0; i < allLinks.length; i++)
{
// omit links to "Special:" and to the current page.
allLinks[i].href = allLinks[i].href.replace(linkRegex, '/wiki/Special:MyLanguage/');
}
}






/* Tabs */

function StartTabs()
{
buttons = document.getElementsByClassName("tab-button");
contents = document.getElementsByClassName("tab-content");

if (buttons.length > 0){
clickfunction(buttons[0]);

for (var i = 0; i < buttons.length; i++)
  {
    //console.log("Added Event Listener!");
    buttons[i].addEventListener("click", clickfunction);
  }
}
}



function clickfunction(thing) {
  if (thing.id == null)
    {
      thing = this;
    }
  
  //buttons
for (var i = 0; i < buttons.length; i++)
  {
    if (buttons[i].id == thing.id)
      {
        buttons[i].classList.remove("tab-disabled");
        buttons[i].classList.add("tab-active");
      }
    else
      {
        buttons[i].classList.remove("tab-active");
        buttons[i].classList.add("tab-disabled");
      }
  }
  //contents
  for (var i = 0; i < contents.length; i++)
  {
    if (contents[i].id == thing.id)
      {
        contents[i].style.display = 'block'
      }
    else
      {
        contents[i].style.display = 'none'
      }
  }
}