// ==UserScript==
// @name         简洁版阮一峰周报
// @namespace    https://github.com/AliubYiero/TamperMonkeyScripts
// @version      1.1.1
// @description  显示简洁版阮一峰周报, 点击标题可以展开内容
// @author       Yiero
// @license	     GPL-3
// @match        https://www.ruanyifeng.com/blog/*
// @require      https://scriptcat.org/lib/513/2.0.0/ElementGetter.js
// @grant        GM_addStyle
// @grant        GM_getValue
// ==/UserScript==

/* ==UserConfig==
配置项:
    imgHeight:
        title: 限制帖子内部图片高度 (单位px) (百分比缩放, 默认0表示auto)
        description: 限制图片大小, 单位像素px (默认0表示auto)
        type: number
        default: 0
    defaultDisplayMode:
        title: 帖子默认显示状态
        description: 帖子默认显示状态 ( 'hide' 默认隐藏, 'show' 默认显示 )
        type: select
        default: 'hide'
        values: [ 'hide', 'show' ]
 ==/UserConfig== */

(async () => {
    const imgHeight = GM_getValue('配置项.imgHeight', 0);
    const defaultDisplayMode = GM_getValue('配置项.defaultDisplayMode', 'hide');

    GM_addStyle(`
    p.content:not(:has(a)).hide {display: none;}
    h2.title.hide {color: #a3a3a3;}
    h2.title.hide::after {
        content: 'hide';
        font-size: 50%;
        border-radius: 10px;
        margin: 0 0 10px 10px;
        background-color: #a3a3a36b;
        padding: 5px;
        color: #fff;
    }
    p.content > img.zoom {
        height: ${imgHeight === 0 ? 'auto' : `${imgHeight}px`}
    }
    `)

    await elmGetter.get('#main-content > h2');

    let index = 1;
    document.querySelectorAll('#main-content > h2, #main-content > p').forEach(element => {
        defaultDisplayMode === 'hide' && element.classList.add('hide')
        element.dataset.index = index

        // title
        if (element.tagName === 'H2') {
            index++;  
            element.classList.add('title')
            return;
        }

        // content
        element.classList.add('content')

        // img content
        const imgElement = element.querySelector('img');
        if (imgElement) {
            imgElement.classList.add('img-content', 'zoom')
        }
    })

    document.querySelector('#main-content').addEventListener('click', (e) => {
        e.preventDefault()

        const element = e.target;
        const index = element.dataset.index;

        if (element.classList.contains('title')) {
            document.querySelectorAll(`[data-index="${index}"]`).forEach(ele => {
                ele.classList.toggle('hide')
            })
        }
        else if (element.classList.contains('img-content')) {
            element.classList.toggle('zoom')
        }
        
    })

})()