MediaWiki:Common.js

Note: After saving, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.

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

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);