MediaWiki:Common.js

// -------------------------
// Infobox cleanup
// -------------------------
$(document).ready(function() {
    $('.infoboxTable th').each(function() {
        if ($(this).text().trim() === "Image") {
            $(this).text("");
        }
    });
});

// -------------------------
// Remove unwanted Introduction headers
// -------------------------
$(document).ready(function() {
    $('h2').each(function() {
        if ($(this).text().trim() === "Introduction") {
            $(this).remove();
        }
    });
});

// -------------------------
// Remove first empty paragraph
// -------------------------
$(document).ready(function() {
    $('p').first().each(function() {
        if ($(this).html().trim() === "<br>") {
            $(this).remove();
        }
    });
});


mw.loader.load('https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@main/dist/en/v7.0.0/legacy/ol.js');
mw.loader.load('/maps/elemara/elemara-map.js');

document.addEventListener("DOMContentLoaded", function () {
  const container = document.getElementById("pixel-area-calculator");

  if (!container) {
    return;
  }

  container.innerHTML = `
    <div class="pixel-area-tool">
      <h3>Pixel to Square Miles Calculator</h3>

      <label>
        Width in pixels:
        <input id="pixel-width" type="number" min="0" step="any" placeholder="Width">
      </label>

      <label>
        Height in pixels:
        <input id="pixel-height" type="number" min="0" step="any" placeholder="Height">
      </label>

      <button id="pixel-area-button" type="button">Calculate</button>

      <div id="pixel-area-result"></div>
    </div>
  `;

  const button = document.getElementById("pixel-area-button");

  button.addEventListener("click", function () {
    const widthPixels = parseFloat(document.getElementById("pixel-width").value);
    const heightPixels = parseFloat(document.getElementById("pixel-height").value);
    const result = document.getElementById("pixel-area-result");

    if (isNaN(widthPixels) || isNaN(heightPixels)) {
      result.textContent = "Please enter both pixel values.";
      return;
    }

    const widthMiles = (widthPixels / 1000) * 50;
    const heightMiles = (heightPixels / 1000) * 50;
    const squareMiles = widthMiles * heightMiles;

    result.innerHTML = `
      <strong>${widthMiles.toLocaleString(undefined, { maximumFractionDigits: 2 })} miles</strong>
      ×
      <strong>${heightMiles.toLocaleString(undefined, { maximumFractionDigits: 2 })} miles</strong>
      =
      <strong>${squareMiles.toLocaleString(undefined, { maximumFractionDigits: 2 })} mi²</strong>
    `;
  });
});