☰

WeRead Zen Mode

Toggle zen mode on WeRead by pressing 'a' three times

// ==UserScript==
// @name         WeRead Zen Mode
// @name:zh-CN   微信阅读禅模式
// @description:zh-CN  按四次a/点击Zen按钮，开启/关闭禅模式
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  Toggle zen mode on WeRead by pressing 'a' three times
// @author       Van
// @match        https://weread.qq.com/web/reader/*
// @grant        none
// @license      MIT 
// ==/UserScript==

(function () {
  'use strict';

  // 计数器和状态
  let zCount = 0;
  let zenModeActive = false;
  let originalDisplayStates = {}; // 存储原始display状态

  // 查找目标元素
  function findTargetElement() {
    return document.querySelector('.reader_float_review_with_range_panel_wrapper');
  }

  // 隐藏指定的元素 - 带淡出效果
  function hideSpecificElements() {
    // 要隐藏的元素选择器
    const elementsToHide = [
      '.readerTopBar',
      '.readerControls.readerControls' // 注意：这个选择器可能需要根据实际HTML结构调整
    ];

    elementsToHide.forEach(selector => {
      const elements = document.querySelectorAll(selector);
      elements.forEach(element => {
        // 保存原始display和opacity状态
        originalDisplayStates[element] = {
          display: element.style.display,
          opacity: element.style.opacity,
          transition: element.style.transition
        };

        // 设置淡出过渡
        element.style.transition = 'opacity 0.3s ease-in-out';
        element.style.opacity = '0';

        // 在过渡结束后隐藏元素
        setTimeout(() => {
          element.style.display = 'none';
        }, 300);
      });
    });
  }

  // 显示指定的元素 - 带淡入效果
  function showSpecificElements() {
    // 要显示的元素选择器
    const elementsToShow = [
      '.readerTopBar',
      '.readerControls.readerControls'
    ];

    elementsToShow.forEach(selector => {
      const elements = document.querySelectorAll(selector);
      elements.forEach(element => {
        if (originalDisplayStates.hasOwnProperty(element)) {
          // 设置为可见但透明
          element.style.display = originalDisplayStates[element].display || '';
          element.style.opacity = '0';
          element.style.transition = 'opacity 0.3s ease-in-out';

          // 触发重排后设置不透明度
          element.offsetHeight; // force reflow
          element.style.opacity = '1';

          // 恢复原始过渡设置
          setTimeout(() => {
            element.style.transition = originalDisplayStates[element].transition || '';
          }, 300);
        }
      });
    });

    // 清空存储的状态
    originalDisplayStates = {};
  }

  // 切换zen模式
  function toggleZenMode() {
    if (zenModeActive) {
      // 退出zen模式
      showSpecificElements();
      zenModeActive = false;
      showNotification('退出 Zen 模式');
      // 更新按钮状态
      updateZenButton();
    } else {
      // 进入zen模式
      hideSpecificElements();
      zenModeActive = true;
      showNotification('进入 Zen 模式');
      // 更新按钮状态
      updateZenButton();
    }
  }

  // 显示通知弹窗
  function showNotification(message) {
    // 检查是否已存在通知
    const existingNotification = document.getElementById('wz-zen-notification');
    if (existingNotification) {
      // 如果存在，移除旧的
      existingNotification.remove();
    }

    const notification = document.createElement('div');
    notification.id = 'wz-zen-notification';
    notification.textContent = message;
    notification.style.cssText = `
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background-color: rgba(0, 0, 0, 0.8);
                color: white;
                padding: 15px 30px;
                border-radius: 8px;
                font-size: 18px;
                z-index: 10000;
                opacity: 0;
                transition: opacity 0.3s ease-in-out;
            `;

    document.body.appendChild(notification);

    // 触发动画
    setTimeout(() => {
      notification.style.opacity = '1';
    }, 10);

    // 2秒后开始淡出
    setTimeout(() => {
      notification.style.opacity = '0';
      // 0.3秒后完全移除
      setTimeout(() => {
        if (notification.parentNode) {
          notification.parentNode.removeChild(notification);
        }
      }, 300);
    }, 2000); // 2秒显示时间
  }

  // 创建zen模式切换按钮
  function createZenButton() {
    const button = document.createElement('div');
    button.id = 'wz-zen-toggle-button';
    button.innerHTML = ' Zen ';
    button.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            width: 60px;
            height: 30px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 15px;
            cursor: pointer;
            font-size: 14px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            opacity: 0.9;
            transition: all 0.3s ease;
            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
        `;

    // 添加悬停效果
    button.addEventListener('mouseenter', function () {
      this.style.opacity = '1';
      this.style.transform = 'scale(1.05)';
      resetButtonAutoHideTimer(); // 重置自动隐藏计时器
    });

    button.addEventListener('mouseleave', function () {
      this.style.opacity = '0.9';
      this.style.transform = 'scale(1)';
    });

    // 点击事件
    button.addEventListener('click', function () {
      toggleZenMode();
      resetButtonAutoHideTimer(); // 重置自动隐藏计时器
    });

    document.body.appendChild(button);
    updateZenButton(); // 初始化按钮状态

    // 设置自动隐藏计时器
    startButtonAutoHideTimer();
  }

  // 更新按钮状态
  function updateZenButton() {
    const button = document.getElementById('wz-zen-toggle-button');
    if (!button) return;

    if (zenModeActive) {
      button.style.backgroundColor = '#28a745'; // 绿色表示激活状态
      button.textContent = ' Zen ';
      button.title = '点击退出 Zen 模式';
    } else {
      button.style.backgroundColor = '#007bff'; // 蓝色表示非激活状态
      button.textContent = ' Zen ';
      button.title = '点击进入 Zen 模式';
    }
  }

  // 等待DOM加载完成并持续检查目标元素
  function waitForTargetElementAndSetup() {
    const targetElement = findTargetElement();
    if (targetElement) {
      setupKeyboardListener();
      // 创建浮动按钮
      if (!document.getElementById('wz-zen-toggle-button')) {
        createZenButton();
      }
      console.log('WeRead Zen Mode: Target element found, keyboard listener set up');
    } else {
      // 如果没找到元素，继续等待
      setTimeout(waitForTargetElementAndSetup, 1000);
    }
  }

  // 设置键盘监听器
  function setupKeyboardListener() {
    // 防止重复添加事件监听器
    if (window.wereadZenModeListenerAdded) {
      return;
    }

    window.wereadZenModeListenerAdded = true;

    // 键盘事件监听 - 使用更全局的事件监听
    document.addEventListener('keydown', function (event) {
      // 检查是否在输入框中，避免在文本输入时触发
      const activeElement = document.activeElement;
      if (activeElement && (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA')) {
        return;
      }

      if (event.key === 'a' || event.key === 'A') {
        // 阻止默认行为以避免与其他功能冲突
        event.preventDefault();
        zCount++;
        if (zCount === 3) {
          toggleZenMode();
          zCount = 0; // 重置计数器
        }
      } else {
        zCount = 0; // 重置计数器
      }
    }, true); // 使用捕获阶段以确保事件被捕捉
  }

  // 页面加载完成后开始等待目标元素
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', function () {
      console.log('WeRead Zen Mode: DOM loaded, waiting for target element...');
      waitForTargetElementAndSetup();
    });
  } else {
    console.log('WeRead Zen Mode: Document already loaded, waiting for target element...');
    waitForTargetElementAndSetup();
  }

  // 同时在页面完全加载后也检查
  window.addEventListener('load', function () {
    console.log('WeRead Zen Mode: Window loaded, waiting for target element...');
    waitForTargetElementAndSetup();
  });

  // 自动隐藏计时器变量
  let buttonAutoHideTimer = null;

  // 开始自动隐藏计时器
  function startButtonAutoHideTimer() {
    if (buttonAutoHideTimer) {
      clearTimeout(buttonAutoHideTimer);
    }

    buttonAutoHideTimer = setTimeout(() => {
      hideButtonToEdge();
    }, 3000); // 3秒无操作后自动缩进到边缘
  }

  // 重置自动隐藏计时器
  function resetButtonAutoHideTimer() {
    if (buttonAutoHideTimer) {
      clearTimeout(buttonAutoHideTimer);
    }

    // 恢复按钮到正常位置
    const button = document.getElementById('wz-zen-toggle-button');
    if (button) {
      button.style.right = '20px';
      button.style.transform = 'translateX(0)';
    }

    // 重新开始计时器
    buttonAutoHideTimer = setTimeout(() => {
      hideButtonToEdge();
    }, 3000);
  }

  // 隐藏按钮到边缘
  function hideButtonToEdge() {
    const button = document.getElementById('wz-zen-toggle-button');
    if (button) {
      // 移动到右侧边缘，只显示一半
      button.style.right = '-20px'; // 负值使按钮部分隐藏在右侧边缘
      button.style.transform = 'translateX(0)';
    }
  }

  // 为页面添加全局鼠标移动监听，重置计时器
  function setupGlobalActivityListener() {
    document.addEventListener('mousemove', resetButtonAutoHideTimer);
    document.addEventListener('keydown', resetButtonAutoHideTimer);
    document.addEventListener('click', resetButtonAutoHideTimer);
  }

  // 在适当位置调用全局监听器设置
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', setupGlobalActivityListener);
  } else {
    setupGlobalActivityListener();
  }

})();