function openImageViewer(src) {
$('#image-viewer-dialog-inner').empty()
const e = new Image()
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
}
customElements.define('chat-image', class extends HTMLElement {
constructor() {
super()
}
connectedCallback() {
const e = new Image()
e.style.maxWidth = "100%"
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.onerror = () => {
const bak = $(this).html()
$(this).html(`
`)
$(this).attr('alt', '無法加載圖像')
$(this).on('click', () => dialog({
headline: "圖片無法載入",
description: "您是否需要重新加載?",
actions: [
{
text: "重載",
onClick: () => {
$(this).html(bak)
return false
},
},
{
text: "取消",
onClick: () => {
return false
},
},
],
}))
}
e.onclick = () => {
openImageViewer($(this).attr('src'))
}
this.appendChild(e)
}
})
document.body.appendChild(new DOMParser().parseFromString(`
`, 'text/html').body.firstChild)