Twitter/X filter media tab

filter twitter/x media tab
换行
// ==UserScript==
// @name                Twitter/X filter media tab
// @namespace           https://gf.qytechs.cn/users/821661
// @match               https://x.com/*
// @grant               GM_addStyle
// @version             1.3
// @author              hdyzen
// @description         filter twitter/x media tab
// @license             GPL-3.0-only
// ==/UserScript==

function createFilterButtons() {
	const filterContainer = document.createElement("div");
	filterContainer.id = "media-filter-controls";
	filterContainer.style.cssText = `
            display: none;
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 9999;
            border-radius: 12px;
            padding: 6px;
            gap: 8px;
            backdrop-filter: blur(10px);
        `;


	const allBtn = document.createElement("button");
	allBtn.id = "all";
	allBtn.textContent = "All";
	allBtn.onclick = () => document.body.removeAttribute("filter-by");

	const imagesBtn = document.createElement("button");
	imagesBtn.id = "images";
	imagesBtn.textContent = "Images";
	imagesBtn.onclick = () => document.body.setAttribute("filter-by", "images");

	const videosBtn = document.createElement("button");
	videosBtn.id = "videos";
	videosBtn.textContent = "Videos";
	videosBtn.onclick = () => document.body.setAttribute("filter-by", "videos");

	filterContainer.appendChild(allBtn);
	filterContainer.appendChild(imagesBtn);
	filterContainer.appendChild(videosBtn);

	document.body.appendChild(filterContainer);
}
createFilterButtons();

GM_addStyle(`
    body:not([filter-by]) #media-filter-controls #all, [filter-by="images"] #media-filter-controls #images, [filter-by="videos"] #media-filter-controls #videos {
        background:rgb(26, 77, 216) !important;
        scale: 1.05 !important;
    }
    body:has([data-testid="primaryColumn"] [role="navigation"] [href$="/media"][aria-selected="true"]) #media-filter-controls {
        display: flex !important;
    }
    #media-filter-controls > button {
        padding: 6px 12px;
        border: none;
        border-radius: 8px;
        background: #1d9bf0;
        color: white;
        cursor: pointer;
        font-size: 14px;
        font-weight: 600;
        transition: all 0.2s;
    }
    [filter-by="videos"] [data-testid="primaryColumn"]:has([role="navigation"] [href$="/media"][aria-selected="true"]) [role="region"] [role="listitem"]:has(a[href*="/photo/"]) {
        display: none;
    }
    [filter-by="images"] [data-testid="primaryColumn"]:has([role="navigation"] [href$="/media"][aria-selected="true"]) [role="region"] [role="listitem"]:has(a[href*="/video/"]) {
        display: none;
    }
    [data-testid="primaryColumn"]:has([role="navigation"][aria-live="polite"]) section[role="region"]:has(> h1[role="heading"] + div[aria-label^="Timeline:"] > div > div[data-testid="cellInnerDiv"]) > div {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px;
        margin: 4px 4px 0;
    }
    [data-testid="primaryColumn"]:has([role="navigation"][aria-live="polite"]) section[role="region"]:has(> h1[role="heading"] + div[aria-label^="Timeline:"] > div > div[data-testid="cellInnerDiv"]) > div *:not([role="listitem"], [role="listitem"] *) {
        display: contents;
    }
`);
欢迎访问Greasy Fork镜像
