HN User Comments

script.js

// ==UserScript==
// @name     HN User Comments
// @version  1
// @grant    none
// @include  https://news.ycombinator.com/*
// ==/UserScript==

const userElements = document.getElementsByClassName('hnuser')
document.userData = {...document.userData}

const extraInfoDivElement = document.createElement('div')
const textAreaElement = document.createElement('textarea')
textAreaElement.addEventListener('keyup', onUserDataChange)

if (!document.modal) {
	document.modal = document.createElement('div')
	document.modal.style = 'position: absolute; margin-top: 1.5em; padding: 8px; background: white;'
	document.modal.append(extraInfoDivElement, document.createElement('br'), textAreaElement)
}

function saveUserData(userId, data) {
    document.userData[userId].data = data

    if (data === "") {
        localStorage.removeItem(userId)
        return
    }

    localStorage.setItem(userId, data)
}

function loadUserData(userId) {
    return localStorage.getItem(userId)
}

function onUserDataChange(e) {
    saveUserData(e.target.dataset.user, e.target.value)
    updateDom(e.target.dataset.user)
}

function updateDom(onlyUpdateUser = null) {
    var t0 = performance.now()

    for (let userElement of userElements) {
        const userId = userElement.text
        let userInfoElement = userElement.parentElement.getElementsByClassName('user-info-text')[0]

        
        if (onlyUpdateUser && userId !== onlyUpdateUser)
            continue

        document.userData[userId] = {
            comments: 0,
            data: loadUserData(userId),
          	...document.userData[userId]
        }
      
        if(!document.userInfoFullyUpdated) { 
          	document.userData[userId].comments++
          
            const commentButtonElement = document.createElement('span')
            commentButtonElement.setAttribute('data-user', userId)
            commentButtonElement.innerHTML = ' 💬'
            commentButtonElement.className = 'user-comment'
            commentButtonElement.style = 'cursor: pointer'
            userElement.after(commentButtonElement)

            if (!userInfoElement) {
                // Append the userData
                const pre = document.createElement('pre')
                pre.style = 'display: block; margin: 0'
                userInfoElement = userElement.parentElement.appendChild(pre)
            }
        }
        userInfoElement.className = 'user-info-text'
        userInfoElement.innerHTML = document.userData[userId].data
    }

    document.userInfoFullyUpdated = performance.now()
    console.log("Rendered DOM in", document.userInfoFullyUpdated - t0, "ms")
}

function toggleModal(e) {
    const userId = e.target.dataset.user
    if (e.target.parentElement !== document.modal)
        document.modal.remove()

    if (e.target.className === 'user-comment' && userId) {
        e.target.parentElement.prepend(document.modal)
        extraInfoDivElement.innerHTML = `${document.userData[userId].comments} comment${document.userData[userId].comments > 1 ? "s" : ""} on this topic`
        textAreaElement.setAttribute('data-user', userId)
        textAreaElement.value = document.userData[userId].data
        textAreaElement.focus({ preventScroll: true, focusVisible: true })
    }
}

document.body.addEventListener('click', toggleModal)
updateDom()