pixiv の原寸画像が表示領域に収まるように画像サイズを変更
Stan na
// ==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()
})()