Difference between revisions of "MediaWiki:Common.js"

Latest revision as of 17:41, 24 February 2025

/* Any JavaScript here will be loaded for all users on every page load. 
   This page can only be edited by users who are part of the the interface administrator group.
   See https://hitchwiki.org/en/Special:ActiveUsers?username=&groups%5B%5D=interface-admin&wpFormIdentifier=specialactiveusers
**/

console.log('TEST')

/* More sensible default settings at Special:Block User
   https://github.com/Hitchwiki/hitchwiki/issues/23 */
if (document.querySelector('body.mw-special-Block')) { 
  document.querySelector('#mw-input-wpDisableEmail').click();
  document.querySelector('#mw-input-wpHardBlock').click();
  document.querySelector('#mw-input-wpExpiry').value = 'infinite';
}


/* Replace map tags with image that links to Hitchmap
   https://github.com/Hitchwiki/hitchwiki/issues/214 */
function createStaticMap(mapContainer, lat, lon, zoom, width, height) {
  var TILE_SIZE = 256;
  var centerX = ((lon + 180) / 360) * Math.pow(2, zoom) * TILE_SIZE;
  var centerY = ((1 - Math.log(Math.tan(lat * Math.PI / 180) + 1 / Math.cos(lat * Math.PI / 180)) / Math.PI) / 2) * Math.pow(2, zoom) * TILE_SIZE;
  var topLeftX = centerX - width / 2;
  var topLeftY = centerY - height / 2;
  var startTileX = Math.floor(topLeftX / TILE_SIZE);
  var startTileY = Math.floor(topLeftY / TILE_SIZE);
  var xOffset = -(topLeftX % TILE_SIZE);
  var yOffset = -(topLeftY % TILE_SIZE);
  var xTiles = Math.ceil(width / TILE_SIZE) + 1;
  var yTiles = Math.ceil(height / TILE_SIZE) + 1;

  mapContainer.style.width = width + 'px';
  mapContainer.style.height = height + 'px';
  mapContainer.style.position = 'relative';
  mapContainer.style.overflow = 'hidden';

  for (var x = 0; x < xTiles; x++) {
    for (var y = 0; y < yTiles; y++) {
      var img = document.createElement("img");
      img.src = 'https://tile.openstreetmap.org/' + zoom + '/' + (startTileX + x) + '/' + (startTileY + y) + '.png';
      img.style.position = 'absolute';
      img.style.width = TILE_SIZE + 'px';
      img.style.height = TILE_SIZE + 'px';
      img.style.left = (x * TILE_SIZE + xOffset) + 'px';
      img.style.top = (y * TILE_SIZE + yOffset) + 'px';
      mapContainer.appendChild(img);
    }
  }
}

var mapbox = document.querySelector('.infobox-map');

function findFloatAttr(attr) {
  var floatRegex = /-?\d+(\.\d+)?/;
  var attrValue = mapbox.innerText.split(attr)[1].match(floatRegex);
  return attrValue ? parseFloat(attrValue[0]) : 0;
}

// Extract the map attributes
var lat = findFloatAttr("lat");
var lon = findFloatAttr("lng");
var zoom = findFloatAttr("zoom");
var width = 300; // Set width for the static map display
var height = 300; // Set height for the static map display

// Create a container div for the static map
var mapContainer = document.createElement("div");

// Call the function to create the static map inside the container
createStaticMap(mapContainer, lat, lon, zoom, width, height);

// Create an anchor element that wraps the map container
var mapLink = document.createElement("a");
mapLink.href = 'https://hitchmap.com/#location,' + lat + ',' + lon + ',' + zoom;
mapLink.appendChild(mapContainer);

// Replace the original <map> element with the link containing the map container
mapbox.innerHTML = '';
mapbox.appendChild(mapLink);