ETI Image Width

Prevents images from stretching pages sideways with an optional max width

Versão de: 01/05/2015. Veja: a última versão.

Você precisará instalar uma extensão como Tampermonkey, Greasemonkey ou Violentmonkey para instalar este script.

You will need to install an extension such as Tampermonkey to install this script.

Você precisará instalar uma extensão como Tampermonkey ou Violentmonkey para instalar este script.

Você precisará instalar uma extensão como Tampermonkey ou Userscripts para instalar este script.

Você precisará instalar uma extensão como o Tampermonkey para instalar este script.

Você precisará instalar um gerenciador de scripts de usuário para instalar este script.

(Eu já tenho um gerenciador de scripts de usuário, me deixe instalá-lo!)

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

(Eu já possuo um gerenciador de estilos de usuário, me deixar fazer a instalação!)

// ==UserScript==
// @name           ETI Image Width
// @namespace      pendevin
// @description    Prevents images from stretching pages sideways with an optional max width
// @include        http://endoftheinter.net/inboxthread.php*
// @include        http://boards.endoftheinter.net/showmessages.php*
// @include        https://endoftheinter.net/inboxthread.php*
// @include        https://boards.endoftheinter.net/showmessages.php*
// @version        2
// @grant          none
// @require        http://code.jquery.com/jquery-2.1.3.min.js
// ==/UserScript==

//set this if you want to have a max width for images
const MAX_WIDTH=1200;
const USE_MAX_WIDTH=false;

//ll breaks without noconflict jquery
this.$ = this.jQuery = jQuery.noConflict(true);

//livelinks compatiblity *JQUERY
//calls the function on each message-container in a document, including ones added by livelinks
function livelinks(func,extraParams){
	if(extraParams==undefined)
		extraParams=null;
	//run the function on the message-containers currently on the page
	$('#u0_1 .message-container').each(function(i,container){
		func(container,extraParams);
	});
	//run it on any message-containers added in the future
	$('#u0_1').on(
		'DOMNodeInserted',
		extraParams,
		function(e){
			if($(e.target).children('.message-container').length){
				$(e.target).children('.message-container').each(function(i,container){
					func(container,e.data);
				});
			}
		}
	);
}

//adds a style to a document and returns the style object *JQUERY
//css is a string, id is an optional string that determines the object's id
function addStyle(css,id){
	//create a style
	var style=$('<style type="text/css">');
	//add the css data to it
	style.html(css);
	if(id){
		//remove any style that has our id
		$('#'+id).remove();
		//give our style the id after removing the other stuff. idk if it matters, but i'm too lazy to find out
		style.attr('id',id);
	}
	//add the style into the head
	$('head').append(style);
	//we're outta here
	return style;
}

//if the image is a side stretcher, fix it
function getSmall(place){
	//need all the unloaded images
	var images=$(place).find('.img-placeholder');
	images.each(function(i,img){
		img=$(img);
		var imgWidth=img.width();
		//this image is too big
		if(imgWidth>pageWidth){
			var ratio=img.height()/imgWidth;
			var id=img.attr('id');
			var css='\n\
				.message #'+id+', .message #'+id+' > img{\n\
					max-width:'+pageWidth+'px;\n\
					max-height:'+parseInt(pageWidth*ratio)+'px;\n\
				}\
			';
			addStyle(css,'imgWidth_'+id);
		}
	});
}

//get width of userbar and subtract junk from it
var pageWidth=$('.userbar').width();
pageWidth-=6;
//if we've got avatars on
if($('.userpic').length>0){
	pageWidth-=156;
}
//if we are using a max width, make sure it's not smaller than the page width
if(USE_MAX_WIDTH&&pageWidth>MAX_WIDTH){
	pageWidth=MAX_WIDTH;
}

livelinks(getSmall);