eric/the-monospace-web-pandoc
1
0
Fork 0
mirror of https://github.com/frainfreeze/the-monospace-web-pandoc synced 2026-02-28 01:01:56 -08:00
Code Issues Packages Projects Releases Wiki Activity

handle broken media

Browse Source
This commit is contained in:
Oskar Wickström
2024-08-28 20:09:09 +02:00
parent 352a141246
commit 1f1987d7c2
2 changed files with 22 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
index.css
View File

@@ -189,6 +189,10 @@ img, video {
width: 100%; width: 100%;
object-fit: contain; object-fit: contain;
} }
img {
font-style: italic;
color: var(--text-color-alt);
}
details { details {
border: var(--border-thickness) solid var(--text-color); border: var(--border-thickness) solid var(--text-color);

25
index.js
View File

@@ -13,6 +13,19 @@ function gridCellDimensions() {
function adjustMediaPadding() { function adjustMediaPadding() {
const cell = gridCellDimensions(); const cell = gridCellDimensions();
function setHeightFromRatio(media, ratio) {
const rect = media.getBoundingClientRect();
const realHeight = rect.width / ratio;
const diff = cell.height - (realHeight % cell.height);
media.style.setProperty("padding-bottom", `${diff}px`);
}
function setFallbackHeight(media) {
const rect = media.getBoundingClientRect();
const height = Math.round((rect.width / 2) / cell.height) * cell.height;
media.style.setProperty("height", `${height}px`);
}
function onMediaLoaded(media) { function onMediaLoaded(media) {
var width, height; var width, height;
switch (media.tagName) { switch (media.tagName) {
@@ -26,11 +39,9 @@ function adjustMediaPadding() {
break; break;
} }
if (width > 0 && height > 0) { if (width > 0 && height > 0) {
const rect = media.getBoundingClientRect(); setHeightFromRatio(media, width / height);
const ratio = width / height; } else {
const realHeight = rect.width / ratio; setFallbackHeight(media);
const diff = cell.height - (realHeight % cell.height);
media.style.setProperty("padding-bottom", `${diff}px`);
} }
} }
@@ -43,7 +54,7 @@ function adjustMediaPadding() {
} else { } else {
media.addEventListener("load", () => onMediaLoaded(media)); media.addEventListener("load", () => onMediaLoaded(media));
media.addEventListener("error", function() { media.addEventListener("error", function() {
console.error(media); setFallbackHeight(media);
}); });
} }
break; break;
@@ -57,7 +68,7 @@ function adjustMediaPadding() {
default: default:
media.addEventListener("loadeddata", () => onMediaLoaded(media)); media.addEventListener("loadeddata", () => onMediaLoaded(media));
media.addEventListener("error", function() { media.addEventListener("error", function() {
console.error(media); setFallbackHeight(media);
}); });
break; break;
} }