rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-06-05 21:59:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

Allow zoomed in images be closed by click outside

Browse Source 
- Add event listener to close image enlarge popup when clicked outside of image or description
- Change img div to not be width:100% by default, was useless and just confusing when you could click next to the image and it zoomed in
This commit is contained in:
Wolfsblvt
2025-01-09 19:16:48 +01:00
parent 23779fe565
commit ba73d278ae
2 changed files with 14 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
public/scripts/chats.js
View File

@@ -585,10 +585,12 @@ async function enlargeMessageImage() {
const imgHolder = document.createElement('div'); const imgHolder = document.createElement('div');
imgHolder.classList.add('img_enlarged_holder'); imgHolder.classList.add('img_enlarged_holder');
imgHolder.append(img); imgHolder.append(img);
const imgContainer = $('<div><pre><code></code></pre></div>'); const imgContainer = $('<div><pre><code class="img_enlarged_title"></code></code></pre></div>');
imgContainer.prepend(imgHolder); imgContainer.prepend(imgHolder);
imgContainer.addClass('img_enlarged_container'); imgContainer.addClass('img_enlarged_container');
imgContainer.find('code').addClass('txt').text(title);
const codeTitle = imgContainer.find('.img_enlarged_title');
codeTitle.addClass('txt').text(title);
const titleEmpty = !title || title.trim().length === 0; const titleEmpty = !title || title.trim().length === 0;
imgContainer.find('pre').toggle(!titleEmpty); imgContainer.find('pre').toggle(!titleEmpty);
addCopyToCodeBlocks(imgContainer); addCopyToCodeBlocks(imgContainer);
@@ -598,9 +600,17 @@ async function enlargeMessageImage() {
popup.dlg.style.width = 'unset'; popup.dlg.style.width = 'unset';
popup.dlg.style.height = 'unset'; popup.dlg.style.height = 'unset';
img.addEventListener('click', () => { img.addEventListener('click', event => {
const shouldZoom = !img.classList.contains('zoomed'); const shouldZoom = !img.classList.contains('zoomed');
img.classList.toggle('zoomed', shouldZoom); img.classList.toggle('zoomed', shouldZoom);
event.stopPropagation();
});
codeTitle[0]?.addEventListener('click', event => {
event.stopPropagation();
});
popup.dlg.addEventListener('click', event => {
popup.completeCancelled();
}); });
await popup.show(); await popup.show();

2
public/style.css
View File

@@ -4799,7 +4799,7 @@ body:not(.sd) .mes_img_swipes {
.img_enlarged { .img_enlarged {
object-fit: contain; object-fit: contain;
width: 100%; max-width: 100%;
height: 100%; height: 100%;
cursor: zoom-in cursor: zoom-in
} }