☰

巴哈 Vtuber 八卦串 tag 工具欄

將文章加入 tag 以方便整理，詳情請看該串一樓說明

当前为 2021-08-03 提交的版本，查看 最新版本。

// ==UserScript==
// @name         巴哈 Vtuber 八卦串 tag 工具欄
// @namespace    https://home.gamer.com.tw/homeindex.php?owner=qwert535286
// @version      0.4.1
// @description  將文章加入 tag 以方便整理，詳情請看該串一樓說明
// @author       笑翠鳥
// @icon         https://www.google.com/s2/favicons?domain=tampermonkey.net
// @include      https://forum.gamer.com.tw/C.php?*bsn=60076*snA=6367604*
// @include      https://forum.gamer.com.tw/post1.php?*bsn=60076*snA=6367604*
// ==/UserScript==

(() => {
    function insertButton() {
        const addTitle = title => `<div style="width: 100%; margin-top: 8px; text-align: left; font-size: 14px;">${title}</div>`
        const addTags = tags => tags.map(t => `<span style="background: #d2d2d2; color: #464646; padding: 8px 12px; cursor: pointer">#${t}</span>`).join('')

        const actionTmpl = `
            <div class="__vtuber-tags" style="display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; border-top: 2px solid #ececec; padding: 8px 0;">
                ${addTitle('任何形式之教學文、整理文、梗圖等串內生態文')}
                ${addTags(['八卦串'])}
                ${addTitle('新情報專用，如直播通知、預告、發推、新衣、活動、炎上整理、剪輯翻譯等，不含個人意見及通靈')}
                ${addTags(['holo', '彩虹', '個人勢', '中之人'])}
                ${addTitle('一般使用')}
                ${addTags(['集中串', '創作', '梗圖', '小v推廣', '歌勢推廣', '油圖'])}
                ${addTitle('疫苗副作用')}
                ${addTags(['性癖'])}
            </div>
        `

        const target = location.href.includes('post1.php') ? '.postset_sign' : '.option'
        document.querySelector(target).insertAdjacentHTML('beforeend', actionTmpl)
    }

    function checkAddedTags(content) {
        document.querySelectorAll('.__vtuber-tags span').forEach($tag => {
            if (content.includes(`<div>${$tag.innerText}</div>`)) return tagPressed($tag)
        })
    }

    function tagPressed($span) {
        $span.style.background = '#8a8a8a'
        $span.style.color = 'white'
    }

    function tagUnPressed($span) {
        $span.style.background = '#d2d2d2'
        $span.style.color = '#464646'
    }

    window.addEventListener('load', () => {
        insertButton()

        const $iframeEditor = document.getElementById('editor').contentWindow.document.body
        checkAddedTags( $iframeEditor.innerHTML)
        document.querySelector('.__vtuber-tags').addEventListener('click', ({ target }) => {
            if (target.tagName.toLowerCase() !== 'span') return

            const content = $iframeEditor.innerHTML

            const regexTag = new RegExp(`<(div|p)>${target.innerText}</(div|p)>`, 'g')
            if (regexTag.test(content)) {
                $iframeEditor.innerHTML = content.replace(regexTag, '')
                tagUnPressed(target)

                return
            }


            $iframeEditor.insertAdjacentHTML('afterbegin', `<p>${target.innerText}</p>`)
            tagPressed(target)
        })
    })
})()