Allow zoomed in images be closed by click outside - 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

ba73d278ae4668774f44736489813b14e3914e83

Wolfsblvt <wolfsblvt@gmail.com>

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></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
+}