Merge pull request #3285 from SillyTavern/zoom-image-closing Allow zoomed in images in chat to be closed by clicking outside

667ab776510e20d5b26dad38f2e0070c2775f9c0

Cohee <18619528+Cohee1207@users.noreply.github.com>

Signed

public/scripts/chats.js+13 -3 Viewed

     const imgHolder = document.createElement('div');
     imgHolder.classList.add('img_enlarged_holder');
     imgHolder.append(img);
-    const imgContainer = $('<div><pre><code></code></pre></div>');
+    const imgContainer = $('<div><pre><code class="img_enlarged_title"></code></pre></div>');
     imgContainer.prepend(imgHolder);
     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;
     imgContainer.find('pre').toggle(!titleEmpty);
     addCopyToCodeBlocks(imgContainer);

     popup.dlg.style.width = 'unset';
     popup.dlg.style.height = 'unset';
-    img.addEventListener('click', () => {
+    img.addEventListener('click', event => {
         const shouldZoom = !img.classList.contains('zoomed');
         img.classList.toggle('zoomed', shouldZoom);
+        event.stopPropagation();
+    });
+    codeTitle[0]?.addEventListener('click', event => {
+        event.stopPropagation();
+    });
+    popup.dlg.addEventListener('click', event => {
+        popup.completeCancelled();
     });
     await popup.show();

public/style.css+1 -1 Viewed

 .img_enlarged {
     object-fit: contain;
-    width: 100%;
+    max-width: 100%;
     height: 100%;
     cursor: zoom-in
+}