Linux.do 双栏阅读预览油猴脚本

从 如果设计成这种视图帖子的阅读效率会更高 - 运营反馈 / 运营反馈, Lv1 - LINUX DO 继续讨论

做了个 Linux.do 双栏阅读预览油猴脚本。

点击帖子标题后，右侧打开帖子详情，左侧列表保持不跳转。支持拖动宽度、关闭、放大、刷新和原页打开，方便连续浏览帖子。

目前还在细节调整中，欢迎反馈。

宽窄可在中间手动拖动

// ==UserScript==

// @name         Linux.do 双栏阅读预览

// @namespace    https://linux.do/

// @version      0.1.0

// @description  在 Linux.do 话题列表中用右侧面板预览帖子

// @match        https://linux.do/*

// @run-at       document-start

// @noframes

// @grant        none

// ==/UserScript==



(function () {

  'use strict';



  const PANEL_ID = 'ld-double-column-panel';

  const STYLE_ID = 'ld-double-column-style';

  const FRAME_STYLE_ID = 'ld-double-column-frame-style';

  const WIDTH_KEY = 'ld-double-column-width';

  const DEFAULT_WIDTH = 600;

  const MAX_WIDTH = 680;

  const MIN_WIDTH = 380;

  const MOBILE_BREAKPOINT = 780;



  const state = {

    panel: null,

    frame: null,

    title: null,

    status: null,

    currentUrl: '',

    open: false,

    fullscreen: false,

    width: readWidth(),

    savedScrollY: 0,

    parentUrl: '',

    historyActive: false,

    closeFromHistory: false,

  };



  function readWidth() {

    const value = Number.parseInt(localStorage.getItem(WIDTH_KEY), 10);

    return Number.isFinite(value) ? value : DEFAULT_WIDTH;

  }



  function clampWidth(value) {

    const max = Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, Math.floor(window.innerWidth * 0.6)));

    return Math.min(Math.max(value, MIN_WIDTH), max);

  }



  function normalizeTopicUrl(href) {

    try {

      const url = new URL(href, location.href);

      if (url.origin !== location.origin) return null;

      if (!/^\/t\/topic\/\d+(?:\/\d+)?$/.test(url.pathname)) return null;

      url.hash = '';

      return url.href;

    } catch {

      return null;

    }

  }



  function isModifiedClick(event) {

    return event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;

  }



  function addStyle() {

    if (!document.head || document.getElementById(STYLE_ID)) return;



    const style = document.createElement('style');

    style.id = STYLE_ID;

    style.textContent = `

      :root {

        --ld-preview-width: ${state.width}px;

      }



      #${PANEL_ID} {

        position: fixed;

        z-index: 2147483000;

        inset: 0 0 0 auto;

        display: none;

        width: var(--ld-preview-width);

        min-width: 0;

        flex-direction: column;

        overflow: hidden;

        background: var(--secondary, #ffffff);

        color: var(--primary, #202124);

        border-left: 1px solid var(--primary-low, #d7d7d7);

        box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18);

      }



      body.ld-double-column-open #${PANEL_ID} {

        display: flex;

      }



      body.ld-double-column-open #main-outlet {

        width: calc(100% - var(--ld-preview-width)) !important;

        max-width: none !important;

        min-width: 0 !important;

        margin-right: var(--ld-preview-width) !important;

        box-sizing: border-box !important;

      }



      body.ld-double-column-open #main-outlet > .container,

      body.ld-double-column-open #main-outlet .topic-list,

      body.ld-double-column-open #main-outlet .topic-list-body {

        width: 100% !important;

        max-width: none !important;

        min-width: 0 !important;

      }



      body.ld-double-column-fullscreen #${PANEL_ID} {

        width: 100vw;

      }



      body.ld-double-column-fullscreen #main-outlet {

        visibility: hidden !important;

      }



      #${PANEL_ID} .ld-preview-resizer {

        position: absolute;

        z-index: 2;

        top: 0;

        bottom: 0;

        left: -5px;

        width: 10px;

        cursor: col-resize;

        touch-action: none;

      }



      #${PANEL_ID} .ld-preview-resizer::after {

        position: absolute;

        top: 0;

        bottom: 0;

        left: 4px;

        width: 2px;

        content: '';

        background: transparent;

        transition: background 120ms ease;

      }



      #${PANEL_ID} .ld-preview-resizer:hover::after,

      body.ld-double-column-resizing #${PANEL_ID} .ld-preview-resizer::after {

        background: var(--tertiary, #0088cc);

      }



      #${PANEL_ID} .ld-preview-toolbar {

        display: flex;

        align-items: center;

        gap: 6px;

        min-height: 42px;

        padding: 0 8px 0 14px;

        color: var(--primary, #202124);

        background: var(--secondary, #ffffff);

        border-bottom: 1px solid var(--primary-low, #d7d7d7);

      }



      #${PANEL_ID} .ld-preview-heading {

        min-width: 0;

        flex: 1;

        overflow: hidden;

        font-size: 14px;

        font-weight: 600;

        line-height: 1.3;

        text-overflow: ellipsis;

        white-space: nowrap;

      }



      #${PANEL_ID} .ld-preview-action {

        display: inline-grid;

        width: 30px;

        height: 30px;

        flex: 0 0 30px;

        place-items: center;

        padding: 0;

        color: inherit;

        background: transparent;

        border: 0;

        border-radius: 4px;

        cursor: pointer;

        font: inherit;

        font-size: 18px;

        line-height: 1;

      }



      #${PANEL_ID} .ld-preview-action:hover,

      #${PANEL_ID} .ld-preview-action:focus-visible {

        background: var(--primary-low, #e9e9e9);

        outline: none;

      }



      #${PANEL_ID} .ld-preview-content {

        position: relative;

        min-height: 0;

        flex: 1;

        background: var(--secondary, #ffffff);

      }



      #${PANEL_ID} .ld-preview-frame {

        display: block;

        width: 100%;

        height: 100%;

        border: 0;

        opacity: 1;

        transition: opacity 120ms ease;

      }



      #${PANEL_ID}.is-loading .ld-preview-frame {

        opacity: 0.35;

      }



      #${PANEL_ID} .ld-preview-status {

        position: absolute;

        top: 50%;

        left: 50%;

        z-index: 1;

        max-width: min(80%, 360px);

        padding: 12px 16px;

        color: var(--primary, #202124);

        background: var(--secondary, #ffffff);

        border: 1px solid var(--primary-low, #d7d7d7);

        border-radius: 6px;

        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);

        font-size: 14px;

        line-height: 1.5;

        text-align: center;

        transform: translate(-50%, -50%);

      }



      #${PANEL_ID} .ld-preview-status[hidden] {

        display: none;

      }



      body.ld-double-column-resizing,

      body.ld-double-column-resizing * {

        cursor: col-resize !important;

        user-select: none !important;

      }



      @media (max-width: ${MOBILE_BREAKPOINT}px) {

        #${PANEL_ID} {

          width: 100vw;

        }



        body.ld-double-column-open #main-outlet {

          width: 100% !important;

          margin-right: 0 !important;

        }



        body.ld-double-column-open:not(.ld-double-column-fullscreen) #main-outlet {

          visibility: hidden !important;

        }



        #${PANEL_ID} .ld-preview-resizer {

          display: none;

        }

      }

    `;

    document.head.appendChild(style);

  }



  function createButton(icon, label, handler) {

    const button = document.createElement('button');

    button.type = 'button';

    button.className = 'ld-preview-action';

    button.textContent = icon;

    button.title = label;

    button.setAttribute('aria-label', label);

    button.addEventListener('click', handler);

    return button;

  }



  function ensurePanel() {

    if (state.panel) return;

    addStyle();



    const panel = document.createElement('aside');

    panel.id = PANEL_ID;

    panel.setAttribute('aria-label', '帖子预览');



    const resizer = document.createElement('div');

    resizer.className = 'ld-preview-resizer';

    resizer.title = '拖动调整宽度';

    resizer.setAttribute('role', 'separator');

    resizer.setAttribute('aria-orientation', 'vertical');



    const toolbar = document.createElement('div');

    toolbar.className = 'ld-preview-toolbar';



    const heading = document.createElement('div');

    heading.className = 'ld-preview-heading';

    heading.textContent = '帖子预览';

    heading.title = '帖子预览';



    const content = document.createElement('div');

    content.className = 'ld-preview-content';



    const frame = document.createElement('iframe');

    frame.className = 'ld-preview-frame';

    frame.title = '帖子预览';

    frame.loading = 'eager';

    frame.referrerPolicy = 'origin-when-cross-origin';

    frame.addEventListener('load', handleFrameLoad);



    const status = document.createElement('div');

    status.className = 'ld-preview-status';

    status.hidden = true;



    const originalButton = createButton('↗', '在原页面打开', () => {

      if (state.currentUrl) window.open(state.currentUrl, '_blank', 'noopener,noreferrer');

    });

    const refreshButton = createButton('↻', '刷新预览', () => {

      if (state.frame?.contentWindow) state.frame.contentWindow.location.reload();

    });

    const fullscreenButton = createButton('⛶', '放大预览', () => {

      state.fullscreen = !state.fullscreen;

      document.body.classList.toggle('ld-double-column-fullscreen', state.fullscreen);

      fullscreenButton.textContent = state.fullscreen ? '⛶' : '⛶';

      fullscreenButton.title = state.fullscreen ? '恢复双栏' : '放大预览';

      fullscreenButton.setAttribute('aria-label', fullscreenButton.title);

    });

    const closeButton = createButton('×', '关闭预览', closePanel);



    toolbar.append(heading, originalButton, refreshButton, fullscreenButton, closeButton);

    content.append(frame, status);

    panel.append(resizer, toolbar, content);

    document.body.appendChild(panel);



    state.panel = panel;

    state.frame = frame;

    state.title = heading;

    state.status = status;



    installResizer(resizer);

  }



  function installResizer(resizer) {

    let pointerId = null;



    resizer.addEventListener('pointerdown', (event) => {

      if (!state.open || window.innerWidth <= MOBILE_BREAKPOINT) return;

      pointerId = event.pointerId;

      resizer.setPointerCapture(pointerId);

      document.body.classList.add('ld-double-column-resizing');

      event.preventDefault();

    });



    resizer.addEventListener('pointermove', (event) => {

      if (pointerId !== event.pointerId) return;

      setWidth(window.innerWidth - event.clientX);

    });



    const stopResize = (event) => {

      if (pointerId !== event.pointerId) return;

      pointerId = null;

      document.body.classList.remove('ld-double-column-resizing');

      try {

        resizer.releasePointerCapture(event.pointerId);

      } catch {

        // The pointer may already have been released by the browser.

      }

    };



    resizer.addEventListener('pointerup', stopResize);

    resizer.addEventListener('pointercancel', stopResize);

  }



  function setWidth(value) {

    state.width = clampWidth(value);

    document.documentElement.style.setProperty('--ld-preview-width', `${state.width}px`);

    localStorage.setItem(WIDTH_KEY, String(state.width));

  }



  function setStatus(message) {

    if (!state.status) return;

    state.status.textContent = message;

    state.status.hidden = !message;

  }



  function setPreviewHistory(url, replace) {

    const base = new URL(state.parentUrl || location.href);

    base.hash = `ld-preview=${encodeURIComponent(new URL(url).pathname)}`;

    const previousState = history.state && typeof history.state === 'object' ? history.state : {};

    const nextState = {

      ...previousState,

      ldDoubleColumn: true,

      ldPreviewUrl: url,

      ldPreviewBase: state.parentUrl,

    };



    if (replace) history.replaceState(nextState, '', base.href);

    else history.pushState(nextState, '', base.href);

  }



  function openPanel(url, options = {}) {

    const normalizedUrl = normalizeTopicUrl(url);

    if (!normalizedUrl) return;

    ensurePanel();



    if (!state.open) {

      state.open = true;

      state.fullscreen = false;

      state.savedScrollY = window.scrollY;

      state.parentUrl = location.href;

      state.historyActive = !options.fromHistory;

      document.body.classList.add('ld-double-column-open');

      document.body.classList.remove('ld-double-column-fullscreen');

      if (!options.fromHistory) setPreviewHistory(normalizedUrl, false);

      requestAnimationFrame(() => window.scrollTo(0, state.savedScrollY));

    } else if (!options.fromHistory && state.historyActive) {

      setPreviewHistory(normalizedUrl, true);

    }



    state.currentUrl = normalizedUrl;

    state.panel.classList.add('is-loading');

    state.title.textContent = '正在加载帖子...';

    state.title.title = normalizedUrl;

    setStatus('正在加载帖子...');

    state.frame.src = normalizedUrl;

  }



  function closePanel() {

    if (!state.open) return;

    const shouldGoBack = state.historyActive && history.state?.ldDoubleColumn && !state.closeFromHistory;

    state.closeFromHistory = false;

    state.open = false;

    state.fullscreen = false;

    state.currentUrl = '';

    document.body.classList.remove('ld-double-column-open', 'ld-double-column-fullscreen');

    state.panel.classList.remove('is-loading');

    state.frame.removeAttribute('src');

    setStatus('');

    state.title.textContent = '帖子预览';

    state.title.title = '帖子预览';

    requestAnimationFrame(() => window.scrollTo(0, state.savedScrollY));



    if (shouldGoBack) {

      state.historyActive = false;

      history.back();

    }

  }



  function handleFrameLoad() {

    state.panel?.classList.remove('is-loading');

    setStatus('');



    try {

      const frameDocument = state.frame.contentDocument;

      if (!frameDocument) throw new Error('preview document unavailable');



      let style = frameDocument.getElementById(FRAME_STYLE_ID);

      if (!style) {

        style = frameDocument.createElement('style');

        style.id = FRAME_STYLE_ID;

        style.textContent = `

          html, body { min-width: 0 !important; }

          .d-header,

          .sidebar-container,

          .sidebar-wrapper,

          .sidebar-hamburger,

          .before-header-panel-outlet,

          .topic-list { display: none !important; }

          #main-outlet,

          #topic,

          .topic-area,

          .topic-post,

          .boxed { width: auto !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }

          #main-outlet { padding: 14px 20px 30px !important; }

          .topic-post { border-left: 0 !important; border-right: 0 !important; }

        `;

        frameDocument.head.appendChild(style);

      }



      const topicTitle = frameDocument.querySelector('h1')?.textContent?.replace(/\s+/g, ' ').trim();

      if (topicTitle) {

        state.title.textContent = topicTitle;

        state.title.title = topicTitle;

      } else {

        state.title.textContent = '帖子预览';

        state.title.title = state.currentUrl;

      }

    } catch {

      state.title.textContent = '帖子预览';

      state.title.title = state.currentUrl;

    }

  }



  function handleTopicClick(event) {

    if (isModifiedClick(event) || event.defaultPrevented) return;

    const rawTarget = event.target;

    const target = rawTarget && typeof rawTarget.closest === 'function'

      ? rawTarget.closest('a[href]')

      : null;

    if (!target || target.closest(`#${PANEL_ID}`)) return;

    if (!target.matches('a.title.raw-topic-link') && !target.closest('tr.topic-list-item')) return;



    const topicUrl = normalizeTopicUrl(target.href);

    if (!topicUrl) return;



    event.preventDefault();

    event.stopImmediatePropagation();

    openPanel(topicUrl);

  }



  function handleHistoryChange() {

    const historyState = history.state;

    if (historyState?.ldDoubleColumn && historyState.ldPreviewUrl) {

      openPanel(historyState.ldPreviewUrl, { fromHistory: true });

      return;

    }



    if (state.open) {

      state.closeFromHistory = true;

      closePanel();

    }

  }



  function start() {

    addStyle();

    window.addEventListener('click', handleTopicClick, true);

    window.addEventListener('popstate', handleHistoryChange);

    window.addEventListener('keydown', (event) => {

      if (event.key === 'Escape' && state.open) closePanel();

    });

    setWidth(state.width);

  }



  if (document.readyState === 'loading') {

    document.addEventListener('DOMContentLoaded', start, { once: true });

  } else {

    start();

  }

})();