Adaris

MediaWiki:Common.js: Difference between revisions

← Older editNewer edit →
No edit summary
No edit summary
Line 36: Line 36:
mw.loader.load('/maps/elemara/elemara-map.js');
mw.loader.load('/maps/elemara/elemara-map.js');


document.addEventListener("DOMContentLoaded", function () {
mw.loader.using([], function () {
   const container = document.getElementById("pixel-area-calculator");
   $(function () {
    var container = document.getElementById("pixel-area-calculator");


  if (!container) {
    if (!container) {
    return;
      return;
  }
    }


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


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


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


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


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


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


  button.addEventListener("click", function () {
      if (isNaN(widthPixels) || isNaN(heightPixels)) {
    const widthPixels = parseFloat(document.getElementById("pixel-width").value);
        result.textContent = "Please enter both pixel values.";
    const heightPixels = parseFloat(document.getElementById("pixel-height").value);
        return;
    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;
      var widthMiles = (widthPixels / 1000) * 50;
    const heightMiles = (heightPixels / 1000) * 50;
      var heightMiles = (heightPixels / 1000) * 50;
    const squareMiles = widthMiles * heightMiles;
      var squareMiles = widthMiles * heightMiles;


    result.innerHTML = `
      result.innerHTML =
      <strong>${widthMiles.toLocaleString(undefined, { maximumFractionDigits: 2 })} miles</strong>
        "<strong>" + widthMiles.toLocaleString(undefined, { maximumFractionDigits: 2 }) + " miles</strong>" +
      ×
        " × " +
      <strong>${heightMiles.toLocaleString(undefined, { maximumFractionDigits: 2 })} miles</strong>
        "<strong>" + heightMiles.toLocaleString(undefined, { maximumFractionDigits: 2 }) + " miles</strong>" +
      =
        " = " +
      <strong>${squareMiles.toLocaleString(undefined, { maximumFractionDigits: 2 })} mi²</strong>
        "<strong>" + squareMiles.toLocaleString(undefined, { maximumFractionDigits: 2 }) + " mi²</strong>";
     `;
     });
   });
   });
});
});
Retrieved from "https://adaris.wiki/MediaWiki:Common.js"