eric/the-monospace-web-pandoc
1
0
Fork 0
mirror of https://github.com/frainfreeze/the-monospace-web-pandoc synced 2025-12-29 18:49:50 -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%;
object-fit: contain;
}
img {
font-style: italic;
color: var(--text-color-alt);
}
details {
border: var(--border-thickness) solid var(--text-color);

25
index.js
View File

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