// ==UserScript==
// @name         巴哈姆特進階文章篩選
// @namespace    https://blog.maple3142.net/
// @version      0.1
// @description  哈拉版的進階文章篩選功能
// @author       maple3142
// @require      https://unpkg.com/vue@2.5.16/dist/vue.min.js
// @require      https://unpkg.com/vuejs-storage@2.2.5/dist/vuejs-storage.min.js
// @match        https://forum.gamer.com.tw/B.php?*
// @grant        GM_setValue
// @grant        GM_getValue
// @downloadURL none
// ==/UserScript==

(function($,egg) {
    'use strict'
    // UI
    $('.b-list__filter').append(`<div id="x_filter">
<button-checkbox v-model="filter.hidelock">隱藏鎖文</button-checkbox>
<button-checkbox v-model="filter.hidetop">隱藏置頂</button-checkbox>
<button-checkbox v-model="filter.hideimg">隱藏有圖片的文章</button-checkbox>
</div>`)
    Vue.use(vuejsStorage)
    Vue.component('ButtonCheckbox',{
        template: `
<button class="ButtonCheckbox" :class="{active: checked}" @click.prevent="$emit('input',checked=!checked)"><slot/></button>`,
        props: ['value'],
        data(){
            return {
                checked: this.value
            }
        }
    })
    const vm=new Vue({
        el: '#x_filter',
        data: {
            filter: {
                hidelock: false,
                hidetop: false,
                hideimg: false
            }
        },
        storage: {
            namespace: 'x_filter',
            keys: ['filter'],
            storage:{
                setItem: GM_setValue,
                getItem: GM_getValue
            }
        }
    })

    // LOGIC
    const isLocked=el=>$(el).find('.icon-lock').length>0
    const isTop=el=>$(el).hasClass('b-list__row--sticky')
    const isImg=el=>$(el).find('.icon-photo').length>0
    function render(){
        $('.b-list>tbody>.b-list__row').each((i,el)=>{
            if(vm.filter.hidelock && isLocked(el)){
                $(el).hide()
            }
            else if(vm.filter.hidetop && isTop(el)){
                $(el).hide()
            }
            else if(vm.filter.hideimg && isImg(el)){
                $(el).hide()
            }
            else{
                $(el).show()
            }
        })
    }
    vm.$watch('$data',{handler:render,deep:true})
    render()
    const css=document.createElement('style')
    css.textContent=`
#x_filter{
display: inline-block;
}
.ButtonCheckbox{
display: inline-block;
border: 0;
border-radius: 3px;
padding: 3px 12px;
height: 25px;
background-color: #117e96;
color: #FFF;
font-size: 12px;
margin-left: 5px;
}
.ButtonCheckbox.active{
background-color: #222e96;
}
`
    document.body.appendChild(css)
})(jQuery,$)