Marks previously visited images on Gelbooru search pages, and extends animation highlighting from webm to also include gifs.
Version au
// ==UserScript==
// @name Gelbooru Visited and Type Highlighter
// @namespace http://tampermonkey.net/
// @version 3.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 (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('.contain-push');
if (!!galleryContainer) {
// Get all image thumbnail links
let galleryLinks = galleryContainer.querySelectorAll('.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 = `
.thumbnail-preview a .preview {
border: 3px solid ` + imgUnvistedColor + `;
margin: -3px;
}
.thumbnail-preview a:visited .preview {
border-color: ` + imgVisitedColor + `;
}
.thumbnail-preview a .preview.webm {
border-color: ` + webmUnvistedColor + ` !important;
}
.thumbnail-preview a:visited .preview.webm {
border-color: ` + webmVisitedColor + ` !important;
}
.thumbnail-preview a .preview[title*="animated_gif"],
.thumbnail-preview a .preview[title*="animated_png"],
.thumbnail-preview a .preview[title*="animated "]:not(.webm) {
border-color: ` + gifUnvisitedColor + `;
}
.thumbnail-preview a:visited .preview[title*="animated_gif"],
.thumbnail-preview a:visited .preview[title*="animated_png"],
.thumbnail-preview a:visited .preview[title*="animated "]:not(.webm) {
border-color: ` + gifVisitedColor + `;
}
.thumbnail-preview a:focus .preview {
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.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 galleryLinks = document.querySelectorAll('.thumb 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 = `
.thumb a {
border: 1px solid #f0f0f0;
padding: 5px;
display: inline-block;
margin: -6px;
}
.thumb a .preview {
border: 3px solid ` + imgUnvistedColor + `;
margin: -3px;
}
.thumb a:visited .preview {
border-color: ` + imgVisitedColor + `;
}
.thumb a .preview[title*=" webm "] {
border: 5px solid ` + webmUnvistedColor + ` !important;
margin: -6px !important;
}
.thumb a:visited .preview[title*=" webm "] {
border-color: ` + webmVisitedColor + ` !important;
}
.thumb a .preview[title*="animated_gif"],
.thumb a .preview[title*="animated_png"],
.thumb a .preview[title*="animated "]:not([title*=" webm "]) {
border-color: ` + gifUnvisitedColor + `;
}
.thumb a:visited .preview[title*="animated_gif"],
.thumb a:visited .preview[title*="animated_png"],
.thumb a:visited .preview[title*="animated "]:not([title*=" webm "]) {
border-color: ` + gifVisitedColor + `;
}
.thumb a:focus .preview {
border-color: #FFA726 !important;
}
`;
document.head.appendChild(css);
}
})();