MediaWiki:Gadget-imagebox.js

/*
   Absurdopedia ImageBox -- 24 октября 2021.
   Автор: [[Участник:Edward Chernenko]].

   При клике по уменьшенному (thumb) изображению (левой кнопкой мыши)
   оно будет развёрнуто до более крупного размера на той же странице.
*/

var boxPaddingW = 30, boxPaddingH = 60, minWidth = 300, minHeight = 200;

var adjust = function() {
	$('#imgbox-loading').hide();

	var $box = $('#imgbox'),
		$canvas = $('#imgbox-canvas');

	if(!$canvas.length) {
		return;
	}

	// Available width/height in #imgbox area.
	var availableWidth = $box.width() - boxPaddingW;
	var availableHeight = $box.height() - boxPaddingH;

	var $img = $canvas.find('img');

	var fullImageWidth = $img.width();
	var fullImageHeight = $img.height();

	if ( !fullImageWidth || !fullImageHeight || availableHeight <= 0 ) {
		return;
	}

	var imageAspect = fullImageWidth / fullImageHeight;
	var spaceAspect = availableWidth / availableHeight;

	var thumbWidth, thumbHeight;

	if ( imageAspect < spaceAspect ) {
		thumbHeight = Math.max( minHeight, Math.min( availableHeight, fullImageHeight ) );
		thumbWidth = thumbHeight * imageAspect;
	} else {
		thumbWidth =  Math.max( minWidth, Math.min( availableWidth, fullImageWidth ) );
		thumbHeight = thumbWidth / imageAspect;
	}

	$img.width( thumbWidth );
	$img.height( thumbHeight );

	$box.width( thumbWidth + boxPaddingW );
	$box.height( thumbHeight + boxPaddingH );
};

var imagebox_remove = function() {
	$("#imgbox").remove();
};

var imagebox_show = function( event ) {
	event.preventDefault();
	imagebox_remove();

	var thumbUrl = $(this).find('img.thumbimage').attr('src');
	if ( !thumbUrl ) {
		return;
	}

	var fullImageUrl = thumbUrl.replace(/^(.*)\/thumb\/([^\/]*?)\/([^\/]*?)\/([^\/]*?)\/.*$/, '$1/$2/$3/$4');

	var filename = 'Файл:' + decodeURIComponent( fullImageUrl.split('/').pop() );
	var descriptionUrl = mw.config.get( 'wgArticlePath' ).replace('$1', encodeURIComponent(filename));

	var header = $('<div/>')
		.attr('style', 'clear: both;')
		.append($('<a/>').attr('href', descriptionUrl).append(filename))
		.append($('<div />').attr('style','float: right;font-size:120%;').append($('<a/>').click(imagebox_remove).attr('style', 'font-weight: bold;').append('закрыть')))
		;

	var $ibox = $('<div id="imgbox-canvas"/>')
		.append('<div id="imgbox-loading">Загружаем…</div>')
		.append($('<img/>').attr('src', fullImageUrl).attr('style', 'z-index: 1000;').load(adjust))
		.click(imagebox_remove)
		;

	var box = $('<div id="imgbox" />')
		.attr('style', 'padding: 5px; background-color: white; border: 5px ridge black; position: fixed; top: 50px; bottom: 10px; left: 175px; right: 20px; overflow: auto; z-index: 999;')
		.append(header)
		.append($ibox)
		.append(header.clone())
		;
	$('#bodyContent').append(box);
};

$(function() {
	var t = $('div.thumbinner');
	for(var i = 0; i < t.length; i ++) {
		var l = $(t[i]).find('a.image');
		var h = l.attr('href');
		if(h && h.match(/\.ogg$/i)) continue;
		l.attr('id', 'imglink' + i).click('onclick', imagebox_show);
	}
});