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:
parent
345c347a56
commit
96c7076fb5
@ -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")
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user