☰

Pixiv Image Size Fitting

pixiv の原寸画像が表示領域に収まるように画像サイズを変更

当前为 2014-12-15 提交的版本，查看 最新版本。

// ==UserScript==
// @name        Pixiv Image Size Fitting
// @namespace   http://userscripts.org/users/121129
// @description pixiv の原寸画像が表示領域に収まるように画像サイズを変更
// @include     http://www.pixiv.net/member_illust.php?*
// @version     9
// @grant       none
// @license     MIT
// @noframes
// ==/UserScript==

;(function() {
  'use strict'

  var img = document.querySelector('img.original-image')
  var illustModal = document.querySelector('div._illust_modal')
  var resizeCallback = function(e) {
    if (!img.complete) return
    if (isFitted()) clearFitting()
    fitImageIfLargerThanWindow()
  }
  var keydownCallback = function(e) {
    if (img.complete && isCharKeyEvent(e, ['x', 'i'])) toggleImageSize()
  }

  function hasMediumModeParam() {
    var params = window.location.search.slice(1).split('&')
    return params.indexOf('mode=medium') >= 0
  }
  function fitImageIfLargerThanWindow() {
    if (img.height > window.innerHeight) {
      img.width = Math.round(img.width * (window.innerHeight / img.height))
      img.height = window.innerHeight
    }
    if (img.width > window.innerWidth) {
      img.height = Math.round(img.height * (window.innerWidth / img.width))
      img.width = window.innerWidth
    }
  }
  function hasModifiersKey(event) {
    return event.altKey || event.ctrlKey || event.metaKey || event.shiftKey
  }
  function isCharKeyEvent(event, chars) {
    return !hasModifiersKey(event)
        && chars.indexOf(String.fromCharCode(event.keyCode).toLowerCase()) >= 0
  }
  function isFitted() {
    return img.height !== img.naturalHeight || img.width !== img.naturalWidth
  }
  function clearFitting() {
    img.height = img.naturalHeight
    img.width = img.naturalWidth
  }
  function toggleImageSize() {
    if (isFitted()) {
      clearFitting()
    } else {
      fitImageIfLargerThanWindow()
    }
  }
  function medium2big() {
    window.addEventListener('resize', resizeCallback)
    illustModal.addEventListener('keydown', keydownCallback)

    if (img.complete && isFitted()) clearFitting()
    fitImageIfLargerThanWindow()

    img.tabIndex = -1
    img.focus()

    var closeButton = document.querySelector('span.close')
    if (closeButton) closeButton.style.display = 'none'
  }
  function big2medium() {
    window.removeEventListener('resize', resizeCallback)
    illustModal.removeEventListener('keydown', keydownCallback)

    img.removeAttribute('tabindex')
    img.blur()
  }
  function isDisplayStyleChanged(record) {
    var e = document.createElement('span')
    e.setAttribute('style', record.oldValue)
    return record.target.style.display !== e.style.display
  }
  function main() {
    if (!(illustModal && hasMediumModeParam())) return

    var opt = {
      attributes: true,
      attributeOldValue: true,
      attributeFilter: ['style'],
    }
    new MutationObserver(function(records, observer) {
      observer.disconnect()
      records.forEach(function(r) {
        r.target.style.padding = '0'
        if (!isDisplayStyleChanged(r)) return
        if (r.target.style.display === 'none') {
          big2medium()
        } else {
          medium2big()
        }
      })
      observer.observe(illustModal, opt)
    }).observe(illustModal, opt)
  }

  main()
})()