MediaWiki:Gadget-CardTableImageSwitcher.js

Note: After saving, you have to bypass your browser's cache to see the changes. Internet Explorer: hold down Ctrl and click the Refresh or Reload button. Firefox: hold down ⇧ Shift while clicking Reload (or press Ctrl+⇧ Shift+R). Google Chrome and Safari users can just click the Reload button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

/**
 * Image switcher for card tables.
 * Original code by Deltaneos. Some corrections by Becasita.
 * Adapted as gadget by Becasita.
 * @author Deltaneos, Becasita
 */
( function _gadgetCardTableImageSwitcher( $, console ) {
	"use strict";

	var LAST_LOG = '23:10, 10 December 2023 (UTC)';

	function switcher(event) {
		event.preventDefault();

		var element = event.currentTarget;

		var $imagecolumn   = $(element).parents('.imagecolumn'),
			$selected      = $(element).parents('.image-dimensions'),
			$image_wrapper = $imagecolumn.find('.cardtable-main_image-wrapper'),
			$main_image    = $image_wrapper.find('img:first'),
			image_name     = $selected.data('image_name'),
		// Images are not to go wider than the first one.
			max_width    = $imagecolumn.data('max_width') ? $imagecolumn.data('max_width') : $main_image.width(),
		// Natural dimensions of the selected image
			n_width      = $selected.data('width'),
			n_height     = $selected.data('height'),
		// Dimensions to display the selected image at
			width        = (n_width < max_width) ? n_width  : max_width,
			height       = (n_width < max_width) ? n_height : n_height * width / n_width,
			src = $selected.data('filepath') || element.getAttribute('href');

		/*srcset = [1.5, 2].map(function(ratio) {
			return src.replace('\.com//', '$&thumb/') + '/' + Math.round(width * ratio) + 'px-' + image_name + ' ' + ratio + 'x';
		}).join();*/

		if (width !== n_width) {
			src = '/thumb.php?f=' + image_name + '&w=' + width;
		}

		// Preventing content jumping
		$imagecolumn.css('width', max_width);

		$imagecolumn.find('\+.infocolumn').css('width', 'calc(100% - '+max_width+'px)');

		$image_wrapper.css('min-height', $image_wrapper.height());

		var img = new Image();

		img.onload = function() {
			// Change the main image's URL to the new image and set its width and height
			$main_image
				.attr('src', src)
				.attr('alt', image_name)
				//.attr('srcset', srcset)
				.attr('width', width)
				.attr('height', height)
				.removeAttr('srcset');

			// Change the main image's link and hover text to match the new image
			$main_image.parents('a')
				.attr('href', '/wiki/File:'+image_name)
				.attr('title', image_name);

			$('.image-switcher--selected').removeClass('image-switcher--selected');

			$(element).addClass('image-switcher--selected');
		};

		img.src = src;
	};

	$(function() {
		var image_links = document.querySelectorAll('.image-switcher a');

		for (var i = 0; i < image_links.length; i++) {
			image_links[i].addEventListener('click', switcher);
		}

		var curentMainImg = $('.cardtable-main_image-wrapper img:first').attr('alt');

		$('.image-dimensions[data-image_name="' + curentMainImg + '"] a').addClass('image-switcher--selected');

		// Make the switchers visible after the script has run.
		var image_switchers = document.getElementsByClassName('image-switcher');

		for (i = 0; i < image_switchers.length; i++) {
			image_switchers[i].style.visibility = 'visible';
		}
	});

	console.log( '[Gadget] CardTableImageSwitcher last updated at', LAST_LOG );
} )( window.jQuery, window.console );