Turn a page of thumbnails into high-res images
As of
// ==UserScript==
// @name Eza's Gallery Swallower
// @namespace https://inkbunny.net/ezalias
// @description Turn a page of thumbnails into high-res images
// @license MIT
// @license Public domain / no rights reserved
// @include https://www.pixiv.net/en/users/*
// @include https://www.pixiv.net/bookmark_new_illust.php*
// @include https://www.pixiv.net/en/tags/*/artworks*
// @include https://www.pixiv.net/user/*/series/*
// @include https://gelbooru.com/index.php?page*
// @include https://e621.net/posts*
// @include https://e926.net/posts*
// @include https://e621.net/pools/*
// @include https://e926.net/pools/*
// @include https://*.booru.org/*s=list*
// @include /https?\:\/\/www\.hentai-foundry\.com\//
// @include https://baraag.net/@*
// @include https://botsin.space/@*
// @include https://equestria.social/@*
// @include /https?\:\/\/rule34\.paheal\.net\//
// @include https://derpibooru.org/*
// @exclude *#dnr
// @noframes
// @version 2.8.6
// @grant GM_registerMenuCommand
// ==/UserScript==
// Create a vertical view for high-res versions of all the image links you can see.
// This includes all pages from multi-image submissions, where those exist.
// Individual images (or whole submissions) can be removed with one click.
// Each image is also a link.
// User options:
var default_size = "short"; // Choices: short, fit_width, fit_height, fit_window, full.
var new_image_rate = 50; // Milliseconds between loading images. E.g. 10 for instant, 200 for gradual.
var top_to_bottom = false; // Default order. True: as seen on the page. False: reversed, which is usually chronological.
var keyboard_controls = true; // (We don't actually have keyboard controls yet.)
// It might not even be possible to identify what error code onError caught. Jesus Christ, HTML.
// Fetch still doesn't work on Pixiv.
// fetch( 'https://i.pximg.net/c/250x250_80_a2/img-master/img/2020/05/23/10/59/10/81782474_p0_square1200.jpg', { credentials: 'include' } ).then(response => response.json()).then(data => console.log(data)); - returns an empty object, but never, ever logs anything. Without credentials there's at least a CORS error.
// I literally just want to see the response. It should not be possible to not get that information - 'fine' is 200, 'fuck off' is 403, and even no response is 500.
// Oh for fuck's sake. I just tested it in mainstream Firefox to see if it was my old browser being shitty - FF still throws a CORS error.
// It's i.pximg.net from pixiv.net. Aaaugh.
// I just want to know if a fucking image file exists! This is not an attack vector - you can do <img src onerror> and find the same damn information. Domain-agnostic.
// Do old-school XMLHttpRequest()s work? I only want the head. Ugh, probably still stopped by CORS.
// Javascript: the language where reading a file is prohibited for safety, but executing it as a script is no-questions-asked.
// ... can we just run it as a script and see if it 404s? Obviously it won't work if it exists.
// At this point I just need to style=visibility:hidden when things scroll offscreen. Same size, and god willing, no VRAM use.
// Maybe an interval that does this.src=this.src for all img elements - to fight when things half-load? Can't exactly press F5.
// Array.from( document.getElementsByTagName( 'img' ) ).forEach( i => i.src = i.src ) - inconsistently effective.
// I could add ?random-number to force a reload, but that's a complete re-download, so it's inadvisable. Can I check if it failed to-- oh right, onError.
// But I need to know what the error is, since we're still removing 404'd img elements with bad file extensions.
// I should maybe move or copy the thumbnails into a top bit, like Pixiv Fixiv.
// Also, like Pixiv Fixiv, I should probably have the ability to repopulate existing sub-spans with images,
// both for "augh all PNGs slow loading" and "ah fuck loading broke."
// What I have so far could easily replace Pixiv Fixiv's current code. The spans with this.parentElement.remove() stuff, anyway; we know the image count beforehand.
// For both, I'd like to stretch a thumbnail behind an image as it's loading. I'd need non-square thumbs. Or at least I'd really prefer them.
// I guess style=backgroundWhatever:that.src? I keep adding and removing this -> that for some damn reason.
// Change the BG color to something dark. (Ego says #324.)
// Testing whether loading shenanigans work: just make images visible on mouseover.
// This accidentally ignores muted images - I'm calling that a feature.
// Ugoira animations get a spot, but don't load an image. Semi-feature. Deserves better handling and indication.
// Clunky solution to memory problems: when an image loads, remove it, and put its URL in a list.
// This script suggests a generic solution to Twitter nonsense: replace tweet divs with their media. Break classes and IDs so their infinite-scrolling JS can't remove them. No worries about their stupid random class names, since we'd just parent.parent.parent and then .replace().
// Also I could probably just .remove() the sidebar bullshit.
// Relying on onError suuucks. I categorically NEED a way to distinguish 'didn't finish loading' from 'file not found.'
// I can maybe get around this by assuming all the thumbnails load. They're tiny and quick.
// So if a thumbnail removes itself and produces a div where one file extension is expected to load,
// and that element has no children, we can infer the load failed, and start over with the three separate file extensions.
// Maybe ctrl+z instead of a per-image 're-show' button? Stick per-image-group IDs on a list, first in last out, as they're removed.
// Still might need per-submission do-over buttons for when loading is borked. Still want them, anyway.
// Be positive: have an onLoad for each image format. Signal success, not implicit failure.
// Or I guess do both: onError, check for success?
// Even just onError not removing an image if the other two are already gone would safely assume it timed out while the others 404'd.
// Getting decent. Clone Pixiv Fixiv scaling modes, via changing image class and body class. Maybe go for unicode symbols instead of words.
// E.g. <-->, the vertical version of that, the cross version... '1:1' could just be text. Point is: not English.
// I can probably also do one-page-onscreen instead of as-it-comes vertical spacing, since I have divs around each image.
// And use a damn dark mode already!
// Buttons for forward/back? Floating over top, maybe. scrollTo stuff. Ech, but it has to update as you manually scroll down, so prev/next are at least consistently relative.
// Ideally the focus is somewhere in the middle of the screen, not like, one scanline of an image counts as being 'on' that image.
// Per-image removal buttons could be larger and lower-contrast. Big easy target. Ignorable.
// Spinner widget for individual images loading? I.e., keep spinning while the page is unfinished. That might be as simple as a DOM check.
// body.onload happens repeatedly, yeah?
// Style: thinking slow rotation, lower contrast, possibly inside the other spinner.
// I probably have to set/reset body.onError every time a new big-image starts loading.
// onstalled? onwaiting? onshow, for other things. Is oninvalid different from onerror?
// Count beside spinners? 'X images, N loading.'
// I could trivially turn this into a Pixiv Fixiv replacement - right? All I need is any image URL. No JSON shenanigans.
// A stand-in for images that haven't loaded would be nice. Maybe their thumbnail, in thumbnail size. Just tell me when the top manga will affect scrolling.
// Killing the submission reeeally needs to kill the underlying images. Maybe add another sub-sub-sub-span for next_image to target, and remove that. Then reloading the submission recreates that span before calling next_image on p0.
// Come on, I can hack together previous / next page links. Only at the bottom. Doesn't trigger automatically. Just slap it in there.
// https://www.pixiv.net/en/users/1346633/artworks?p=2 -> p=1 and p=3. Needs to handle bare /artworks to infer ?p=1.
// Add buttons for scrolling to prev/next image/submission. Left-aligned, top of each image.
// Long-term issue: this looks boring on a widescreen monitor. It's all tallscreen settings. Massive negative space otherwise.
// Needs a big reload-all button at the top.
// If I'm being clunky, I can probably grab image count from the counters in the corners.
// Kinda want a "remove all first images" button. So many censored thumbnails. Japan - fuck off already. We're sorry we colonialized you. Stop ruining porn.
// Ooh, Array.find(). Pass it a test function and it'll return the first element that matches.
// This could trivially work on Baraag. (And other Mastodon sites.)
// Oh, file-extension issues in Universal Scraper don't apply here.
// e621.
// Gelbooru:
// https://thumbs.gelbooru.com/0e/dd/thumbnail_0edd1b5e5d7a1ba2488a135d60d70c78.jpg
// https://img2.gelbooru.com//images/0e/dd/0edd1b5e5d7a1ba2488a135d60d70c78.jpg
// Image Toolbox on Pixiv shows the toolbox centered... with text... at the top of the screen. What is even the fuck.
// This goes beyond "CSS is bullshit." This is getting into "CSS is haunted."
// Removed the style making all spans position:relative, and that fixed the position, but there's still text. Only on Pixiv's bookmarks page. Why.
// Gelbooru is inconsistent about WebMs. Some resolve to images. Others are blank. Dunno which is better, but pick one.
// https://gelbooru.com/index.php?page=post&s=list&tags=rosiekawaii
// Gelbooru is inconsistent about images as well. https://gelbooru.com/index.php?page=post&s=view&id=5884654#dnr#&dnr
// https://gelbooru.com/index.php?page=post&s=list&tags=batako1812+manyuu_chifusa
// https://img3.gelbooru.com//images/a5/de/a5de992f2e7cd27a79ffdc35e9ece3e1.jpeg
// Oh, right, JPEG. Duh. I even anticipated that.
// Still, address videos on Gelbooru. E.g. https://gelbooru.com/index.php?page=post&s=view&id=5614716&tags=rosiekawaii#dnr#&dnr
// https://img3.gelbooru.com/images/3c/23/3c2376210444f7a7da737b412c722faa.jpg
// https://img3.gelbooru.com//images/3c/23/3c2376210444f7a7da737b412c722faa.webm
// Totally doable. So how do I check for a file without just embedding videos? Ugh, might be beyond onload / onerror behavior.
// Orrrr I could check tags. Not reliable. Could be wrong. But would allow a <video> with onerror to fall back to images.
// Better idea: indicate that it's probably a video, and link to the page without #dnr&dnr. Use Eza's Image Glutton, folks.
// Obviously that's the Ugoira solution on Pixiv: "don't." So it should be how I handle Ugoiras now that they're broken-ish.
// Embedding videos is undesirable because it implies linking to them for download.
// This script is already rude on bandwidth - videos would make it a DDOS attack.
// Solution: show thumbnail, not linked. (To avoid DownThemAll grabbing the thumbnail.)
// FurAffinity?
// https://t.furaffinity.net/40652351@300-1613453026.jpg
// https://d.furaffinity.net/art/ratcha/1613453026/1613453026.ratcha_party.jpg
// Nope, needs a fetch.
// Paheal? Direct image links... but many images per page. Bandwidth and memory, whatever, but it might piss off the site.
// Other Mastodon instances? Pawoo.
// https://botsin.space/@Vorebot
/*
https://mastodon.social/tags/art
Array.from( new Set( Array.from( document.querySelectorAll( '.display-name__account' ) ).map( v => v.innerText.split('@')[2] ) ) ).join( '\n' )
mastodon.art
mastodon.online
mastodon.social
pawoo.net
queer.af
gensokyo.social
infosec.exchange ?
slashine.onl
mastodont.cat
social.adamasnemesis.com
chitter.xyz
qoto.org
mastodon.sdf.org
photog.social
1929.com
equestria.social
fosstodon.org
mamot.fr
mastodon.technology
mastodon.cloud
wandering.shop
vis.social
todon.nl
pixelfed.social
libranet.de
social.tchncs.de
shrike.club
layer8.space
alive.bar
mastodon.ml
artalley.social
mstdn.social
mastodon.xyz
coletivos.org
framapiaf.org
chaos.social
mograph.social
octodon.social
embassy.social
mast.eu.org
plush.city
edolas.world
paypig.org
toot.elyat.im
friends.deko.cloud
www.librepunk.club
distrotoot.com
toot.wales
redroo.ml
artoot.xyz
Half of these seem to be crap. And it's still just a tiny sample. Yeesh.
*/
// I am alarmingly close to forking this for Mastodon, doing @include *, and testing for e.g. h-cite / h-entry.
// I don't want to @include * in general - this is not a general-purpose script.
// Even a fetch-based version would only be as flexible as Image Glutton.
// Ayrion.com / Eka's Domain?
// https://static.aryion.com/g4/thumb/662671-65284-1murk5-thumb.auto.jpg
// https://aryion.com/g4/data/662671-65284-1murh3.jpg/Slimshod-662671-loli_kitchen_girl_version_2020_01_18_1.jpg
// https://aryion.com/g4/data/662671-65284-1murh3.jpg/Slimshod-662671.jpg works. 1murk5 doesn't.
// But then there's shit like:
// https://static.aryion.com/g4/thumb/647381-65284-thumb.2640-330-330-330.crop.jpg
// https://aryion.com/g4/data/647381-65284-1bx9vuq.png/Slimshod-647381-cocktoberfest.png
// https://aryion.com/g4/view/647381 so the link is no help.
// <li class="gallery-item" id="647381"><div><a class="thumb" href="/g4/view/647381"><img src="//static.aryion.com/g4/thumb/647381-65284-thumb.2640-330-330-330.crop.jpg" alt=""></a><p class="item-title">Cocktober Fest [cooking] by MisticHobo</p><p class="g-small"><span>Views: 2,501<span class="biicon11 type-Images"></span></span></p></div></li>
// Nope, needs fetching.
// Sometimes I worry about the mental health of people reading this for the code. Sorry, folks. I'm not here for boring shit.
// Derpibooru?
// https://derpicdn.net/img/2020/3/19/2301306/thumb.jpg
// https://derpicdn.net/img/view/2020/3/19/2301306.jpg - well damn, that was easy.
// https://derpicdn.net/img/2017/9/21/1540591/thumb.jpeg - even "suggestive" censors are convenient. (Nope, wrong. See below.)
// Inkbunny? Probably not.
// https://tx.ib.metapix.net/thumbnails/medium/3492/3492395_funkybun_escalating_dares_p1_24_11_2020_noncustom.jpg
// https://tx.ib.metapix.net/files/full/3492/3492395_funkybun_escalating_dares_p1_24_11_2020.png
// Alright, maybe from a single fetch.
// CSS-only? Absurd tangent, but GreasyFork now lists CSS userscripts. It's probably possible to replace thumbnails on gallery websites with RegEx'd full-size versions, and fallbacks for each file extension. And obviously I think you can insert a line-break ::after each image and make them full-size or max-width / max-height. But yeesh.
// Visions of replacing filter-filter-filter chains with querySelectorAll fell through because A>B[C] always grabs B... not A.
// let things = Array.from( document.querySelectorAll( 'a > img[src*="thumbs"]' ) );
// You can get all images contained by a link. You cannot get all links containing an image.
// ... though you could get the images and do .parentElement a bunch.
// .closest( 'a' ) seeeeems to work. I do not know if it prefers hierarchy or in which direction.
// https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
// Oh: it is explicitly going up the chain. Kickass, perfect.
// Might use thumbnails of first image as scroll-into-view links at the top of the page.
// Maybe with Xs on each to remove things from there as well? Questionable.
// Probing is possible without thumbnails - just onLoad( classList add "ready" ). Same results, but slower. Meh.
// Next goal: sort out which URLs should and shouldn't have the button.
// Should the image-loading loop also use querySelector? It's already an interval; it doesn't need a list.
// And Array.from() prevents race conditions. And we could slice() that to do e.g. five at once.
// Dunno if a live HTMLCollection really evens out the browser's workload if we're triggering intervals five times per second.
// https://stackoverflow.com/questions/14377590/queryselector-and-queryselectorall-vs-getelementsbyclassname-and-getelementbyid -
// claims getElement methods are O(1). But it's not like O(n) is terrible.
// https://esbench.com/bench/57bdc462db965b9a00965c70 - 2x difference on a page with 500 elements. Basically: getElement is fine.
// http://ryanmorr.com/abstract-away-the-performance-faults-of-queryselectorall/ - ah, live collections are lazy.
// querySelectorAll has to collect the whole list up-front... which wouldn't matter if we just did one per interval, but it's still slower than getElementById.
// Buuut the comparison is actually getElementsByClassName. Which would be slower overall. Except we're just grabbing the first element. Hmm.
// Just modify that ESBench example. el.className=i. Actually let's add some duplicates, like parseInt( i / 10 ).
// Aaaand they're basically identical. Not shocking. querySelector is marginally faster, but not enough to care.
// If we wanted to grab a slice, querySelectorAll[0] is like five times slower than getElements.
// All efforts to cooerce ESBench into grabbing several elements from the start of getElements fail with "element is undefined,"
// despite aggressive consideration for all sensible obstacles to that basic-ass operation,
// buuut Array.from( querySelector ).slice(0,5) absolutely -chugs- at 250 ops/s, compared with ~6000 for a single query.
// Long story short: either way is fine for single elements. querySelector is a hair faster, especially with fewer elements on the page, but meh.
// Really I should be checking the impact of a very short interval and e = HTMLCollection[0].
// First whack: querySelector is nearly twice as fast, when finding a class matching no elements. Fewer elements: smaller difference.
// But if I put the getElements in the setup, so I'm just checking liveCollection[0]... that's more than twice as fast as querySelector.
// And it's like 18,000 ops/s for no matches, versus 5,000-6,000 for matches and 8,000 for no matches.
// So I've accidentally done things in an incredibly efficient manner. Neat.
// Now I can set the interval super low and not give a damn.
// Spent a while agonizing over performance vis-a-vis live HTMLCollections vs. querySelector, and found out it super doesn't matter.
// Setting up getElements and then only checking the first one has approximately zero impact on a modern PC.
// If I wanted to be absolutely paranoid and pursue order-of-magnitude gains, I'd make this all event-driven...
// but having buttons in the page context trigger functions in the script might get fucky. I dunno, a lot has changed since Tumblr Scrape.
// And the impact of setInterval seems to be approximately dick-all, so long as the timeout isn't zero or effectively zero.
// The upshot is that I set the timer to 10 ms and pages just -fly.- The "swallow gallery" button works immediately. Images load instantly.
// The latter is a mild concern, because sites might notice. An ideal server interaction looks just like opening a bunch of pages.
// Might move image count to the controls area.
// Its text already implies "image size" and "image order." But mostly I'm bugged that it doesn't line up with other text.
// Scolling controls: stick them against the left edge, level with top of each image, at a higher Z than the image.
// The goal is that they 'stay in place' when you click them. I.e. the next page's backwards / forwards buttons take the same position.
// Whole-submission backwards / forwards buttons go to the left and right of the submission title / link / remover.
// (Putting them on either side keeps the title centered.)
// Since these goofy circles are Like That for touchscreen-style separation, also include spacers.
// Previous submission, spacer, reload submission, title, remove submission, spacer, next submission.
// Fetch mode should introduce a new status besides "ready".
// E.g. set a div to "fetch" so it'll grab the page and replace the items[n] page URL with an image URL.
// Alright, I should probably support videos.
// https://baraag.net/@ThousandArms/105668327758530515#dnr#&dnr
// Thematically, the image-size controls should probably be blue.
// To do:
// Scrolling controls. Previous / next per-image and per-submission.
// Eventually turn these into keyboard commands, presumably with some interval to update which image they're relative to.
// Submissions already have IDs what we scrollIntoView via thumbnails.
// Individual images get dicey because we can remove them. I'd rather not manage a linked list separate from the DOM.
// ... I guess the DOM itself works? There's gotta be some nextChild thing that gets the job done.
// Genuine bugs:
// https://www.pixiv.net/user/55117629/series/87453?p=2 - gets everything but the manga. Different page format.
// Ugoira submissions display a big floating X, because those belong to the image-extension-trying block, not to each self-removing image.
// Ahh, it's because next_image would try _p0 and fail. This rewrite assumes the first image works. Maybe do cleanup in the interval?
// Dead images and possibly thumbnails take up horizontal space and cause slight movements while loading.
// Spinners don't work on Baraag.
// And how could they? We never update per-element style. Even if @animation worked, it'd be stuck there.
// Initialize to static, I guess.
// Changes since last version:
// Properly added Derpibooru.
// Immediately gave Derpibooru a button_delay_function instead of figuring out URL rules.
// Did that for Hentai Foundry too.
// Did that for Paheal too.
// Changed button_delay_function to 100ms instead of 1000ms, because why not be responsive?
// Changed Hentai-Foundry and Paheal @includes to use regexes. Should maybe just be http: and https:.
// Added CSS classes for navigation buttons (i.e. scroll to next / previous image).
// Added actual navigation functionality to said buttons.
// Tried to add per-image navigation buttons; failed. CSS is the devil.
// Consolidated button CSS into eza_button class.
// Forced line-height to prevent thumbnail grid from flowing around image controls. I fucking hate CSS.
// ------------------------------------ Custom replacement HTML ------------------------------------ //
// Replacement page. Not used immediately; it just makes more sense up here.
var html = '';
var style_rules = new Object; // CSS "selector": "style" map. Blame Baraag.
// ----- // CSS
// CSS rules as an associative array, so they can be applied per-element on uncooperative sites.
// Image style(s):
//style_rules[ "img.short" ] = "max-width: 90vw; max-height: 60vh; z-index: 10; vertical-align: middle;";
style_rules[ ".short img" ] = "max-width: 90vw; max-height: 60vh; z-index: 10; vertical-align: middle;";
style_rules[ ".full img" ] = "max-width: initial; max-height: initial; z-index: 10; vertical-align: middle;"; // "initial" for fake_css().
style_rules[ ".fit_width img" ] = "max-width: 90vw; max-height: initial; z-index: 10; vertical-align: middle;"; // Leaving space for big X.
style_rules[ ".fit_height img" ] = "max-width: initial; max-height: 95vh; z-index: 10; vertical-align: middle;";
style_rules[ ".fit_window img" ] = "max-width: 90vw; max-height: 95vh; z-index: 10; vertical-align: middle;";
// Dead spinners:
style_rules[ '.spacer' ] = 'position: absolute; width: 0px; height: 0px;';
style_rules[ '.other_spacer' ] = 'position: absolute; width: 0px; height: 0px;'; /* Arbitrarily smaller. */
style_rules[ '#image_counter' ] = 'position: absolute; left: 70px; top: 5px; font-size: 33px;';
// Button DRY:
style_rules[ '.eza_button' ] = 'border-radius: 50%; width: 60px; height: 60px; text-align: center; display: inline-block; cursor:pointer; line-height: 20px; font-size:33px; padding: 10px 10px; text-decoration: none; font-family: sans-serif;';
// Remove / reload controls:
style_rules[ '.remover' ] = 'color:#dd2e44; background-color:#d7dbd8; border:1px solid #ab1919;';
style_rules[ '.remover:hover' ] = 'background-color:#992a2a;';
style_rules[ '.floating' ] = 'z-index: 1; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); width: 120px; height: 120px; font-size:72px;';
style_rules[ '.reloader' ] = 'color:#194d19; background-color:#dbd7d8; border:1px solid #19ab19;';
style_rules[ '.reloader:hover' ] = 'background-color:#2abd2a;';
// Previous / next buttons, per-submission:
style_rules[ '.navigation_button' ] = 'color:#123; background-color:#d7dbd8; border:1px solid #234;';
style_rules[ '.navigation_button:hover' ] = 'background-color:#14f;';
//style_rules[ '.navigation_float' ] = 'z-index: 1; position: relative; float: left; top: initial;';
style_rules[ '.navigation_float' ] = 'z-index: 10; position: absolute; right: 50vw; top: initial;';
// Floating position absolute: floats relative to the image. Floating position relative: absolute left edge of screen. Fuck you, CSS.
// And while on the absolute left edge of the screen, with a mile of whitespace, it still puts the image off-center. Fuck you, CSS.
// left: and right: make no goddamn sense to begin with.
// Neither 50% nor 50vw reliably puts them where I want, which is, again, ON THE LEFT. The most basic position, you'd fucking think.
// Christ. Can I append this to the end of the document and force it to track each image?
style_rules[ '.button_spacer' ] = 'visibility: hidden; width: 30px; height: 30px;';
// Image-size controls:
style_rules[ '#controls' ] = 'float: right; font-size: 33px;';
style_rules[ '.control_button' ] = 'color:#FFF; background-color:#363;';
style_rules[ '.control_button:hover' ] = 'background-color:#282;';
// Previous / next links, at the bottom:
style_rules[ '.page_links' ] = 'font-size: 33px;';
// Thumbnail container and fixed-size thumbnails:
style_rules[ '.thumbnails_container' ] = 'display: grid; grid-gap: 5px;'; // Spans can't have fixed size, divs can't flow sensibly. Argh.
style_rules[ '.thumb_box' ] = 'width:100px; height:100px; display: inline-block; overflow: hidden;';
style_rules[ '.thumbnail_image' ] = 'width:100px;';
style_rules[ 'body' ] = 'line-height: 1.425 !important'; // Low values let thumbnails overlap image controls. Gelbooru picks 1.42857143... for some reason.
// Hidden thumbnails, probing to check for next image in multi-image sets:
style_rules[ '.test, .thumb' ] = 'display:none';
// Push all of that into a <style> block:
html += '<style> ';
for( selector in style_rules ) {
html += selector + ' { ' + style_rules[ selector ] + ' } \n';
}
html += '</style> ';
// Spinners:
html += '<style> .submissions_loader { position: absolute; left: 0px; top: 0px; border: 8px solid #3498db; border-top: 8px solid #111111; border-bottom: 8px solid #111111; border-radius: 50%; width: 48px; height: 48px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style>';
html += '<style> .images_loader { position: absolute; left: 8px; top: 8px; z-index: -1; border: 24px solid #db9834; border-top: 24px solid #aaaaaa; border-bottom: 24px solid #AAAAAA; border-radius: 50%; width: 0px; height: 0px; animation: images_spin 3s linear infinite; } @keyframes images_spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style>';
// Either I bodged the implementation of style_rules to a <style> block, or there's some other obstacle to animations. So these are separate.
// ----- // Page elements
// Floaty stuff:
html += '<div class="submissions_loader" id="submissions_spinner"></div>' /* Spinner for submissions, 'new images being found.' */
html += '<div class="images_loader" id="images_spinner"></div>' /* Spinner for images, 'images loading in high-res.' */
html += '<span id="image_counter"></span>'; /* This detaches. */
// Structure:
html += '<br><span id="controls" class=""></span><br><br><br><br>';
html += '<span id="thumbnails_container"></span><br><br>';
html += '<br><br><center><span id="centered" class="' + default_size + '"></span></center>'; /* Where most stuff goes. */
html += '<br><br><br>'; /* Spacing for prev/next links. */
html += '<center><span id="links"></span></center>'
html += '<br><br><br><br><br>'; /* Runout. */
// Additional HTML may be added by per-site functions. Once injected, we use the DOM.
// ------------------------------------ General setup & Per-site functions ------------------------------------ //
// ----- // Global variables
var trigger_size = [ 15, 70, 25, 10 ]; // Left, top, font-size, padding. Pixiv defaults.
var button_delay_function = false; // Should maybe have separate boolean and function.
var proper_fetch = false; // If true, we fetch pages instead of modifying thumbnail URLs. (Not yet implemented.)
var automatic_pagination = false; // Pixiv-style p0, p1, p2, etc.
var gather_items; // Per-site function to scrape page contents.
var items; // Scraped contents of page.
var formats = [ ".png", ".jpg", ".gif", ".jpeg" ]; // File extensions. (Edit: no sense not having JPEG by default.)
var page_number = 1; // Default.
var next_page, previous_page; // URLs of obvious purpose.
var probe_followup = ''; // Used to be part of "items," per-item, but only Pixiv uses them, and they're standard.
var image_followup = ''; // Ditto.
var force_style = false; // If sites don't allow inline CSS, apply style_rules to each element.
var centered, controls, thumbnails_container; // Spans that are already accessed globably, but were local "let" variables? Eh.
// ----- // Helper functions
// Turn window.location.search into a sensible associative array. Should be standard, guys!
function parse_search( search_string ) {
let strings = search_string.split( /[\?\&]/ )
.filter( v => v ) // Remove empty strings
let associative = new Object;
strings.forEach( v => associative[ v.split('=')[0] ] = v.split('=')[1] );
return associative;
}
function scrub_extensions( url, format_list ) {
if( format_list == null ) { format_list = formats; } // Shut up, it's global.
format_list.forEach( ext =>
url = url.replace( ext, '' ) )
return url;
}
function fake_css( parent ) {
if( force_style ) { // Not ideal practice? But it beats repeating "if( force_style ) { fake_css(); }" when that's the only time it'd happen.
if( parent == null ) { parent = document; } // Apply everywhere by default
for( selector in style_rules ) { // Global
Array.from( parent.querySelectorAll( selector ) )
.forEach( element => {
element.style = element.style.cssText + style_rules[ selector ];
} )
}
}
}
// ----- // Per-site setup and gather functions
var args = parse_search( window.location.search ); // DRY
switch( document.domain.replace( 'www.', '' ) ) {
case 'pixiv.net':
probe_followup = '_square1200';
formats = [ ".png", ".jpg", ".gif" ]; // I have never seen a JPEG on Pixiv. I have 100,000 _p0 JPGs, and they're all ".jpg".
automatic_pagination = true;
// Ever-useful test profile: https://www.pixiv.net/en/users/53625793
button_delay_function = () =>
document.querySelector( 'img[src*="250x"]' ) ||
document.querySelector( 'a *[style*="240x"]' );
// https://www.pixiv.net/bookmark_new_illust.php?p=2
// Pixiv's fake links mess this up sometimes. Nothing I can do - the browser is confused about the URL.
if( args["p"] ) { page_number = parseInt( args["p"] ); }
next_page = window.location.origin + window.location.pathname + "?p=" + (page_number + 1)
previous_page = window.location.origin + window.location.pathname + "?p=" + (page_number - 1);
// And now per-image removers are at the bottom again. because CSS is punishment for mankind's hubris.
gather_items = function() {
// Not sure the Array-map approach clarified or simplified anything, in Pixiv's case...
// Should probably do one pass, concat the other, and then map standardized results to page / title / etc.
return Array.from( document.querySelectorAll( 'a[href*="/art"] img[src*="c/2"]' ) )
.map( v => v.closest( 'a' ) )
// https://www.pixiv.net/en/users/53625793
.map( v => new Object( {
page: v.href,
title: v.href.split('/').pop(),
// https://i.pximg.net/c/250x250_80_a2/img-master/img/2020/06/22/05/58/05/82488314_p0_square1200.jpg
// https://i.pximg.net/img-original/img/2020/06/22/05/58/05/82488314_p0.jpg
thumb: v.querySelector( 'img' ).src,
probe: scrub_extensions( v.querySelector( 'img' ).src )
.replace( '_custom1200', '' )
.replace( '_master1200', '' )
.replace( '_square1200', '' )
.replace( '_p0', '_p' ),
image: scrub_extensions( v.querySelector( 'img' ).src )
.replace( '_custom1200', '' )
.replace( '_master1200', '' )
.replace( '_square1200', '' )
.replace( '_p0', '_p' )
.replace( 'c/250x250_80_a2/', '' )
.replace( 'c/240x240/', '' )
.replace( 'img-master/', 'img-original/' )
.replace( 'custom-thumb/', 'img-original/' ) // Some of these are redundant but it's not worth figuring out which.
} ) )
.concat( Array.from( document.querySelectorAll( 'a *[style*="background-image"]' ) )
.map( v => v.closest( 'a' ) )
// https://www.pixiv.net/bookmark_new_illust.php?p=2
.map( v => new Object( {
page: v.href,
title: v.href.split('/').pop(),
// url("https://i.pximg.net/c/240x240/img-master/img/2021/02/17/04/05/41/87838098_p0_master1200.jpg")
// https://i.pximg.net/img-original/img/2021/02/17/04/05/41/87838098_p0.jpg
thumb: v.querySelector( 'div[style]' ).style.backgroundImage
.replace( 'url("', '' )
.replace( '")', '' ),
probe: scrub_extensions( v.querySelector( 'div[style]' ).style.backgroundImage )
.replace( 'url("', '' )
.replace( '")', '' )
.replace( '_custom1200', '' )
.replace( '_master1200', '' )
.replace( '_square1200', '' )
.replace( '_p0', '_p' ),
image: scrub_extensions( v.querySelector( 'div[style]' ).style.backgroundImage )
.replace( 'url("', '' )
.replace( '")', '' )
.replace( '_custom1200', '' )
.replace( '_master1200', '' )
.replace( '_square1200', '' )
.replace( '_p0', '_p' )
.replace( 'c/250x250_80_a2/', '' )
.replace( 'c/240x240/', '' )
.replace( 'img-master/', 'img-original/' )
.replace( 'custom-thumb/', 'img-original/' )
} ) )
)
/*
let things = Array.from( links ) // There's probably a less-verbose querySelectorAll for this.
.filter( a => a.href )
.filter( a => a.href.indexOf( '/artworks/' ) > 0 )
.filter( a => a.querySelector( 'img' ) )
.filter( a => a.querySelector( 'img' ).src )
.filter( a => a.querySelector( 'img' ).src.match( 'c/2' ) );
// document.querySelectorAll( 'a[href*="/art"] img[src*="c/2"]' )
things = things.concat( Array.from( links ) // Sort and reverse: side-effectful. Concat: functional. Go fuck yourself, Javascript.
.filter( a => a.innerHTML.match( 'background-image' ) )
)
// document.querySelectorAll( 'a *[style*="background-image"]' )
let items = new Array;
things.forEach( (v,i,a) => {
let item = new Object;
item.page = v.href;
item.title = v.href.split('/').pop(); // Just the number - large print.
// https://i.pximg.net/c/250x250_80_a2/img-master/img/2020/06/22/05/58/05/82488314_p0_square1200.jpg
// https://i.pximg.net/img-original/img/2020/06/22/05/58/05/82488314_p0.jpg
if( v.querySelector( 'img' ) ) { // Would it kill you to return null for all properties of null? Does it have to be a TypeError?
item.thumb = v.querySelector( 'img' ).src
} else {
item.thumb = v.querySelector( 'div[style]' ).style.backgroundImage
.replace( 'url("', '' )
.replace( '")', '' );
}
item.thumb = scrub_extensions( item.thumb )
item.thumb = item.thumb
.replace( '_p0', '_p' ); // Remember to add a page number.
item.thumb = item.thumb
.replace( '_custom1200', '' )
.replace( '_master1200', '' )
.replace( '_square1200', '' );
item.image = item.thumb
.replace( 'c/250x250_80_a2/', '' )
.replace( 'c/240x240/', '' )
.replace( 'img-master/', 'img-original/' )
.replace( 'custom-thumb/', 'img-original/' ); // And still remember to add a page number.
items.push( item );
} );
return items;
*/
}
break;
// https://gelbooru.com/index.php?page=post&s=view&id=2135704 - bad submission crashes gather_items.
// https://gelbooru.com/index.php?page=post&s=list&tags=saberfish+aftersex+hug
// Huh. Only causes problems on the Comments page, not post list.
case 'gelbooru.com':
// https://gelbooru.com/index.php?page=post&s=list&tags=shuujin_academy_uniform+chair+1girl+pink_background
trigger_size = [ 15, 35, 16, 5 ]; // Left, top, font-size, padding.
// https://gelbooru.com/index.php?page=post&s=list&tags=4girls
// https://gelbooru.com/index.php?page=post&s=list&tags=4girls&pid=42
// https://gelbooru.com/index.php?page=comment&s=list&pid=10 // Whoops.
page_number = 0;
let pages_at_once = 42;
if( window.location.href.match( 'page=comment' ) ) { pages_at_once = 10; }
if( args["pid"] ) { page_number = parseInt( args["pid"] ); }
next_page = window.location.href + "&pid=" + (page_number + pages_at_once); // Flawed, but it works.
previous_page = window.location.href + "&pid=" + (page_number - pages_at_once);
gather_items = function() {
return Array.from( document.querySelectorAll( 'a[href*="s=view"]' ) )
.map( v => new Object( {
// https://gelbooru.com/index.php?page=post&s=view&id=4179699&tags=pink_background
page: v.href,
title: v.href.split( '&id=' )[1].split( '&' )[0],
// https://img3.gelbooru.com/thumbnails/f5/c7/thumbnail_f5c7826072943fd72076ba9121b473f0.jpg
// https://img3.gelbooru.com/images/f5/c7/f5c7826072943fd72076ba9121b473f0.jpg
thumb: v.querySelector( 'img' ).src,
image: scrub_extensions( v.querySelector( 'img' ).src )
.replace( '/thumbnails', '/images' )
.replace( 'thumbnail_', '' )
} ) )
}
break;
// Intermittent issue: just had e621's images all disappear. Second time this has happened. Not sure the first time was on this site.
// Both times, the page had been sitting open (second monitor) for like a minute. Fresh reload before that. Console almost certainly open.
// img elements still show valid src.
// .post-preview, #image-container, #c-comments .post, .mod-queue-preview.post-preview, .post-thumbnail { visibility: hidden !important; }
// ... so why did that get set? It's triggering on .post-preview. That's at the <article> level... for some reason.
// This code only touches article elements to check for blacklisting, it only does that if gather_items is called. Which it wasn't.
// Just happened to a bare image on i.reddit.com domain. Pretty sure it's a Pale Moon issue.
case 'e621.net':
case 'e926.net':
// https://e621.net/posts?tags=somik+mirror
trigger_size = [ 15, 50, 16, 5 ]; // Left, top, font-size, padding.
if( window.location.href.indexOf( '/pools/' ) > 0 ) { top_to_bottom = true; }
// https://e621.net/posts
// https://e621.net/posts?page=2
// https://e621.net/posts?tags=asthexiancal++
// https://e621.net/posts?page=2&tags=asthexiancal++
if( args["page"] ) { page_number = parseInt( args["page"] ); }
next_page = window.location.href + "&page=" + (page_number + 1); // Insufficient on https://e621.net/posts
if( next_page.indexOf( '?' ) < 0 ) { next_page = next_page.replace( '&', '?&' ); } // Klunk.
previous_page = window.location.href + "&page=" + (page_number - 1);
gather_items = function() {
return Array.from( document.querySelectorAll( 'a[href*="posts/"] img' ) )
.map( v => v.closest('a') )
.filter( v => ! v.closest('article').className.match( 'blacklisted-active' ) ) // Exclude hidden posts.
.map( v => new Object( {
// https://e621.net/posts/1333873?q=somik+mirror
page: v.href,
title: v.href.split( 'posts/' )[1].split( '?' )[0],
// https://static1.e621.net/data/preview/37/75/3775cd8664c688f98a41780f6796ce86.jpg
// https://static1.e621.net/data/37/75/3775cd8664c688f98a41780f6796ce86.png
thumb: v.querySelector( 'img' ).src,
image: scrub_extensions( v.querySelector( 'img' ).src )
.replace( '/preview', '' )
} ) )
}
break;
// http://www.hentai-foundry.com/users/FaveUsersRecentPictures?username=Example
// http://www.hentai-foundry.com/pictures/user/AmaZima
// http://www.hentai-foundry.com/pictures/user/AmaZima/scraps
// Not http://www.hentai-foundry.com/pictures/user/AmaZima/875960/Spirit-lantern
// Not http://www.hentai-foundry.com/user/AmaZima/profile
// Haha, http://www.hentai-foundry.com/pictures/user/Underrock/883176/MTWD-Ch.-II-Pg.-16#dnr#&dnr shows both PNG & JPG.
case 'hentai-foundry.com':
var trigger_size = [ 15, 20, 25, 10 ];
// button_delay_function might be the only way to separate gallery pages from submission pages. HF's URLs are duuumb.
button_delay_function = () =>
document.querySelector( 'a.thumbLink' )
// http://www.hentai-foundry.com/pictures/user/AmaZima/page/9
// http://www.hentai-foundry.com/users/FaveUsersRecentPictures?username=Ezalias&page=2
let page_indicator = '/page/';
if( window.location.href.indexOf( '/users/' ) > 0 ) { page_indicator = '&page='; } // Followed users' recent pictures
if( window.location.href.indexOf( page_indicator ) > 0 ) {
page_number = parseInt( window.location.href.split( page_indicator ).pop() );
previous_page = window.location.href.split( page_indicator )[0] + page_indicator + (page_number - 1);
}
next_page = window.location.href.split( page_indicator )[0] + page_indicator + (page_number + 1); // page_number defaults to 1.
gather_items = function() {
return Array.from( document.querySelectorAll( 'a.thumbLink' ) )
.map( v => {
// http://www.hentai-foundry.com/pictures/user/AmaZima/589016/Tired-but-happy-Lottie
let username = v.href.split( '/' )[5]; // AmaZima
let title = v.href.split( '/' )[6]; // 589016
return new Object( {
page: v.href,
title: title,
// url("//thumbs.hentai-foundry.com/thumb.php?pid=589016&size=350")
// http://pictures.hentai-foundry.com/a/AmaZima/589016/AmaZima-589016-Tired_but_happy_Lottie.png
// http://pictures.hentai-foundry.com/t/Tixnen/869342/Tixnen-869342-Vasilina.jpg
thumb: v.querySelector( 'span[style]' ).style.backgroundImage // Why would it be easy.
.replace( 'url("', '' )
.replace( '")', '' ),
image: window.location.protocol + "//pictures.hentai-foundry.com/"
+ username.slice( 0, 1 ).toLowerCase() + '/' + username + '/'
+ title + '/'
+ username + '-' + title + '-'
+ v.href.split( '/' ).pop().replace( /-/g, '_' )
} )
} )
}
break;
// Baraag... and Mastodon in general, ideally.
// Oof. Baraag has multiple submissions per post, but they're not numerically related.
// Maybe delay when "ready" again for image-array sites, so we don't instantly re-ready this one submission. Avoid linearity.
// Instead of typeOf - item.thumbs vs item.thumb? Neither is especially elegant. Global boolean?
// I am hard pressed not to just lean on typeof. Why keep track? If you pass an array of URLs, you get an array of images.
// Out-of-bounds signalling for page count -might- still be useful for Pixiv. That'd let us skip the thumbnail-try stuff.
// Argh, retweets ("boosts?") aren't of class h-entry. They're h-cite. Can I just querySelector with a comma? Sure can.
// Guess that puts a nail in whether to grab links and filter down, or one-shot with complex CSS and work up.
// https://baraag.net/@MahmaPuu/105784936076784125 - video that breaks gather_items. "TypeError: data is undefined."
// Apparently a "Video" component instead of "MediaGallery". No .media property. Argh.
case 'baraag.net':
case 'equestria.social':
case 'botsin.space':
formats = [""];
force_style = true; // querySelectorAll, element.style = be round, dammit.
// https://baraag.net/@Applalt/media
// https://baraag.net/@Applalt/media?max_id=105165058865018699 // Yeesh.
page_number = 2; // Value as flag. previous_link doesn't display on page 1, even if it's defined.
let navs = document.querySelectorAll( 'a[class*="load-more"]' );
if( navs[0] ) {
if( navs.length == 2 ) { previous_page = navs[0].href; next_page = navs[1].href; } // Both
else if( window.location.href.indexOf( '?max_id=' ) > 0 ) { previous_page = navs[0].href; } // Last page
else { next_page = navs[0].href; } // First page
}
gather_items = function() {
return Array.from( document.querySelectorAll( '.h-entry, .h-cite' ) )
.filter( v => v.querySelector( 'div[data-props*="media"]' ) ) // Text-only posts fuck us up.
.map( v => {
let item = new Object;
item.page = v.querySelector( 'a[class*="time"][href]' ).href;
item.title = item.page.split( '/' ).pop();
// dataset.props example: Object { height: 343, sensitive: true, autoplay: true, media: Array[3] }
// .media example: Array [ Object, Object, Object ]
// .media[0]: Object { id: "105651575500861937", type: "image",
// url: "https://baraag.net/system/media_att…", preview_url: "https://baraag.net/system/media_att…",
// remote_url: null, preview_remote_url: null, text_url: "https://baraag.net/media/C62aWhAqWt…",
// meta: Object, description: null, blurhash: "UFCGJfX99@RP^%t7OoV@4ms:kpn+x[V@Rja#" }
// ... but none of those URLs are the post URL, so keep original item.page code.
let data = JSON.parse( v
.querySelector( 'div[data-props]' )
.dataset.props )
.media; // Array of objects
if( data ) { // Clunky workaround for some video submissions. Only some.
item.thumb = data.map( v => v.preview_url )[0]; // One thumbnail per submission.
item.image = data.map( v => v.url );
}
return item;
} )
}
break;
case 'rule34.paheal.net':
formats = [""];
button_delay_function = () => document.querySelector( '.shm-thumb' );
// http://rule34.paheal.net/post/list/Marco_Diaz%20Polyle/1
let parts = window.location.href.split( '/' );
page_number = parseInt( parts.pop() ); // Side-effectful pop().
if( isNaN( page_number ) ) { // Basically only http://rule34.paheal.net/post/list
page_number = 1;
parts = window.location.href.split( '/' );
}
next_page = parts.join( '/' ) + '/' + (page_number+1);
previous_page = parts.join( '/' ) + '/' + (page_number-1);
gather_items = function() {
// https://peach.paheal.net/_thumbs/421e200e2cde9a3b428a6e0df94a6492/thumb.jpg
// https://peach.paheal.net/_images/421e200e2cde9a3b428a6e0df94a6492/3993741%20-%20Marco_Diaz%20Polyle%20Star_vs_the_Forces_of_Evil.png
// http://rule34.paheal.net/post/view/3993741#search=Marco_Diaz%20Polyle
// <a href="https://peach.paheal.net/_images/421e200e2cde9a3b428a6e0df94a6492/3993741%20-%20Marco_Diaz%20Polyle%20Star_vs_the_Forces_of_Evil.png">File Only</a>
return Array.from( document.querySelectorAll( '.shm-thumb' ) )
.map( v => new Object( {
page: v.querySelector( '.shm-thumb-link' ).href,
title: v.querySelector( 'img' ).id.replace( 'thumb_', '' ),
thumb: v.querySelector( 'img' ).src,
image: scrub_extensions( v.querySelector( 'a[href*="/_images"]' ).href )
} ) )
}
break;
// Note: this won't show images with "Suggestive" or otherwise not-the-image thumbnails.
// It obeys your blacklist, and if you're not signed in, it obeys the default blacklist.
// This behavior does not match how Image Glutton redirects through those warnings.
// I'm okay with it, here, because other sites in this script obey blacklists.
// Though I should probably .filter for known not-the-image thumbnails so nothing shows up. Hm.
case 'derpibooru.org':
trigger_size = [ 15, 55, 16, 5 ]; // Left, top, font-size, padding.
force_style = true;
button_delay_function = () => document.querySelector( 'a[title*="Tagged"]' );
// https://derpibooru.org/tags/artist-colon-jargon%2Bscott?page=2&q=artist%3Ajargon+scott
// https://derpibooru.org/images?page=2
// https://derpibooru.org/tags/artist-colon-jargon%2Bscott?page=2&q=artist%3Ajargon+scott?page=3 does not work. Arse.
page_number = parseInt( args.page );
next_page = document.querySelector( 'a[href*="page=' + (page_number + 1) + '"]' );
if( next_page ) { next_page = next_page.href; }
previous_page = document.querySelector( 'a[href*="page=' + (page_number - 1) + '"]' );
if( previous_page ) { previous_page = previous_page.href; } // I despise that this is the necessary pattern. Let null.whatever safely return null.
gather_items = function() {
return Array.from( document.querySelectorAll( 'a[title*="Tagged"]' ) )
.map( v => new Object( {
page: v.href, // https://derpibooru.org/images/2301306?q=artist%3Ahexado
title: v.href.split( /[\?/]/ )[4], // 2301306
thumb: v.querySelector( 'img' ).src, // https://derpicdn.net/img/2020/3/19/2301306/thumb.jpg
image: scrub_extensions( v.querySelector( 'img' ).src )
.replace( '/img/', '/img/view/' )
.replace( '/thumb', '' )
} ) )
}
break;
}
// Subdomains always have to cause problems.
if( document.domain.split( '.' ).slice( 1, 3 ).join( '.' ) == "booru.org" ) { // *://*.booru.org/*
trigger_size = [ 15, 55, 16, 5 ]; // Left, top, font-size, padding.
// https://svtfoe.booru.org/index.php?page=post&s=list&tags=crack_ship&pid=20
// https://svtfoe.booru.org/index.php?page=post&s=list&tags=socks&pid=20
page_number = 0;
if( args["pid"] ) { page_number = parseInt( args["pid"] ); }
next_page = window.location.href + "&pid=" + (page_number + 20); // Flawed, but it works.
previous_page = window.location.href + "&pid=" + (page_number - 20);
gather_items = function() {
return Array.from( document.querySelectorAll( 'a img[src*="thumbs"]' ) )
.map( v => v.closest( 'a' ) )
.filter( v => ! v.style.display ) // Exclude hidden posts. Should be !display=="none", but typeError says fuck you.
.map( v => new Object( {
// https://svtfoe.booru.org/index.php?page=post&s=view&id=29292
page: v.href,
title: v.href.split( '=' ).pop(),
// https://thumbs.booru.org/svtfoe/thumbnails//28/thumbnail_187209e3ca22a28fd1ce75a7fd4f54aee3cf1e62.jpg
// https://img.booru.org/svtfoe//images/28/187209e3ca22a28fd1ce75a7fd4f54aee3cf1e62.jpg
thumb: v.querySelector( 'img[src*="thumbs"]' ).src,
image: scrub_extensions( v.querySelector( 'img[src*="thumbs"]' ).src )
.replace( 'thumbs.', 'img.' )
.replace( '/thumbnails', '/images' )
.replace( 'thumbnail_', '' )
} ) )
}
}
// ----- // Controls to invoke script
GM_registerMenuCommand( "Swallow entire gallery", show_images ); // GreaseMonkey dropped this feature years ago, but I am stubborn.
// Put button on page, since there's no menu in "modern" Userscript plugins.
// Onclick, change class to some spinner, so it reacts instantly and looks like it's loading. Really the interval is waiting a second.
var trigger = document.createElement( 'button' );
trigger.innerText = "Swallow gallery";
trigger.className = "unclicked_button";
trigger.onclick = function(){ this.innerText='Swallowing...'; this.className = 'clicked_button'; } // Immediate visible change, idempotent
trigger.style = "position: absolute; left: " + trigger_size[0] + "px; top: " + trigger_size[1] + "px; background-color:#dbd7d8; border-radius: 20px; text-align: center; display: inline-block; border:1px solid #19ab19; cursor:pointer; line-height: 20px; color:#194d19; font-family:Arial; font-size:" + trigger_size[2] + "px; padding: " + trigger_size[3] + "px " + trigger_size[3] + "px; text-decoration:none;"
// Pixiv doesn't work properly until after thumbnails load, so don't show the button until then.
// ... or we could show the button, but not replace the page until thumbnails appear.
if( typeof( button_delay_function ) == "function" ) { // Note: checking for presence of function.
add_button = setInterval( function() {
if( button_delay_function() ) { // Note: function called, checking results.
clearInterval( add_button );
document.body.appendChild( trigger );
}
}, 100 ); // Passive - no interaction concerns.
} else {
document.body.appendChild( trigger ); // Most sites are ready-to-go.
}
// Injecting code into the page is nontrivial - ironically because function.toString is fragile - so just look for a change in the page.
var button_check = document.getElementsByClassName( 'clicked_button' );
var fake_event = setInterval( function() {
if( button_check.length > 0 ) {
clearInterval( fake_event );
show_images();
}
}, 50 ); // Doherty threshold for frustration is 400ms. But: "a couple times a second" doesn't bother modern machines.
// function fetch_pages( page_links ) { } // Still expecting to use this approach on some site, but so far, nnnope.
// End of main execution.
// ------------------------------------ Gallery Swallower ------------------------------------ //
function show_images() {
// ----- // Replace page, set up furniture
// Grab links and/or thumbnails using per-site code:
if( ! items ) {
items = gather_items(); // Array of objects, listing page link, thumbnail, presumed fullsize image, etc.
if( top_to_bottom == false ) { items.reverse(); }
}
// A "reverse order" button could just call show_images again, but check if items exists and re-use it.
// console.log( items ); // Debug. Be honest, this is staying here.
// Erase existing page, use ours instead
// document.head.innerHTML = ''; // Looks bad, accomplishes nothing.
document.body.innerHTML = html;
controls = document.getElementById( 'controls' ); // Has to go after document = html, duh.
thumbnails_container = document.getElementById( 'thumbnails_container' );
centered = document.getElementById( 'centered' );
let links_element = document.getElementById( 'links' );
// Pixiv doesn't work if this function is in the main scope. Every other site is fine. I have no goddamn idea why.
// Making the root node an argument and passing #controls doesn't fix the problem.
// I've read "programming is a puzzle game where all the puzzles are caused by your own stupidity," but web design comes with its own stupidity DLC.
// Is it the function name? Does Pixiv's code have a collision, in the main / global scope?
// Yeah apparently. I renamed it to something rude and it worked fine in the main scope.
// But... is there a reason not to leave this inside show_images?
// Object-oriented Javascript doesn't care. We only add these control buttons, and the initial "swallow gallery" trigger.
// Aaaugh alright we also add buttons aplenty per-submission, and will be doing even more for navigation.
function add_button( text, onclick ) { // DRY. Specific to #controls, for now.
let button = document.createElement( 'button' );
button.innerText = text;
button.onclick = onclick
button.className = "control_button eza_button";
controls.appendChild( button );
controls.appendChild( document.createTextNode( " " ) ); // Asinine way to force spacing.
}
// Controls - e.g. image size and order.
controls.appendChild( document.createTextNode( "Size: " ) );
add_button( "▣", function() { centered.className = "short"; fake_css(); } ); // This and "full" could use better glyphs.
add_button( "↔", function() { centered.className = "fit_width"; fake_css(); } );
add_button( "↕", function() { centered.className = "fit_height"; fake_css(); } );
add_button( "✢", function() { centered.className = "fit_window"; fake_css(); } );
add_button( "■", function() { centered.className = "full"; fake_css(); } ); // Unicode has no four-way arrow glyph. No emoji either. Weird.
controls.appendChild( document.createTextNode( " Order: " ) );
add_button( "⇅", function() {
for( node of [ centered, thumbnails_container ] ) { // DRY
node.childNodes.forEach( (v,i,a) => node.insertBefore( node.childNodes[i], node.firstChild ) );
}
} )
// Navigation links, at the bottom
let link_html = ""; // "Previous" or "Previous - Next" or "Next"
if( page_number <= 1 ) { previous_page = ''; } // No previous link on first pages. (Page 0 is valid.)
// encodeURI breaks links. We're generating text from parseInt page numbers, or grabbing links already in the page - it's fine.
if( previous_page ) { link_html += "<a href='" + ( previous_page ) + "'>Previous page</a>"; }
if( previous_page && next_page ) { link_html += " - "; }
if( next_page ) { link_html += "<a href='" + ( next_page ) + "'>Next page</a>"; }
links_element.className = 'page_links';
links_element.innerHTML = link_html;
// ----- // Per-submission links and controls
// Give each item its own set of spans, with basic onClick controls to remove images or reload a submission.
for( let item_key = 0; item_key < items.length; item_key++ ) {
item = items[ item_key ];
let container = document.createElement( 'span' );
container.id = item_key + 'container';
let basket = document.createElement( 'span' ); // Two hard problems.
basket.id = item_key;
let reloader = document.createElement( 'button' );
reloader.innerText = '⟳';
reloader.onclick = function() {
let e=document.getElementById( item_key );
e.innerHTML = "";
e.dataset.page_number=0;
e.className="ready";
}
reloader.className = 'reloader eza_button';
let link = document.createElement( 'a' );
link.href = item.page + '#dnr#&dnr';
link.innerText = ' ' + item.title + ' ';
link.setAttribute( "target", "_blank" );
link.style = 'font-size:30px';
let navigation_next = document.createElement( 'button' );
navigation_next.innerText = '→';
navigation_next.onclick = function() { document.getElementById( (item_key+1) + 'container' ).scrollIntoView(); }
navigation_next.className = 'navigation_button eza_button';
let navigation_previous = document.createElement( 'button' );
navigation_previous.innerText = '←';
navigation_previous.onclick = function() { document.getElementById( (item_key-1) + 'container' ).scrollIntoView(); }
navigation_previous.className = 'navigation_button eza_button';
let first_spacer = document.createElement( 'button' );
first_spacer.className = 'button_spacer eza_button';
let second_spacer = document.createElement( 'button' );
second_spacer.className = 'button_spacer eza_button';
let submission_remover = document.createElement( 'button' ); // Erase whole submission.
submission_remover.innerText = '✕';
submission_remover.onclick = function(){ document.getElementById( item_key ).innerHTML = ""; }
submission_remover.className = 'remover eza_button'; // Add some CSS to float left or whatever.
let bottom_submission_remover = submission_remover.cloneNode(); // Why doesn't this include innerText?
bottom_submission_remover.innerText = '✕'; // ⬆️❌? ↑⇑↥⤒⤊? Eh, nothing color scales well. Obvious mismatch.
// Scroll back up on removal, since a bunch of vertical content disappeared.
// The presumed use of this button is when you've scrolled past a long-ass manga and gone "meh,"
// so you don't want to hunt for the root reload / remove buttons. That crap killed me in Tumblr Scrape.
bottom_submission_remover.onclick = function() {
document.getElementById( item_key ).innerHTML = "";
document.getElementById( item_key + 'container' ).scrollIntoView();
}
container.appendChild( navigation_previous );
container.appendChild( first_spacer );
container.appendChild( reloader );
container.appendChild( link );
container.appendChild( submission_remover );
container.appendChild( second_spacer );
container.appendChild( navigation_next );
container.appendChild( document.createElement( 'br' ) );
container.appendChild( basket );
container.appendChild( bottom_submission_remover );
container.appendChild( document.createElement( 'br' ) );
centered.appendChild( container );
// Thumbails at the top:
let thumbnail_image = document.createElement( 'img' );
thumbnail_image.className = "thumbnail_image"; // Fixed-width image.
thumbnail_image.src = item.thumb;
thumbnail_image.onerror = function() { this.remove(); }
let thumb_box = document.createElement( 'span' );
thumb_box.className = "thumb_box"; // Fixed-size grid box, overflow hidden. Crops tall images.
thumb_box.onclick = function() { document.getElementById( item_key + 'container' ).scrollIntoView(); }
thumb_box.appendChild( thumbnail_image );
thumbnails_container.appendChild( thumb_box );
fake_css(); // Function itself checks force_style boolean.
basket.dataset.page_number = 0;
basket.classList.add( "ready" ); // Signals interval function to load an image here.
}
// ----- // Ongoing interaction and loading
// Load more images in "ready" submissions, when available.
var ready_elements = document.getElementsByClassName( 'ready' );
var interval_object = setInterval( function() {
// Add an image to the ready basket, increment page number, conditionally ready-up for another image.
// Image list: just grab list[n]. Automatic pagination: probe for matching numbered thumbnail.
if( ready_element = ready_elements[0] ) { // "If ready_elements.length > 0," but with race condition paranoia.
ready_element.classList.remove( 'ready' ); // We fancy.
let item_id = parseInt( ready_element.id );
let manga_page = parseInt( ready_element.dataset.page_number ); // Not web-page... comic-page.
ready_element.dataset.page_number = 1 + manga_page;
// Prepare filename, once:
let image_url = items[ item_id ].image;
if( typeof( items[ item_id ].image ) == "object" ) // typeof, not typeOf? "object", not "Array"? Fuck you, Javascript.
{ image_url = items[ item_id ].image[ manga_page ]; }
if( automatic_pagination ) // Basically just Pixiv.
{ image_url += manga_page; }
image_url += image_followup; // Usually nothing.
// Try all plausible file extensions for an inline image.
let forms = new Array;
for( format of formats ) {
let png = document.createElement( 'img' );
let apng = document.createElement( 'a' );
apng.appendChild( png );
png.className = "full_image loading"; // Debug-ish. Also, doesn't work for some goddamn reason.
png.src = image_url + format;
// console.log( image_url );
png.onerror = function() { this.parentElement.remove(); } // Remove parent link (apng / ajpg / agif) as well.
png.onload = function() { this.classList.remove( "loading" ); }
apng.href = png.src;
apng.setAttribute( "target", "_fuckgelbooru" ); // WHY IS THERE NO OPPOSITE TO DISPLAY:NONE?!
forms.push( apng );
}
let next_image = document.createElement( 'button' );
next_image.innerText = '→';
next_image.onclick = function() { document.getElementById( 's' + item_id + 'p' + (manga_page+1) ).scrollIntoView(); }
// choices = [ getElement sXpY, s(X+1)p0 ]; forEach( if not null .scrollIntoView & return ).
// Fuck, how do you handle going backwards to a 'last image?' I guess rely on ready_element.dataset.page_number.
next_image.className = 'navigation_button navigation_float eza_button';
let remover = document.createElement( 'button' ); // Big red X, to remove this image specifically.
remover.innerText = '✕';
remover.onclick = function() { this.parentElement.remove(); }
remover.className = 'remover floating eza_button';
// New span per-image, so whole-submission X prevents new images from loading:
let outer_span = ready_element.querySelector( 'span' );
if( outer_span == null ) {
outer_span = document.createElement( 'span' );
ready_element.appendChild( outer_span );
}
let inner_span = document.createElement( 'span' );
inner_span.style = "position: relative;"; // This fixes the vertically-aligned Xs. Do NOT ask me how.
outer_span.appendChild( inner_span );
// Per-page ID is necessary for scrolling. Obviously it should combine the submission ID & manga_page.
// Aaaargh it's in the middle of the fucking image. It scrolls to where the buttons are centered. Fuck you, CSS.
// I've put it in a <br> for now, and it'll be placed wrong, but it's less fucked than the CSS, so I'll have that fight later.
let anchor = document.createElement( 'br' );
anchor.id = 's' + item_id + 'p' + manga_page;
// inner_span.appendChild( next_image );
for( form of forms ) { inner_span.appendChild( form ); } // Insert all image tries.
inner_span.appendChild( remover );
inner_span.appendChild( document.createElement( 'br' ) );
inner_span.appendChild( anchor );
// Probe-try stuff:
if( automatic_pagination ) {
forms = new Array;
for( format of formats ) {
png = document.createElement( 'img' ); // Reuse
png.src = items[ item_id ].probe + (manga_page+1) + probe_followup + format;
png.className = 'test';
png.onerror = function() { this.remove(); }
// Any truly hideous behavior is often attributable to the wrong number of .parentElements below:
png.onload = function() { this.parentElement.parentElement.parentElement.classList.add( "ready" ); this.remove(); }
forms.push( png )
}
for( form of forms ) { inner_span.appendChild( form ); }
}
// Array-of-images stuff:
if( typeof( items[ item_id ].image ) == "object" ) { // Not a global boolean, because direct testing beats keeping track.
if( manga_page + 1 < items[ item_id ].image.length ) {
ready_element.classList.add( "ready" );
}
}
fake_css( outer_span ); // Just for this image and any probes.
}
}, new_image_rate );
// ----- // 🍭 Spinners 🍭
// Garish spinners that indicate "finding new images" and "files still loading."
// Easy answer for responsive loading / lazy spinners: use two intervals. Duh.
// I could simplify this to e.g. images_spinner.className = images_loading.length and do CSS bullshit like #id.class=spinning #id.0=not-spinning.
// I don't think there's any truly automatic way to spin based on the properties of children... but I wouldn't be surprised.
// Like I'm pretty sure per-element style properties can't go 'animate if( self.querySelector )'. But again: not ruling it out.
// It's only desirable for forced_style sites like Baraag, since lazy spinners are better, so pfffft.
var submissions_loading, submissions_spinner; // These are technically global?
var images_loading, images_spinner;
submissions_loading = document.getElementsByClassName( 'test' );
submissions_spinner = document.getElementById( 'submissions_spinner' );
images_loading = document.getElementsByClassName( 'loading' );
images_spinner = document.getElementById( 'images_spinner' );
image_count = document.getElementsByClassName( 'full_image' );
// Tracking "short" instead counts the test images, leading to brief overcounting. But not every site uses thumbnails.
image_counter = document.getElementById( 'image_counter' ); // Two hard problems.
// Flickering on/off multiple times per second: bad.
// Waiting an entire second between image loads: also bad.
// So... add another low-impact interval. Efficient? Not really. But eeeasy.
var spinner_interval = setInterval( function() {
if( submissions_loading.length == 0 ) { /* If we're done testing for new images in submissions */
submissions_spinner.className = 'spacer';
} else { /* If e.g. we reload a submission and it takes a while */
submissions_spinner.className = 'submissions_loader';
}
if( images_loading.length == 0 ) { /* If we're done testing for new images in submissions */
images_spinner.className = 'other_spacer';
} else { /* If e.g. we reload a submission and it takes a while */
images_spinner.className = 'images_loader';
}
image_counter.innerText = '' + image_count.length + ' images';
/* Should arguably exclude loading images. */
/* Could be made accurate by counting calls to next_image. Right? Or incrementing some var when that succeeds. */
/* Just count className="thumb". Right? Haha, I'm already double-counting because loaded thumbnails don't really go away. Yeah, count "thumb." */
}, 1000 );
}