LibraryThing Suggestion Hider Userscript

lt-suggestion-hider.js

// ==UserScript==
// @name         LibraryThing Suggestion Hider
// @namespace    https://whatcharacter.com
// @version      1.1
// @description  Toggle visibility of checkmarked books
// @author       Jacob P. Silvia ([email protected])
// @match        https://www.librarything.com/work/*/recommendations/*
// @match        https://www.librarything.com/work/*/recommendations
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Select the h1 element with the class 'h3_work_author'
    const h1BookTitle = document.querySelector('.h3_work_author');
    if (!h1BookTitle) return; // Exit if the element isn't found

    // Create a toggle button
    const toggleButton = document.createElement('button');
    toggleButton.innerHTML = '✓'; // Unicode check mark

    // Style the button to be inline with the h1 element
    toggleButton.style.backgroundColor = '#4CAF50'; // Green color
    toggleButton.style.color = 'white'; // White check mark
    toggleButton.style.border = 'none';
    toggleButton.style.borderRadius = '50%'; // Round button
    toggleButton.style.width = '40px';
    toggleButton.style.height = '40px';
    toggleButton.style.fontSize = '24px';
    toggleButton.style.cursor = 'pointer';
    toggleButton.style.display = 'inline-block'; // Make the button inline
    toggleButton.style.marginLeft = '10px'; // Add space between the button and the h1
    toggleButton.style.boxShadow = '0px 2px 5px rgba(0, 0, 0, 0.3)'; // Shadow for 3D effect
    toggleButton.style.transition = 'opacity 0.3s ease'; // Smooth transition for opacity
    toggleButton.title = 'Click to toggle checked items';

    // Hover effect
    toggleButton.addEventListener('mouseover', () => {
        toggleButton.style.backgroundColor = '#45a049'; // Darker green on hover
    });
    toggleButton.addEventListener('mouseout', () => {
        toggleButton.style.backgroundColor = '#4CAF50'; // Original green
    });

    // Append the button directly after the h1_book_title element
    h1BookTitle.parentNode.insertBefore(toggleButton, h1BookTitle.nextSibling);

    // Add click event listener to the button
    toggleButton.addEventListener('click', () => {
        // Find all IMG elements with class "greencheck"
        const greencheckImgs = document.querySelectorAll('.haveit');

        // Collect parent LI elements of these IMG tags
        const greencheckParents = new Set();
        greencheckImgs.forEach(img => {
            const liParent = img.closest('div.book');
            if (liParent) greencheckParents.add(liParent);
        });

        // Toggle the visibility of each parent LI and adjust button opacity
        let anyVisible = false;
        greencheckParents.forEach(li => {
            if (li.style.display === 'none') {
                li.style.display = '';
                anyVisible = true;
            } else {
                li.style.display = 'none';
            }
        });

        // Adjust the button's opacity based on visibility
        if (anyVisible) {
            toggleButton.style.opacity = '1'; // Fully visible
        } else {
            toggleButton.style.opacity = '0.5'; // Faded
        }
    });
})();