mirror of
https://github.com/alrayyes/wiki.git
synced 2024-11-26 05:19:01 +00:00
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
2 changed files with 32 additions and 10 deletions
|
@ -47,8 +47,8 @@ async function mouseEnterHandler(
|
|||
}
|
||||
|
||||
if (!response) return
|
||||
const contentType = response.headers.get("Content-Type")
|
||||
const contentTypeCategory = contentType?.split("/")[0] ?? "text"
|
||||
const [contentType] = response.headers.get("Content-Type")!.split(";")
|
||||
const [contentTypeCategory, typeInfo] = contentType.split("/")
|
||||
|
||||
const popoverElement = document.createElement("div")
|
||||
popoverElement.classList.add("popover")
|
||||
|
@ -56,7 +56,7 @@ async function mouseEnterHandler(
|
|||
popoverInner.classList.add("popover-inner")
|
||||
popoverElement.appendChild(popoverInner)
|
||||
|
||||
popoverInner.dataset.contentType = contentTypeCategory
|
||||
popoverInner.dataset.contentType = contentType ?? undefined
|
||||
|
||||
switch (contentTypeCategory) {
|
||||
case "image":
|
||||
|
@ -69,6 +69,17 @@ async function mouseEnterHandler(
|
|||
|
||||
popoverInner.appendChild(img)
|
||||
break
|
||||
case "application":
|
||||
switch (typeInfo) {
|
||||
case "pdf":
|
||||
const pdf = document.createElement("iframe")
|
||||
pdf.src = targetUrl.toString()
|
||||
popoverInner.appendChild(pdf)
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
break
|
||||
default:
|
||||
const contents = await response.text()
|
||||
const html = p.parseFromString(contents, "text/html")
|
||||
|
|
|
@ -38,10 +38,14 @@
|
|||
white-space: normal;
|
||||
}
|
||||
|
||||
& > .popover-inner[data-content-type="image"] {
|
||||
& > .popover-inner[data-content-type] {
|
||||
&[data-content-type*="pdf"],
|
||||
&[data-content-type*="image"] {
|
||||
padding: 0;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
&[data-content-type*="image"] {
|
||||
img {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
|
@ -49,6 +53,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
&[data-content-type*="pdf"] {
|
||||
iframe {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue