☰

Sleazy Fork is available in English.

Gelbooru Visited and Type Highlighter

Marks previously visited images on Gelbooru search pages, and extends animation highlighting from webm to also include gifs.

As of 2020-05-15. See the latest version.

// ==UserScript==
// @name         Gelbooru Visited and Type Highlighter
// @namespace    http://tampermonkey.net/
// @version      4.0.0
// @description  Marks previously visited images on Gelbooru search pages, and extends animation highlighting from webm to also include gifs.
// @author       Xerodusk
// @homepage     https://greasyfork.org/en/users/460331-xerodusk
// @match        https://gelbooru.com/index.php*
// @grant        none
// @icon         https://gelbooru.com/favicon.png
// ==/UserScript==
/* jshint esversion: 6 */

/*   configuration   */
const imgUnvistedColor = '#E1F5FE'; // Color for unvisted images (Note: MUST BE A VALID, NON-TRANSPARENT COLOR FOR *VISITED* COLOR TO WORK)
const imgVisitedColor = '#2E7D32'; // Color for visited images
const webmUnvistedColor = '#1565C0'; // Color for unvisted WebMs
const webmVisitedColor = '#C62828'; // Color for visited WebMs
const gifUnvisitedColor = '#FFD600'; // Color for unvisited gifs/pngs
const gifVisitedColor = '#6A1B9A'; // Color for visited gifs/pngs
// Values can be hexadecimal, rgb, rgba, hsl, hsla, color name, or whatever CSS color definitions your browser supports
/*-------------------*/

(function() {
    'use strict';

    let searchParams = new URLSearchParams(window.location.search);

    if (searchParams.has('page') && searchParams.has('s') && searchParams.get('page') === 'post') {
        if (searchParams.get('s') == 'list') { // Search page
            // Get search results area
            let galleryContainer = document.querySelector('.thumbnail-container');
            if (!!galleryContainer) {
                // Get all image thumbnail links
                let galleryLinks = galleryContainer.querySelectorAll('div.thumbnail-preview a');
                if (!!galleryLinks) {
                    galleryLinks.forEach(galleryLink => {
                        let linkURL = new URL('https:' + galleryLink.getAttribute('href'));
                        // Set click to go to the original url to preserve next/previous feature
                        galleryLink.setAttribute('onmousedown', 'this.setAttribute("href", "' + linkURL + '")');
                        galleryLink.setAttribute('onmouseup', 'this.setAttribute("href", "' + linkURL + '")');
                        galleryLink.setAttribute('onkeydown', 'if(event.keyCode == 13 || event.keyCode == 32) { this.setAttribute("href", "' + linkURL + '") }');
                        // Remove the "tags" attribute so the link being used for this
                        // is constant for the same image across all searches it is included in
                        let searchParams = new URLSearchParams(linkURL.search);
                        searchParams.delete('tags');
                        let newLinkURL = new URL(linkURL);
                        newLinkURL.search = searchParams.toString();
                        galleryLink.setAttribute("href", newLinkURL);
                        galleryLink.setAttribute('onfocusout', 'this.setAttribute("href", "' + newLinkURL + '")');
                    });
                }
            }
            // Apply borders
            let css = document.createElement('style');
            css.innerHTML = `
			  div.thumbnail-preview {
				  background-color: transparent;
			  }
			  div.thumbnail-preview a img.thumbnail-preview:not(.webm) {
				  outline: 3px solid ` + imgUnvistedColor + `;
			  }
			  div.thumbnail-preview a:visited img.thumbnail-preview {
				  outline-color: ` + imgVisitedColor + `;
			  }
			  div.thumbnail-preview a img.thumbnail-preview.webm {
				  border-color: ` + webmUnvistedColor + ` !important;
			  }
			  div.thumbnail-preview a:visited img.thumbnail-preview.webm {
				  border-color: ` + webmVisitedColor + ` !important;
			  }
			  div.thumbnail-preview a img.thumbnail-preview[title*="animated_gif"],
			  div.thumbnail-preview a img.thumbnail-preview[title*="animated_png"],
			  div.thumbnail-preview a img.thumbnail-preview[title*="animated "]:not(.webm) {
				  outline-color: ` + gifUnvisitedColor + `;
			  }
			  div.thumbnail-preview a:visited img.thumbnail-preview[title*="animated_gif"],
			  div.thumbnail-preview a:visited img.thumbnail-preview[title*="animated_png"],
			  div.thumbnail-preview a:visited img.thumbnail-preview[title*="animated "]:not(.webm) {
				  outline-color: ` + gifVisitedColor + `;
			  }
			  div.thumbnail-preview a:focus img.thumbnail-preview {
				  outline-color: #FFA726 !important;
			  }
			`;
            document.head.appendChild(css);
        } else if (searchParams.get('s') === 'view') { // Image page
            // Add URL without the "tags" attribute to the history
            // so as to make it match what the search results pages are modified for
            // (and avoid breaking back button functionality while we're at it)
            let url = new URL(window.location);
            searchParams.delete('tags');
            searchParams.delete('pool_id');
            url.search = searchParams.toString();
            window.history.replaceState({}, '', '/' + url.href.substring(url.href.indexOf('/') + 1));
        }
    } else if (searchParams.has('page') && searchParams.has('s') && searchParams.get('s') === 'show' && searchParams.get('page') === 'pool') { // Pool page
        // Get all image thumbnail links
        let galleryContainer = document.querySelector('.thumbnail-container');
        if (!!galleryContainer) {
            // Get all image thumbnail links
            let galleryLinks = galleryContainer.querySelectorAll('span a');
            if (!!galleryLinks) {
                galleryLinks.forEach(galleryLink => {
                    let linkURL = new URL(window.location.protocol + window.location.hostname + '/' + galleryLink.getAttribute('href'));
                    // Get original onclick to preserve delete
                    // Set click when not in delete mode to go to the original url to preserve next/previous feature
                    galleryLink.setAttribute('onmousedown', 'this.setAttribute("href", "' + linkURL + '")');
                    galleryLink.setAttribute('onmouseup', 'this.setAttribute("href", "' + linkURL + '")');
                    galleryLink.setAttribute('onkeydown', 'if(event.keyCode == 13) { this.setAttribute("href", "' + linkURL + '") }');
                    // Remove the "pool" attribute so the link being used for this
                    // is constant for the same image across all searches it is included in
                    let searchParams = new URLSearchParams(linkURL.search);
                    searchParams.delete('pool_id');
                    let newLinkURL = new URL(linkURL);
                    newLinkURL.search = searchParams.toString();
                    galleryLink.setAttribute("href", newLinkURL);
                    galleryLink.setAttribute('onfocusout', 'this.setAttribute("href", "' + newLinkURL + '")');
                });
            }
        }
        // Apply borders
        let css = document.createElement('style');
        css.innerHTML = `
		  div.thumbnail-container a img {
			  outline: 3px solid ` + imgUnvistedColor + `;
		  }
		  div.thumbnail-container a:visited img {
			  outline-color: ` + imgVisitedColor + `;
		  }
		  div.thumbnail-container a img[title*=" webm "] {
			  outline: 5px solid ` + webmUnvistedColor + ` !important;
		  }
		  div.thumbnail-container a:visited img[title*=" webm "] {
			  outline-color: ` + webmVisitedColor + ` !important;
		  }
		  div.thumbnail-container a img[title*="animated_gif"],
		  div.thumbnail-container a img[title*="animated_png"],
		  div.thumbnail-container a img[title*="animated "]:not([title*=" webm "]) {
			  outline-color: ` + gifUnvisitedColor + `;
		  }
		  div.thumbnail-container a:visited img[title*="animated_gif"],
		  div.thumbnail-container a:visited img[title*="animated_png"],
		  div.thumbnail-container a:visited img[title*="animated "]:not([title*=" webm "]) {
			  outline-color: ` + gifVisitedColor + `;
		  }
		  div.thumbnail-container a:focus img {
			  outline-color: #FFA726 !important;
		  }
		`;
        document.head.appendChild(css);
    }
})();