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:
		| @@ -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; | ||||||
|   } |   } | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user