diff --git a/client/deno.jsonc b/client/deno.jsonc
index 0901a68..e7683ec 100644
--- a/client/deno.jsonc
+++ b/client/deno.jsonc
@@ -27,6 +27,7 @@
"crypto-js": "npm:crypto-js@4.2.0",
"socket.io-client": "npm:socket.io-client@4.8.1",
"marked": "npm:marked@16.3.0",
- "dompurify": "npm:dompurify@3.2.7"
+ "dompurify": "npm:dompurify@3.2.7",
+ "pinch-zoom-element": "npm:pinch-zoom-element@1.1.1"
}
}
diff --git a/client/index.html b/client/index.html
index 6d50d3f..b620792 100644
--- a/client/index.html
+++ b/client/index.html
@@ -13,8 +13,6 @@
TheWhiteSilk
-
-
diff --git a/client/index.ts b/client/index.ts
index a7024cc..3b712d7 100644
--- a/client/index.ts
+++ b/client/index.ts
@@ -6,7 +6,7 @@ import { breakpoint, Dialog } from "mdui"
import * as React from 'react'
import ReactDOM from 'react-dom/client'
-import './ui/custom-elements/chat-image.js'
+import './ui/custom-elements/chat-image.ts'
const urlParams = new URL(location.href).searchParams
diff --git a/client/ui/custom-elements/chat-image.js b/client/ui/custom-elements/chat-image.ts
similarity index 59%
rename from client/ui/custom-elements/chat-image.js
rename to client/ui/custom-elements/chat-image.ts
index f7098a1..06bb7fe 100644
--- a/client/ui/custom-elements/chat-image.js
+++ b/client/ui/custom-elements/chat-image.ts
@@ -1,16 +1,20 @@
-function openImageViewer(src) {
+import { $ } from 'mdui/jq'
+import { dialog } from 'mdui'
+
+import 'pinch-zoom-element'
+
+function openImageViewer(src: string) {
$('#image-viewer-dialog-inner').empty()
const e = new Image()
+ e.onload = () => ($('#image-viewer-dialog-inner').get(0) as any).setTransform({
+ scale: 0.1,
+ x: 0 + e.width / 4,
+ y: 0 + e.height / 16,
+ })
e.src = src
$('#image-viewer-dialog-inner').append(e)
-
- e.onload = () => $('#image-viewer-dialog-inner').get(0).setTransform({
- scale: 0.6,
- x: $(window).width() / 2 - (e.width / 4),
- y: $(window).height() / 2 - (e.height / 3),
- })
- $('#image-viewer-dialog').get(0).open = true
+ $('#image-viewer-dialog').attr('open', 'true')
}
customElements.define('chat-image', class extends HTMLElement {
@@ -23,34 +27,36 @@ customElements.define('chat-image', class extends HTMLElement {
e.style.maxHeight = "90%"
e.style.marginTop = "13px"
e.style.borderRadius = "var(--mdui-shape-corner-medium)"
- e.src = $(this).attr('src')
- e.alt = $(this).attr('alt')
+ e.alt = $(this).attr('alt') || ""
e.onerror = () => {
const bak = $(this).html()
$(this).html(`
`)
$(this).attr('alt', '無法加載圖像')
- $(this).on('click', () => dialog({
- headline: "圖片無法載入",
- description: "您是否需要重新加載?",
- actions: [
- {
- text: "重載",
- onClick: () => {
- $(this).html(bak)
- return false
+ $(this).on('click', () => {
+ dialog({
+ headline: "圖片無法載入",
+ description: "您是否需要重新加載?",
+ actions: [
+ {
+ text: "重載",
+ onClick: () => {
+ $(this).html(bak)
+ return false
+ },
},
- },
- {
- text: "取消",
- onClick: () => {
- return false
+ {
+ text: "取消",
+ onClick: () => {
+ return false
+ },
},
- },
- ],
- }))
+ ],
+ })
+ })
}
+ e.src = $(this).attr('src') as string
e.onclick = () => {
- openImageViewer($(this).attr('src'))
+ openImageViewer($(this).attr('src') as string)
}
this.appendChild(e)
}
@@ -81,11 +87,11 @@ document.body.appendChild(new DOMParser().parseFromString(`
}
+ onclick="window.open(document.querySelector('#image-viewer-dialog-inner > *').src, '_blank')">
-`, 'text/html').body.firstChild)
+`, 'text/html').body.firstChild as Node)