☰

Gelbooru Visited and Type Highlighter

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

2020-05-20 يوللانغان نەشرى. ئەڭ يېڭى نەشرىنى كۆرۈش.

// ==UserScript==
// @name         Gelbooru Visited and Type Highlighter
// @namespace    http://tampermonkey.net/
// @version      5.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
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 animated gifs/pngs
const gifVisitedColor = '#6A1B9A'; // Color for visited animated gifs/pngs
// Values can be hexadecimal, rgb, rgba, hsl, hsla, color name, or whatever CSS color definitions your browser supports
/*-------------------*/

// Convert link formation so it is consistent across all pages
function normalizeLink(galleryLink) {
    'use strict';

    // Convert to absolute URL from whichever random form of relative URL they decided to use on this specific page with no real consistency
    let linkURL = new URL(galleryLink.getAttribute('href'), window.location.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) { this.setAttribute("href", "' + linkURL + '") }');
    // Remove "tags" and "pool" attributes 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.forEach((value, key) => {
        if (!['page', 's', 'id'].includes(key)) {
            searchParams.delete(key);
        }
    });
    let newLinkURL = new URL(linkURL);
    newLinkURL.search = searchParams.toString();
    galleryLink.setAttribute("href", newLinkURL);
    galleryLink.setAttribute('onfocusout', 'this.setAttribute("href", "' + newLinkURL + '")');
}

(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 => normalizeLink(galleryLink));
                }
            }
            // 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:not(.webm) {
				  outline-color: #FFA726 !important;
			  }
			  div.thumbnail-preview a:focus img.thumbnail-preview.webm {
				  border-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.forEach((value, key) => {
                if (!['page', 's', 'id'].includes(key)) {
                    searchParams.delete(key);
                }
            });
            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 image thumbnails area
        let galleryContainer = document.querySelector('.thumbnail-container');
        if (!!galleryContainer) {
            // Get all image thumbnail links
            let galleryLinks = galleryContainer.querySelectorAll('span a');
            if (!!galleryLinks) {
                galleryLinks.forEach(galleryLink => normalizeLink(galleryLink));
            }
        }
        // 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);
    } else if (searchParams.has('page') && searchParams.has('s') && searchParams.get('s') === 'view' && searchParams.get('page') === 'favorites') { // Favorites page
        // Get all image thumbnail links
        let galleryLinks = document.querySelectorAll('body > span.thumb > a[href*="s=view"]');
        if (!!galleryLinks) {
            galleryLinks.forEach(galleryLink => normalizeLink(galleryLink));
        }
        // Apply borders
        let css = document.createElement('style');
        css.innerHTML = `
		  .thumb {
			  margin: 5px;
		  }
		  .thumb a img {
			  padding: 5px;
			  margin: 5px;
		  }
		  .thumb a img[title*="animated_gif"],
		  .thumb a img[title*="animated_png"],
		  .thumb a img[title*="animated "]:not([title*=" webm"]) {
			  outline: 3px solid ` + gifUnvisitedColor + `;
		  }
		  .thumb a:visited img[title*="animated_gif"],
		  .thumb a:visited img[title*="animated_png"],
		  .thumb a:visited img[title*="animated "]:not([title*=" webm"]) {
			  outline-color: ` + gifVisitedColor + `;
		  }
		  .thumb a img[title*=" webm"] {
			  outline: 5px solid ` + webmUnvistedColor + `;
		  }
		  .thumb a:visited img[title*=" webm"] {
			  outline-color: ` + webmVisitedColor + `;
		  }
		  .thumb a:focus img {
			  outline-color: #FFA726 !important;
		  }
		`;
        document.head.appendChild(css);
    }
})();