☰

Gelbooru Visited and Type Highlighter

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

Verze ze dne 20. 05. 2020. Zobrazit nejnovější verzi.

// ==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);
    }
})();