Hide Text on Twitter

Hide text from your TL to make viewing illustrations more comfortable
Verze ze dne 28. 01. 2024. Zobrazit nejnovější verzi.
Zeptejte se na otázku, přidejte recenzi nebo skript nahlašte.
Wrap lines
// ==UserScript==
// @name            Hide Text on Twitter
// @name:ja         TLからテキストを非表示するやつ
// @namespace       http://tampermonkey.net/
// @version         1.0
// @description     Hide text from your TL to make viewing illustrations more comfortable
// @description:ja  イラスト閲覧時にテキストのみのツイートが邪魔な人用
// @author          Nogaccho
// @match           https://twitter.com/*
// @grant           none
// @license         MIT
// ==/UserScript==

(function () {
    'use strict';

    let filterEnabled = true;
    let scrollTimeout;// スクロールイベントのタイムアウトを制御する変数

    // 要素が画面内にあるかどうかを判定する関数
    const isVisible = (elem) => {
        const rect = elem.getBoundingClientRect();
        const viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
        return !(rect.bottom < 0 || rect.top - viewHeight >= 0);
    };

    const updateVisibleTweets = () => {
        document.querySelectorAll('article').forEach(tweet => {
            if (!isVisible(tweet)) return;

            if (!filterEnabled) {
                tweet.style.display = ''; 
                const textElements = tweet.querySelectorAll('div[dir="auto"]');
                textElements.forEach(element => {
                    element.style.display = ''; 
                });
                return;
            }

            const hasMediaLink = tweet.innerHTML.includes('https://pbs.twimg.com/media/');
            const textElements = tweet.querySelectorAll('div[dir="auto"]');

            if (hasMediaLink) {
                const hasTextContent = Array.from(textElements).some(element => element.textContent.trim() !== '');
                if (hasTextContent) {
                    textElements.forEach(element => {
                        element.style.display = 'none';
                    });
                }
            } else {
                tweet.style.display = 'none';
            }
        });
    };

    // 更新を遅延させる関数
    const delayedUpdate = () => {
        clearTimeout(scrollTimeout);
        scrollTimeout = setTimeout(updateVisibleTweets, 50);
    };

    // ON/OFF切り替えボタンを作成する関数
    const createToggleButton = () => {
        const toggleButton = document.createElement('input');
        toggleButton.type = 'checkbox';
        toggleButton.checked = true;
        toggleButton.style.position = 'fixed';
        toggleButton.style.top = '10px';
        toggleButton.style.right = '10px';
        toggleButton.style.zIndex = '1000';
        toggleButton.style.width = '20px';
        toggleButton.style.height = '20px';
        toggleButton.style.borderRadius = '100px'; // 角丸の設定
        toggleButton.style.border = '2px solid #555'; // 枠線の色と太さ
        toggleButton.style.backgroundColor = '#fff'; // 背景色
        toggleButton.style.cursor = 'pointer'; // カーソルをポインターに設定

        toggleButton.addEventListener('change', () => {
            filterEnabled = toggleButton.checked;
            updateVisibleTweets(); 
        });

        document.body.appendChild(toggleButton);
    };

    createToggleButton();

    window.addEventListener('scroll', delayedUpdate);

    // DOMの変更を監視するオブザーバー
    const observer = new MutationObserver(delayedUpdate);
    const config = { childList: true, subtree: true };

    const targetNode = document.querySelector('div[data-testid="primaryColumn"]') || document.body;

    setTimeout(() => {
        observer.observe(targetNode, config);// Twitterのタイムラインの変化を監視
        updateVisibleTweets();
    }, 2500);// リロード後、フィルタ機能に2.5秒遅延をかける（ツイートを読み込む前にフィルタをかけるとバグるため）
})();