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 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', ()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;
     max-width: 100%;
     height: 100%;
     cursor: zoom-in
+}