From 9934919429c89c63a34f798e92770f19ea33651c Mon Sep 17 00:00:00 2001
From: alexisben <alex@noesya.coop>
Date: Tue, 10 Jan 2023 12:34:01 +0100
Subject: [PATCH] debug tool for responsive img
---
layouts/partials/footer/debug.html | 31 ++++++++++++++++++++++++++++++
1 file changed, 31 insertions(+)
diff --git a/layouts/partials/footer/debug.html b/layouts/partials/footer/debug.html
index 7ca6990f..a6ab8eca 100644
--- a/layouts/partials/footer/debug.html
+++ b/layouts/partials/footer/debug.html
@@ -161,8 +161,39 @@
document.body.classList.toggle('full-width');
}
});
+
window.addEventListener('pointermove', e => {
document.querySelector('.d-cross').style.left = e.clientX + "px";
document.querySelector('.d-cross').style.top = e.clientY + "px";
+ });
+
+ document.querySelectorAll('img').forEach(img => {
+ img.addEventListener('click', e => {
+ if (e.altKey) {
+ e.preventDefault()
+ e.stopImmediatePropagation()
+ responsiveImageDebugOutput(img)
+ }
+ })
})
+
+ function responsiveImageDebugOutput(img) {
+ if (!img) {
+ throw new TypeError("Expected an image node. Got none.");
+ }
+ const listener = function () {
+ const dimensionWidth = img.naturalWidth * window.devicePixelRatio;
+ const dimensionHeight = img.naturalHeight * window.devicePixelRatio;
+ console.log(`
+ -------------------------
+ Device Pixel Ratio: ${window.devicePixelRatio}
+ Rendered size: ${img.width}x${img.height}
+ Intrinsic size: ${dimensionWidth}x${dimensionHeight}
+ Device Pixel Ratio: ${window.devicePixelRatio}
+ -------------------------
+ `);
+ };
+ if (img.complete) listener();
+ //img.addEventListener('load', listener);
+ }
</script>
\ No newline at end of file
--
GitLab