Eza's Homestuck Reader

A mobile-friendly page simplifier for MSPaintAdventures.com
当前为 2016-04-29 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name        Eza's Homestuck Reader
// @namespace   https://inkbunny.net/ezalias
// @description A mobile-friendly page simplifier for MSPaintAdventures.com
// @license     MIT
// @license     Public domain / No rights reserved
// @include     http://www.mspaintadventures.com/*
// @version     1.0
// @grant       none
// ==/UserScript==

// MSPA on mobile is painful, so let's replace the page with an AJAX updater that only cares about the comic area.

// Scratch pages are like http://www.mspaintadventures.com/scratch.php?s=6&p=005954 which complicates using window.location.search. 
	// The transition is on page 005663. That page doesn't link it, the site itself redirects to scratch.php?s=6&p=005954. Same with any page in the scratch.php range. 
	// Ah, scratch.php pages don't have the same convenient 'begin comic content' comments. 
	// Hacky solution: find 'CREDITS</font>', then open from next '<table>' after that index. End at '<!--  FULL LOGO HEADER  -->'? 
// Backgrounds in Scratch and Trickster pages aren't quite right. E.g. Trickster pages should be all garish Z's. (Trickster mode: p=007614) 
	// Mobile link does not appear on Trickster pages. The whole nav bar is wacko. 
// Act 7 super doesn't work. Ditto [s] Collide. 
// Oh shit, password pages. That'll screw with preloading... but... oh well? 
	// Password pages work, but redirect you outside of #mobile. (c. p=008948, first password is HOME. No, not HOM3.) 
// For usability, replace "what content" error message with a link somewhere. Frontpage? Homestuck's first page? 
// Style isn't quite right on links. '==>' is supposed to be bold, and Scratch links are supposed to be green. 
// Oh shit, Openbound. (c. p=007208) 
// Link back to original from mobile? E.g. to fix Trickster & Scratch inconsistencies, and make broken game/video pages easy to navigate. 
	// Ah, maybe just link inside our fake HTML. 
// Consider anchoring #mobile to the top of the page to automatically scroll up... er, except we aren't following real links. Hmm. 
	// Doesn't work around e.g. p=005935 because Flash elements load late. Fuck me. Maybe try again later. 
// Doesn't work on Cascade, /cascade.php?s=6&p=6009 - total blank. 



if( window.location.href.indexOf( '#mobile' ) > 0 ) { 		// On a #mobile page, blank everything and attempt to present a comic page. 
	// Replace the page with some simple divs and dummy text 
	document.body.innerHTML = "<center><div id='content'>What content?</div><div id='hidden_preload' style='display: none;'>DUNKASS</div></center>"; 
	document.body.innerHTML += "<center><a href=\"javascript:window.location.href=window.location.href.replace('#mobile','');\">Exit Mobile Mode</a></center>";

	// Setup the fake history for our fake links
	window.onpopstate = function( event ) { update( event.state.update, 'content' ); }; 		// Faking the Back button: update() to a previous history state, which we also fake
	history.replaceState( { update: window.location.href }, 'MS Paint Adventures', window.location.href ); 		// You are here. JS doesn't do this itself because fuck you. 

	// Call Update for whatever ?s=X&p=Y page we're on 
	 update( window.location.search, 'content' ); 

} else { 		// If it's not #mobile then we're on unaugmented MSPA. Augment it with a link to the appropriate #mobile version. 
	// Mobile link from the front page has to be different because '/?s=...&#mobile' works, but '/&?s=...' doesn't. Dunno why it's a CORS error, though. 
	var mobile_link = window.location.href + "&#mobile"; 		// The '&' forces a reload despite being a misused anchor link
	if( window.location.href.indexOf( '?s=' ) < 0 ) { mobile_link = "/?s=6#mobile"; } 		// Frontpage is Homestuck? Link Homestuck.

	// "Mobile" link goes after the "Credits" link 
	var credits_index = document.body.innerHTML.indexOf( "CREDITS</font></a>" ) + "CREDITS</font></a>".length; 
	if( credits_index > 20 ) { 		// Sloppy not to check for indexOf > -1, but fuck, am I ever tired of verbose indexOf nonsense. Gimme some spliceAtText function. 
		document.body.innerHTML = 
			document.body.innerHTML.substring( 0, credits_index ) + 
			" | <a href='" + mobile_link + "'><font color='88ff44'>MOBILE</font></a>" + 
			document.body.innerHTML.substring( credits_index );
	} 
}

// End of main execution.



// Grab a page, put the important stuff in one of our divs
function update( page_path, target_div ) {
	var ajax = new XMLHttpRequest(); 		// Create AJAX object with which to fetch page 
	ajax.onreadystatechange = function () { 		// When the AJAX object updates -
		if( ajax.readyState == 4 ) { 		// If the update state means "finished" - 

			// Grab comic content from the fetched HTML
			var replacement_html = ajax.responseText.substring( 
				ajax.responseText.indexOf( '<!-- begin nav -->' ), 		// Alternately '<!-- begin comic content -->' - but that misses Trickster fluff. Hmm. 
				ajax.responseText.indexOf( '<!-- end comic content -->' ) 
			); 
			if( replacement_html == '' ) { 		// If the easy way failed (e.g. on Scratch pages), try again:
				var replacement_html = ajax.responseText.substring( 
					ajax.responseText.indexOf( '<table width="941" border="0" cellpadding="2"' ), 		// Ugly, ugly hack. Replace if possible. 
					ajax.responseText.indexOf( '<!--  FULL LOGO HEADER  -->' ) 
				); 
			}

			// Consider inserting non-mobile link into #mobile pages here. Consolidate a function with main execution's "else" block if so: splice-text-at or something. 

			// Enable Flash content
			while( replacement_html.indexOf( '<noscript>' ) > 0 ) { 		// Dunno why AC_RunActiveContent.js doesn't run, but the results are right here anyway - 
				replacement_html = replacement_html.replace( '<noscript>', '' ); 		// Flash pages provide NoScript-friendly best-guess results. Let's use those. 
			}

			// Update our fake page to show the comic and text 
			document.getElementById( target_div ).innerHTML = replacement_html; 

			// On visible updates, change links into Update calls and preload the next page
			if( target_div == 'content' ) { 		// If we're updating the main div -

					// Diddle the next-page link to allow preloading and prevent actual link behavior 
				var links = document.getElementById( 'content' ).getElementsByTagName( 'a' ); 		// Wish people would ID their fuckin' links. 
				var next_page = ''; 		// It'll be the first ?s= etc link on the page, so we'll do for(links) backwards and use the final value. 

				for( var n = links.length - 1; n >= 0; n-- ) { 
					if( links[n].href.indexOf( '?s=' ) > 0 && links[n].href.indexOf( '?game' ) == -1 ) { 		// If it's a page link but not a Save / Load / Etc. '?game' link - 
						next_page = links[n].fake_href = links[n].href.replace( '/mobile', '' ); 		// Store links[n]'s original target inside that link, because callbacks are dumb 
						links[n].addEventListener ( "click", function() { 
							update( this.fake_href, 'content' ); 		// Grab the link with this script instead of visiting it 
							history.pushState( { update: this.fake_href + "#mobile" }, 'MS Paint Adventures', this.fake_href + "#mobile" ); 		// So the Back button works on a fake link
						} , false ); 
						links[n].href = 'javascript:void(0)'; 		// Break link, so the script's function predominates. 
					} 		// End of if() block checking for page links
				} 		// End of for() loop over links in 'content' div 

				update( next_page, 'hidden_preload' ); 		// Load the next page in a hidden div, so images download while you're reading. EVERY WEBCOMIC SHOULD DO THIS. 
			} 		// End of if() block for 'content'-specific code 

		} 		// End of if() block for when page is fully fetched
	} 		// End of anonymous AJAX-update function
	if( page_path.indexOf( '://' ) < 0 ) { page_path = "http://www.mspaintadventures.com/" + page_path; } 		// Some links read as '/?s=etc', others as 'http...' - make all 'http'.
	ajax.open( "GET", page_path, true ); 		// GET this URL, false = synchronous 
	ajax.send(); 
} 		// End of Update function
欢迎访问Greasy Fork镜像
