[UserScript] 毛线喵窝论坛功能增强

毛线喵窝论坛功能增强.user.js

// ==UserScript==
// @name         毛线/喵窝论坛功能增强
// @namespace    https://silent.land/
// @version      0.2.0
// @author       SilentDepth <silentdepth@outlook.com>
// @match        https://bbs.craft.moe/*
// @match        https://bbs.nyaa.cat/*
// @grant        none
// ==/UserScript==

(function () {
  'use strict'

  const EASE_IN_OUT = 'cubic-bezier(0.4, 0, 0.2, 1)'

  const utils = {
    appendStyle: (content) => {
      const style = document.createElement('style')
      style.textContent = content
      document.head.append(style)
    },
    hasAncestor: (el, ancestorClass) => {
      let p = el.parentElement
      while (p !== null) {
        if (p.classList.contains(ancestorClass)) return true
        p = p.parentElement
      }
      return false
    },
    beInsideAnchor: (el) => {
      let p = el.parentElement
      while (p !== null) {
        if (p.tagName === 'A' && p.href) return true
        p = p.parentElement
      }
      return false
    },
    nextFrame: (fn) => {
      requestAnimationFrame(() => requestAnimationFrame(fn))
    },
  }

  const patches = {
    lightbox: () => {
      const DURATION = '150ms'

      function renderLightbox (origin) {
        const layer = document.createElement('div')
        Object.assign(layer.style, {
          position: 'fixed',
          top: '0',
          left: '0',
          right: '0',
          bottom: '0',
          zIndex: '9999',
          background: 'rgba(0, 0, 0, 0)',
          transition: `background ${DURATION} ${EASE_IN_OUT}`,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        })

        const img = document.createElement('img')
        img.setAttribute('src', origin.src)
        Object.assign(img.style, {
          flex: 'none',
          maxWidth: 'calc(100vw - 80px)',
          maxHeight: 'calc(100vh - 80px)',
          boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
          opacity: '0',
          transform: 'scale(0.95)',
          transition: `opacity ${DURATION} ${EASE_IN_OUT}, transform ${DURATION} ${EASE_IN_OUT}`,
        })
        layer.append(img)

        document.body.append(layer)

        utils.nextFrame(() => {
          layer.style.background = 'rgba(0, 0, 0, 0.7)'
          img.style.opacity = '1'
          img.style.transform = 'scale(1)'
        })

        layer.addEventListener('click', () => {
          layer.style.background = 'rgba(0, 0, 0, 0)'
          img.style.opacity = '0'
          img.style.transform = 'scale(0.95)'
          layer.addEventListener('transitionend', () => {
            layer.remove()
          })
        })
      }

      utils.appendStyle('.Post-body img {cursor: pointer;}')

      document.body.addEventListener('click', ({target}) => {
        if (
          target.tagName === 'IMG' &&
          utils.hasAncestor(target, 'Post-body') &&
          !utils.beInsideAnchor(target)
        ) {
          renderLightbox(target)
        }
      }, true)
    },
    bing: () => {
      const _input = document.querySelector('#header input[type=search]')
      const $input = document.createElement('input')
      Object.assign($input, {
        type: _input.type,
        placeholder: _input.placeholder + ' (powered by Bing)',
        className: _input.className,
      })
      _input.insertAdjacentElement('afterend', $input)
      _input.parentElement.removeChild(_input)
      $input.addEventListener('focus', () => _input.dispatchEvent(new Event('focus')))
      $input.addEventListener('blur', () => _input.dispatchEvent(new Event('blur')))
      $input.addEventListener('keydown', ({key}) => {
        if (key === 'Enter') {
          const q = $input.value.split(/\s+/).concat('site:' + location.hostname).map(s => encodeURIComponent(s)).join('+')
          location.href = 'https://www.bing.com/search?q=' + q
        }
      })
    },
  }

  patches.lightbox()
  patches.bing()
})()