Difference between revisions of "MediaWiki:LocMaps.js"

Revision as of 01:53, 5 July 2019

(function() {

var zones = {
  'Eastern Wastes': {
      height: 452,
      image: 'Map_eastern_wastes.jpg', 
      modifier: -.0380,
      test: {
        maxX: 7000,
        maxY: 1000,
        minX: -6000,
        minY: -9000
      },
      width: 550,
      zeroX: 284,
      zeroY: 62
  }
};


var makeX = function(x, y, zone) {
  $('img[alt="' + zone.image + '"]')
    .parent()
    .css({position: 'absolute'})
    .append(
      $('<div class="x">x</div>')
        .css({
          color: 'red',
          fontSize: '2em',
          fontWeight: 'bold',
          left: zone.zeroX + x * zone.modifier,
          position: 'absolute',
          top: zone.zeroY + y * zone.modifier
        }));
};

var testMakeX = function(zone) {
  for (var x = zone.test.maxX; x >= zone.test.minX; x -= 1000) {
    for (var y = zone.test.maxY; y >= zone.test.minY; y -= 1000) {
      makeX(x, y, zone);
    }
  };
}


var addMap = function($locTd, imageName, width, height) {
  if ($('.map-wrapper').length) return;

  $locTd.append(
    '<div class="map-wrapper" style="position:relative">'+
      '<img alt="' + imageName + '" ' +
           'src="/images/'+ imageName + '" ' +
           'width="' + width + '" ' +
           'height="'+ height + '" ' +
           'class="thumbborder" ' +
           'title="' + imageName + '">' +
    '</div>'
  );
}

var showLocOnMap = function($locTd, zone, x, y) {
  addMap($locTd, zone.image, zone.width, zone.height);
  makeX(x, y, zone);
  // uncomment this to produce a series of x's for checking the alignment
  //testMakeX(zone)
};

try {
  var $locTd = $('b:contains("Location:")').parent();
  var match = $locTd.text().match(/\( *(\-?\d+), *(\-?\d+)\)/);
  var y = match[1]
  var x = match[2];
  var $zoneTd = $('b:contains("Zone:")').parent().text();
  var zoneName = $zoneTd.split('Zone:')[1].trim();
  var zone = zones[zoneName];
  if (!zone) return;

  var $link = $(' <a href="#">(Show on Map)</a>');
  $link
    .on('mouseover', function(e) {
      showLocOnMap($locTd, zone, x, y);
    })
    .on('mouseleave', function(e) {
      $('.map-wrapper').remove();
    });
  $locTd.append($link) 
} catch (err) {/* Didn't work, move on */}


})();