Raw Source Toggle Dropdown

• Minified Source

Nickel / tumblr.com Widescreen tweak

// ==UserScript==
// @name        tumblr.com Widescreen tweak
// @description [unmaintained!!] Enhance the tumblr dashboard with widescreen and highres images
// @icon        http://38.media.tumblr.com/avatar_fee7ff3e9d6a_48.png
// @version     1.0.9
// @license     GNU General Public License v3
// @copyright   2014, Nickel
// @oujs:author Nickel
// @grant       GM_addStyle
// @include     *://www.tumblr.com/dashboard*
// @include     *://www.tumblr.com/tagged/*
// @include     *://www.tumblr.com/likes*
// @include     *://www.tumblr.com/liked/by/*
// @include     *://www.tumblr.com/inbox*
// @include     *://www.tumblr.com/blog/*
// @include     *://www.tumblr.com/send*
// @include     *://www.tumblr.com/following*
// ==/UserScript==

// FIXME: scrolling up tends to "jump"
// FIXME: opening/closing the image viewer sometimes makes the site scroll randomly
// TODO: widen fanmail submission on inbox
// TODO: somehow make multiple columns for activity page, blog members page

(function(){

// don't run in frames
if (frameElement){ return; }

// fallback (Chrome lacks GM functions)
if( typeof GM_addStyle != 'function' ) {
	function GM_addStyle(css) {
		var head, style;
		head = document.getElementsByTagName('head')[0];
		if( !head ){ return; }
		style = document.createElement('style');
		style.type = 'text/css';
		style.innerHTML = css;
		head.appendChild(style);
	}
}

// do some replacement work on the page
function work() {
	var elm, i, size;
	size = 0;

   	// highres images for non-photoset photos
	elm = document.getElementsByClassName("high_res_link");
	for (i=0; i<elm.length; i++) {
		if( elm[i].workedOn === true ) { continue; }
		elm[i].workedOn = true;

		elm[i].parentNode.setAttribute('style', 'width:0px;');	//fix link area

		if ( elm[i].firstChild.src.indexOf("_500.") > 0 ) { size=500; }
		else if ( elm[i].firstChild.src.indexOf("_540.") > 0 ) { size=540 }
		else { continue; }

		//gif animations often break when >500px wide, so skip gifs
		//also see http://www.tumblr.com/docs/en/photo_troubleshooting
		if( elm[i].firstChild.src.indexOf(".gif") > -1 ) { continue; }

		sizeString = "_"+size+"."; var sizeRe = new RegExp(sizeString);
		elm[i].firstChild.onerror = function() {	//undo replacement
			console.log("unreplacing " + this.src);
			this.src = this.src.replace(/_1280./,sizeString);
		}
		elm[i].firstChild.src = elm[i].firstChild.src.replace(sizeRe,"_1280.");

	}

	// highres images for panorama photos
	elm = document.getElementsByClassName("panorama");
	for (i=0; i<elm.length; i++) {
		if( elm[i].workedOn === true ) { continue; }
		elm[i].workedOn = true;

		if ( elm[i].firstChild.src.indexOf("_500.") > 0 ) { size=500; }
		else if ( elm[i].firstChild.src.indexOf("_540.") > 0 ) { size=540 }
		else { continue; }

		sizeString = "_"+size+"."; var sizeRe = new RegExp(sizeString);
		elm[i].firstChild.onerror = function() {
			console.log("unreplacing " + this.src);
			this.src = this.src.replace(/_1280./,sizeString);
		}
		elm[i].firstChild.src = elm[i].firstChild.src.replace(sizeRe,"_1280.");
	}

	// highres images for normal single photos
	elm = document.getElementsByClassName("post_media_photo");
	for (i=0; i<elm.length; i++) {
		if( elm[i].workedOn === true ) { continue; }
		elm[i].workedOn = true;

		if ( elm[i].src.indexOf("_500.") > 0 ) { size=500; }
		else if ( elm[i].src.indexOf("_540.") > 0 ) { size=540 }
		else { continue; }

		if( elm[i].src.indexOf(".gif") > -1 ) { continue; }

		sizeString = "_"+size+"."; var sizeRe = new RegExp(sizeString);
		elm[i].onerror = function() {
			console.log("unreplacing " + this.src);
			this.src = this.src.replace(/_1280./,sizeString);
		}
		elm[i].src = elm[i].src.replace(sizeRe,"_1280.");
	}

	// highres blog avatars
	elm = document.getElementsByClassName("post_avatar_link");
	for (i=0; i<elm.length; i++) {
		if( elm[i].workedOn === true ) { continue; }
		elm[i].workedOn = true;

		elm[i].style.backgroundImage = elm[i].style.backgroundImage.replace(/_64.png/,"_128.png");
		for (var j=0; j<elm[i].attributes.length; j++ ) {	//needed so highres avatar is put back after posting
			if( elm[i].attributes[j].name == "data-avatar-url" ) {
				elm[i].attributes[j].value = elm[i].attributes[j].value.replace(/_64.png/,"_128.png");
				break;
			}
		}
	}

	// highres blog sub avatars (if present)
	elm = document.getElementsByClassName("post_sub_avatar");
	for (i=0; i<elm.length; i++) {
		if( elm[i].workedOn === true ) { continue; }
		elm[i].workedOn = true;

		elm[i].style.backgroundImage = elm[i].style.backgroundImage.replace(/_30.png/,"_64.png");
	}

	// expand inline images
	elm = document.getElementsByClassName('constrained_image');
	for (i=0; i<elm.length; i++) {
		if( elm[i].workedOn === true ) { continue; }
		elm[i].workedOn = true;

		elm[i].classList.remove("inline_image");
	}
}


// fan mail submission page
if ( window.location.href.indexOf("/send") > -1 ) {
	GM_addStyle(".container {width:1230px !important; left:-615px !important;}");
	GM_addStyle("#fan_mail {width:1048px !important; background-size:1048px 385px !important;}");
	GM_addStyle(".message {width:985px !important;}");
	GM_addStyle(".submit_controls {left:1077px !important;}");
}
// followers page
else if ( window.location.href.indexOf("/followers") > -1 ) {
	// main stretching
	GM_addStyle(".l-container {width:1480px !important; padding:0px !important;}");
	GM_addStyle("#left_column {width:1145px !important; margin-left:64px !important;}");

	// 4 columns for followers
	GM_addStyle(".follower {clear:none !important; width:22.98% !important; float:left !important; height:128px !important; border:1px solid rgba(0, 0, 0, 0.06) !important;}");
	GM_addStyle(".controls {margin:-120px 30px !important;}");
	GM_addStyle(".name {width:250px !important; height:20px !important; overflow:hidden !important; text-overflow:ellipsis !important;}");

	GM_addStyle(".follower .avatar {min-height:96px !important;}");
	GM_addStyle(".avatar .avatar_img {width:96px !important; height:96px !important;}");
}
// following page
else if ( window.location.href.indexOf("/following") > -1 ) {
	// main stretching
	GM_addStyle(".l-container {width:1480px !important; padding:0px !important;}");
	GM_addStyle(".l-content {background-size:1482px !important;}");
	GM_addStyle(".content_bottom {width:1480px !important;}");
	GM_addStyle("#tabs {background-size:1480px !important;}");
	GM_addStyle(".tab:not(.iconic) {width:492px !important;}");

	// 5 columns for followees
	GM_addStyle("#left_column {width:1070px !important;}");
	GM_addStyle(".follower:not(#invite_someone) {clear:none !important; width:17.94% !important; float:left !important; height:128px !important; border:1px solid rgba(0, 0, 0, 0.06) !important;}");
	GM_addStyle(".controls {margin:-120px 0px !important;}");
	GM_addStyle(".name {width:200px !important; overflow:hidden !important; text-overflow:ellipsis !important;}");
	GM_addStyle(".next {margin-top:25px !important;}");
	GM_addStyle(".previous {margin-top:25px !important;}");

	GM_addStyle(".follower .avatar {min-height:96px !important;}");
	GM_addStyle(".avatar .avatar_img {width:96px !important; height:96px !important;}");

	// right column
	GM_addStyle("#right_column {width:320px !important;}");
	GM_addStyle("#crushes {width:320px !important; height:320px !important}");
	GM_addStyle(".crush {width:96px !important; height:96px !important}");
}
// activity page
else if ( window.location.href.indexOf("/activity") > -1 ) {
	// main stretching
	GM_addStyle(".l-container {width:1480px !important; padding:0px !important;}");
	GM_addStyle("#left_column {width:1145px !important; margin-left:64px !important;}");
	GM_addStyle("#sidebar_footer_nav {width:1200px !important;}");
	GM_addStyle(".divider {background-size:1145px 17px !important;}");

	// biggest fans box
	GM_addStyle(".tops_fans {width:570px !important;}");
	GM_addStyle(".ui_jumbo_avatar {width:128px !important;}");
	GM_addStyle(".avatar_image {width:128px !important; height:128px !important;}");

	// top post box
	GM_addStyle(".tops_post {width:504px !important; min-height:171px !important;}");
	GM_addStyle(".post.is_mine {width:250px !important; height:150px !important; margin-left:auto !important; margin-right:auto !important;}");

	// don't scroll right column (but breaks blog popover in chrome)
	if( ! window.chrome ) {
		GM_addStyle("#right_column {position:fixed !important; margin-left:1225px !important;}");
	}
}
// normal pages (i.e. the rest)
else {
	// main stretching
	GM_addStyle(".l-container {width:1480px !important; padding:0px !important;}");
	GM_addStyle("#left_column {width:1145px !important; margin-left:64px !important;}");
	GM_addStyle("#sidebar_footer_nav {width:1200px !important;}");

	// center and increase margin of new post buttons
	GM_addStyle("#new_post {margin-left:auto !important; margin-right:auto !important; width:545px !important; margin-bottom:48px !important;}");

	// stretch post boxes
	GM_addStyle(".post_full:not(.new_post_buttons) {width:1060px !important; min-height:128px !important;");

	// widen texts
	GM_addStyle(".post_info {max-width:525px !important;}");
	GM_addStyle(".post_info_fence {max-width:500px !important;}");
	GM_addStyle(".post_info_link {max-width:250px !important;}");
	GM_addStyle(".post_source_link {max-width:250px !important;}");

	// stretch ask questions and lower nipple
	GM_addStyle(".note_item {width:910px !important; min-height:96px !important;}");
	GM_addStyle(".nipple {top:40px !important;}");

	// stretch ask answers
	GM_addStyle(".answer {max-width:1000px !important;}");	//rule must come after post_info

	// unwiden embedded videos
	GM_addStyle(".video_embed {width:500px !important;}");

	// increase size of album art
	GM_addStyle(".audio_player_container {height:250px !important;}");

	// double columns for some photosets
	GM_addStyle(".photoset_row {width:50% !important; float:left !important; margin-top:0px !important; margin-bottom:10px !important;");
	GM_addStyle(".post_body {width:100% !important; float:left !important;}");	//keep captions separated

	// support highres images
	GM_addStyle(".high_res_link img {width:auto !important; height:auto !important; max-width:1024px !important; max-height:1024px !important; margin-left:-2px !important}");
	GM_addStyle(".panorama img {width:auto !important; height:auto !important; max-width:1024px !important; max-height:1024px !important; margin-left:-2px !important}");
	GM_addStyle(".post_media_photo {width:auto !important; height:auto !important; max-width:1024px !important; max-height:1024px !important; margin-left:-2px !important}");

	// support highres avatars
	GM_addStyle(".post_avatar {width:128px !important; height:128px !important; margin-left:-64px !important}");
	GM_addStyle(".post_sub_avatar {width:64px !important; height:64px !important; top:70px !important}");
	GM_addStyle(".avatar img {width:96px !important; height:96px !important;}");

	// center notifications, indent toasts
	GM_addStyle(".notification {margin-left:auto !important; margin-right:auto !important;}");
	GM_addStyle("#toast_container {left:280px !important;}");

	// fix repeat pattern on fanmail
	GM_addStyle(".message {background-repeat:repeat !important;}");

	// don't scroll right column (but breaks blog popover in chrome)
	if( !window.chrome ) {
		GM_addStyle("#right_column {position:fixed !important; margin-left:1225px !important;}");
	}


	// first iteration
	work();

	// repeat whenever page changes
	var counter = document.getElementsByTagName('div').length;

	function trigger() {
		if (document.getElementsByTagName('div').length != counter) {
			counter = document.getElementsByTagName('div').length;
			work();
		}
	}

	setInterval(trigger,1000);
}

})();