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