☰

Nitan User Tags

Add user tags to Nitan forum users

// ==UserScript==
// @name         Nitan User Tags
// @namespace    NUT
// @version      0.1.2
// @description  Add user tags to Nitan forum users
// @icon         https://static.thenounproject.com/png/888732-200.png
// @author       s5kf
// @license      CC BY-NC-ND 4.0
// @match        *://www.uscardforum.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Function to add tags to user elements
    function addTags() {
        const userElements = document.querySelectorAll('.username');

        userElements.forEach(userElement => {
            const username = userElement.textContent.trim();
            const tag = getTag(username);

            let tagElement = userElement.querySelector('.user-tag');
            if (!tagElement) {
                tagElement = document.createElement('span');
                tagElement.className = 'user-tag';
                userElement.appendChild(tagElement);
            }

            if (tag) {
                tagElement.textContent = `(${tag})`;
                tagElement.style.display = 'inline';
            } else {
                tagElement.style.display = 'none';
            }
        });
    }

    // Function to get the tag from localStorage
    function getTag(username) {
        const tags = JSON.parse(localStorage.getItem('userTags')) || {};
        return tags[username];
    }

    // Function to save the tag to localStorage
    function saveTag(username, tag, button) {
        const tags = JSON.parse(localStorage.getItem('userTags')) || {};
        if (tag) {
            tags[username] = tag;
        } else {
            delete tags[username];
        }
        localStorage.setItem('userTags', JSON.stringify(tags));
        showSaveAnimation(button);
    }

    // Function to show an animation indicating the tag has been saved
    function showSaveAnimation(button) {
        button.innerHTML = '✔️'; // Change button text to check mark
        button.classList.add('saved');

        setTimeout(() => {
            button.innerHTML = 'Save'; // Revert button text
            button.classList.remove('saved');
            button.parentElement.style.display = 'none'; // Collapse the interface
        }, 2000); // Display the animation for 2 seconds
    }

    // Function to create a UI for adding tags
    function createTagUI() {
        const userElements = document.querySelectorAll('.username');

        userElements.forEach(userElement => {
            if (!userElement.querySelector('.tag-icon')) {
                const username = userElement.textContent.trim();
                const tagIcon = document.createElement('span');
                tagIcon.className = 'tag-icon';
                tagIcon.textContent = '🏷️'; // Icon for editing tags
                tagIcon.style.cursor = 'pointer';
                tagIcon.style.marginLeft = '5px';
                tagIcon.style.marginRight = '2px'; // Add space between emoji and input box

                const tagUIContainer = document.createElement('div');
                tagUIContainer.className = 'tag-ui-container';
                tagUIContainer.style.display = 'none';
                tagUIContainer.style.flexDirection = 'column';
                tagUIContainer.style.marginTop = '5px';

                const input = document.createElement('input');
                input.type = 'text';
                input.className = 'tag-input';
                input.placeholder = 'Enter tag';
                input.style.fontSize = '12px';
                input.value = getTag(username) || '';

                const saveButton = document.createElement('button');
                saveButton.textContent = 'Save';
                saveButton.className = 'tag-save-button';
                saveButton.style.fontSize = '12px';
                saveButton.style.marginTop = '5px';

                const deleteButton = document.createElement('button');
                deleteButton.textContent = 'Delete';
                deleteButton.className = 'tag-delete-button';
                deleteButton.style.fontSize = '12px';
                deleteButton.style.marginTop = '5px';

                saveButton.addEventListener('click', () => {
                    saveTag(username, input.value, saveButton);
                    addTags();
                });

                input.addEventListener('keydown', (e) => {
                    if (e.key === 'Enter') {
                        saveTag(username, input.value, saveButton);
                        addTags();
                    }
                });

                deleteButton.addEventListener('click', () => {
                    saveTag(username, '', saveButton);
                    input.value = '';
                    addTags();
                });

                tagUIContainer.appendChild(input);
                tagUIContainer.appendChild(saveButton);
                tagUIContainer.appendChild(deleteButton);

                tagIcon.addEventListener('click', () => {
                    tagUIContainer.style.display = tagUIContainer.style.display === 'none' ? 'flex' : 'none';
                });

                userElement.appendChild(tagIcon);
                userElement.appendChild(tagUIContainer);
            }
        });
    }

    // Inject CSS styles
    const style = document.createElement('style');
    style.textContent = `
        .user-tag {
            color: red;
            margin-left: 5px;
            padding: 2px 4px;
            border-radius: 3px;
            display: inline; /* Always visible */
        }
        .tag-icon {
            margin-left: 5px;
            margin-right: 2px;
            cursor: pointer;
        }
        .tag-input {
            font-size: 12px;
            border: 1px solid var(--primary-high);
            background-color: var(--secondary);
            color: var(--primary-high);
            padding: 5px;
            border-radius: 3px;
        }
        .tag-save-button, .tag-delete-button {
            font-size: 12px;
            cursor: pointer;
            margin-top: 5px;
            background-color: var(--primary);
            color: var(--primary-low);
            border: 1px solid var(--primary-high);
            border-radius: 3px;
            padding: 5px;
        }
        .tag-ui-container {
            display: none;
            flex-direction: column;
            margin-top: 5px;
        }
        .tag-save-button.saved {
            background-color: #4CAF50;
            color: white;
        }
    `;
    document.head.appendChild(style);

    // Run the addTags function when the page loads and whenever new content is loaded
    document.addEventListener('DOMContentLoaded', () => {
        addTags();
        createTagUI();
    });

    const observer = new MutationObserver(() => {
        addTags();
        createTagUI();
    });
    observer.observe(document.body, { childList: true, subtree: true });
})();