嗨皮漫畫 - 收起、展開評論區

收起或展開嗨皮漫畫評論區，並隱藏一些無關的元素。

// ==UserScript==
// @name         嗨皮漫畫 - 收起、展開評論區
// @name:zh-TW   嗨皮漫畫 - 收起、展開評論區
// @name:zh-CN   嗨皮漫画 - 收起、展开评论区
// @name:ja      ハッピーコミック - コメントエリアの折りたたみと展開
// @name:en      Happy Comics - Collapse and Expand Comments Section
// @version      2.3
// @description         收起或展開嗨皮漫畫評論區，並隱藏一些無關的元素。
// @description:zh-TW   收起或展開嗨皮漫畫評論區，並隱藏一些無關的元素。
// @description:zh-CN   收起或展开嗨皮漫画评论区，并隐藏一些无关的元素。
// @description:ja      Happy Comicsのコメントエリアを折りたたみ、展開し、関連のない要素を非表示にします。
// @description:en      Collapse or expand the comments section of Happy Comics, and hide some irrelevant elements.
// @author       Scott
// @match        *://m.happymh.com/reads/*
// @grant        unsafeWindow
// @grant        GM_addStyle
// @license      MIT
// @namespace    https://www.youtube.com/c/ScottDoha
// ==/UserScript==



(function() {
    'use strict';

    var isCollapsed = true; // 默認為收起狀態

    // 檢查按鈕狀態是否已從本地存儲中獲取
    if (localStorage.getItem('isCollapsed') !== null) {
        isCollapsed = localStorage.getItem('isCollapsed') === 'true';
    }

    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            var addedNodes = mutation.addedNodes;
            for (var i = 0; i < addedNodes.length; i++) {
                var addedNode = addedNodes[i];
                if (addedNode.classList && addedNode.classList.contains('jss30')) {
                    addToggleButton(addedNode);
                }
            }

            hideUnrelatedElements();
            updateCommentSectionDisplay();
        });
    });

    observer.observe(document.body, { childList: true, subtree: true });

    function addToggleButton(article) {
        var newParentDiv = document.createElement('div');
        newParentDiv.className = 'jss102';
        newParentDiv.setAttribute('style', 'padding-left: 1rem;');
        newParentDiv.appendChild(createLabel());

        var attempts = 0;
        var maxAttempts = 5;

        function insertParentDiv() {
            if (article.firstChild) {
                article.insertBefore(newParentDiv, article.firstChild);
            } else {
                attempts++;
                if (attempts < maxAttempts) {
                    setTimeout(insertParentDiv, 500);
                }
            }
        }

        insertParentDiv();
    }

    function createLabel() {
        var newLabel = document.createElement('label');
        newLabel.className = 'MuiFormControlLabel-root jss31';
        newLabel.innerHTML = '<span class="MuiSwitch-root">' +
            '<span class="MuiButtonBase-root MuiIconButton-root jss51 MuiSwitch-switchBase MuiSwitch-colorSecondary' +
            (isCollapsed ? '' : ' Mui-checked') + '" aria-disabled="false">' +
            '<span class="MuiIconButton-label">' +
            '<input class="jss54 MuiSwitch-input" name="checkedA" type="checkbox" value="" ' +
            (isCollapsed ? '' : 'checked') + '>' +
            '<span class="MuiSwitch-thumb"></span>' +
            '</span>' +
            '<span class="MuiTouchRipple-root"></span>' +
            '</span>' +
            '<span class="MuiSwitch-track"></span>' +
            '</span>' +
            '<span class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1">' + getLabelText() + '</span>';
        
        newLabel.querySelector('.MuiIconButton-root').addEventListener('click', function() {
            isCollapsed = !isCollapsed;
            localStorage.setItem('isCollapsed', isCollapsed);
            updateButton(newLabel);
            updateCommentSectionDisplay();
            hideUnrelatedElements();
            showTooltip(isCollapsed ? '評論區已隱藏' : '評論區已顯示');
        });

        return newLabel;
    }

    function updateButton(label) {
        var button = label.querySelector('.MuiButtonBase-root');
        var iconButton = label.querySelector('.MuiIconButton-root');
        if (isCollapsed) {
            button.classList.remove('Mui-checked');
            iconButton.classList.remove('Mui-checked');
        } else {
            button.classList.add('Mui-checked');
            iconButton.classList.add('Mui-checked');
        }
        label.querySelector('.MuiTypography-root').textContent = getLabelText();
    }

    function getLabelText() {
        return isCollapsed ? '吐槽已收起' : '吐槽已展开';
    }

    function updateCommentSectionDisplay() {
        var paperElement = document.querySelector('.MuiPaper-root.MuiCard-root.jss31.jss49.MuiPaper-elevation3.MuiPaper-rounded');
        if (paperElement) {
            paperElement.style.display = isCollapsed ? 'none' : 'block';
        }
    }

    function hideUnrelatedElements() {
        // 隱藏無用的 .jss7 元素
        var jss7Div = document.querySelector('.jss7');
        if (jss7Div) {
            jss7Div.style.display = 'none';
        }

        // 隱藏廣告元素 .jss79
        var jss79Div = document.querySelector('.jss79');
        if (jss79Div) {
            jss79Div.style.display = 'none';
        }

        // 隱藏廣告元素 .jss80
        var jss80Div = document.querySelector('.jss80');
        if (jss80Div) {
            jss80Div.style.display = 'none';
        }

        // 隐藏廣告元素 #google_pedestal_container
        var googlePedestalContainer = document.querySelector('#google_pedestal_container');
        if (googlePedestalContainer) {
            googlePedestalContainer.style.display = 'none';
        }
    }

    function showTooltip(text) {
        var tooltip = document.createElement('div');
        tooltip.textContent = text;
        tooltip.classList.add('pagetual_tipsWords');
        document.body.appendChild(tooltip);
        tooltip.style.left = '50%';
        tooltip.style.top = '50%';
        tooltip.style.transform = 'translate(-50%, -50%)';
        tooltip.style.opacity = '0.6';
        setTimeout(function() {
            tooltip.style.opacity = '0';
            setTimeout(function() {
                document.body.removeChild(tooltip);
            }, 500);
        }, 2000);
    }

    GM_addStyle(`
        .pagetual_tipsWords {
            font-size: 20px;
            font-weight: bold;
            font-family: "黑体", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
            color: #ffffff;
            min-height: 50px;
            max-width: 80%;
            line-height: 1.5;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 2147483647;
            background-color: rgba(0, 0, 0, 0.8);
            border: 1px solid #303030;
            border-radius: 10px;
            padding: 10px;
            opacity: 0;
            pointer-events: none;
            text-align: center;
            word-break: break-all;
            transition: opacity 0.8s ease-in-out;
            white-space: nowrap;
        }
    `);
})();