Toggle menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Citizen.js: Difference between revisions

MediaWiki interface page
mNo edit summary
Tag: Reverted
No edit summary
 
(16 intermediate revisions by the same user not shown)
Line 2: Line 2:
// Discord Button
// Discord Button
$(document).ready( function () {
$(document).ready( function () {
   $('.citizen-drawer').after($('<div class="citizen-discord citizen-header__item mw-checkbox-hack-container"><a href="https://discord.gg/gwuGnK3"><div class="citizen-discord__button citizen-header__button"><label id="citizen-discord__buttonCheckbox" class="mw-checkbox-hack-button citizen-header__buttonCheckbox" for="citizen-discord__checkbox" title="Join us on Discord!" aria-hidden="true"><span>Join us on Discord!</span></label><span class="citizen-ui-icon mw-ui-icon-discord"></div></a></div>'));
   $('.citizen-drawer').after($('<div class="citizen-discord citizen-header__item"><a href="https://discord.gg/gwuGnK3"><div class="citizen-discord__button citizen-header__button"><div class="disc-icon"><label id="citizen-discord__buttonCheckbox" class="mw-checkbox-hack-button citizen-header__buttonCheckbox" for="citizen-discord__checkbox" title="Join us on Discord!" aria-hidden="true"><span>Join us on Discord!</span></label></div></div></a></div>'));
});
});


Line 10: Line 10:
   $('#n-Posts > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-news"></span>'));
   $('#n-Posts > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-news"></span>'));
   $('#n-Search > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-search"></span>'));
   $('#n-Search > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-search"></span>'));
  $('#t-specialpages > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-specialpage"></span>'));
  $('#t-upload > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-upload"></span>'));
//possibly excessive
//possibly excessive
   $('#n-About > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-about"></span>'));
   $('#n-About > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-about"></span>'));
Line 35: Line 33:
});
});


// Randomly select background from array (light only, no path, no extension)
// Dynamic header
var bgArray = [
$(document).ready(function () {
              'arena',
  if ($.inArray("Dynamic background", mw.config.get("wgCategories")) > -1) {
              'beach',
    var mwBody = document.getElementById("content");
              //'blackmont',
    var newDiv = document.createElement("div");
              'casino',
    newDiv.setAttribute("class", "header-hero");
              'castle1',
    newDiv.innerHTML = '<div class="header-hero-image" style="background-image: linear-gradient(to top, var(--color-surface-0), transparent 150%), var(--hero-image);background-size: cover;background-position: 0 0, center;height: 50vh;margin-bottom: -50vh;"></div>';
              'castle2',
    mwBody.parentNode.insertBefore(newDiv, mwBody);
              //'coldrift',
              'creative',
              //'dimension',
              'district',
              'freebuild',
              'maze',
              //'plots',
              //'ravine',
              //'savanna',
              'spawn',
              'waterfall'
              //'well'
              ];
var bg = bgArray[Math.floor(Math.random() * bgArray.length)];


// Page Header IMG
  }
// Get only pages with the category "Dynamic Background"
if ($.inArray("Dynamic Background", mw.config.get('wgCategories')) > -1) {
var mwBody = document.getElementById('content');
var newDiv = document.createElement('div');
newDiv.setAttribute('class', 'header-hero');
newDiv.innerHTML = '<div class="header-hero-image" style="background-image: linear-gradient(to top, var(--color-surface-0), transparent 150%), var(--hero-image);background-size: cover;background-position: 0 0, center;height: 36vh;margin-bottom: -31vh;"></div>';
mwBody.parentNode.insertBefore(newDiv, mwBody);
}


var html = document.querySelector("html");
  var html = document.querySelector("html");
if (html.classList.contains('skin-citizen-dark')) {
  if (html.classList.contains("skin-citizen-dark")) {
document.documentElement.style.setProperty('--hero-image', 'url(/images/site/header/' + bg + '_dark.webp)');
    document.documentElement.style.setProperty("--hero-image", "url(/hosted/images/shop/CubeyBanner.webp)");
} else {
  } else {
document.documentElement.style.setProperty('--hero-image', 'url(/images/site/header/' + bg + '.webp)');
    document.documentElement.style.setProperty("--hero-image", "url(/hosted/images/shop/CubeyBanner.webp)");
}
  }


document.addEventListener('click', function(event) {
  document.addEventListener('click', function (event) {
  setTimeout(function() {
    setTimeout(function () {
    var html = document.querySelector("html");
      var html = document.querySelector("html");
    if (html.classList.contains("skin-citizen-dark")) {
      if (html.classList.contains("skin-citizen-dark")) {
      document.documentElement.style.setProperty('--hero-image', 'url(/images/site/header/' + bg + '_dark.webp)');
        document.documentElement.style.setProperty("--hero-image", "url(/hosted/images/shop/CubeyBanner.webp)");
    } else if (html.classList.contains("skin-citizen-light"))
      } else if (html.classList.contains("skin-citizen-light")) {
    {
        document.documentElement.style.setProperty("--hero-image", "url(/hosted/images/shop/CubeyBanner.webp)");
      document.documentElement.style.setProperty('--hero-image', 'url(/images/site/header/' + bg + '.webp)');
      }
    }, 100);
  }, true);
});
$(document).ready(function () {
  if ($.inArray("Dynamic header", mw.config.get("wgCategories")) > -1) {
    var mwBody = document.getElementById("content");
    var newDiv = document.createElement("div");
    newDiv.setAttribute("class", "header-hero");
    newDiv.innerHTML = '<div class="header-hero-image" style="background-image: linear-gradient(to top, var(--color-surface-0), transparent 150%), var(--hero-image);background-size: cover;background-position: 0 0, top;height: 25vh;margin-bottom: -25vh;"></div>';
    mwBody.parentNode.insertBefore(newDiv, mwBody);
 
    var mwHeader = document.querySelector(".mw-body-header");
    if (mwHeader) {
      mwHeader.style.display = "none";
     }
     }
   }, 100);
   }
}, true);
 
  var html = document.querySelector("html");
  if (html.classList.contains("skin-citizen-dark")) {
    document.documentElement.style.setProperty("--hero-image", "url(/hosted/images/RiftBG2.webp)");
  } else {
    document.documentElement.style.setProperty("--hero-image", "url(/hosted/images/shop/CubeyBanner.webp)");
  }
 
  document.addEventListener('click', function (event) {
    setTimeout(function () {
      var html = document.querySelector("html");
      if (html.classList.contains("skin-citizen-dark")) {
        document.documentElement.style.setProperty("--hero-image", "url(/hosted/images/RiftBG2.webp)");
      } else if (html.classList.contains("skin-citizen-light")) {
        document.documentElement.style.setProperty("--hero-image", "url(/hosted/images/shop/CubeyBanner.webp)");
      }
    }, 100);
  }, true);
});

Latest revision as of 20:23, 18 July 2024

/* All JavaScript here will be loaded for users of the Citizen skin */
// Discord Button
$(document).ready( function () {
   $('.citizen-drawer').after($('<div class="citizen-discord citizen-header__item"><a href="https://discord.gg/gwuGnK3"><div class="citizen-discord__button citizen-header__button"><div class="disc-icon"><label id="citizen-discord__buttonCheckbox" class="mw-checkbox-hack-button citizen-header__buttonCheckbox" for="citizen-discord__checkbox" title="Join us on Discord!" aria-hidden="true"><span>Join us on Discord!</span></label></div></div></a></div>'));
});

// Sidebar Icons
//Search
$(document).ready( function () {
   $('#n-Posts > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-news"></span>'));
   $('#n-Search > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-search"></span>'));
//possibly excessive
   $('#n-About > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-about"></span>'));
   $('#n-Shop > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-shop"></span>'));
   $('#n-Map > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-map"></span>'));
   $('#n-Vote > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-vote"></span>'));
   $('#n-Commands > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-commands"></span>'));
   $('#n-Plugins > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-plugins"></span>'));
//
   $('#n-Rules > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-rules"></span>'));
   $('#n-FAQ > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-faq"></span>'));
   $('#n-Staff > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-staff"></span>'));
   $('#n-Forums > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-forums"></span>'));
   $('#n-Discord > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-discord"></span>'));
   $('#n-Punishments > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-punishments"></span>'));
//
   $('#n-Getting-Started > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-start"></span>'));
   $('#n-Economy > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-gem"></span>'));
   $('#n-Levels > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-level"></span>'));
   $('#n-mcMMO > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-swords"></span>'));
   $('#n-Shops > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-shop2"></span>'));
   $('#n-Claims > a:eq(0)').prepend($('<span class="citizen-ui-icon mw-ui-icon-claim"></span>'));
});

// Dynamic header
$(document).ready(function () {
  if ($.inArray("Dynamic background", mw.config.get("wgCategories")) > -1) {
    var mwBody = document.getElementById("content");
    var newDiv = document.createElement("div");
    newDiv.setAttribute("class", "header-hero");
    newDiv.innerHTML = '<div class="header-hero-image" style="background-image: linear-gradient(to top, var(--color-surface-0), transparent 150%), var(--hero-image);background-size: cover;background-position: 0 0, center;height: 50vh;margin-bottom: -50vh;"></div>';
    mwBody.parentNode.insertBefore(newDiv, mwBody);

  }

  var html = document.querySelector("html");
  if (html.classList.contains("skin-citizen-dark")) {
    document.documentElement.style.setProperty("--hero-image", "url(/hosted/images/shop/CubeyBanner.webp)");
  } else {
    document.documentElement.style.setProperty("--hero-image", "url(/hosted/images/shop/CubeyBanner.webp)");
  }

  document.addEventListener('click', function (event) {
    setTimeout(function () {
      var html = document.querySelector("html");
      if (html.classList.contains("skin-citizen-dark")) {
        document.documentElement.style.setProperty("--hero-image", "url(/hosted/images/shop/CubeyBanner.webp)");
      } else if (html.classList.contains("skin-citizen-light")) {
        document.documentElement.style.setProperty("--hero-image", "url(/hosted/images/shop/CubeyBanner.webp)");
      }
    }, 100);
  }, true);
});
$(document).ready(function () {
  if ($.inArray("Dynamic header", mw.config.get("wgCategories")) > -1) {
    var mwBody = document.getElementById("content");
    var newDiv = document.createElement("div");
    newDiv.setAttribute("class", "header-hero");
    newDiv.innerHTML = '<div class="header-hero-image" style="background-image: linear-gradient(to top, var(--color-surface-0), transparent 150%), var(--hero-image);background-size: cover;background-position: 0 0, top;height: 25vh;margin-bottom: -25vh;"></div>';
    mwBody.parentNode.insertBefore(newDiv, mwBody);

    var mwHeader = document.querySelector(".mw-body-header");
    if (mwHeader) {
      mwHeader.style.display = "none";
    }
  }

  var html = document.querySelector("html");
  if (html.classList.contains("skin-citizen-dark")) {
    document.documentElement.style.setProperty("--hero-image", "url(/hosted/images/RiftBG2.webp)");
  } else {
    document.documentElement.style.setProperty("--hero-image", "url(/hosted/images/shop/CubeyBanner.webp)");
  }

  document.addEventListener('click', function (event) {
    setTimeout(function () {
      var html = document.querySelector("html");
      if (html.classList.contains("skin-citizen-dark")) {
        document.documentElement.style.setProperty("--hero-image", "url(/hosted/images/RiftBG2.webp)");
      } else if (html.classList.contains("skin-citizen-light")) {
        document.documentElement.style.setProperty("--hero-image", "url(/hosted/images/shop/CubeyBanner.webp)");
      }
    }, 100);
  }, true);
});