收起或展開嗨皮漫畫評論區，並隱藏一些無關的元素。
// ==UserScript==
// @name 嗨皮漫畫 - 收起、展開評論區
// @name:zh-TW 嗨皮漫畫 - 收起、展開評論區
// @name:zh-CN 嗨皮漫画 - 收起、展开评论区
// @name:ja ハッピーコミック - コメントエリアの折りたたみと展開
// @name:en Happy Comics - Collapse and Expand Comments Section
// @version 1.1
// @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';
// 檢查按鈕狀態是否已從本地存儲中獲取為收起
// Check if the button state is collapsed from localStorage
var isCollapsed = localStorage.getItem('isCollapsed') === 'true';
// MutationObserver 用於檢測 DOM 變化
// MutationObserver to detect DOM changes
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];
// 添加新添加的文章元素的切換按鈕
// Add toggle button for newly added article elements
if (addedNode.classList && addedNode.classList.contains('jss29')) {
addToggleButton(addedNode);
}
}
});
// 在這裡隱藏無用的 .jss7 元素
// Hide unnecessary .jss7 elements here
var jss7Div = document.querySelector('.jss7');
if (jss7Div) {
jss7Div.style.display = 'none';
}
// 隱藏評論區元素 .MuiPaper-root
// Hide comment section elements .MuiPaper-root
var paperElement = document.querySelector('.MuiPaper-root.MuiCard-root.jss30.jss48.MuiPaper-elevation3.MuiPaper-rounded');
if (paperElement) {
paperElement.style.display = isCollapsed ? 'none' : 'block';
}
// 隱藏廣告元素 .jss79
// Hide advertisement element .jss79
var jss79Div = document.querySelector('.jss79');
if (jss79Div) {
jss79Div.style.display = 'none';
}
// 隐藏廣告元素 #google_pedestal_container
// Hide advertisement element #google_pedestal_container
var googlePedestalContainer = document.querySelector('#google_pedestal_container');
if (googlePedestalContainer) {
googlePedestalContainer.style.display = 'none';
}
});
// 開始觀察整個文檔的變化
// Start observing changes in the entire document
observer.observe(document.body, { childList: true, subtree: true });
// 添加切換按鈕的函數
// Function to add toggle button
function addToggleButton(article) {
var newParentDiv = document.createElement('div');
newParentDiv.className = 'jss102';
newParentDiv.setAttribute('style', 'padding-left: 1rem;');
newParentDiv.appendChild(createLabel());
// 定義嘗試次數和最大嘗試次數
// Define the number of attempts and maximum number of attempts
var attempts = 0;
var maxAttempts = 5;
// 插入新的父節點
// Insert new parent node
function insertParentDiv() {
if (article.firstChild) {
article.insertBefore(newParentDiv, article.firstChild);
} else {
// 如果article.firstChild為null，則等待500ms後重試
// If article.firstChild is null, wait 500ms and retry
attempts++;
console.log('嘗試次數：', attempts);
if (attempts < maxAttempts) {
setTimeout(insertParentDiv, 500);
}
}
}
// 初始化插入操作
// Initialize insertion operation
insertParentDiv();
}
// 創建切換按鈕標簽的函數
// Function to create toggle button label
function createLabel() {
var newLabel = document.createElement('label');
newLabel.className = 'MuiFormControlLabel-root jss31';
newLabel.innerHTML = '<span class="MuiSwitch-root">' +
'<span class="MuiButtonBase-root MuiIconButton-root jss50 MuiSwitch-switchBase MuiSwitch-colorSecondary' + (isCollapsed ? ' Mui-checked' : '') + '" aria-disabled="false">' +
'<span class="MuiIconButton-label">' +
'<input class="jss53 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></label>';
return newLabel;
}
// 監聽按鈕點擊事件
// Listen for button click event
newLabel.querySelector('.MuiIconButton-root').addEventListener('click', function() {
isCollapsed = !isCollapsed;
localStorage.setItem('isCollapsed', isCollapsed);
updateButton(newLabel);
console.log('按鈕被點擊了！當前狀態為：' + (isCollapsed ? '收起' : '展開'));
if (propertyElement) {
propertyElement.style.display = isCollapsed ? 'none' : 'block';
}
// 顯示懸浮提示文字
// Show floating tooltip text
showTooltip(isCollapsed ? '評論區已隱藏' : '評論區已顯示');
});
// 更新切換按鈕的樣式和文字
// Update toggle button style and text
function updateButton(label) {
var button = label.querySelector('.MuiButtonBase-root');
var iconButton = label.querySelector('.MuiIconButton-root');
if (isCollapsed) {
button.classList.add('Mui-checked');
iconButton.classList.add('Mui-checked');
} else {
button.classList.remove('Mui-checked');
iconButton.classList.remove('Mui-checked');
}
label.querySelector('.MuiTypography-root').textContent = getLabelText();
}
// 獲取按鈕文字
// Get button label text
function getLabelText() {
return isCollapsed ? '吐槽已收起' : '吐槽已展开';
}
// 顯示懸浮提示文字的函數
// Function to show floating tooltip text
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);
}
// 加入懸浮提示文字的 CSS
// Add CSS for floating tooltip text
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;
}
`);
})();