esa 画面に除外フィルタを生やす

esa-exclude-filter.js

// ==UserScript==
// @name         esa 除外フィルタ
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  .
// @author       @Gobi03
// @match        https://opt-technologies.esa.io/members/*
// @match        https://opt-technologies.esa.io/*
// @grant        none
// ==/UserScript==

;(function() {
    'use strict'

    const myProducts = ['FeedTerminal', 'uft', 'DFO'] // 除外フィルタ時も残したいプロダクト名を記載

    const createElementFromHTML = html => {
        const tempEl = document.createElement('div')
        tempEl.innerHTML = html
        return tempEl.firstElementChild
    }

    const shouldHideOtherProduct = post => {
        const path = post.getElementsByClassName('category-path__link')
        return (
            otherProductsCheckBox.checked &&
            path[0].text === 'product' &&
            !myProducts.includes(path[1].text)
        )
    }
    const shouldHideWIP = post => {
        return (
            wipCheckBox.checked &&
            (post.classList.contains('wip') ||
                post.getElementsByClassName('wip').length > 0)
        )
    }

    // 除外フィルタ処理
    const check = () => {
        const postList = document.getElementsByClassName('post-list__item')
        for (const post of postList) {
            if (shouldHideOtherProduct(post)) post.style.display = 'none'
            else if (shouldHideWIP(post)) post.style.display = 'none'
            else post.style.display = ''
        }
    }

    // ボタン設置
    const setButton = () => {
        const checkboxesCrate = createElementFromHTML(`
            <div id="exclude-filter">
                <label class="col-sm-2">除外フィルタ:</label>
                <div/>
            </div>`)

        checkboxesCrate.lastElementChild.appendChild(otherProductsCheckBoxLabel)
        checkboxesCrate.lastElementChild.appendChild(wipCheckBoxLabel)

        const location = document.location
        if (location.pathname == '/' && location.hash == '') {
            // ホーム画面は親要素の hide に巻き込まれるため、置く場所を変える
            const rightList = document.getElementsByClassName(
                'home__right-content'
            )[0]
            checkboxesCrate.firstElementChild.textContent = ''
            rightList.insertBefore(checkboxesCrate, rightList.firstChild)
        } else {
            const postUL = $('ul[class=post-list]')[0]
            postUL.insertBefore(checkboxesCrate, postUL.firstChild)
        }

        otherProductsCheckBox = document.getElementById(otherProductsCheckBoxId)
        otherProductsCheckBox.onchange = check
        wipCheckBox = document.getElementById(wipCheckBoxId)
        wipCheckBox.onchange = check
    }

    const otherProductsCheckBoxId = 'checkbox-other-products'
    const otherProductsCheckBoxLabel = createElementFromHTML(`
        <label class="checkbox-inline">
            <input id="${otherProductsCheckBoxId}" type="checkbox" checked=true>
            他プロダクト
        </label>`)
    let otherProductsCheckBox

    const wipCheckBoxId = 'checkbox-wip'
    const wipCheckBoxLabel = createElementFromHTML(`
        <label class="checkbox-inline">
            <input id="${wipCheckBoxId}" type="checkbox" checked=true>
            WIP
        </label>`)
    let wipCheckBox

    window.onload = () => {
        setButton()
        check()
    }

    setInterval(check, 300) // TODO: 追加読み込み時に走るようにしたい
})()