Pixiv Image Size Fitting

pixiv の原寸画像が表示領域に収まるように画像サイズを変更
当前为 2014-12-12 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name        Pixiv Image Size Fitting
// @namespace   http://userscripts.org/users/121129
// @description pixiv の原寸画像が表示領域に収まるように画像サイズを変更
// @include     http://www.pixiv.net/member_illust.php?*
// @version     8
// @grant       none
// @license     MIT
// @noframes
// ==/UserScript==

;(function() {
  'use strict'

  var img = document.querySelector('img.big')
  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) return
    if (isCharKeyEvent(e, ['x', 'i'])) {
      toggleImageSize()
    } else if (isScrollableLeftRightKey(e)) {
      e.stopPropagation()
    }
  }

  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 isKeyEvent(event, keyCodes) {
    return !hasModifiersKey(event) && keyCodes.indexOf(event.keyCode) >= 0
  }
  function isCharKeyEvent(event, chars) {
    return !hasModifiersKey(event)
        && chars.indexOf(String.fromCharCode(event.keyCode).toLowerCase()) >= 0
  }
  function isScrollableLeftRightKey(event) {
    var LEFT = 37, RIGHT = 39
    return isKeyEvent(event, [LEFT, RIGHT])
        && !isFitted()
        && img.width > window.innerWidth
  }
  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() {
    img.style.margin = '0'
    img.style.position = 'static'
    illustModal.style.overflow = 'auto'

    window.addEventListener('resize', resizeCallback)
    illustModal.addEventListener('keydown', keydownCallback)

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

    illustModal.tabIndex = -1
    illustModal.focus()
  }
  function big2medium() {
    illustModal.style.overflow = ''

    window.removeEventListener('resize', resizeCallback)
    illustModal.removeEventListener('keydown', keydownCallback)

    illustModal.removeAttribute('tabindex')
    illustModal.blur()
  }
  function main() {
    if (!(illustModal && hasMediumModeParam())) return
    new MutationObserver(function(mutationRecords) {
      mutationRecords.forEach(function(r) {
        if (r.target.classList.contains('_layout-big')) {
          medium2big()
        } else {
          big2medium()
        }
      })
    }).observe(illustModal, {
      attributes: true,
      attributeFilter: ['class'],
    })
  }

  main()
})()
欢迎访问Greasy Fork镜像
