☰

PTT web enhanced

Enhance user experience of PTT web

  1. // ==UserScript==
  2. // @name         PTT web enhanced
  3. // @namespace    2CF9973A-28C9-11EC-9EA6-98F49F6E8EAB
  4. // @version      2.8.1
  5. // @description  Enhance user experience of PTT web
  6. // @author       Rick0
  7. // @match        https://www.ptt.cc/*
  8. // @grant        GM.xmlHttpRequest
  9. // @connect      imgur.com
  10. // @connect      ptt.cc
  11. // @run-at       document-start
  12. // @compatible   firefox Tampermonkey, Violentmonkey, Greasemonkey 4.11+
  13. // @compatible   chrome Tampermonkey, Violentmonkey
  14. // @license      MIT
  15. // ==/UserScript==
  16.  
  17. (function() {
  18.   'use strict'
  19.  
  20.   // == basic methods ==
  21.  
  22.   function createElement(html) {
  23.     let template = document.createElement('template')
  24.     template.innerHTML = html
  25.     
  26.     return template.content.firstChild
  27.   }
  28.  
  29.   function insertElementToNextLine (positionElement, element) {
  30.     let positionNextSibling = positionElement.nextSibling
  31.     switch (positionNextSibling?.nodeType) {
  32.       case Node.TEXT_NODE:
  33.         positionNextSibling.parentNode.replaceChild(element, positionNextSibling)
  34.         let textMatchList = positionNextSibling.data.match(/^([^\n]*)(\n?.*)$/s)
  35.         if (textMatchList[1] !== undefined) element.insertAdjacentText('beforebegin', textMatchList[1])
  36.         if (textMatchList[2] !== undefined) element.insertAdjacentText('afterend', textMatchList[2])
  37.         break
  38.         
  39.       case Node.ELEMENT_NODE:
  40.       case undefined:
  41.         positionElement.insertAdjacentElement('afterend', element)
  42.         break
  43.       
  44.       default:
  45.         throw new Error('insertElementToNextLine receive invalid positionElement')
  46.     }
  47.   }
  48.  
  49.   function addStyle (cssCode) {
  50.     document.head.append(createElement(`<style>${cssCode}</style>`))
  51.   }
  52.  
  53.   function getImgurInfo (imgurUrl) {
  54.     return new Promise((resolve, reject) => {
  55.       let urlData = new URL(imgurUrl)
  56.  
  57.       if (regExpData.imgur.idExt.test(urlData.pathname)) {
  58.         let imageId = RegExp.$1
  59.         fetch(`https://api.imgur.com/3/image/${imageId}`, {
  60.           method: 'GET',
  61.           referrerPolicy: 'no-referrer',
  62.           headers: {
  63.             Authorization: 'Client-ID b654e1b04c90bc8'
  64.           },
  65.         })
  66.           .then(res => res.json())
  67.           .then(json => resolve(json.data))
  68.           .catch(err => reject(err))
  69.       } else if (regExpData.imgur.album.test(urlData.pathname)) {
  70.         let albumId = RegExp.$1
  71.         fetch(`https://api.imgur.com/3/album/${albumId}/images`, {
  72.           method: 'GET',
  73.           referrerPolicy: 'no-referrer',
  74.           headers: {
  75.             Authorization: 'Client-ID b654e1b04c90bc8'
  76.           },
  77.         })
  78.           .then(res => res.json())
  79.           .then(json => resolve(json.data[0]))
  80.           .catch(err => reject(err))
  81.       } else if (regExpData.imgur.gallery.test(urlData.pathname)) {
  82.         let galleryId = RegExp.$1
  83.         fetch(`https://api.imgur.com/3/gallery/${galleryId}/images`, {
  84.           method: 'GET',
  85.           referrerPolicy: 'no-referrer',
  86.           headers: {
  87.             Authorization: 'Client-ID b654e1b04c90bc8'
  88.           },
  89.         })
  90.           .then(res => res.json())
  91.           .then(json => resolve(Array.isArray(json.data) ? json.data[0] : json.data))
  92.           .catch(err => reject(err))
  93.       } else {
  94.         reject(new Error(`不支援的格式: ${imgurUrl}`))
  95.       }
  96.     })
  97.   }
  98.  
  99.   // == dependent methods ==
  100.  
  101.   function agreeOver18 () {
  102.     document.cookie = `over18=1;path=/;expires=${(new Date(2100, 0)).toUTCString()}`
  103.     location.replace(`https://www.ptt.cc/${decodeURIComponent(location.search.match(/[?&]from=([^&]+)/)[1])}`) 
  104.   }
  105.  
  106.   function addHeadlines () {
  107.     let boardToolsEl = document.querySelector('.btn-group.btn-group-dir')
  108.     let headlinesUrl = `/bbs/${boardData.name}/search?q=recommend%3A100`
  109.     let headlinesEl = createElement(`<a class="btn" href="${headlinesUrl}">爆文</a>`)
  110.     // 如果在爆文搜尋頁面，按鈕加上樣式
  111.     if (/[\?&]q=recommend%3A100/.test(location.search)) headlinesEl.classList.add('selected')
  112.     boardToolsEl.append(headlinesEl)
  113.   }
  114.  
  115.   function addSearch () {
  116.     // 設定 css
  117.     addStyle(
  118.       `#navigation {
  119.         display: flex;
  120.       }
  121.       #navigation > * {
  122.         white-space: nowrap;
  123.       }
  124.       .ellipsis {
  125.         text-overflow: ellipsis;
  126.         overflow: hidden;
  127.       }`
  128.     )
  129.  
  130.     // 系列文
  131.     let title = document.querySelectorAll('.article-metaline')[1]
  132.       .querySelector('.article-meta-value')
  133.       .textContent.match(/^(?:(?:Re|Fw): +)?(.+)$/)[1]
  134.     let titleEl = createElement(`<a class="board ellipsis" style="cursor: pointer;">系列 ${title}</a>`)
  135.     let titleUrl = `${location.pathname.match(/^(.+\/).+?$/)[1]}search?q=${encodeURIComponent(`thread:${title}`).replace(/%20/g, '+')}`
  136.     titleEl.addEventListener('click', function (e) {
  137.       location.href = titleUrl
  138.     })
  139.  
  140.     // 同作者
  141.     let author = document.querySelectorAll('.article-metaline')[0]
  142.       .querySelector('.article-meta-value')
  143.       .textContent.match(/^[^ ]+/)[0]
  144.     let authorEl = createElement(`<a class="board" style="cursor: pointer;">作者 ${author}</a>`)
  145.     let authorUrl = `${location.pathname.match(/^(.+\/).+?$/)[1]}search?q=${encodeURIComponent(`author:${author}`).replace(/%20/g, '+')}`
  146.     authorEl.addEventListener('click', function (e) {
  147.       location.href = authorUrl
  148.     })
  149.  
  150.     // 插入到畫面中
  151.     let navigation = document.querySelector('#navigation')
  152.     navigation.firstElementChild.remove()
  153.     navigation.insertAdjacentElement('afterbegin', titleEl)
  154.     navigation.insertAdjacentElement('afterbegin', createElement('<div class="bar"></div>'))
  155.     navigation.insertAdjacentElement('beforeend', authorEl)
  156.   }
  157.  
  158.   function pttImageEnhanced () {
  159.     function getPrevRichcontentEl (el) {
  160.       while (el.parentElement.id !== 'main-content') {
  161.         el = el.parentElement
  162.       }
  163.       return el
  164.     }
  165.  
  166.     // == 取消所有 ptt web 原生的 imgur 圖片載入 ==
  167.     for (let img of document.querySelectorAll('.richcontent > img[src*="imgur.com"]')) {
  168.       img.src = ''
  169.       img.parentElement.remove()
  170.     }
  171.  
  172.     // == 建立 lazy observer ==
  173.     let onEnterView = function (entries, observer) {
  174.       for (let entry of entries) {
  175.         if (entry.isIntersecting) {
  176.           // 目標進入畫面
  177.           let triggerRichcontent = entry.target
  178.           let imgurUrl = triggerRichcontent.dataset.imgurUrl
  179.  
  180.           getImgurInfo(imgurUrl)
  181.             .then(imgurInfo => {
  182.               let attachment
  183.               if (imgurInfo.animated) {
  184.                 attachment = createElement(`<video src="https://i.imgur.com/${imgurInfo.id}.mp4" autoplay loop muted style="max-width: 100%;max-height: 800px;"></video>`)
  185.                 attachment.addEventListener('loadedmetadata', function (e) {
  186.                   triggerRichcontent.removeAttribute('style')
  187.                 })
  188.               } else {
  189.                 attachment = createElement(`<img src="https://i.imgur.com/${imgurInfo.id}h.jpg" alt>`)
  190.                 attachment.addEventListener('load', function (e) {
  191.                   triggerRichcontent.removeAttribute('style')
  192.                 })
  193.               }
  194.               triggerRichcontent.append(attachment)
  195.             })
  196.             .catch(err => {
  197.               triggerRichcontent.remove()
  198.             })
  199.           observer.unobserve(triggerRichcontent)
  200.         }
  201.       }
  202.     }
  203.     let options = {
  204.       rootMargin: '200%',
  205.     }
  206.     let lazyObserver = new IntersectionObserver(onEnterView, options)
  207.  
  208.     for (let link of document.querySelectorAll('.bbs-screen.bbs-content a[href*="imgur.com"]')) {
  209.       // 建立 richcontent
  210.       let prevRichcontentEl = getPrevRichcontentEl(link)
  211.       let richcontent = createElement(`<div class="richcontent" style="min-height: 30vh;" data-imgur-url="${link.href}"></div>`)
  212.       lazyObserver.observe(richcontent)
  213.       insertElementToNextLine(prevRichcontentEl, richcontent)
  214.     }
  215.   }
  216.  
  217.  
  218.   // == main ==
  219.  
  220.   var regExpData = {
  221.     imgur: {
  222.       idExt: /^\/(\w+)(?:\.(\w+))?$/,
  223.       album: /\/a\/(\w+)/,
  224.       gallery: /\/gallery\/(\w+)/,
  225.     },
  226.   }
  227.   var pageData = {
  228.     set metaReferrer (value) {
  229.       if (this.metaReferrer !== undefined) {
  230.         document.querySelector('meta[name="referrer"]').content = value
  231.       } else {
  232.         document.head.append(createElement(`<meta name="referrer" content="${value}">`))
  233.       }
  234.     },
  235.  
  236.     get metaReferrer () {
  237.       return document.querySelector('meta[name="referrer"]')?.content
  238.     },
  239.  
  240.     get isMobile () {
  241.       return navigator.userAgentData.mobile
  242.     },
  243.   }
  244.   var boardData = (() => {
  245.     let result = {}
  246.  
  247.     if (/^\/(bbs|man)\/([^\/]+)(?:\/[^\/]+)*\/(?:M|G)\.\d+\.A\.[0-9A-F]{3}\.html/.test(location.pathname)) {
  248.       result = {
  249.         type: 'post',
  250.         area: RegExp.$1,
  251.         name: RegExp.$2,
  252.         is404: document.title === '404',
  253.       }
  254.     } else if (/^\/(bbs|man)\/([^\/]+)(?:\/[^\/]+)*\/index(\d*).html/.test(location.pathname)) {
  255.       result = {
  256.         type: 'index',
  257.         area: RegExp.$1,
  258.         name: RegExp.$2,
  259.         pageNum: RegExp.$3 === '' ? 0 : parseInt(RegExp.$3, 10),
  260.       }
  261.     } else if (/^\/(bbs|man)\/([^\/]+)\/search/.test(location.pathname)) {
  262.       result = {
  263.         type: 'search',
  264.         area: RegExp.$1,
  265.         name: RegExp.$2,
  266.         isHeadline: /[\?&]q=recommend%3A100/.test(location.search),
  267.       }
  268.     } else if (location.pathname === '/ask/over18') {
  269.       result = {
  270.         type: 'over18',
  271.       }
  272.     }
  273.  
  274.     return result
  275.   })()
  276.  
  277.   switch (boardData.type) {
  278.     case 'over18':
  279.       agreeOver18()
  280.       break
  281.   }
  282.  
  283.   document.addEventListener('DOMContentLoaded', function () {
  284.     switch (boardData.type) {
  285.       case 'post':
  286.         if (!boardData.is404) {
  287.           pageData.metaReferrer = 'no-referrer'
  288.           pttImageEnhanced()
  289.           // 只有一般看板頁面需要，排除精華區
  290.           if (boardData.area === 'bbs') {
  291.             addSearch()
  292.           }
  293.         }
  294.         break
  295.  
  296.       case 'index':
  297.       case 'search':
  298.         addHeadlines()
  299.         // 手機因為排版關係，使用最新來被爆文取代，但精華區並沒有最新按鈕，所以要排除
  300.         if (pageData.isMobile && boardData.area === 'bbs') {
  301.           let oldestEl = document.querySelector('.btn.wide')
  302.           oldestEl.insertAdjacentElement('beforebegin', document.querySelectorAll('.btn')[2])
  303.           oldestEl.remove()
  304.         }
  305.         break
  306.     }
  307.   }, { once: true })
  308. })()