☰

巴哈貼標籤

這麼想貼標籤那就一次貼個夠

目前为 2022-08-02 提交的版本。查看 最新版本。

// ==UserScript==
// @name         巴哈貼標籤
// @namespace    https://home.gamer.com.tw/homeindex.php?owner=qwert535286
// @version      0.0.2
// @description  這麼想貼標籤那就一次貼個夠
// @author       You
// @match        https://forum.gamer.com.tw/C.php*
// @match        https://forum.gamer.com.tw/Co.php*
// @icon         https://www.google.com/s2/favicons?domain=gamer.com.tw
// @grant        GM_addStyle
// @grant        GM_setValue
// @grant        GM_getValue
// @license      MIT
// ==/UserScript==

/* 巴哈 CSS 備份
.comment_hot-tag {
    background: #009cac;
    color: #fff;
    font-size: 14px;
    font-family: teko;
    padding: 3px 4px 0px;
    line-height: 1;
    display: inline-block;
    border-radius: 3px;
    margin-right: 4px;
}*/

(async () => {
    const tags = await GM_getValue('__bahaHotTags', '')
    const accounts = await GM_getValue('__bahaHotAccs', '')

    GM_addStyle(tags.split('\n').map(line => {
        const [tag, bg = '#009cac', color = '#fff'] = line.split(',')

        return `.comment_hot-tag[aria-label="${tag}"] { background: ${bg}; color: ${color}; }`
    }).join(''))

    const generate = () => {
        accounts.split('\n').forEach(line => {
            const [acc, ...tags] = line.split(',')
            const tagsTmpl = tags.map(t => `<span class="comment_hot-tag" aria-label="${t}">${t}</span>`).join('')

            ;[...document.querySelectorAll(`.c-reply__item .reply-avatar[href="//home.gamer.com.tw/${acc}"] + .reply-content .reply-content__article`)].forEach($article => {
                ;[...$article.querySelectorAll('.comment_hot-tag')].forEach($tag => {
                    if ($tag.innerHtml.trim() !== 'HOT') $tag.remove()
                })

                $article.querySelector('.comment_content').insertAdjacentHTML('beforebegin', tagsTmpl)
            })
        })
    }

    setTimeout(generate, 3000) // 等留言跟 HOT 載入完畢（偷懶）

    ;[...document.querySelectorAll('.more-reply')].forEach($more => {
        $more.addEventListener('click', () => setTimeout(generate, 3000))
    })

    GM_addStyle(`
.c-quicktool .__open-dialog {
    display: block;
    border: 0;
    padding: 8px;
    width: 100%;
    color: #464646;
    background: #FFF;
    box-shadow: 0px 2px 4px rgb(0 0 0 / 33%);
    margin-bottom: 10px;
}

#bahaTagsConfig[open] {
    display: flex;
}
    `)

    document.querySelector('.c-quicktool').insertAdjacentHTML('afterbegin', `
    <button class="__open-dialog">編輯<br>標籤</button>
    `)

    document.body.insertAdjacentHTML('beforeend', `
<dialog id="bahaTagsConfig" style="flex-direction: column; gap: 8px">
    <label>輸入標籤</label>
    <textarea name="__bahaHotTags" rows="5" cols="33" placeholder="標籤名稱,背景顏色,字體顏色（新標籤換下一行）">${tags}</textarea>
    <label>輸入巴哈帳號及標籤名稱</label>
    <textarea name="__bahaHotAccs" rows="5" cols="33" placeholder="巴哈帳號,標籤一,標籤二,....（新帳號換下一行）">${accounts}</textarea>
    <button class="__confirm">確定（請重新整理）</button>
</dialog>
    `)

    const $dialog = document.querySelector('#bahaTagsConfig')

    document.querySelector('.c-quicktool .__open-dialog').addEventListener('click', () => $dialog.showModal())

    $dialog.querySelector('button').addEventListener('click', () => {
        GM_setValue('__bahaHotTags', $dialog.querySelector('[name="__bahaHotTags"]').value)
        GM_setValue('__bahaHotAccs', $dialog.querySelector('[name="__bahaHotAccs"]').value)
        $dialog.close()
    })
})()