juick-www: better lightbox(dialog), fixed "no lightbox in user blog",

photo-512 - used on page,
photo-1024 - used in lightbox if smaller screen dimension is under 1280,
p (original size) - used in lightbox on huge screens.

1 files changed, 20 insertions, 14 deletions

diff --git a/juick-www/src/main/static/scripts.js b/juick-www/src/main/static/scripts.js
index 22731671..78dc71f4 100644
--- a/juick-www/src/main/static/scripts.js
+++ b/juick-www/src/main/static/scripts.js
@@ -388,24 +388,30 @@ function showMessageLinksDialog(mid, rid) {
 }
 
 function showPhotoDialog(fname) {
-    var width = window.innerWidth,
-        height = window.innerHeight * 0.9;
-    if (width < 640) {
-        return true;
-    } else if (width < 1280) {
-        openDialog('<a href="//i.juick.com/p/' + fname + '"><img src="//i.juick.com/photos-512/' + fname + '"/></a>');
-        document.querySelector('#dialogw img').style.maxHeight = height + 'px';
+    let width = window.innerWidth;
+    let height = window.innerHeight;
+    let minDimension = (width < height) ? width : height;
+    if (minDimension < 640) {
+        return true; // no dialog, open the link
+    } else if (minDimension < 1280) {
+        openDialog(`<a href="//i.juick.com/p/${fname}"><img src="//i.juick.com/photos-1024/${fname}"/></a>`);
         return false;
     } else {
-        openDialog('<a href="//i.juick.com/p/' + fname + '"><img src="//i.juick.com/photos-1024/' + fname + '"/></a>');
-        document.querySelector('#dialogw img').style.maxHeight = height + 'px';
+        openDialog(`<a href="//i.juick.com/p/${fname}"><img src="//i.juick.com/p/${fname}"/></a>`);
         return false;
     }
 }
 
 function openDialog(html) {
-    var dhtml = '<table id="dialogt"><tr><td><div id="dialogb"></div><div id="dialogw"><div id="dialogc"></div>' + html + '</div></td></tr></table>';
-    document.querySelector('body').insertAdjacentHTML('afterbegin', dhtml);
+    var dialogHtml = `
+        <div id="dialogt">
+            <div id="dialogb"></div>
+            <div id="dialogw">
+                <div id="dialogc"></div>
+                ${html}
+            </div>
+        </div>`;
+    document.querySelector('body').insertAdjacentHTML('afterbegin', dialogHtml);
     document.querySelector('#dialogb').addEventListener('click', closeDialog);
     document.querySelector('#dialogc').addEventListener('click', closeDialog);
 }
@@ -634,9 +640,9 @@ ready(function () {
             e.preventDefault();
         });
     });
-    document.querySelectorAll('.ir a').forEach(function (e) {
-        e.addEventListener('click', function (e) {
-            var fname = e.target.closest('[data-fname]').getAttribute('data-fname');
+    document.querySelectorAll('.ir a[data-fname]').forEach(function (el) {
+        el.addEventListener('click', function (e) {
+            let fname = e.target.closest('[data-fname]').getAttribute('data-fname');
             if (!showPhotoDialog(fname)) {
                 e.preventDefault();
             }