MediaWiki:Common.js

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

(function () {

var MultiString = function(f) {
  return f.toString().split('\n').slice(1, -1).join('\n');
}

var heroesStyleCSS = MultiString(function() {/**
      // Backgrounds
      body {
        background: url('https://heroes.thelazy.net/images/9/9f/Shroud.png')
      }
  
      #mw-head-base, #mw-head, #mw-page-base {
        background: transparent;
      }
  
      // Dark inner area
      table,
      div.mw-body-content.mw-content-ltr {
        color:  white;
        background: url('https://heroes.thelazy.net/images/2/2a/Leather-dark.png');
      }
  
      // Items with borders
      div.mw-body-content.mw-content-ltr,
      #mw-content-text
      {
        border-image-source: url('https://heroes.thelazy.net/images/c/c7/Border-gold.png');
        border-image-slice: 8 9 8 9;
        border-image-width: 8px 9px 8px 9px;
        border-image-outset: 8px 9px 8px 9px;
        border-image-repeat: repeat repeat;
      }
  
      // Thick blue border
      #content {
        border-image-source: url('https://heroes.thelazy.net/images/4/43/Border-blue.png');
        border-image-slice: 48 48 48 48;
        border-image-width: 48px 48px 48px 48px;
        border-image-outset: 0px 0px 0px 0px;
        border-image-repeat: repeat repeat;
      }
  
      // Thick red border
      .vector-menu-content {
        border-image-source: url('https://heroes.thelazy.net/images/2/2a/Border-red.png');
        border-image-slice: 48 48 48 48;
        border-image-width: 48px 48px 48px 48px;
        border-image-outset: 0px 0px 0px 0px;
        border-image-repeat: repeat repeat;
      }
  
      .vector-legacy-sidebar .vector-menu-portal .vector-menu-content {
        padding: 24px;
        margin: 0;
        background: url('https://heroes.thelazy.net/images/8/82/Marble.png');
      }
  
      #content {
        background: url('https://heroes.thelazy.net/images/3/3d/Leather.png');
        color:  white;
        margin-top: 4px;
      }
  
      #content {
        padding:  48px;
      }
  
      // Headings
      h1, h2, h3, h4 {
        color:  white;
      }
  
      // Links
      a, a:visited {
        color: lightblue !important;
      }
  
      // Font colors
      .vector-menu-heading-label, .mw-redirectedfrom {
        color: white !important;
      }
  
      // Tabs are annoying
      #left-navigation .vector-menu-tabs {
        border: 2px solid darkgoldenrod;
      }
      .vector-menu-tabs .vector-menu-content {
        border: 2px solid black;
      }
      #left-navigation .vector-menu-content-list {
        border: 2px solid darkgoldenrod;
      }
      li.mw-list-item {
        background: transparent !important;
        padding:  0.2em 0.6em;
      }
      .vector-menu-tabs .vector-menu-content-list li:not(:last-child) {
        border-right:  2px solid goldenrod;
      }
  
      .vector-menu-tabs-legacy li a {
        background: none;
        height: initial;
        padding:  0;
        margin:  0;
      }
  
      // Top menu list is different
      #p-personal .vector-menu-content-list {
        border: none;
      }
  
      #mw-content-text {
        padding: 8px;
      }
  
      // Disable tools header
      #p-tb-label {
        display: none;
      }
  
      // Disable sliver of image
      #p-views {
        background: none;
        height: initial;
      }
**/});

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 showElements(desc, linkSelector) {
  var elems = document.querySelectorAll(desc);
  for (var i = 0; i < elems.length; i++) {
    elems[i].style = '';
  }
  elems = document.querySelectorAll('.' + linkSelector + desc);
  for (var i = 0; i < elems.length; i++) {
    elems[i].style = 'user-select:none; cursor: pointer; color: rgb(102, 177, 250);';
  }
}

function hideElements(desc) {
  var elems = document.querySelectorAll(desc);
  for (var i = 0; i < elems.length; i++) {
    elems[i].style = 'display:none;';
  }
  elems = document.querySelectorAll('.initialOnly');
  for (var i = 0; i < elems.length; i++) {
    elems[i].style = 'display:none;';
  }
}

function togglePreference(linkSelector, cookieName, cookie1, cookie2, link1, link2) {
  var preference = getCookie(cookieName);
  var switchView = document.querySelector('#' + linkSelector);
  var switchView2 = document.querySelector('#' + linkSelector + '2');
  if (preference == cookie2) {
    preference = cookie1;
    switchView.textContent = link2;
    switchView2.textContent = link2;
    hideElements('.only' + cookie2);
    showElements('.only' + cookie1, linkSelector);
  } else {
    preference = cookie2;
    switchView.textContent = link1;
    switchView2.textContent = link1;
    hideElements('.only' + cookie1);
    showElements('.only' + cookie2, linkSelector);
  }
  var CookieDate = new Date();
  CookieDate.setFullYear(CookieDate.getFullYear() + 1);
  document.cookie = cookieName + '=' + preference + '; expires=' + CookieDate.toUTCString() + ';';
}

function togglePreferredExpansion() {
  togglePreference('switchExpansion', 'preferredExpansion', 'hota', 'sod', 'Enable HotA', 'Disable HotA', 'Horn of the Abyss');
}

function togglePreferredView() {
  togglePreference('switchView', 'preferredView', 'modern', 'legacy', 'Enable Modern', 'Enable Legacy', 'Legacy/Modern');
}

function toggleDoR() {
  togglePreference('switchDoR', 'preferredDoR', 'dor', 'nodor', 'Enable DoR', 'Disable DoR', 'Day of Reckoning');
}

function toggleHeroesStyle() {
  togglePreference('switchHeroesStyle', 'heroesStyle', 'heroesStyleDisabled', 'heroesStyleEnabled', 'Enable H3CSS', 'Disable H3CSS', 'Heroes Style');
  var preference = getCookie('heroesStyle');
  console.log(preference);
  if (preference == 'heroesStyleEnabled') {
    const sheet = new CSSStyleSheet();
    sheet.replaceSync(heroesStyleCSS);
    document.adoptedStyleSheets.push(sheet);
  } else {
    while (document.adoptedStyleSheets.pop());
  }
}

function initPreference(linkSelector, cookieName, cookie1, cookie2, link1, link2, prefName, toggleFunc) {
  var userlink = document.querySelector('#pt-anonuserpage');
  if (!userlink) {
    userlink = document.querySelector('#pt-userpage');
  }
  if (userlink) {
    var switchView = document.querySelector('#' + linkSelector);
    if (!switchView) {
      switchView = document.createElement('li');
      switchView.style = 'user-select:none; cursor: pointer; color: rgb(102, 177, 250);';
      switchView.id = linkSelector;
      switchView.title = prefName + ' (toggle)';
      switchView.addEventListener('click', toggleFunc);
      userlink.parentElement.insertBefore(switchView, null);
      var elems = document.querySelectorAll('.' + linkSelector);
      for (var i = 0; i < elems.length; i++) {
        elems[i].addEventListener('click', toggleFunc);
        elems[i].style = 'user-select:none; cursor: pointer; color: rgb(102, 177, 250);';
      }
    }
    if (getCookie(cookieName) == cookie2) {
      switchView.textContent = link1;
      hideElements('.only' + cookie1);
      showElements('.only' + cookie2);
    } else {
      switchView.textContent = link2;
      hideElements('.only' + cookie2);
      showElements('.only' + cookie1);
    }
  }
  var mwpanelul = document.querySelector('#mw-panel ul');
  if (mwpanelul) {
    var switchView2 = document.querySelector('#' + linkSelector + '2');
    if (!switchView2) {
      switchView2 = document.createElement('li');
      switchView2.style = 'user-select:none; cursor: pointer; color: rgb(102, 177, 250);';
      switchView2.id = linkSelector + '2';
      switchView2.title = prefName + ' (toggle)';
      switchView2.addEventListener('click', toggleFunc);
      mwpanelul.insertBefore(switchView2, null);
    }
    if (getCookie(cookieName) == cookie2) {
      switchView2.textContent = link1;
      hideElements('.only' + cookie1);
      showElements('.only' + cookie2);
    } else {
      switchView2.textContent = link2;
      hideElements('.only' + cookie2);
      showElements('.only' + cookie1);
    }
  }
}

function removeTooltips() {
  var elems = document.querySelectorAll('.mainpage .tabs-content div div a');
  for (var i = 0; i < elems.length; i++) {
    elems[i].title = '';
  }
}

function removeUnwantedTitles() {
  var elems = document.querySelectorAll('#p-logo a');
  for (var i = 0; i < elems.length; i++) {
    elems[i].title = '';
  }
}

function initCommon() {
  initPreference('switchExpansion', 'preferredExpansion', 'hota', 'sod', 'Enable HotA', 'Disable HotA', 'Horn of the Abyss', togglePreferredExpansion);
  initPreference('switchDoR', 'preferredDoR', 'dor', 'nodor', 'Enable DoR', 'Disable DoR', 'Day of Reckoning', toggleDoR);
  var mainpage = document.querySelector('.mainpage.onlysod.onlyhota');
  if (mainpage) {
    initPreference('switchView', 'preferredView', 'modern', 'legacy', 'Enable Modern', 'Enable Legacy', 'Legacy/Modern', togglePreferredView);
    removeTooltips();
  }
  removeUnwantedTitles();
  initPreference('switchHeroesStyle', 'heroesStyle', 'heroesStyleDisabled', 'heroesStyleEnabled',  'Disable H3CSS', 'Enable H3CSS', 'Heroes Style', toggleHeroesStyle);
}

window.addEventListener('readystatechange', function () {
  initCommon();
});

window.addEventListener('DOMContentLoaded', function () {
  initCommon();
});

window.addEventListener('load', function () {
  initCommon();
});

initCommon();

})();