CrescentLeaf/LingChair
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore: localify pinch-zoom

Browse Source
This commit is contained in:
CrescentLeaf
2025-09-24 18:59:25 +08:00
parent 8759b660f5
commit 0a10009613
4 changed files with 39 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
client/deno.jsonc
View File

@@ -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"
}
}

2
client/index.html
View File

@@ -13,8 +13,6 @@
<title>TheWhiteSilk</title>
<link rel="stylesheet" href="./style.css" />
<script src="https://code.jquery.com/jquery-3.7.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/GoogleChromeLabs/pinch-zoom@1.1.1/dist/pinch-zoom-min.js"></script>
</head>
<body>

2
client/index.ts
View File

@@ -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

66
client/ui/custom-elements/chat-image.js → client/ui/custom-elements/chat-image.ts
View File

@@ -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(`<br/><mdui-icon name="broken_image" style="font-size: 2rem;"></mdui-icon>`)
$(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(`
}
</style>
<mdui-button-icon icon="open_in_new"
onclick="window.open($('#image-viewer-dialog-inner > *').attr('src'), '_blank')">
onclick="window.open(document.querySelector('#image-viewer-dialog-inner > *').src, '_blank')">
</mdui-button-icon>
<mdui-button-icon icon="close" onclick="this.parentNode.open = false">
</mdui-button-icon>
<pinch-zoom id="image-viewer-dialog-inner" style="width: var(--whitesilk-window-width); height: var(--whitesilk-window-height);">
</pinch-zoom>
</mdui-dialog>
`, 'text/html').body.firstChild)
`, 'text/html').body.firstChild as Node)