Greasy Fork is available in English.
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 });
})();