From 96c7076fb5333882dd354c5f156232217d4fab13 Mon Sep 17 00:00:00 2001
From: Aaron Pham <29749331+aarnphm@users.noreply.github.com>
Date: Fri, 23 Feb 2024 03:16:40 +0000
Subject: [PATCH] feat(popover): add support for PDF (#913)
---
quartz/components/scripts/popover.inline.ts | 17 ++++++++++++++---
quartz/components/styles/popover.scss | 25 ++++++++++++++++++-------
2 files changed, 32 insertions(+), 10 deletions(-)
diff --git a/quartz/components/scripts/popover.inline.ts b/quartz/components/scripts/popover.inline.ts
index d0346b0..dee0a78 100644
--- a/quartz/components/scripts/popover.inline.ts
+++ b/quartz/components/scripts/popover.inline.ts
@@ -47,8 +47,8 @@
}
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 @@
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 @@
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")
diff --git a/quartz/components/styles/popover.scss b/quartz/components/styles/popover.scss
index 141b89d..b1694f9 100644
--- a/quartz/components/styles/popover.scss
+++ b/quartz/components/styles/popover.scss
@@ -38,14 +38,25 @@
white-space: normal;
}
- & > .popover-inner[data-content-type="image"] {
- padding: 0;
- max-height: 100%;
+ & > .popover-inner[data-content-type] {
+ &[data-content-type*="pdf"],
+ &[data-content-type*="image"] {
+ padding: 0;
+ max-height: 100%;
+ }
- img {
- margin: 0;
- border-radius: 0;
- display: block;
+ &[data-content-type*="image"] {
+ img {
+ margin: 0;
+ border-radius: 0;
+ display: block;
+ }
+ }
+
+ &[data-content-type*="pdf"] {
+ iframe {
+ width: 100%;
+ }
}
}
--
Gitblit v1.10.0