Raw Source Toggle Dropdown

• Minified Source

ssrankedghoul / Hide threads / Mark as blocked

// ==UserScript==
// @name        Hide threads / Mark as blocked
// @namespace   https://www.elitepvpers.com
// @match       https://www.elitepvpers.com/forum/*
// @grant       none
// @version     1.0.0
// @author      ssrankedghoul
// @description Hides threads on [alt + click]. Add comment with [alt + right click].
// @icon        https://www.elitepvpers.com/images/userbaraxe.png
// @license     MIT
// ==/UserScript==
;(() => {
	class Thread {
		constructor(threadId) {
			this.threadId = threadId.toString()
		}

		get comment() {
			const threads = this.#getSavedThreads()
			return threads.find((thread) => thread.id === this.threadId)?.comment
		}
		set comment(value) {
			this.setComment(value)
		}

		#localStorageKey = 'hiddenThreads'
		/**
		 *
		 * @returns { { id: number; comment?: string }[] }
		 */
		#getSavedThreads() {
			return JSON.parse(localStorage.getItem(this.#localStorageKey) || '[]')
		}

		#saveThreads(threads) {
			localStorage.setItem(this.#localStorageKey, JSON.stringify(threads))
		}

		hide() {
			const threads = this.#getSavedThreads()
			threads.push({ id: this.threadId })
			this.#saveThreads(threads)
			return this
		}

		unhide() {
			const threads = this.#getSavedThreads()
			this.#saveThreads(threads.filter((thread) => thread.id !== this.threadId))
			return this
		}

		setComment(value) {
			const threads = this.#getSavedThreads()
			this.#saveThreads(
				threads.map((thread) => {
					if (thread.id === this.threadId) {
						thread.comment = value
					}
					return thread
				}),
			)
			return this
		}

		isHidden() {
			return this.#getSavedThreads().some(
				(thread) => thread.id === this.threadId,
			)
		}

		/**
		 *
		 * @param {HTMLElement} domElement
		 */
		applyHiddenStyle(domElement) {
			domElement.style.opacity = 0.1
			const commentElementId = `thread-hidden-comment-${this.threadId}`
			const comment =
				document.getElementById(commentElementId) ||
				document.createElement('div')

			if (this.comment) {
				comment.id = commentElementId

				comment.innerText = this.comment
				domElement.style.position = 'relative'
				comment.style.position = 'absolute'
				comment.style.top = '0'
				comment.style.bottom = '0'
				comment.style.left = '0'
				comment.style.right = '0'
				comment.style.color = 'red'
				comment.style.fontWeight = 'bold'
				comment.style.fontSize = '1.5em'
				comment.style.zIndex = '9999'
				comment.style.textAlign = 'center'
				comment.style.backgroundColor = '#1f1f1f'
				comment.style.width = '100%'
				comment.style.alignContent = 'center'

				domElement.insertAdjacentElement('beforeend', comment)
				return
			}

			comment.remove()
		}
		removeHiddenStyle(domElement) {
			domElement.style.opacity = 1
			document
				.querySelector(`#thread-hidden-comment-${this.threadId}`)
				?.remove()
		}
	}

	window.addEventListener('load', () => {
		for (const td of document.querySelectorAll('td[id^=td_threadtitle_]')) {
			const thread = new Thread(td.id.match(/\d+/)[0])
			const threadDomEl = td.parentElement

			threadDomEl.addEventListener('click', (event) => {
				if (!event.altKey) {
					return
				}

				event.preventDefault()
				if (thread.isHidden()) {
					thread.unhide().removeHiddenStyle(threadDomEl)
					return
				}
				thread.hide().applyHiddenStyle(threadDomEl)
			})

			threadDomEl.addEventListener('contextmenu', (event) => {
				if (!event.altKey) {
					return
				}

				const comment = prompt('Comment', thread.comment)
				event.preventDefault()
				thread.hide().setComment(comment).applyHiddenStyle(threadDomEl)
			})

			if (thread.isHidden()) {
				thread.applyHiddenStyle(threadDomEl)
			}
		}
	})
})()