expend pics

expend thumbnail
Wrap lines
// ==UserScript==
// @name        expend pics
// @namespace   twitter
// @name:zh-TW  縮圖放大
// @match       https://x.com/*
// @grant       none
// @icon        https://twitter.com/favicon.ico
// @version     2024/8/31 上午07:49:59
// @author      qq
// @license     MIT
// @description expend thumbnail
// @description:zh-TW 將縮圖放大
// ==/UserScript==
 
function transformHTML(element) {
  try {
    const mainDiv = element.querySelector('div[id][aria-labelledby]');
    if (!mainDiv) return;
 
    const containsVideo = mainDiv ? mainDiv.outerHTML.includes('video') : false;
    if (containsVideo) return;
 
 
    const newStructure = document.createElement('div');
    newStructure.className = mainDiv.className || '';
    newStructure.id = mainDiv.id || '';
    newStructure.setAttribute('aria-labelledby', mainDiv.getAttribute('aria-labelledby') || '');
    newStructure.setAttribute('aria-labelledbydone', 'true');
 
    const divClasses = [
      'css-175oi2r r-9aw3ui',
      'css-175oi2r',
      'css-175oi2r r-k200y',
      'css-175oi2r r-1kqtdi0 r-1phboty r-rs99b7 r-1867qdf r-1udh08x r-o7ynqc r-6416eg r-1ny4l3l',
      'css-175oi2r'
    ];
    const nestedDivs = divClasses.reduce((acc, className) => {
      const div = document.createElement('div');
      div.className = className;
      if (acc) acc.appendChild(div);
      return div;
    }, null);
 
    const imageContainer = document.createElement('div');
    imageContainer.className = 'css-175oi2r r-16y2uox r-1pi2tsx r-13qz1uu';
 
    // 處理每個圖片鏈接
    mainDiv.querySelectorAll('a').forEach(aa => {
      if (!aa) return; // 跳過無效的元素
 
      try {
        const newA = aa.cloneNode(false);
        newA.className = 'css-175oi2r r-1pi2tsx r-1ny4l3l r-1loqt21';
 
        const innerDiv = document.createElement('div');
        innerDiv.className = 'css-175oi2r r-1adg3ll r-1udh08x';
        innerDiv.style.width = '522px';
        innerDiv.style.height = '100%';
 
        // 添加 padding-bottom div
        const paddingDiv = document.createElement('div');
        paddingDiv.className = 'r-1adg3ll r-13qz1uu';
        paddingDiv.style.paddingBottom = '125.031%';
        innerDiv.appendChild(paddingDiv);
 
        // 添加包含圖片的 div
        const imageWrapperDiv = document.createElement('div');
        imageWrapperDiv.className = 'r-1p0dtai r-1pi2tsx r-1d2f490 r-u8s1d r-ipm5af r-13qz1uu';
 
        const imageDiv = aa.querySelector('div[aria-label="Image"]');
        if (!imageDiv) {
          console.log('Image div not found aa=');
          console.log(aa.outerHTML);
          // throw new Error('Image div not found');
        }//if (!imageDiv)
 
        const clonedImageDiv = imageDiv.cloneNode(true);
 
        // 修改背景圖片的 URL
        const bgDiv = clonedImageDiv.querySelector('div[style*="background-image"]');
        if (bgDiv && bgDiv.style.backgroundImage) {
          let bgUrl = bgDiv.style.backgroundImage;
          bgUrl = bgUrl.replace(/name=\w+/, 'name=small');
          bgDiv.style.backgroundImage = bgUrl;
        }
 
        // 修改 img 標籤的 src
        const img = clonedImageDiv.querySelector('img');
        if (img && img.src) {
          console.log('****img.src****');
          console.log(img.src);
          img.src = img.src.replace(/name=\w+/, 'name=small');
        }
 
        imageWrapperDiv.appendChild(clonedImageDiv);
        innerDiv.appendChild(imageWrapperDiv);
        newA.appendChild(innerDiv);
        imageContainer.appendChild(newA);
      } catch (error) {
        console.error('Error processing image link:', error);
      }
    });
 
    nestedDivs.appendChild(imageContainer);
    // newStructure.appendChild(divClasses[0] === nestedDivs.className ? nestedDivs : nestedDivs.firstChild);
    newStructure.appendChild(nestedDivs);
 
    // 替換原始的 HTML
    if (mainDiv.parentNode) {
      mainDiv.parentNode.replaceChild(newStructure, mainDiv);
    }
  } catch (error) {
    console.error('Error in transformHTML:', error);
  }
}
 
setTimeout(function(){
 
  document.querySelectorAll('div[id][aria-labelledby]:not([aria-labelledbydone])').forEach(div => {
    if (div.parentElement) transformHTML(div.parentElement);
    // if (!!div) transformHTML(div);
  });
},1000);
 
 
 
function handleScroll() {
  // document.querySelectorAll('div[id][aria-labelledby]').forEach(div => {
  setTimeout(function(){
 
    document.querySelectorAll('div[id][aria-labelledby]:not([aria-labelledbydone])').forEach(div => {
      if (div.parentElement) transformHTML(div.parentElement);
      // if (!!div) transformHTML(div);
    });
  }, 3000)
 
}
 
// // 添加滾輪事件監聽器
// window.addEventListener('wheel', handleScroll);
 
 
 
// 創建一個 MutationObserver 實例
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === 'childList') {
      mutation.addedNodes.forEach((node) => {
        if (node.nodeType === Node.ELEMENT_NODE) {
          // 檢查新增的元素是否包含目標結構
          // const targetDiv = node.querySelector('div[id][aria-labelledby]');
          const targetDiv = node.querySelector('div[id][aria-labelledby]:not([aria-labelledbydone])');
          if (!!targetDiv) {
            console.log('-------------targetDiv-------------');
            console.log(targetDiv);
            console.log('node');
            console.log(node);
            setTimeout(function(){
              transformHTML(node);
            }, 3000);
          }
        }
      });
    }
  });
});
 
// 配置 observer
const config = { childList: true, subtree: true };
 
// 開始觀察目標節點（例如 body 或主要內容容器）
observer.observe(document.body, config);
欢迎访问Greasy Fork镜像
