MediaWiki:Common.js: Difference between revisions
Jump to navigation
Jump to search
Wikiwikiwiki (talk | contribs) No edit summary |
Wikiwikiwiki (talk | contribs) No edit summary |
||
(44 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
/* Any JavaScript here will be loaded for all users on every page load. */ | /* Any JavaScript here will be loaded for all users on every page load. */ | ||
// DEBUG: Show the MediaWiki globals | |||
// console.log({'mw.config': mw.config}); | |||
// DEBUG: Prove this script works | |||
// console.log("Common.js is working"); | |||
(function() { | (function() { | ||
Line 29: | Line 35: | ||
document.cookie = 'cardbordersize=' + curVal + '; expires=' + CookieDate.toUTCString() + ';'; | document.cookie = 'cardbordersize=' + curVal + '; expires=' + CookieDate.toUTCString() + ';'; | ||
setBlackBorder(curVal); | setBlackBorder(curVal); | ||
} | |||
function getNewSize(width) { | |||
var newSize = 0; | |||
switch (width) { | |||
case 75: | |||
newSize = 4; | |||
break; | |||
case 100: | |||
newSize = 5; | |||
break; | |||
case 120: | |||
newSize = 6; | |||
break; | |||
case 150: | |||
newSize = 8; | |||
break; | |||
case 160: | |||
newSize = 9; | |||
break; | |||
case 200: | |||
newSize = 11; | |||
break; | |||
case 320: | |||
newSize = 11; | |||
break; | |||
case 375: | |||
newSize = 21; | |||
break; | |||
case 800: | |||
newSize = 21; | |||
break; | |||
} | |||
return newSize; | |||
} | } | ||
Line 35: | Line 75: | ||
for (var i = 0; i < elems.length; i++) { | for (var i = 0; i < elems.length; i++) { | ||
var elem = elems[i]; | var elem = elems[i]; | ||
var newSize = | var newSize = getNewSize(elem.offsetWidth); | ||
if (newSize > 0) { | if (newSize > 0) { | ||
if (bSize == 0) { | if (bSize == 0) { | ||
Line 79: | Line 90: | ||
} | } | ||
function addSiteOption(optionCookie, optionId, optionFunc) { | function initBlackBorder(e) { | ||
var elem = e.target.parentElement.parentElement.querySelector('img'); | |||
var curVal = getCookie('cardbordersize'); | |||
if (curVal > 0) { | |||
var newSize = getNewSize(elem.offsetWidth); | |||
if (newSize > 0) { | |||
if (elem.parentElement.className != 'cardborderchanger') { | |||
elem.outerHTML = '<span class="cardborderchanger" style="display:inline-block; padding:' + newSize + 'px; border-radius:' + (newSize - 1) + 'px; background:black;">' + elem.outerHTML + '</span>'; | |||
} else if (elem.parentElement.className == 'cardborderchanger') { | |||
elem.parentElement.style.padding = newSize + 'px'; | |||
elem.parentElement.style.borderRadius = (newSize - 1) + 'px'; | |||
} | |||
} | |||
} | |||
} | |||
function addSiteOption(optionCookie, optionId, optionText, optionDefault, optionFunc, optionSetFunc) { | |||
if (!document.querySelector('#' + optionId)) { | if (!document.querySelector('#' + optionId)) { | ||
var curVal = getCookie(optionCookie); | var curVal = getCookie(optionCookie); | ||
var checked = ''; | var checked = ''; | ||
if (curVal == '') { | if (curVal == '') { | ||
curVal = | curVal = optionDefault; | ||
} | } | ||
if (curVal > 0) { | |||
checked = 'checked'; | checked = 'checked'; | ||
optionSetFunc(curVal); | |||
} | } | ||
var pNavigationUl = document.querySelector('#p-navigation ul'); | var pNavigationUl = document.querySelector('#p-navigation ul'); | ||
var optionLi = document.createElement('li'); | var optionLi = document.createElement('li'); | ||
optionLi.innerHTML = '<label for="'+ optionId +'" style="cursor:pointer; user-select:none"> | optionLi.innerHTML = '<label for="'+ optionId +'" style="cursor:pointer; user-select:none">'+optionText+' </label><input style="height:8px" type="checkbox" id="'+ optionId +'" '+ checked +'>'; | ||
pNavigationUl.insertBefore(optionLi, null); | pNavigationUl.insertBefore(optionLi, null); | ||
var optionInput = document.querySelector('#' + optionId); | var optionInput = document.querySelector('#' + optionId); | ||
Line 115: | Line 143: | ||
elems[i].title = ''; | elems[i].title = ''; | ||
elems[i].addEventListener('mouseover', fixCardPopup); | elems[i].addEventListener('mouseover', fixCardPopup); | ||
elems[i].addEventListener('mouseover', initBlackBorder); | |||
} | } | ||
elems = document.querySelectorAll('.card-popup > span > img'); | |||
for (i = 0; i < elems.length; i++) { | |||
fixCardPopup(elems[i].parentElement); | |||
} | |||
} | |||
function toggleSidebarExpansions() { | |||
var optionInput = document.querySelector('#showExpansionsChanger'); | |||
var curVal = 0; | |||
if (optionInput.checked == true) { | |||
curVal = 1; | |||
} | |||
setSidebarExpansions(curVal); | |||
var CookieDate = new Date(); | |||
CookieDate.setFullYear(CookieDate.getFullYear() + 1); | |||
document.cookie = 'showexpansions=' + curVal + '; expires=' + CookieDate.toUTCString() + ';'; | |||
} | |||
function setSidebarExpansions(curVal) { | |||
if (curVal == 'cookie') { | |||
curVal = getCookie('showexpansions'); | |||
if (curVal == '') { | |||
curVal = 1; | |||
} | |||
} | |||
var visibility = 'none'; | |||
if (curVal == 1) { | |||
visibility = 'block'; | |||
} | |||
var elems = document.querySelectorAll('.showExpansionItem'); | |||
for (var i = 0; i < elems.length; i++) { | for (var i = 0; i < elems.length; i++) { | ||
elems[i].style.display = visibility; | |||
} | |||
} | |||
function addExpansionLink(link, title) { | |||
var pNavigationUl = document.querySelector('#p-navigation ul'); | |||
var optionLi = document.createElement('li'); | |||
optionLi.classList.add('showExpansionItem'); | |||
var urlBase = mw.config.values.wgArticlePath.replace('$1', ''); | |||
optionLi.innerHTML = '<a href="'+urlBase+link+'">'+title+'</a>'; | |||
pNavigationUl.insertBefore(optionLi, null); | |||
} | |||
function addExpansionSidebarLinks() { | |||
var pNavigationUl = document.querySelector('#p-navigation ul'); | |||
if (pNavigationUl && !document.querySelector('#expansionSidebarLinks')) { | |||
var expansionSidebarLinks = document.createElement('span'); | |||
expansionSidebarLinks.id = 'expansionSidebarLinks'; | |||
pNavigationUl.insertBefore(expansionSidebarLinks, null); | |||
// addExpansionLink('Expansions', 'Expansions'); | |||
addExpansionLink('Dominion (Base Set)', 'Dominion'); | |||
addExpansionLink('Intrigue', 'Intrigue'); | |||
addExpansionLink('Seaside', 'Seaside'); | |||
addExpansionLink('Alchemy', 'Alchemy'); | |||
addExpansionLink('Prosperity', 'Prosperity'); | |||
addExpansionLink('Cornucopia & Guilds', 'Cornucopia & Guilds'); | |||
addExpansionLink('Hinterlands', 'Hinterlands'); | |||
addExpansionLink('Dark Ages', 'Dark Ages'); | |||
addExpansionLink('Adventures', 'Adventures'); | |||
addExpansionLink('Empires', 'Empires'); | |||
addExpansionLink('Nocturne', 'Nocturne'); | |||
addExpansionLink('Renaissance', 'Renaissance'); | |||
addExpansionLink('Menagerie (expansion)', 'Menagerie'); | |||
addExpansionLink('Allies', 'Allies'); | |||
addExpansionLink('Plunder (expansion)', 'Plunder'); | |||
addExpansionLink('Rising Sun', 'Rising Sun'); | |||
addExpansionLink('Promo', 'Promos'); | |||
} | } | ||
} | } | ||
function | function sortSortables(startsort, sortby, sortid) { | ||
var cardsByName = []; | |||
var cardsByCostName = []; | |||
var hasNonZeroCost = false; | |||
var elems = startsort.querySelectorAll('.cardcost'); | |||
for (var i = 0; i < elems.length; i++) { | |||
var cardname = elems[i].querySelector('a').title; | |||
cardsByName.push([cardname, elems[i]]); | |||
for (var j = 0; j < elems[i].classList.length; j++) { | |||
var costplus = elems[i].classList[j]; | |||
var re = /^cost/i; | |||
var found = costplus.match(re); | |||
if (found) { | |||
var extrachar = ''; | |||
var lastchar = costplus.charAt(costplus.length - 1).toLowerCase(); | |||
if (lastchar != '*' && lastchar != '+' && lastchar != 'p' && lastchar != 'd') { | |||
extrachar = '!'; | |||
} | |||
var costpluscardname = costplus + extrachar + cardname; | |||
cardsByCostName.push([costpluscardname, elems[i]]); | |||
if (costplus != 'cost$00' && costplus != 'cost$00*' && costplus != 'cost$00+' && costplus != 'cost') { | |||
hasNonZeroCost = true; | |||
} | |||
} | |||
} | |||
} | |||
var sortlist = []; | |||
if (sortby == 'sortbyname') { | |||
cardsByName.sort(function(a, b) { | |||
var a0 = a[0].toLowerCase(); | |||
var b0 = b[0].toLowerCase(); | |||
if (a0 < b0) { | |||
return -1; | |||
} | |||
if (a0 > b0) { | |||
return 1; | |||
} | |||
return 0; | |||
}); | |||
sortlist = cardsByName; | |||
} else { | |||
cardsByCostName.sort(function(a, b) { | |||
var a0 = a[0].toLowerCase(); | |||
var b0 = b[0].toLowerCase(); | |||
if (a0 < b0) { | |||
return -1; | |||
} | |||
if (a0 > b0) { | |||
return 1; | |||
} | |||
return 0; | |||
}); | |||
sortlist = cardsByCostName; | |||
} | |||
for (i = 0; i < sortlist.length; i++) { | |||
startsort.insertBefore(sortlist[i][1], null); | |||
} | |||
elems = document.querySelectorAll('.switchsort.sortbyname.' + sortid); | |||
for (i = 0; i < elems.length; i++) { | |||
if (sortby == 'sortbyname' || !hasNonZeroCost) { | |||
elems[i].style.display = 'none'; | |||
} else { | |||
elems[i].style.display = ''; | |||
} | |||
} | |||
elems = document.querySelectorAll('.switchsort.sortbycost.' + sortid); | |||
for (i = 0; i < elems.length; i++) { | |||
if (sortby == 'sortbycost' || !hasNonZeroCost) { | |||
elems[i].style.display = 'none'; | |||
} else { | |||
elems[i].style.display = ''; | |||
} | |||
} | |||
} | } | ||
function startSort(e) { | |||
var sortby = ''; | |||
var sortid = ''; | |||
for (var i = 0; i < e.target.classList.length; i++) { | |||
var re = /^sortby/i; | |||
var found = e.target.classList[i].match(re); | |||
if (found) { | |||
sortby = e.target.classList[i]; | |||
} | |||
var re2 = /^sortid/i; | |||
var found2 = e.target.classList[i].match(re2); | |||
if (found2) { | |||
sortid = e.target.classList[i]; | |||
} | |||
} | |||
var elems = document.querySelectorAll('.startsort.' + sortid); | |||
for (i = 0; i < elems.length; i++) { | |||
sortSortables(elems[i], sortby, sortid); | |||
} | |||
} | |||
function initSorting() { | |||
var elems = document.querySelectorAll('.switchsort'); | |||
} | for (var i = 0; i < elems.length; i++) { | ||
elems[i].addEventListener('click', startSort); | |||
} | |||
elems = document.querySelectorAll('.switchsort.sortbyname'); | |||
for (i = 0; i < elems.length; i++) { | |||
elems[i].click(); | |||
} | |||
} | |||
function setCardSortBy(curVal) { | |||
if (curVal == 'cookie') { | |||
curVal = getCookie('cardsortby'); | |||
if (curVal == '') { | |||
curVal = 0; | |||
} | |||
} | |||
if (curVal == 1) { | |||
var elems = document.querySelectorAll('.switchsort.sortbycost'); | |||
for (var i = 0; i < elems.length; i++) { | |||
elems[i].click(); | |||
} | |||
} else { | |||
var elems = document.querySelectorAll('.switchsort.sortbyname'); | |||
for (var i = 0; i < elems.length; i++) { | |||
elems[i].click(); | |||
} | |||
} | |||
} | |||
function changeCardSortBy() { | |||
var optionInput = document.querySelector('#cardGallerySorter'); | |||
var curVal = 0; | |||
if (optionInput.checked) { | |||
curVal = 1; | |||
} | |||
var CookieDate = new Date(); | |||
CookieDate.setFullYear(CookieDate.getFullYear() + 1); | |||
document.cookie = 'cardsortby=' + curVal + '; expires=' + CookieDate.toUTCString() + ';'; | |||
setCardSortBy(curVal); | |||
} | |||
function | function requestImageFile(e, e0) { | ||
var | var title = ''; | ||
if (e && !e.target) { | |||
title = e; | |||
e = e0; | |||
} | |||
if (title == '' && (!e || !e.target.title || e.target.title.search(':') != -1)) { | |||
return; | |||
} else if (title == '') { | |||
title = 'File:' + e.target.title + '.jpg'; | |||
} | |||
title = title.replaceAll(' ', '_'); | |||
try { | |||
title = decodeURIComponent(title); | |||
} catch(error) { | |||
console.log(error); | |||
} | } | ||
/ | var requestUrl = mw.config.values.wgScriptPath + '/api.php?action=query&titles=' + title + '&prop=imageinfo&iiprop=url|size&format=json'; | ||
var req = new XMLHttpRequest(); | |||
req.addEventListener("load", function(e1) { | |||
var response1 = JSON.parse(e1.target.response); | |||
if (response1.query && response1.query.pages) { | |||
for (var page in response1.query.pages) { | |||
if ('imageinfo' in response1.query.pages[page]) { | |||
var baseTitle = title.replace('File:', '').replace('/', '_'); | |||
var img = response1.query.pages[page]['imageinfo'][0]; | |||
var imgUrl = ''; | |||
var size = 200; | |||
var ratio = img.height / img.width; | |||
if (img.width > img.height) { | |||
size = 320; | |||
ratio = img.width / img.height; | |||
} | |||
if (ratio < 1.5 || ratio > 1.7) { | |||
return; | |||
} | |||
if (img.url.search('/images') != -1) { | |||
imgUrl = img.url.replace('/images', '/images/thumb') + '/' + size + 'px-' + baseTitle; | |||
} else { | |||
imgUrl = img.url.replace(mw.config.values.wgWikiID + '/', mw.config.values.wgWikiID + '/thumb/') + '/' + size + 'px-' + baseTitle; | |||
} | |||
imgUrl = imgUrl.replaceAll(' ', '_'); | |||
try { | |||
imgUrl = decodeURIComponent(imgUrl); | |||
} catch(error) { | |||
console.log(error); | |||
} | |||
var styleLeft = ''; | |||
if (e.target.parentElement) { | |||
if (e.target.getBoundingClientRect().x > window.innerWidth / 2) { | |||
styleLeft = '-' + (size - e.target.offsetWidth + 20) + 'px'; | |||
} | |||
e.target.innerHTML = '<span style="white-space: nowrap;">' + e.target.innerHTML + '</span>'; | |||
var curVal = getCookie('cardbordersize'); | |||
var extra1 = ''; | |||
var extra2 = ''; | |||
if (curVal > 0) { | |||
var newSize = getNewSize(size); | |||
extra1 = '<span class="cardborderchanger" style="display:inline-block; padding:' + newSize + 'px; border-radius:' + (newSize - 1) + 'px; background:black;">'; | |||
extra2 = '</span>'; | |||
} | |||
e.target.outerHTML = '<span class="card-popup">' + e.target.outerHTML + '<span class="noprint" style="left:' + styleLeft + '">' + extra1 + '<img alt="' + baseTitle + '" src="' + imgUrl + '">' + extra2 + '</span></span>'; | |||
fixCardPopups(); | |||
} | |||
} else if (e && e.target && response1.query.pages[page]['title'].search('s.jpg') == -1) { | |||
var newTitle = response1.query.pages[page]['title'].replace('.jpg', 's.jpg'); | |||
if (newTitle.search('.jpg') != -1) { | |||
requestImageFile(newTitle, e); | |||
} | |||
} | |||
} | } | ||
} | } | ||
}); | |||
if ( | req.open("GET", requestUrl); | ||
req.send(); | |||
} | |||
function addLinkHoverRequests() { | |||
var elems = document.querySelectorAll('a'); | |||
for (var i = 0; i < elems.length; i++) { | |||
if (elems[i].parentElement && elems[i].parentElement.classList.contains('card-popup')) { | |||
// do nothing | |||
} else { | |||
elems[i].addEventListener('mouseover', requestImageFile, {once : true}); | |||
} | } | ||
} | } | ||
} | } | ||
function initCommon() { | |||
addSiteOption('cardsortby', 'cardGallerySorter', 'Sort by Cost:', 0, changeCardSortBy, setCardSortBy); | |||
addSiteOption('cardbordersize', 'cardBorderChanger', 'Card Border:', 0, changeBorder, setBlackBorder); | |||
fixCardPopups(); | |||
addSiteOption('showexpansions', 'showExpansionsChanger', 'Show Expansions:', 1, toggleSidebarExpansions, setSidebarExpansions); | |||
addExpansionSidebarLinks(); | |||
setSidebarExpansions('cookie'); | |||
initSorting(); | |||
setCardSortBy('cookie'); | |||
addLinkHoverRequests(); | |||
} | |||
initCommon(); | |||
})(); | })(); |
Latest revision as of 15:56, 16 September 2024
/* Any JavaScript here will be loaded for all users on every page load. */
// DEBUG: Show the MediaWiki globals
// console.log({'mw.config': mw.config});
// DEBUG: Prove this script works
// console.log("Common.js is working");
(function() {
function getCookie(cname) {
var name = cname + '=';
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return '';
}
function changeBorder() {
var optionInput = document.querySelector('#cardBorderChanger');
var curVal = 0;
if (optionInput.checked) {
curVal = 11;
}
var CookieDate = new Date();
CookieDate.setFullYear(CookieDate.getFullYear() + 1);
document.cookie = 'cardbordersize=' + curVal + '; expires=' + CookieDate.toUTCString() + ';';
setBlackBorder(curVal);
}
function getNewSize(width) {
var newSize = 0;
switch (width) {
case 75:
newSize = 4;
break;
case 100:
newSize = 5;
break;
case 120:
newSize = 6;
break;
case 150:
newSize = 8;
break;
case 160:
newSize = 9;
break;
case 200:
newSize = 11;
break;
case 320:
newSize = 11;
break;
case 375:
newSize = 21;
break;
case 800:
newSize = 21;
break;
}
return newSize;
}
function setBlackBorder(bSize) {
var elems = document.querySelectorAll('img');
for (var i = 0; i < elems.length; i++) {
var elem = elems[i];
var newSize = getNewSize(elem.offsetWidth);
if (newSize > 0) {
if (bSize == 0) {
newSize = 0;
}
if (elem.parentElement.className != 'cardborderchanger') {
elem.outerHTML = '<span class="cardborderchanger" style="display:inline-block; padding:' + newSize + 'px; border-radius:' + (newSize - 1) + 'px; background:black;">' + elem.outerHTML + '</span>';
} else if (elem.parentElement.className == 'cardborderchanger') {
elem.parentElement.style.padding = newSize + 'px';
elem.parentElement.style.borderRadius = (newSize - 1) + 'px';
}
}
}
}
function initBlackBorder(e) {
var elem = e.target.parentElement.parentElement.querySelector('img');
var curVal = getCookie('cardbordersize');
if (curVal > 0) {
var newSize = getNewSize(elem.offsetWidth);
if (newSize > 0) {
if (elem.parentElement.className != 'cardborderchanger') {
elem.outerHTML = '<span class="cardborderchanger" style="display:inline-block; padding:' + newSize + 'px; border-radius:' + (newSize - 1) + 'px; background:black;">' + elem.outerHTML + '</span>';
} else if (elem.parentElement.className == 'cardborderchanger') {
elem.parentElement.style.padding = newSize + 'px';
elem.parentElement.style.borderRadius = (newSize - 1) + 'px';
}
}
}
}
function addSiteOption(optionCookie, optionId, optionText, optionDefault, optionFunc, optionSetFunc) {
if (!document.querySelector('#' + optionId)) {
var curVal = getCookie(optionCookie);
var checked = '';
if (curVal == '') {
curVal = optionDefault;
}
if (curVal > 0) {
checked = 'checked';
optionSetFunc(curVal);
}
var pNavigationUl = document.querySelector('#p-navigation ul');
var optionLi = document.createElement('li');
optionLi.innerHTML = '<label for="'+ optionId +'" style="cursor:pointer; user-select:none">'+optionText+' </label><input style="height:8px" type="checkbox" id="'+ optionId +'" '+ checked +'>';
pNavigationUl.insertBefore(optionLi, null);
var optionInput = document.querySelector('#' + optionId);
optionInput.addEventListener('change', optionFunc);
}
}
function fixCardPopup(e) {
var elem;
if (e.target) {
elem = e.target.parentElement.nextElementSibling;
} else {
elem = e;
}
if (elem.getBoundingClientRect().x > window.innerWidth / 2) {
elem.style.left = '-' + (elem.offsetWidth - elem.previousElementSibling.offsetWidth + 20) + 'px';
}
}
function fixCardPopups() {
var elems = document.querySelectorAll('.card-popup > a');
for (var i = 0; i < elems.length; i++) {
elems[i].title = '';
elems[i].addEventListener('mouseover', fixCardPopup);
elems[i].addEventListener('mouseover', initBlackBorder);
}
elems = document.querySelectorAll('.card-popup > span > img');
for (i = 0; i < elems.length; i++) {
fixCardPopup(elems[i].parentElement);
}
}
function toggleSidebarExpansions() {
var optionInput = document.querySelector('#showExpansionsChanger');
var curVal = 0;
if (optionInput.checked == true) {
curVal = 1;
}
setSidebarExpansions(curVal);
var CookieDate = new Date();
CookieDate.setFullYear(CookieDate.getFullYear() + 1);
document.cookie = 'showexpansions=' + curVal + '; expires=' + CookieDate.toUTCString() + ';';
}
function setSidebarExpansions(curVal) {
if (curVal == 'cookie') {
curVal = getCookie('showexpansions');
if (curVal == '') {
curVal = 1;
}
}
var visibility = 'none';
if (curVal == 1) {
visibility = 'block';
}
var elems = document.querySelectorAll('.showExpansionItem');
for (var i = 0; i < elems.length; i++) {
elems[i].style.display = visibility;
}
}
function addExpansionLink(link, title) {
var pNavigationUl = document.querySelector('#p-navigation ul');
var optionLi = document.createElement('li');
optionLi.classList.add('showExpansionItem');
var urlBase = mw.config.values.wgArticlePath.replace('$1', '');
optionLi.innerHTML = '<a href="'+urlBase+link+'">'+title+'</a>';
pNavigationUl.insertBefore(optionLi, null);
}
function addExpansionSidebarLinks() {
var pNavigationUl = document.querySelector('#p-navigation ul');
if (pNavigationUl && !document.querySelector('#expansionSidebarLinks')) {
var expansionSidebarLinks = document.createElement('span');
expansionSidebarLinks.id = 'expansionSidebarLinks';
pNavigationUl.insertBefore(expansionSidebarLinks, null);
// addExpansionLink('Expansions', 'Expansions');
addExpansionLink('Dominion (Base Set)', 'Dominion');
addExpansionLink('Intrigue', 'Intrigue');
addExpansionLink('Seaside', 'Seaside');
addExpansionLink('Alchemy', 'Alchemy');
addExpansionLink('Prosperity', 'Prosperity');
addExpansionLink('Cornucopia & Guilds', 'Cornucopia & Guilds');
addExpansionLink('Hinterlands', 'Hinterlands');
addExpansionLink('Dark Ages', 'Dark Ages');
addExpansionLink('Adventures', 'Adventures');
addExpansionLink('Empires', 'Empires');
addExpansionLink('Nocturne', 'Nocturne');
addExpansionLink('Renaissance', 'Renaissance');
addExpansionLink('Menagerie (expansion)', 'Menagerie');
addExpansionLink('Allies', 'Allies');
addExpansionLink('Plunder (expansion)', 'Plunder');
addExpansionLink('Rising Sun', 'Rising Sun');
addExpansionLink('Promo', 'Promos');
}
}
function sortSortables(startsort, sortby, sortid) {
var cardsByName = [];
var cardsByCostName = [];
var hasNonZeroCost = false;
var elems = startsort.querySelectorAll('.cardcost');
for (var i = 0; i < elems.length; i++) {
var cardname = elems[i].querySelector('a').title;
cardsByName.push([cardname, elems[i]]);
for (var j = 0; j < elems[i].classList.length; j++) {
var costplus = elems[i].classList[j];
var re = /^cost/i;
var found = costplus.match(re);
if (found) {
var extrachar = '';
var lastchar = costplus.charAt(costplus.length - 1).toLowerCase();
if (lastchar != '*' && lastchar != '+' && lastchar != 'p' && lastchar != 'd') {
extrachar = '!';
}
var costpluscardname = costplus + extrachar + cardname;
cardsByCostName.push([costpluscardname, elems[i]]);
if (costplus != 'cost$00' && costplus != 'cost$00*' && costplus != 'cost$00+' && costplus != 'cost') {
hasNonZeroCost = true;
}
}
}
}
var sortlist = [];
if (sortby == 'sortbyname') {
cardsByName.sort(function(a, b) {
var a0 = a[0].toLowerCase();
var b0 = b[0].toLowerCase();
if (a0 < b0) {
return -1;
}
if (a0 > b0) {
return 1;
}
return 0;
});
sortlist = cardsByName;
} else {
cardsByCostName.sort(function(a, b) {
var a0 = a[0].toLowerCase();
var b0 = b[0].toLowerCase();
if (a0 < b0) {
return -1;
}
if (a0 > b0) {
return 1;
}
return 0;
});
sortlist = cardsByCostName;
}
for (i = 0; i < sortlist.length; i++) {
startsort.insertBefore(sortlist[i][1], null);
}
elems = document.querySelectorAll('.switchsort.sortbyname.' + sortid);
for (i = 0; i < elems.length; i++) {
if (sortby == 'sortbyname' || !hasNonZeroCost) {
elems[i].style.display = 'none';
} else {
elems[i].style.display = '';
}
}
elems = document.querySelectorAll('.switchsort.sortbycost.' + sortid);
for (i = 0; i < elems.length; i++) {
if (sortby == 'sortbycost' || !hasNonZeroCost) {
elems[i].style.display = 'none';
} else {
elems[i].style.display = '';
}
}
}
function startSort(e) {
var sortby = '';
var sortid = '';
for (var i = 0; i < e.target.classList.length; i++) {
var re = /^sortby/i;
var found = e.target.classList[i].match(re);
if (found) {
sortby = e.target.classList[i];
}
var re2 = /^sortid/i;
var found2 = e.target.classList[i].match(re2);
if (found2) {
sortid = e.target.classList[i];
}
}
var elems = document.querySelectorAll('.startsort.' + sortid);
for (i = 0; i < elems.length; i++) {
sortSortables(elems[i], sortby, sortid);
}
}
function initSorting() {
var elems = document.querySelectorAll('.switchsort');
for (var i = 0; i < elems.length; i++) {
elems[i].addEventListener('click', startSort);
}
elems = document.querySelectorAll('.switchsort.sortbyname');
for (i = 0; i < elems.length; i++) {
elems[i].click();
}
}
function setCardSortBy(curVal) {
if (curVal == 'cookie') {
curVal = getCookie('cardsortby');
if (curVal == '') {
curVal = 0;
}
}
if (curVal == 1) {
var elems = document.querySelectorAll('.switchsort.sortbycost');
for (var i = 0; i < elems.length; i++) {
elems[i].click();
}
} else {
var elems = document.querySelectorAll('.switchsort.sortbyname');
for (var i = 0; i < elems.length; i++) {
elems[i].click();
}
}
}
function changeCardSortBy() {
var optionInput = document.querySelector('#cardGallerySorter');
var curVal = 0;
if (optionInput.checked) {
curVal = 1;
}
var CookieDate = new Date();
CookieDate.setFullYear(CookieDate.getFullYear() + 1);
document.cookie = 'cardsortby=' + curVal + '; expires=' + CookieDate.toUTCString() + ';';
setCardSortBy(curVal);
}
function requestImageFile(e, e0) {
var title = '';
if (e && !e.target) {
title = e;
e = e0;
}
if (title == '' && (!e || !e.target.title || e.target.title.search(':') != -1)) {
return;
} else if (title == '') {
title = 'File:' + e.target.title + '.jpg';
}
title = title.replaceAll(' ', '_');
try {
title = decodeURIComponent(title);
} catch(error) {
console.log(error);
}
var requestUrl = mw.config.values.wgScriptPath + '/api.php?action=query&titles=' + title + '&prop=imageinfo&iiprop=url|size&format=json';
var req = new XMLHttpRequest();
req.addEventListener("load", function(e1) {
var response1 = JSON.parse(e1.target.response);
if (response1.query && response1.query.pages) {
for (var page in response1.query.pages) {
if ('imageinfo' in response1.query.pages[page]) {
var baseTitle = title.replace('File:', '').replace('/', '_');
var img = response1.query.pages[page]['imageinfo'][0];
var imgUrl = '';
var size = 200;
var ratio = img.height / img.width;
if (img.width > img.height) {
size = 320;
ratio = img.width / img.height;
}
if (ratio < 1.5 || ratio > 1.7) {
return;
}
if (img.url.search('/images') != -1) {
imgUrl = img.url.replace('/images', '/images/thumb') + '/' + size + 'px-' + baseTitle;
} else {
imgUrl = img.url.replace(mw.config.values.wgWikiID + '/', mw.config.values.wgWikiID + '/thumb/') + '/' + size + 'px-' + baseTitle;
}
imgUrl = imgUrl.replaceAll(' ', '_');
try {
imgUrl = decodeURIComponent(imgUrl);
} catch(error) {
console.log(error);
}
var styleLeft = '';
if (e.target.parentElement) {
if (e.target.getBoundingClientRect().x > window.innerWidth / 2) {
styleLeft = '-' + (size - e.target.offsetWidth + 20) + 'px';
}
e.target.innerHTML = '<span style="white-space: nowrap;">' + e.target.innerHTML + '</span>';
var curVal = getCookie('cardbordersize');
var extra1 = '';
var extra2 = '';
if (curVal > 0) {
var newSize = getNewSize(size);
extra1 = '<span class="cardborderchanger" style="display:inline-block; padding:' + newSize + 'px; border-radius:' + (newSize - 1) + 'px; background:black;">';
extra2 = '</span>';
}
e.target.outerHTML = '<span class="card-popup">' + e.target.outerHTML + '<span class="noprint" style="left:' + styleLeft + '">' + extra1 + '<img alt="' + baseTitle + '" src="' + imgUrl + '">' + extra2 + '</span></span>';
fixCardPopups();
}
} else if (e && e.target && response1.query.pages[page]['title'].search('s.jpg') == -1) {
var newTitle = response1.query.pages[page]['title'].replace('.jpg', 's.jpg');
if (newTitle.search('.jpg') != -1) {
requestImageFile(newTitle, e);
}
}
}
}
});
req.open("GET", requestUrl);
req.send();
}
function addLinkHoverRequests() {
var elems = document.querySelectorAll('a');
for (var i = 0; i < elems.length; i++) {
if (elems[i].parentElement && elems[i].parentElement.classList.contains('card-popup')) {
// do nothing
} else {
elems[i].addEventListener('mouseover', requestImageFile, {once : true});
}
}
}
function initCommon() {
addSiteOption('cardsortby', 'cardGallerySorter', 'Sort by Cost:', 0, changeCardSortBy, setCardSortBy);
addSiteOption('cardbordersize', 'cardBorderChanger', 'Card Border:', 0, changeBorder, setBlackBorder);
fixCardPopups();
addSiteOption('showexpansions', 'showExpansionsChanger', 'Show Expansions:', 1, toggleSidebarExpansions, setSidebarExpansions);
addExpansionSidebarLinks();
setSidebarExpansions('cookie');
initSorting();
setCardSortBy('cookie');
addLinkHoverRequests();
}
initCommon();
})();