feat(popover): add support for PDF (#913)

* feat(popover): add support for PDF

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* chore: split pdf by ';'

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* fix: remove unnecessary check

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

---------

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>
This commit is contained in:
Aaron Pham 2024-02-22 22:16:40 -05:00 committed by GitHub
parent 345c347a56
commit 96c7076fb5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 32 additions and 10 deletions

View file

@ -47,8 +47,8 @@ async function mouseEnterHandler(
} }
if (!response) return if (!response) return
const contentType = response.headers.get("Content-Type") const [contentType] = response.headers.get("Content-Type")!.split(";")
const contentTypeCategory = contentType?.split("/")[0] ?? "text" const [contentTypeCategory, typeInfo] = contentType.split("/")
const popoverElement = document.createElement("div") const popoverElement = document.createElement("div")
popoverElement.classList.add("popover") popoverElement.classList.add("popover")
@ -56,7 +56,7 @@ async function mouseEnterHandler(
popoverInner.classList.add("popover-inner") popoverInner.classList.add("popover-inner")
popoverElement.appendChild(popoverInner) popoverElement.appendChild(popoverInner)
popoverInner.dataset.contentType = contentTypeCategory popoverInner.dataset.contentType = contentType ?? undefined
switch (contentTypeCategory) { switch (contentTypeCategory) {
case "image": case "image":
@ -69,6 +69,17 @@ async function mouseEnterHandler(
popoverInner.appendChild(img) popoverInner.appendChild(img)
break break
case "application":
switch (typeInfo) {
case "pdf":
const pdf = document.createElement("iframe")
pdf.src = targetUrl.toString()
popoverInner.appendChild(pdf)
break
default:
break
}
break
default: default:
const contents = await response.text() const contents = await response.text()
const html = p.parseFromString(contents, "text/html") const html = p.parseFromString(contents, "text/html")

View file

@ -38,10 +38,14 @@
white-space: normal; white-space: normal;
} }
& > .popover-inner[data-content-type="image"] { & > .popover-inner[data-content-type] {
&[data-content-type*="pdf"],
&[data-content-type*="image"] {
padding: 0; padding: 0;
max-height: 100%; max-height: 100%;
}
&[data-content-type*="image"] {
img { img {
margin: 0; margin: 0;
border-radius: 0; border-radius: 0;
@ -49,6 +53,13 @@
} }
} }
&[data-content-type*="pdf"] {
iframe {
width: 100%;
}
}
}
h1 { h1 {
font-size: 1.5rem; font-size: 1.5rem;
} }