94 lines
1.8 KiB
Typst
94 lines
1.8 KiB
Typst
#import "custom_html.typ" as chtml
|
|
|
|
#let fullscreen-counter = state("fullscreen-counter", 0)
|
|
|
|
#let show-rule-img-fig(img) = context {
|
|
let fs-id = fullscreen-counter.get()
|
|
```raw-css
|
|
figure image-magnifier-group {
|
|
|
|
img {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
height: auto;
|
|
width: auto;
|
|
object-fit: contain;
|
|
}
|
|
|
|
fullscreen-overlay {
|
|
display: none;
|
|
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
left: 0;
|
|
position: fixed;
|
|
|
|
background: var(--color-bg-overlay);
|
|
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
|
|
img {
|
|
width: 95dvw;
|
|
height: 95dvh;
|
|
max-width: 95dvw;
|
|
max-height: 95dvh;
|
|
}
|
|
|
|
}
|
|
|
|
&:has(.img-magnified-button:checked) {
|
|
fullscreen-overlay {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
input {
|
|
/* To allow screen reader to still access these. */
|
|
opacity: 0;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
|
|
}
|
|
```
|
|
chtml.image-magnifier-group({
|
|
html.label({
|
|
html.input(
|
|
type: "radio",
|
|
name: "magnify-img-" + str(fs-id),
|
|
id: "img-" + str(fs-id) + "-magnified-button",
|
|
class: ("img-magnified-button",)
|
|
)
|
|
img
|
|
})
|
|
html.label({
|
|
html.input(
|
|
type: "radio",
|
|
name: "magnify-img-" + str(fs-id),
|
|
id: "img-" + str(fs-id) + "-not-magnified-button",
|
|
class: ("img-not-magnified-button",),
|
|
checked: true
|
|
)
|
|
chtml.fullscreen-overlay()[
|
|
#img
|
|
]
|
|
})
|
|
})
|
|
fullscreen-counter.update(x => x+1)
|
|
}
|
|
|
|
#let show-rule-figure(fig) = {
|
|
show image: show-rule-img-fig
|
|
```raw-css
|
|
figure {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
}
|
|
```
|
|
fig
|
|
}
|