// ==UserScript==
// @name Overlay original image size on hover on all websites
// @description Displays the original dimensions of a hover image on all websites.
// @name:af Oorspronklike beeldgrootte oorle op alle webwerwe
// @description:af Toon die oorspronklike afmetings van 'n zweefbeeld op alle webwerwe.
// @name:ar عرض أبعاد الصورة الأصلية عند التحويم على جميع المواقع الإلكترونية
// @description:ar يعرض أبعاد الصورة الأصلية عند التحويم على جميع المواقع الإلكترونية.
// @name:az Bütün veb saytlarda üzərində keçid zamanı orijinal şəkil ölçüsü
// @description:az Bütün veb saytlarda üzərində keçid zamanı orijinal şəkil ölçüsünü göstərir.
// @name:bg Наслој оригиналне величине слике приликом левог приказа на свим веб локацијама
// @description:bg Прикажите оригиналне димензије слике приликом левог приказа на свим веб локацијама.
// @name:bn সমস্ত ওয়েবসাইটে হভার ছবির মৌলিক মাপ ওভারলে
// @description:bn সমস্ত ওয়েবসাইটে হভার ছবির মৌলিক মাপ প্রদর্শন করে।
// @name:ca Superposició de la mida original de la imatge en el passar el ratolí en tots els llocs web
// @description:ca Mostra les dimensions originals d'una imatge en passar el ratolí en tots els llocs web.
// @name:cs Překrytí původní velikosti obrázku po najetí na všechny webové stránky
// @description:cs Zobrazí původní rozměry obrázku po najetí na všechny webové stránky.
// @name:da Overlay af original billedstørrelse ved hover på alle websteder
// @description:da Vis original størrelse af et billede ved hover på alle websteder.
// @name:de Originalgröße der Bildüberlagerung beim Hover auf allen Websites
// @description:de Zeigt die Originalabmessungen eines Bildes beim Hover auf allen Websites an.
// @name:el Επικάλυψη πρωτότυπου μεγέθους εικόνας κατά την αιωρούμενη κατάσταση σε όλους τους ιστότοπους
// @description:el Εμφανίζει τις πρωτότυπες διαστάσεις μιας εικόνας κατά την αιωρούμενη κατάσταση σε όλους τους ιστότοπους.
// @name:eo Overlay de la originala bildogrando dum muso super ĉiuj retejoj
// @description:eo Montras la originalajn dimensiojn de hovrigi bildo sur ĉiuj retejoj.
// @name:es Superposición del tamaño original de la imagen al pasar el cursor en todos los sitios web
// @description:es Muestra las dimensiones originales de una imagen al pasar el cursor en todos los sitios web.
// @name:fi Päällekkäinen alkuperäinen kuvakoko hoverilla kaikilla verkkosivustoilla
// @description:fi Näyttää alkuperäiset kuvakoot hoverilla kaikilla verkkosivustoilla.
// @name:fr Incrustation de la taille de l'image originale au survol sur tous les sites web
// @description:fr Affiche les dimensions d'origine d'une image en survol sur tous les sites web.
// @name:gl Superposición do tamaño orixinal da imaxe ao pasar o rato en todos os sitios web
// @description:gl Amosa as dimensións orixinais dunha imaxe ao pasar o rato en todos os sitios web.
// @name:he חיבור גודל תמונה מקורי בעת העברה מעל לכל אתרי האינטרנט
// @description:he מציג את הממדים המקוריים של תמונה בעת העברת עכבר מעל לכל אתרי האינטרנט.
// @name:hi सभी वेबसाइटों पर होवर पर मूल छवि आकार ओवरले
// @description:hi सभी वेबसाइटों पर होवर पर छवि के मूल आकार को दिखाता है।
// @name:hu Eredeti képméret átlátszása az egérrel történő lebegés közben az összes webhelyen
// @description:hu Az eredeti kép méreteinek megjelenítése az egérrel történő lebegés közben az összes webhelyen.
// @name:id Overlay ukuran asli gambar saat mengarahkan kursor di semua situs web
// @description:id Menampilkan dimensi asli gambar saat mengarahkan kursor di semua situs web.
// @name:is Yfirbragð upprunalegs myndastærðar á sveiflum á öllum vefsíðum
// @description:is Sýnir upprunalegar málmar á mynd á sveiflum á öllum vefsíðum.
// @name:it Sovrapposizione delle dimensioni originali dell'immagine al passaggio del mouse su tutti i siti web
// @description:it Visualizza le dimensioni originali di un'immagine al passaggio del mouse su tutti i siti web.
// @name:ja すべてのウェブサイトでホバー画像の元のサイズをオーバーレイ表示
// @description:ja すべてのウェブサイトでホバー画像の元の寸法を表示します。
// @name:km បង្ហាញទំហំរូបភាពដែលបង្ហាញឡើងលើលំនាំដើមនៅលើវេបសាយទាំងអស់
// @description:km បង្ហាញទំហំដែលមាននៅលើរូបភាពដែលបង្ហាញឡើងលើលំនាំដើមនៅលើវេបសាយទាំងអស់។
// @name:ko 모든 웹 사이트에서 이미지 원래 크기 오버레이 표시
// @description:ko 모든 웹 사이트에서 이미지를 가리킬 때 원래 크기를 표시합니다.
// @name:ms Overlay saiz asal imej semasa hover di semua laman web
// @description:ms Papar dimensi asal imej semasa hover di semua laman web.
// @name:mt Overlay ta 'dimensioni oriġinali tal-immaġni fuq hover fuq siti kollha tal-web
// @description:mt Juri d-dimensjonijiet oriġinali ta 'immaġni fuq hover fuq siti kollha tal-web.
// @name:nb Overlegg av original bildestørrelse ved svev på alle nettsteder
// @description:nb Viser original størrelse av et bilde når du svever over det på alle nettsteder.
// @name:nl Overlay originele afbeeldingsgrootte bij zweven op alle websites
// @description:nl Toont de originele afmetingen van een zwevende afbeelding op alle websites.
// @name:pl Nakładka oryginalnego rozmiaru obrazu po najechaniu na wszystkie strony internetowe
// @description:pl Wyświetla oryginalne wymiary obrazka po najechaniu na wszystkie strony internetowe.
// @name:pt Sobreposição do tamanho original da imagem ao passar o mouse em todos os sites
// @description:pt Exibe as dimensões originais de uma imagem ao passar o mouse em todos os sites.
// @name:ro Suprapunere dimensiune originală imagine la survol pe toate site-urile web
// @description:ro Afișează dimensiunile originale ale unei imagini la survol pe toate site-urile web.
// @name:ru Отображение оригинального размера изображения при наведении на всех веб-сайтах
// @description:ru Отображает оригинальные размеры изображения при наведении курсора на всех веб-сайтах.
// @name:sr Преклоп оригиналне величине слике приликом левог приказа на свим веб локацијама
// @description:sr Приказује оригиналне димензије слике приликом левог приказа на свим веб локацијама.
// @name:sv Överlagring av originalbildstorlek vid svävning på alla webbplatser
// @description:sv Visar originalstorlek på en bild när du svävar över den på alla webbplatser.
// @name:th แสดงขนาดภาพต้นฉบับเมื่อโฮฟเวอร์บนเว็บไซต์ทั้งหมด
// @description:th แสดงขนาดต้นฉบับของภาพเมื่อโฮฟเวอร์บนเว็บไซต์ทั้งหมด
// @name:tl Overlay ng orihinal na sukat ng imahe sa hover sa lahat ng mga website
// @description:tl Nagpapakita ng orihinal na sukat ng imahe sa hover sa lahat ng mga website.
// @name:tr Tüm web sitelerinde üzerine gelindiğinde orijinal resim boyutunu göster
// @description:tr Tüm web sitelerinde üzerine gelindiğinde resmin orijinal boyutlarını gösterir.
// @name:uk Налагодження оригінального розміру зображення при наведенні на всі веб-сайти
// @description:uk Відображає оригінальні розміри зображення при наведенні на всі веб-сайти.
// @name:vi Hiển thị kích thước hình ảnh gốc khi di chuột qua trên tất cả các trang web
// @description:vi Hiển thị kích thước gốc của hình ảnh khi di chuột qua trên tất cả các trang web.
// @name:zh 鼠标悬停时在所有网站上显示原始图像尺寸
// @description:zh 在所有网站上显示悬停图像的原始尺寸。
// @match *://*/*
// @exclude *://beeg.com/*
// @exclude *://kindroid.ai/*
// @exclude *://*.mage.space/*
// @exclude *://*.manyvids.com/*
// @exclude *://*.xvideos.com/*
// @exclude https://www.google.com/recaptcha/*
// @icon data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='white'%3E%3Cpath d='M.2 468.9C2.7 493.1 23.1 512 48 512l96 0 320 0c26.5 0 48-21.5 48-48l0-96c0-26.5-21.5-48-48-48l-48 0 0 80c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-80-64 0 0 80c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-80-64 0 0 80c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-80-80 0c-8.8 0-16-7.2-16-16s7.2-16 16-16l80 0 0-64-80 0c-8.8 0-16-7.2-16-16s7.2-16 16-16l80 0 0-64-80 0c-8.8 0-16-7.2-16-16s7.2-16 16-16l80 0 0-48c0-26.5-21.5-48-48-48L48 0C21.5 0 0 21.5 0 48L0 368l0 96c0 1.7 .1 3.3 .2 4.9z'/%3E%3C/svg%3E
// @version 1.0.8
// @author BreatFR
// @copyright 2024, BreatFR (https://breat.fr)
// @grant none
// @namespace https://gitlab.com/breatfr
// @homepageURL https://gitlab.com/breatfr/overlay-original-image-size-on-hover-on-all-websites
// @supportURL https://discord.gg/Q8KSHzdBxs
// @license AGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt
// ==/UserScript==
(() => {
"use strict";
// Styles
const toolbarStyles = {
alignItems: "center",
backdropFilter: "blur(1rem)",
backgroundColor: "rgba(0, 0, 0, 0.4)",
borderRadius: "5rem",
color: "white",
display: "none",
fontSize: "1rem",
margin: "0 20px",
padding: "0.5rem 0.75rem",
pointerEvents: "none",
position: "absolute",
textAlign: "center",
whiteSpace: "nowrap !important",
width: "max-content",
wordBreak: "keep-all !important",
zIndex: 1000
};
const innerToolbarStyles = {
display: "flex",
width: "100%",
justifyContent: "flex-start"
};
// Create toolbar element
const toolbar = document.createElement("div");
Object.assign(toolbar.style, toolbarStyles);
toolbar.style.display = "flex";
console.log("Toolbar created:", toolbar);
// Create inner toolbar element
const innerToolbar = document.createElement("div");
Object.assign(innerToolbar.style, innerToolbarStyles);
toolbar.appendChild(innerToolbar);
// Create image size label
const imageSizeLabel = document.createElement("span");
innerToolbar.appendChild(imageSizeLabel);
// Append the toolbar to the body once
document.body.appendChild(toolbar);
console.log("Toolbar appended to body");
const findImage = (element) => {
if (element.tagName === "IMG") {
return element;
}
return null;
};
const showImageSize = (img) => {
console.log("Showing image size for:", img);
if (img.src.endsWith(".svg")) {
// For SVG images, use the width and height attributes
imageSizeLabel.textContent = `${img.naturalWidth} × ${img.naturalHeight}`;
toolbar.style.display = "flex";
updateToolbarPosition(img);
} else {
const originImage = new Image();
originImage.onload = () => {
imageSizeLabel.textContent = `${originImage.naturalWidth} × ${originImage.naturalHeight}`;
toolbar.style.display = "flex";
updateToolbarPosition(img);
};
originImage.src = img.src.replace(/([?&])name=([^&]*)/, "$1name=orig");
}
};
let debounceTimeout;
const debounce = (func, delay) => {
clearTimeout(debounceTimeout);
debounceTimeout = setTimeout(func, delay);
};
const updateToolbarPosition = (img) => {
requestAnimationFrame(() => {
// Créer un élément de mesure invisible
const measurementDiv = document.createElement("div");
measurementDiv.style.position = "absolute";
measurementDiv.style.visibility = "hidden";
measurementDiv.style.width = `${img.naturalWidth}px`;
measurementDiv.style.height = `${img.naturalHeight}px`;
measurementDiv.style.maskImage = "none";
measurementDiv.style.webkitMaskImage = "none";
document.body.appendChild(measurementDiv);
// Utiliser les dimensions de l'élément de mesure
const rect = measurementDiv.getBoundingClientRect();
const windowWidth = window.innerWidth;
// Supprimer l'élément de mesure après utilisation
document.body.removeChild(measurementDiv);
// Default positioning
let left = rect.left + window.scrollX;
innerToolbar.style.flexDirection = "row";
// Check if the toolbar will overflow the right edge of the screen
if (left + toolbar.offsetWidth > windowWidth) {
// Switch to right alignment
left = rect.right + window.scrollX - toolbar.offsetWidth;
innerToolbar.style.flexDirection = "row-reverse";
}
toolbar.style.left = `${left}px`;
toolbar.style.top = `${rect.top + window.scrollY + 16}px`;
toolbar.style.display = "flex";
});
};
document.body.addEventListener("mousemove", (event) => {
const img = findImage(event.target);
if (img) {
debounce(() => updateToolbarPosition(img), 50); // Debounce with a 50ms delay
}
});
const hideImageSize = () => {
console.log("Hiding image size");
toolbar.style.display = "none";
};
document.body.addEventListener("mouseover", (event) => {
const img = findImage(event.target);
if (img) {
showImageSize(img);
}
});
document.body.addEventListener("mouseout", (event) => {
const img = findImage(event.target);
if (img && !toolbar.contains(event.relatedTarget)) {
hideImageSize();
}
});
document.body.addEventListener("mousemove", (event) => {
const img = findImage(event.target);
if (img) {
updateToolbarPosition(img);
}
});
})();
// ==UserScript==
// @name Overlay original image size on hover on all websites
// @description Displays the original dimensions of a hover image on all websites.
// @name:af Oorspronklike beeldgrootte oorle op alle webwerwe
// @description:af Toon die oorspronklike afmetings van 'n zweefbeeld op alle webwerwe.
// @name:ar عرض أبعاد الصورة الأصلية عند التحويم على جميع المواقع الإلكترونية
// @description:ar يعرض أبعاد الصورة الأصلية عند التحويم على جميع المواقع الإلكترونية.
// @name:az Bütün veb saytlarda üzərində keçid zamanı orijinal şəkil ölçüsü
// @description:az Bütün veb saytlarda üzərində keçid zamanı orijinal şəkil ölçüsünü göstərir.
// @name:bg Наслој оригиналне величине слике приликом левог приказа на свим веб локацијама
// @description:bg Прикажите оригиналне димензије слике приликом левог приказа на свим веб локацијама.
// @name:bn সমস্ত ওয়েবসাইটে হভার ছবির মৌলিক মাপ ওভারলে
// @description:bn সমস্ত ওয়েবসাইটে হভার ছবির মৌলিক মাপ প্রদর্শন করে।
// @name:ca Superposició de la mida original de la imatge en el passar el ratolí en tots els llocs web
// @description:ca Mostra les dimensions originals d'una imatge en passar el ratolí en tots els llocs web.
// @name:cs Překrytí původní velikosti obrázku po najetí na všechny webové stránky
// @description:cs Zobrazí původní rozměry obrázku po najetí na všechny webové stránky.
// @name:da Overlay af original billedstørrelse ved hover på alle websteder
// @description:da Vis original størrelse af et billede ved hover på alle websteder.
// @name:de Originalgröße der Bildüberlagerung beim Hover auf allen Websites
// @description:de Zeigt die Originalabmessungen eines Bildes beim Hover auf allen Websites an.
// @name:el Επικάλυψη πρωτότυπου μεγέθους εικόνας κατά την αιωρούμενη κατάσταση σε όλους τους ιστότοπους
// @description:el Εμφανίζει τις πρωτότυπες διαστάσεις μιας εικόνας κατά την αιωρούμενη κατάσταση σε όλους τους ιστότοπους.
// @name:eo Overlay de la originala bildogrando dum muso super ĉiuj retejoj
// @description:eo Montras la originalajn dimensiojn de hovrigi bildo sur ĉiuj retejoj.
// @name:es Superposición del tamaño original de la imagen al pasar el cursor en todos los sitios web
// @description:es Muestra las dimensiones originales de una imagen al pasar el cursor en todos los sitios web.
// @name:fi Päällekkäinen alkuperäinen kuvakoko hoverilla kaikilla verkkosivustoilla
// @description:fi Näyttää alkuperäiset kuvakoot hoverilla kaikilla verkkosivustoilla.
// @name:fr Incrustation de la taille de l'image originale au survol sur tous les sites web
// @description:fr Affiche les dimensions d'origine d'une image en survol sur tous les sites web.
// @name:gl Superposición do tamaño orixinal da imaxe ao pasar o rato en todos os sitios web
// @description:gl Amosa as dimensións orixinais dunha imaxe ao pasar o rato en todos os sitios web.
// @name:he חיבור גודל תמונה מקורי בעת העברה מעל לכל אתרי האינטרנט
// @description:he מציג את הממדים המקוריים של תמונה בעת העברת עכבר מעל לכל אתרי האינטרנט.
// @name:hi सभी वेबसाइटों पर होवर पर मूल छवि आकार ओवरले
// @description:hi सभी वेबसाइटों पर होवर पर छवि के मूल आकार को दिखाता है।
// @name:hu Eredeti képméret átlátszása az egérrel történő lebegés közben az összes webhelyen
// @description:hu Az eredeti kép méreteinek megjelenítése az egérrel történő lebegés közben az összes webhelyen.
// @name:id Overlay ukuran asli gambar saat mengarahkan kursor di semua situs web
// @description:id Menampilkan dimensi asli gambar saat mengarahkan kursor di semua situs web.
// @name:is Yfirbragð upprunalegs myndastærðar á sveiflum á öllum vefsíðum
// @description:is Sýnir upprunalegar málmar á mynd á sveiflum á öllum vefsíðum.
// @name:it Sovrapposizione delle dimensioni originali dell'immagine al passaggio del mouse su tutti i siti web
// @description:it Visualizza le dimensioni originali di un'immagine al passaggio del mouse su tutti i siti web.
// @name:ja すべてのウェブサイトでホバー画像の元のサイズをオーバーレイ表示
// @description:ja すべてのウェブサイトでホバー画像の元の寸法を表示します。
// @name:km បង្ហាញទំហំរូបភាពដែលបង្ហាញឡើងលើលំនាំដើមនៅលើវេបសាយទាំងអស់
// @description:km បង្ហាញទំហំដែលមាននៅលើរូបភាពដែលបង្ហាញឡើងលើលំនាំដើមនៅលើវេបសាយទាំងអស់។
// @name:ko 모든 웹 사이트에서 이미지 원래 크기 오버레이 표시
// @description:ko 모든 웹 사이트에서 이미지를 가리킬 때 원래 크기를 표시합니다.
// @name:ms Overlay saiz asal imej semasa hover di semua laman web
// @description:ms Papar dimensi asal imej semasa hover di semua laman web.
// @name:mt Overlay ta 'dimensioni oriġinali tal-immaġni fuq hover fuq siti kollha tal-web
// @description:mt Juri d-dimensjonijiet oriġinali ta 'immaġni fuq hover fuq siti kollha tal-web.
// @name:nb Overlegg av original bildestørrelse ved svev på alle nettsteder
// @description:nb Viser original størrelse av et bilde når du svever over det på alle nettsteder.
// @name:nl Overlay originele afbeeldingsgrootte bij zweven op alle websites
// @description:nl Toont de originele afmetingen van een zwevende afbeelding op alle websites.
// @name:pl Nakładka oryginalnego rozmiaru obrazu po najechaniu na wszystkie strony internetowe
// @description:pl Wyświetla oryginalne wymiary obrazka po najechaniu na wszystkie strony internetowe.
// @name:pt Sobreposição do tamanho original da imagem ao passar o mouse em todos os sites
// @description:pt Exibe as dimensões originais de uma imagem ao passar o mouse em todos os sites.
// @name:ro Suprapunere dimensiune originală imagine la survol pe toate site-urile web
// @description:ro Afișează dimensiunile originale ale unei imagini la survol pe toate site-urile web.
// @name:ru Отображение оригинального размера изображения при наведении на всех веб-сайтах
// @description:ru Отображает оригинальные размеры изображения при наведении курсора на всех веб-сайтах.
// @name:sr Преклоп оригиналне величине слике приликом левог приказа на свим веб локацијама
// @description:sr Приказује оригиналне димензије слике приликом левог приказа на свим веб локацијама.
// @name:sv Överlagring av originalbildstorlek vid svävning på alla webbplatser
// @description:sv Visar originalstorlek på en bild när du svävar över den på alla webbplatser.
// @name:th แสดงขนาดภาพต้นฉบับเมื่อโฮฟเวอร์บนเว็บไซต์ทั้งหมด
// @description:th แสดงขนาดต้นฉบับของภาพเมื่อโฮฟเวอร์บนเว็บไซต์ทั้งหมด
// @name:tl Overlay ng orihinal na sukat ng imahe sa hover sa lahat ng mga website
// @description:tl Nagpapakita ng orihinal na sukat ng imahe sa hover sa lahat ng mga website.
// @name:tr Tüm web sitelerinde üzerine gelindiğinde orijinal resim boyutunu göster
// @description:tr Tüm web sitelerinde üzerine gelindiğinde resmin orijinal boyutlarını gösterir.
// @name:uk Налагодження оригінального розміру зображення при наведенні на всі веб-сайти
// @description:uk Відображає оригінальні розміри зображення при наведенні на всі веб-сайти.
// @name:vi Hiển thị kích thước hình ảnh gốc khi di chuột qua trên tất cả các trang web
// @description:vi Hiển thị kích thước gốc của hình ảnh khi di chuột qua trên tất cả các trang web.
// @name:zh 鼠标悬停时在所有网站上显示原始图像尺寸
// @description:zh 在所有网站上显示悬停图像的原始尺寸。
// @match *://*/*
// @exclude *://beeg.com/*
// @exclude *://kindroid.ai/*
// @exclude *://*.mage.space/*
// @exclude *://*.manyvids.com/*
// @exclude *://*.xvideos.com/*
// @exclude https://www.google.com/recaptcha/*
// @icon data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='white'%3E%3Cpath d='M.2 468.9C2.7 493.1 23.1 512 48 512l96 0 320 0c26.5 0 48-21.5 48-48l0-96c0-26.5-21.5-48-48-48l-48 0 0 80c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-80-64 0 0 80c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-80-64 0 0 80c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-80-80 0c-8.8 0-16-7.2-16-16s7.2-16 16-16l80 0 0-64-80 0c-8.8 0-16-7.2-16-16s7.2-16 16-16l80 0 0-64-80 0c-8.8 0-16-7.2-16-16s7.2-16 16-16l80 0 0-48c0-26.5-21.5-48-48-48L48 0C21.5 0 0 21.5 0 48L0 368l0 96c0 1.7 .1 3.3 .2 4.9z'/%3E%3C/svg%3E
// @version 1.0.8
// @author BreatFR
// @copyright 2024, BreatFR (https://breat.fr)
// @grant none
// @namespace https://gitlab.com/breatfr
// @homepageURL https://gitlab.com/breatfr/overlay-original-image-size-on-hover-on-all-websites
// @downloadURL https://gitlab.com/breatfr/overlay-original-image-size-on-hover-on-all-websites/-/raw/main/js/overlay-original-image-size-on-hover-on-all-websites.user.js
// @updateURL https://gitlab.com/breatfr/overlay-original-image-size-on-hover-on-all-websites/-/raw/main/js/overlay-original-image-size-on-hover-on-all-websites.user.js
// @supportURL https://discord.gg/Q8KSHzdBxs
// @license AGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt
// ==/UserScript==
(() => {
"use strict";
// Styles
const toolbarStyles = {
alignItems: "center",
backdropFilter: "blur(1rem)",
backgroundColor: "rgba(0, 0, 0, 0.4)",
borderRadius: "5rem",
color: "white",
display: "none",
fontSize: "1rem",
margin: "0 1em",
padding: "0.5rem 0.75rem",
pointerEvents: "none",
position: "absolute",
textAlign: "center",
whiteSpace: "nowrap !important",
width: "max-content",
wordBreak: "keep-all !important",
zIndex: 1000
};
const innerToolbarStyles = {
display: "flex",
width: "100%",
justifyContent: "flex-start"
};
// Create toolbar element
const toolbar = document.createElement("div");
Object.assign(toolbar.style, toolbarStyles);
toolbar.style.display = "flex";
console.log("Toolbar created:", toolbar);
// Create inner toolbar element
const innerToolbar = document.createElement("div");
Object.assign(innerToolbar.style, innerToolbarStyles);
toolbar.appendChild(innerToolbar);
// Create image size label
const imageSizeLabel = document.createElement("span");
innerToolbar.appendChild(imageSizeLabel);
// Append the toolbar to the body once
document.body.appendChild(toolbar);
console.log("Toolbar appended to body");
const findImage = (element) => {
if (element.tagName === "IMG") {
return element;
}
return null;
};
const showImageSize = (img) => {
console.log("Showing image size for:", img);
if (img.src.endsWith(".svg")) {
// For SVG images, use the width and height attributes
imageSizeLabel.textContent = `${img.naturalWidth} × ${img.naturalHeight}`;
toolbar.style.display = "flex";
updateToolbarPosition(img);
} else {
const originImage = new Image();
originImage.onload = () => {
imageSizeLabel.textContent = `${originImage.naturalWidth} × ${originImage.naturalHeight}`;
toolbar.style.display = "flex";
updateToolbarPosition(img);
};
originImage.src = img.src.replace(/([?&])name=([^&]*)/, "$1name=orig");
}
};
const updateToolbarPosition = (img) => {
requestAnimationFrame(() => {
const rect = img.getBoundingClientRect();
const windowWidth = window.innerWidth;
// Default positioning
let left = rect.left + window.scrollX;
innerToolbar.style.flexDirection = "row";
// Check if the toolbar will overflow the right edge of the screen
if (left + toolbar.offsetWidth > windowWidth) {
// Switch to right alignment
left = rect.right + window.scrollX - toolbar.offsetWidth;
innerToolbar.style.flexDirection = "row-reverse";
}
toolbar.style.left = `${left}px`;
toolbar.style.top = `${rect.top + window.scrollY + 16}px`;
});
};
const hideImageSize = () => {
console.log("Hiding image size");
toolbar.style.display = "none";
};
document.body.addEventListener("mouseover", (event) => {
const img = findImage(event.target);
if (img) {
showImageSize(img);
}
});
document.body.addEventListener("mouseout", (event) => {
const img = findImage(event.target);
if (img && !toolbar.contains(event.relatedTarget)) {
hideImageSize();
}
});
document.body.addEventListener("mousemove", (event) => {
const img = findImage(event.target);
if (img) {
updateToolbarPosition(img);
}
});
})();
