User:LeafWolf233/common.js

/*--For the custom filter on the character table (Ver. 1.1)--*/

/*-Varibles-*/ //datas from the table, not including the header const table = document.querySelectorAll("tr:not(#header)");

//buttons const tantouFilter = document.querySelector("div#Tantou"); const wakiFilter = document.querySelector("div#Wakizashi"); const uchiFilter = document.querySelector("div#Uchigatana"); const tachiFilter = document.querySelector("div#Tachi"); const ootachiFilter = document.querySelector("div#Ootachi"); const yariFilter = document.querySelector("div#Yari"); const nagiFilter = document.querySelector("div#Naginata"); const tsurugiFilter = document.querySelector("div#Tsurugi"); const tokuFilter = document.querySelector("div#Toku"); const kiwameFilter = document.querySelector("div#Kiwame");

//arraies that store differrent types of clicked buttons const types = []; const kiwameStatus = []; const obtainWay = []; const allButtons = [types, kiwameStatus, obtainWay]; //path for buttons' image const waki = "https://vignette.wikia.nocookie.net/touken-ranbu/images/b/b8/Wakizashi.png"; const wakiClicked = "https://vignette.wikia.nocookie.net/touken-ranbu/images/a/a4/Wakizashi-r3.png"; const yari = "https://vignette.wikia.nocookie.net/touken-ranbu/images/b/b4/Yari.png"; const kiwame = "https://vignette.wikia.nocookie.net/a-normal-playground/images/5/56/Kiwame.png"; const generalClicked = "https://vignette.wikia.nocookie.net/touken-ranbu/images/6/62/Clicked-button.png"; //for testing purpose

/*-Calling functions-*/ //bind events to buttons wakiFilter.addEventListener("click", function {buttonOperation(this, types, waki, wakiClicked)}); yariFilter.addEventListener("click", function {buttonOperation(this, types, yari, generalClicked)}); kiwameFilter.addEventListener("click", function {buttonOperation(this, kiwameStatus, kiwame, generalClicked)});

/*-Functions-*/ //main function [the code is inspired by Kévin Bibollet from stack overflow] function buttonOperation(clickedElement, buttonArray, unclickedImageSrc, clickedImageSrc){ //store button's img element and img's src for future use currentImg = clickedElement.querySelector("img"); currentImgSrc = currentImg.getAttribute("src"); //is the button being clicked isFiltered = (currentImgSrc === clickedImageSrc); //reset the whole table for the convience of filtering //button was clicked, undo the filtering if(isFiltered){ currentImg.setAttribute("src", unclickedImageSrc); //remove the id from the array removeFromArray(clickedElement.id, buttonArray); //if no other button is in clicked status, set the table back to dafault display if(checkMainArrayEmptiness){ resetTable; }else{ return; //filter; }   }else{ //button isn't clicked, start filtering currentImg.setAttribute("src", clickedImageSrc); //store id into array buttonArray.push(clickedElement.id); hideAllRows; //filter; } }

//reset the filtering on table, is used in buttonOperation function resetTable{ for(i = 0; i < table.length; i++){ table[i].style.display = ""; } }

//hide all rows of the table function hideAllRows{ for(i = 0; i < table.length; i++){ table[i].style.display = "none"; } }

//remove id from the array based on the input, is used in buttonOperation function removeFromArray(inputID, array){ var tempIndex = array.indexOf(inputID); if(tempIndex !== -1){ array.splice(tempIndex, 1); } }

//check whether the array of buttons is empty, is return true if yes, false as no, used in buttonOperation function checkMainArrayEmptiness{ for(i = 0; i < allButtons.length; i++){ if(allButtons[i].length !== 0){ return false; }   }    return true; }

//filtering the table based on the array which store all clicked button, is used in buttonOperation. The code is written by Elphas Tori from stack overflow function filter{ var combinations = allButtons.reduce(function (previous, current) {

if (current.length === 0) return previous;

if (previous.length === 0) return current;

const accumulate = current.map(function (x){

return previous.map(function(y) {

// Make one array if the accumulated result is an array if (y.length > 0) return y.concat(x);

return [x, y]; });   });

// Flatten combinations return accumulate.reduce( function (acc, x) {       return acc.concat(x);    }); });

combinations.forEach(function (combination) {        checkIDFromArray(combination);     }); }

//check whether this column has all the values from array, return true if is, vise versa function checkIDFromArray(inputArray){ var childElements; var matched = 0; var sameAmountID; //loop through the whole table's html for each row a time for(i = 0; i < table.length; i++){ //a collection of children of a table row childElements = table[i].children; //loop through all children till find the matched html for(var p = 0; p < childElements.length; p++){ //loop through the inputArray to compare with child element for(var q = 0; q < inputArray.length; q++){ if(childElements[p].innerHTML.includes(inputArray[q])){ matched++; }               //quit the loop if the row have same amounts of matched id compare to input Array, also set display to "" sameAmountID = (matched === inputArray.length); if(sameAmountID){ table[i].style.display = ""; break; }           }        }        matched = 0; } }

/* old codes //the generator that obtain all the possible combination of values in allButtons's rows, and return them one by one, is used in filter [the code is written by Mark Meyer from stack overflow] //sadly it's a ES6 feature which is not supported by fandom q-q

function* productGen(array, cur = []){ if (array.length < 1){ yield cur; }else{ for (var item in array[0]) { yield* productGen(array.slice(1), [...cur, item]); } } }

function filter(clickedElement, data, unclickedImageSrc, clickedImageSrc){ //store button's img and img's src for future use currentImg = clickedElement.querySelector("img"); currentImgSrc = currentImg.getAttribute("src"); //is the button being clicked isFiltered = (currentImgSrc === clickedImageSrc); if(isFiltered){ //button was clicked, undo the filtering currentImg.setAttribute("src", unclickedImageSrc); for(i = 0; i < data.length; i++){ if(!data[i].innerHTML.includes(clickedElement.id)){ data[i].parentElement.style.display = ""; }       }    }else{ //button isn't clicked, start filtering currentImg.setAttribute("src", clickedImageSrc); for(i = 0; i < data.length; i++){ if(!data[i].innerHTML.includes(clickedElement.id)){ data[i].parentElement.style.display = "none"; }       }    } }