MediaWiki:Common.js

/* 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+'&nbsp;</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 = '/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:', '');
          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;
          }
          imgUrl = img.url.replace('/images', '/images/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();

})();