Closed Roccobot closed 1 year ago
// ==UserScript==
// @name Image viewer
// @name:vi Image viewer
// @namespace http://devs.forumvi.com/
// @description Use grid wallpaper to highlight transparent image. Support to view the large image by holding the right mouse and drag.
// @description:vi Sử dụng nền lưới để làm nổi bật ảnh trong suốt. Hỗ trợ xem ảnh lớn bằng cách giữ và kéo chuột phải.
// @version 2.3.1
// @icon http://i.imgur.com/ItcjCPc.png
// @author Zzbaivong
// @oujs:author baivong
// @license MIT; https://baivong.mit-license.org/license.txt
// @match http://*/*
// @match https://*/*
// @require https://greasemonkey.github.io/gm4-polyfill/gm4-polyfill.js?v=a834d46
// @noframes
// @supportURL https://github.com/lelinhtinh/Userscript/issues
// @run-at document-idle
// @grant GM_addStyle
// @grant GM_xmlhttpRequest
// @grant GM.xmlHttpRequest
// @inject-into content
// ==/UserScript==
(function () {
'use strict';
/**
* Background theme
* @type {'system'|'dark'|'light'}
*/
let theme = 'dark';
// Do not change the code below this line, unless you know how.
if (document.contentType.indexOf('image/') !== 0) return;
if (theme === 'system') {
theme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
let colorGrid = theme === 'light' ? ['#DDD', '#EEE'] : ['#333', '#222'];
function scrollByDragging(container, disableH, disableV) {
function mouseUp(e) {
if (e.which !== 3) return;
window.removeEventListener('mousemove', mouseMove, false);
container.style.cursor = 'default';
}
function mouseDown(e) {
if (e.which !== 3) return;
pos = {
x: e.clientX,
y: e.clientY,
};
window.addEventListener('mousemove', mouseMove, false);
container.style.cursor = 'move';
}
function mouseMove(e) {
if (!disableH) container.scrollLeft -= -pos.x + (pos.x = e.clientX);
if (!disableV) container.scrollTop -= -pos.y + (pos.y = e.clientY);
}
let pos = {
x: 0,
y: 0,
};
container.oncontextmenu = function (e) {
e.preventDefault();
};
container.addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);
}
function updateImageInfo() {
let img = document.querySelector('img');
if (!img) return;
let info = document.querySelector('.image-info');
if (!info) {
info = document.createElement('div');
info.className = 'image-info';
document.body.appendChild(info);
}
info.innerHTML = `
<div class="image-info-title">
<div class="image-info-ext">${imageInfo.ext.toUpperCase()}</div>
<div class="image-info-size">${imageInfo.size}</div>
</div>
<div class="image-info-dimensions">${imageInfo.dimensions}</div>
`;
}
function formatBytes(bytes, decimals = 2) {
if (bytes === 0) return '0 Bytes';
const k = 1024;
const dm = decimals < 0 ? 0 : decimals;
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} <strong>${sizes[i]}</strong>`;
}
GM_addStyle(
`html,body{width:100%;height:100%;margin:0;padding:0}
body,svg:root{background-attachment:fixed!important;background-position:0 0, 10px 10px !important;background-size:20px 20px!important;background-image:linear-gradient(45deg, ${colorGrid[0]} 25%,transparent 25%, transparent 75%,${colorGrid[0]} 75%,${colorGrid[0]} 100%),linear-gradient(45deg, ${colorGrid[0]} 25%,${colorGrid[1]} 25%,${colorGrid[1]} 75%,${colorGrid[0]} 75%,${colorGrid[0]} 100%)!important;display:flex;align-content:center;justify-content:center}
body > img{background-color:transparent!important;background-image:none!important;display:block;position:initial}
body > img:hover{background:rgba(0,0,0,0.4)!important}
body > img[style*="cursor: zoom-out;"],body > img.overflowing{position:relative!important}
.image-info{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";color:#fff;background:#000000b8;text-align:center;text-shadow:1px 1px 2px #444,1px 1px 2px #444;border-radius:.2rem;padding:.4rem .7rem;width:fit-content;position:fixed;top:1rem;left:1rem;opacity:1;transition:opacity 200ms;user-select:none}
.image-info-title{display:flex;justify-content:space-evenly;flex-wrap:nowrap;gap:.5rem}
.image-info:hover{opacity:0}
.image-info-ext{font-weight:700}`,
);
if (document.contentType === 'image/svg+xml') return;
scrollByDragging(document.documentElement);
const imageInfo = {
ext: '',
size: '',
dimensions: '',
};
let imageExt = document.contentType.split('/')[1];
if (imageExt === 'svg+xml') imageExt = 'svg';
if (imageExt === 'x-icon' || imageExt === 'vnd.microsoft.icon') imageExt = 'ico';
imageInfo.ext = imageExt;
let imageDimensions = document.title.match(/\(([A-Z]{3,4} Image,\s*)?\s*([0-9]+\s*(x|×)\s*[0-9]+)\s*(\pixels\s*)?/);
if (imageDimensions) imageDimensions = imageDimensions[2];
imageInfo.dimensions = imageDimensions;
updateImageInfo();
GM.xmlHttpRequest({
method: 'GET',
url: location.href,
responseType: 'arraybuffer',
onload: function (response) {
imageInfo.dimensions = `${document.images[0].naturalWidth}×${document.images[0].naturalHeight}`;
const imageSize = response.response.byteLength;
imageInfo.size = formatBytes(imageSize);
updateImageInfo();
},
});
})();
Thanks a lot! Did yo happen to look into the file I attached? I think I managed to also disable the right click mouse image-move feature, but maybe in a dirty way... 😅
EDIT: I didn't actually disable it... is there a way to do so? Sorry for all the requests, I can't live without your userscript, no jokes! This is the only feature that I don't like but I'm not a developer and I couldn't manage to customize that by myself. I giess it is more correct to create a separate issue.
Hello, and thanks for the very welcome update!
I made a couple customizations, since I'm not very fond of the hover transition with the overlay with outline, so I tried to disable it. I also changed the colors a bit, so they are less distant in brightness since it's more pleasing to the eye for me. The only thing I couldn't manage to do is to move the amazing image info on the top left corner (see image). Could you help me with that?
I'm attaching the file with my changes, feel free to tell me if I f'ed upp something. Thanks again!
ImageViewer.zip