MediaWiki:Common.js

/* Any JavaScript here will be loaded for all users on every page load. */
mw.loader.load( '/w/index.php?title=MediaWiki:ResponsiveImageMap.js&action=raw&ctype=text/javascript' );

/* Manually forces automatic playback for Autoplay-marked videos in tooltips to enable user-friendly gif-style videos for tooltips. */
/* Known issue: does not work correctly if a tooltip has more than one of the same video, or quickly switching between tooltips with the same video. */
var tooltips = document.querySelectorAll("span.tooltip");
for(var i = 0; i < tooltips.length; i = i+1){
    tooltips[i].addEventListener("mouseenter", function (e){
    	setTimeout(function(){
    		/* Slightly hacky fix. If run immediately the function runs before the video enters the DOM.
    		   A small delay fixes this but adds a minor race condition. */
        	var tooltipVideos = e.target.querySelectorAll("span.tooltiptext video[autoplay]");
        	for(var i = 0; i < tooltipVideos.length; i = i+1){
        		var tooltipVideoElement = document.querySelector('div.tippy-content video[src="'+tooltipVideos[i].src+'"][autoplay]');
    			tooltipVideoElement.play();
        	}
    	}, 100);
    });
}

$(document).ready(function() {
  //==== Movelist Toggles ==== Written by SageVarq
  if (document.getElementsByClassName("movelist-toggles")) {
    // Hide all move lists
    var $movelists = $('.movelist');

    var currentMovelist = 1;

    displayMovelist(currentMovelist);
    $('.movelist-toggle-button').each(addToggles);

    function swapMovelist(e) {
      var movelistToggleClicked = $(this).data("id");
      var nextMovelist = movelistToggleClicked.substring(movelistToggleClicked.length - 1);
      if (currentMovelist != nextMovelist) {
        currentMovelist = nextMovelist;
        displayMovelist(nextMovelist);
      }
    }


    function displayMovelist(target) {
      hideAllMovelists();
      $("#movelist-" + target).css("display", "block");
      $("#movelist-toggle-" + target).addClass("movelist-toggle-on");
    }

    function hideAllMovelists() {
      $movelists.css("display", "none");
      $('.movelist-toggle-button').removeClass("movelist-toggle-on").addClass("movelist-toggle-off");
    }

    function addToggles() {
      $(this).data("id", $(this).attr("id"));
      $(this).click(swapMovelist);
    }
  }

  $('.lazyimg').prop('loading', 'lazy');
});

(function(window, $, mw) {
	if (window.responsiveImageMapLoaded) return;
	window.responsiveImageMapLoaded = true;
	
	function rwdImageMap($img) {
		$img.each(function() {
			if (typeof($(this).attr('usemap')) == 'undefined')
				return;

			var that = this,
				$that = $(that);

			// Since WebKit doesn't know the height until after the image has loaded, perform everything in an onload copy
			$('<img />').on('load', function() {
				var attrW = 'width',
					attrH = 'height',
					w = $that.attr(attrW),
					h = $that.attr(attrH);

				if (!w || !h) {
					var temp = new Image();
					temp.src = $that.attr('src');
					if (!w)
						w = temp.width;
					if (!h)
						h = temp.height;
				}

				var wPercent = $that.width()/100,
					hPercent = $that.height()/100,
					map = $that.attr('usemap').replace('#', ''),
					c = 'coords';

				// The ImageMap MediaWiki extension uses the same map name for
				// identical maps on different images (probably the resulf of
				// a hash function). As such, the manipulation must be limited
				// not only by the map name but also to only sibling map
				$that.siblings('map[name="' + map + '"]').find('area').each(function() {
					var $this = $(this);
					if (!$this.data(c))
						$this.data(c, $this.attr(c));

					var coords = $this.data(c).split(','),
						coordsPercent = new Array(coords.length);

					for (var i = 0; i < coordsPercent.length; ++i) {
						if (i % 2 === 0)
							coordsPercent[i] = parseInt(((coords[i]/w)*100)*wPercent);
						else
							coordsPercent[i] = parseInt(((coords[i]/h)*100)*hPercent);
					}
					$this.attr(c, coordsPercent.toString());
				});
			}).attr('src', $that.attr('src'));
		});
	}

	mw.hook('wikipage.content').add(function($e) {
	    var $img =
		    $e.find('.responsive-imagemap .noresize:not(.made-responsive)').css({
		        'width': '',
		        'height': ''
		    })
		    .addClass('made-responsive')
		    .find('img[usemap]');
		rwdImageMap($img);
	});
	
	$(window).resize(function() {
		rwdImageMap($('.responsive-imagemap .made-responsive img[usemap]'));
	});

})(this, jQuery, mediaWiki);