Marks previously visited images on Gelbooru search pages, and extends animation highlighting from webm to also include gifs.
Από την
// ==UserScript==
// @name Gelbooru Visited and Type Highlighter
// @namespace http://tampermonkey.net/
// @version 5.0.1
// @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
// 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 + `;
}
`;
document.head.appendChild(css);
}
})();