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", "crypto-js": "npm:crypto-js@4.2.0",
"socket.io-client": "npm:socket.io-client@4.8.1", "socket.io-client": "npm:socket.io-client@4.8.1",
"marked": "npm:marked@16.3.0", "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> <title>TheWhiteSilk</title>
<link rel="stylesheet" href="./style.css" /> <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> </head>
<body> <body>

2
client/index.ts
View File

@@ -6,7 +6,7 @@ import { breakpoint, Dialog } from "mdui"
import * as React from 'react' import * as React from 'react'
import ReactDOM from 'react-dom/client' 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 const urlParams = new URL(location.href).searchParams

36
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() $('#image-viewer-dialog-inner').empty()
const e = new Image() 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 e.src = src
$('#image-viewer-dialog-inner').append(e) $('#image-viewer-dialog-inner').append(e)
$('#image-viewer-dialog').attr('open', 'true')
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
} }
customElements.define('chat-image', class extends HTMLElement { customElements.define('chat-image', class extends HTMLElement {
@@ -23,13 +27,13 @@ customElements.define('chat-image', class extends HTMLElement {
e.style.maxHeight = "90%" e.style.maxHeight = "90%"
e.style.marginTop = "13px" e.style.marginTop = "13px"
e.style.borderRadius = "var(--mdui-shape-corner-medium)" 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 = () => { e.onerror = () => {
const bak = $(this).html() const bak = $(this).html()
$(this).html(`<br/><mdui-icon name="broken_image" style="font-size: 2rem;"></mdui-icon>`) $(this).html(`<br/><mdui-icon name="broken_image" style="font-size: 2rem;"></mdui-icon>`)
$(this).attr('alt', '無法加載圖像') $(this).attr('alt', '無法加載圖像')
$(this).on('click', () => dialog({ $(this).on('click', () => {
dialog({
headline: "圖片無法載入", headline: "圖片無法載入",
description: "您是否需要重新加載?", description: "您是否需要重新加載?",
actions: [ actions: [
@@ -47,10 +51,12 @@ customElements.define('chat-image', class extends HTMLElement {
}, },
}, },
], ],
})) })
})
} }
e.src = $(this).attr('src') as string
e.onclick = () => { e.onclick = () => {
openImageViewer($(this).attr('src')) openImageViewer($(this).attr('src') as string)
} }
this.appendChild(e) this.appendChild(e)
} }
@@ -81,11 +87,11 @@ document.body.appendChild(new DOMParser().parseFromString(`
} }
</style> </style>
<mdui-button-icon icon="open_in_new" <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>
<mdui-button-icon icon="close" onclick="this.parentNode.open = false"> <mdui-button-icon icon="close" onclick="this.parentNode.open = false">
</mdui-button-icon> </mdui-button-icon>
<pinch-zoom id="image-viewer-dialog-inner" style="width: var(--whitesilk-window-width); height: var(--whitesilk-window-height);"> <pinch-zoom id="image-viewer-dialog-inner" style="width: var(--whitesilk-window-width); height: var(--whitesilk-window-height);">
</pinch-zoom> </pinch-zoom>
</mdui-dialog> </mdui-dialog>
`, 'text/html').body.firstChild) `, 'text/html').body.firstChild as Node)