Photos in a lightbox

author: Ugnich Anton 2014-03-09 00:03:32 +0700
committer: Ugnich Anton 2014-03-09 00:03:32 +0700
commit: f99f153619d99cd0ca44de17a22926436160d940 (patch)
tree: ea62c63ae008e9122d977522e3a94af65829fb4e
parent: d39d1bf69b4de2d8f12d4a7547cd9f7938dc1a52 (diff)
8 files changed, 62 insertions, 57 deletions
diff --git a/src/java/com/juick/http/www/Discover.java b/src/java/com/juick/http/www/Discover.java
index d80bffdc..747a3947 100644
--- a/src/java/com/juick/http/www/Discover.java
+++ b/src/java/com/juick/http/www/Discover.java
@@ -96,7 +96,6 @@ public class Discover {
                 PageTemplates.pageFooter(request, out, visitor, true);
             }
 
-            PageTemplates.pageDialogTemplate(out);
             PageTemplates.pageEnd(out);
         } finally {
             out.close();
diff --git a/src/java/com/juick/http/www/Home.java b/src/java/com/juick/http/www/Home.java
index f7b4ca2a..c3a93107 100644
--- a/src/java/com/juick/http/www/Home.java
+++ b/src/java/com/juick/http/www/Home.java
@@ -144,7 +144,6 @@ public class Home {
                 PageTemplates.pageFooter(request, out, visitor, true);
             }
 
-            PageTemplates.pageDialogTemplate(out);
             PageTemplates.pageEnd(out);
         } finally {
             out.close();
diff --git a/src/java/com/juick/http/www/PM.java b/src/java/com/juick/http/www/PM.java
index 65daf837..2aa0e0f2 100644
--- a/src/java/com/juick/http/www/PM.java
+++ b/src/java/com/juick/http/www/PM.java
@@ -101,7 +101,6 @@ public class PM {
                 PageTemplates.pageFooter(request, out, visitor, true);
             }
 
-            PageTemplates.pageDialogTemplate(out);
             PageTemplates.pageEnd(out);
         } finally {
             out.close();
@@ -175,7 +174,6 @@ public class PM {
             out.println("</section>");
 
             PageTemplates.pageFooter(request, out, visitor, true);
-            PageTemplates.pageDialogTemplate(out);
             PageTemplates.pageEnd(out);
         } finally {
             out.close();
diff --git a/src/java/com/juick/http/www/PageTemplates.java b/src/java/com/juick/http/www/PageTemplates.java
index f9cce99e..535ec26f 100644
--- a/src/java/com/juick/http/www/PageTemplates.java
+++ b/src/java/com/juick/http/www/PageTemplates.java
@@ -52,9 +52,9 @@ public class PageTemplates {
         out.println("<!DOCTYPE html>");
         out.print("<html>");
         out.print("<head>");
-        out.print("<link rel=\"stylesheet\" href=\"/style.2014030800.css\"/>");
+        out.print("<link rel=\"stylesheet\" href=\"/style.2014030803.css\"/>");
         out.print("<script type=\"text/javascript\" src=\"//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js\" defer=\"defer\"></script>");
-        out.print("<script type=\"text/javascript\" src=\"/scripts.2014021500.js\" defer=\"defer\"></script>");
+        out.print("<script type=\"text/javascript\" src=\"/scripts.2014030800.js\" defer=\"defer\"></script>");
         if (headers != null) {
             out.print(headers);
         }
@@ -221,22 +221,6 @@ public class PageTemplates {
         out.println("<!--/noindex-->");
     }
 
-    public static void pageDialogTemplate(PrintWriter out) {
-        out.println("<div id=\"dialogb\" onclick=\"$('#dialogb').hide();$('#dialogw').hide()\"></div>");
-        out.println("<div id=\"dialogw\">Ссылка на сообщение:");
-        out.println("<div id=\"dialogl\" onclick=\"$(this).selectText()\"></div>");
-        out.println("Номер сообщения:");
-        out.println("<div id=\"dialogn\" onclick=\"$(this).selectText()\"></div>");
-        out.println("Поделиться:");
-        out.println("<ul>");
-        out.println("  <li><a id=\"sharefb\"></a></li>");
-        out.println("  <li><a id=\"sharetw\"></a></li>");
-        out.println("  <li><a id=\"sharevk\"></a></li>");
-        out.println("  <li><a id=\"sharegp\"></a></li>");
-        out.println("</ul>");
-        out.println("</div>");
-    }
-
     public static void pageFooter(HttpServletRequest request, PrintWriter out, com.juick.User visitor, boolean sapeon) {
         out.println("<div id=\"fwrapper\"><div id=\"footer\">");
         out.println("  <div id=\"footer-right\"><a href=\"/settings\" rel=\"nofollow\">Настройки</a> &#183; <a href=\"/help/ru/contacts\" rel=\"nofollow\">Контакты</a> &#183; <a href=\"/help/\" rel=\"nofollow\">Справка</a> &#183; <a href=\"/help/ru/adv\" rel=\"nofollow\">Реклама</a></div>");
@@ -516,11 +500,14 @@ public class PageTemplates {
             out.println("  <aside><a href=\"/" + msg.User.UName + "/\"><img src=\"//i.juick.com/a/" + msg.User.UID + ".png\" alt=\"" + msg.User.UName + "\"/></a></aside>");
             out.println("  <header class=\"u\">@<a href=\"/" + msg.User.UName + "/\">" + msg.User.UName + "</a>:" + tags + "</header>");
             out.println("  <header class=\"t\"><a href=\"/" + msg.User.UName + "/" + msg.MID + "\"><time datetime=\"" + msg.TimestampString + "Z\">" + formatDate(msg.TimeAgo, msg.TimestampString) + "</time></a></header>");
+            if (msg.AttachmentType != null) {
+                String fname = msg.MID + "." + msg.AttachmentType;
+                out.println("  <p class=\"ir\"><a href=\"//i.juick.com/photos-512/" + fname + "\" onclick=\"return showPhotoDialog('" + fname + "')\"><img src=\"//i.juick.com/photos-512/" + fname + "\" alt=\"\"/></a></p>");
+            }
             out.println("  <p>" + txt + "</p>");
             if (msg.AttachmentType != null) {
-                out.println("  <p class=\"i\"><a href=\"//i.juick.com/photos-1024/" + msg.MID + "." + msg.AttachmentType + "\"><img src=\"//i.juick.com/photos-512/" + msg.MID + "." + msg.AttachmentType + "\" alt=\"\"/></a></p>");
+                out.println("  <div class=\"irbr\"></div>");
             }
-
             out.print("  <nav class=\"l\">");
             msg.ReadOnly |= blUIDs.contains(msg.User.UID);
             if (visitor != null && (msg.ReadOnly == false || visitor.UID == msg.User.UID)) {
diff --git a/src/java/com/juick/http/www/User.java b/src/java/com/juick/http/www/User.java
index e969f856..ca5c122f 100644
--- a/src/java/com/juick/http/www/User.java
+++ b/src/java/com/juick/http/www/User.java
@@ -146,7 +146,6 @@ public class User {
                 PageTemplates.pageFooter(request, out, visitor, true);
             }
 
-            PageTemplates.pageDialogTemplate(out);
             PageTemplates.pageEnd(out);
         } finally {
             out.close();
@@ -179,7 +178,6 @@ public class User {
                 PageTemplates.pageFooter(request, out, visitor, false);
             }
 
-            PageTemplates.pageDialogTemplate(out);
             PageTemplates.pageEnd(out);
         } finally {
             out.close();
@@ -235,7 +233,6 @@ public class User {
                 PageTemplates.pageFooter(request, out, visitor, false);
             }
 
-            PageTemplates.pageDialogTemplate(out);
             PageTemplates.pageEnd(out);
         } finally {
             out.close();
@@ -291,7 +288,6 @@ public class User {
                 PageTemplates.pageFooter(request, out, visitor, false);
             }
 
-            PageTemplates.pageDialogTemplate(out);
             PageTemplates.pageEnd(out);
         } finally {
             out.close();
diff --git a/src/java/com/juick/http/www/UserThread.java b/src/java/com/juick/http/www/UserThread.java
index 541af344..80e19bb1 100644
--- a/src/java/com/juick/http/www/UserThread.java
+++ b/src/java/com/juick/http/www/UserThread.java
@@ -82,7 +82,6 @@ public class UserThread {
                 PageTemplates.pageFooter(request, out, visitor, false);
             }
 
-            PageTemplates.pageDialogTemplate(out);
             PageTemplates.pageEnd(out);
         } finally {
             out.close();
diff --git a/web/scripts3.js b/web/scripts3.js
index 2b12bfbd..1513b375 100644
--- a/web/scripts3.js
+++ b/web/scripts3.js
@@ -37,7 +37,7 @@ function wsSendKeepAlive() {
         ws.send(' ');
     }
 }
-*/
+ */
 
 /******************************************************************************/
 /******************************************************************************/
@@ -129,25 +129,46 @@ function showMessageLinksDialog(mid,rid) {
         hlink+="#"+rid;
         mlink+="/"+rid;
     }
-    $('#dialogl').html(hlink);
-    $('#dialogn').html(mlink);
-    
-    $('#dialogw li>a').click(function(event) {
-        event.preventDefault();
-        openSocialWindow($(this).attr('href'));
-    });
     var hlinkenc=encodeURIComponent(hlink);
-    $('#sharefb').attr('href','https://www.facebook.com/sharer/sharer.php?u='+hlinkenc);
-    $('#sharetw').attr('href','https://twitter.com/intent/tweet?url='+hlinkenc);
-    $('#sharevk').attr('href','https://vk.com/share.php?url='+hlinkenc);
-    $('#sharegp').attr('href','https://plus.google.com/share?url='+hlinkenc);
-   
-    var w=$('#dialogw');
-    var b=$('#dialogb');
-    w.css("top", Math.max(0, ((b.height() - w.outerHeight()) / 2) + b.scrollTop()) + "px");
-    w.css("left", Math.max(0, ((b.width() - w.outerWidth()) / 2) + b.scrollLeft()) + "px");
-    b.show();
-    w.show();
+
+    var html="<div class=\"dialogshare\">Ссылка на сообщение:";
+    html+="<div onclick=\"$(this).selectText()\" class=\"dialogl\">"+hlink+"</div>";
+    html+="Номер сообщения:";
+    html+="<div onclick=\"$(this).selectText()\" class=\"dialogl\">"+mlink+"</div>";
+    html+="Поделиться:<ul>";
+    html+="<li><a href=\"#\" onclick=\"return openSocialWindow('https://www.facebook.com/sharer/sharer.php?u="+hlinkenc+"')\"></a></li>";
+    html+="<li><a href=\"#\" onclick=\"return openSocialWindow('https://twitter.com/intent/tweet?url="+hlinkenc+"')\" style=\"background-position: -32px 0;\"></a></li>";
+    html+="<li><a href=\"#\" onclick=\"return openSocialWindow('https://vk.com/share.php?url="+hlinkenc+"')\" style=\"background-position: -64px 0;\"></a></li>";
+    html+="<li><a href=\"#\" onclick=\"return openSocialWindow('https://plus.google.com/share?url="+hlinkenc+"')\" style=\"background-position: -96px 0;\"></a></li>";
+    html+="</ul></div>";
+
+    openDialog(html);
+}
+
+function showPhotoDialog(fname) {
+    var width=$(window).width();
+    if(width<640) {
+        return true;
+    } else if(width<1280) {
+        openDialog("<a href=\"//i.juick.com/photos-1024/"+fname+"\"><img src=\"//i.juick.com/photos-512/"+fname+"\"/></a>");
+        return false;
+    } else {
+        openDialog("<a href=\"//i.juick.com/p/"+fname+"\"><img src=\"//i.juick.com/photos-1024/"+fname+"\"/></a>");
+        return false;
+    }
+}
+
+function openDialog(html) {
+    var dhtml="<div id=\"dialogb\" onclick=\"closeDialog()\"></div>";
+    dhtml+="<table id=\"dialogt\"><tr><td><div id=\"dialogw\"><div id=\"dialogc\" onclick=\"closeDialog()\"></div>";
+    dhtml+=html;
+    dhtml+="</div></td></tr></table>";
+    $('body').append(dhtml);
+}
+
+function closeDialog() {
+    $('#dialogb').remove();
+    $('#dialogt').remove();
 }
 
 function openSocialWindow(url) {
@@ -183,7 +204,7 @@ jQuery.fn.selectText = function(){
 
 /*
  * jQuery.fn.autoResize 1.14
-*/ 
+ */ 
 
 (function($){
 
diff --git a/web/style3.css b/web/style3.css
index 268e1061..2fdcb5e3 100644
--- a/web/style3.css
+++ b/web/style3.css
@@ -46,6 +46,10 @@ article>header.t { width: 140px; text-align: right; float: right; }
 article time { color: #999; font-size: 10pt; border-bottom: 1px dotted #999; }
 article p { overflow: hidden; margin: 10px 0 15px 0; }
 article p.i { text-align: center; }
+article p.ir { float: right; margin-left: 10px; margin-bottom: 10px; }
+article p.ir a { cursor: -webkit-zoom-in; cursor: -moz-zoom-in; }
+article p.ir img { max-width: 200px; max-height: 200px; }
+article .irbr { clear: right; }
 article>nav.l { display: inline-block; font-size: 10pt; }
 article>nav.l a { color: #888; border-bottom: 1px dotted #AAA; margin-right: 15px; }
 article>nav.s { display: inline-block; text-align: right; float: right; }
@@ -134,14 +138,16 @@ blockquote { border-left: 1px dashed #CCC; margin: 10px 0 10px 10px; padding-lef
 
 /********/
 
-#dialogb { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.5; background: #000; z-index: 10; }
-#dialogw { display: none; position: fixed; top: 40%; left: 30%; width: 350px; padding: 20px; background: #EEEEE5; border: 1px solid #999; z-index: 11; }
-#dialogl,#dialogn { padding: 5px; margin: 3px 0 20px; border: 1px solid #DDD; background: #F5F5E9; }
-#dialogw li { float: left; margin: 5px 10px 0 0; }
-#dialogw a { display: block; width: 32px; height: 32px; background-image: url(//static.juick.com/sharesocial.png); }
-#sharetw { background-position: -32px 0; }
-#sharevk { background-position: -64px 0; }
-#sharegp { background-position: -96px 0; }
+#dialogb { position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.6; background: #000; z-index: 10; }
+#dialogt { position: fixed; top: 0; left: 0; width: 100%; height: 100%; }
+#dialogt td { vertical-align: middle; text-align: center; }
+#dialogw { position: relative; display: inline-block; text-align: left; z-index: 11; }
+#dialogc { position: absolute; top: -15px; right: -15px; width: 30px; height: 30px; z-index: 12; cursor: pointer; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAQAAACROWYpAAAEEElEQVQ4y32Va2yTVRzGf23fd10vUNqxsY1dGIyba7BsTgiwhcRkgxHkFkJAuQzIggY0IXGYkKA4DeAQMQTIiIB+MyRAJn7hAxJRJKIRiJgQIhESZxYFEuja9f74oe1aoPh/vrx5z3nO/3qeA0+aBSvW+UaT2VBUb+91HXY3FDUUNZnzDaxYsfBcs2DDpHjqqC1ln07YU79t0oGX+mY1V3dWv1/VWVrqphgTW+EDLBjYS91tZZ/5v+34d1/sijIWv/bw2IXFy2urfKVu7BjP0q0YOCaMWVlzfF7wdJY2mLybzH4/+mpq3cxKrwcHBtanvTqrfK/X97+avCvFUn2xtjDBNJpDn8SGU1Ls+oXVTTUeL8587xYMHKN97fWnlikqnU/UDmWJWUwL/ZKQpPOvTZvg8eLI0W3Y8cyo+3hB4p50MmYLUgC24EdRSTq6rLIaD/Z06SyYuMdWvjnv4TfS+URhahpHYlLwR16gHDcmVrBSPNrXOv2LTimUrMoE3BiaO5Jz2dCmiDNIkGBRcCAuffde1WR8FGMDKy5n5cp5f34pHYqlt/tDkrQ7SpDgxNBASurLrHRFpPsXmUEFbgyw4fFM7FgQvi7NznirHQorTZ8cGkhJUm80vVIylJA0ppU6xlAEBiXj/EvWSI+TuewWhdP0xylJOhPPVeJGVNqxbdQ0xlIMprusoXnzW9LtRH5xFoUjmfHIpxL8Oiod3ed6kXE4wHRW+Od0dku/J57s7P1UmvxBNP//2ah0+CCNVOICk8qyOS3bpAeJfOpgSpISypUujZ+GpXd6HC8zPkM2Z9Vtiv0jZRvlGRrM5Lo4k/vWSHZUHsWlGW+YI+QKs7lh/Z1L0tuZLbPDuVzTpTsVT6+0haXB31hNUzbsMjMwZdWBz6XBuDOY7efWiG3kYuyOZmO6FJLOnWM5mYIZlDDd3lHVPXAt18/C2DAsBf8u2cECpqdbZcNDndHi27S5T5I2DD+POjccT0qHz9JJS3ZIrLioIGBbNu7dI6claVdB72uHI0np8lW6WUIgO55WivFRT6ttvffDQ/2SdCuyatiZR2wLXwlL0uVf6WEdrdRnL4YFEzfl+Gm3dXn2bun/67YkRZI3oscjxyM/Rx7FJenBwP6L7KWLdvy5K5kRA6qZSYety9nDiYM//HFLeXbvzsmr5kl66KKDmeSJQUaG8FJDgHbW0e3YzwnPmVe+33lz582Oy+P7OcF+ullHOwFqeEKGMgKIl2r8tLCUjWxnl7HH6KXX2GPdxXY2spQW/FTzlACOSC8eyplEgBYWsoI1rGUta1jBQloIMIlyCkhv9r2w48JLObVMwU+ARhoJ4GcKtZTjxZXL9Vm6BSsGJnYcOHFl4MSBHRMDK5b/e69yxzyNAvYf9TCL+HAwka4AAAAASUVORK5CYII="); }
+
+.dialogshare { padding: 20px; background: #EEEEE5; border: 1px solid #999; min-width: 300px; overflow: auto; }
+.dialogl { padding: 5px; margin: 3px 0 20px; border: 1px solid #DDD; background: #F5F5E9; }
+.dialogshare li { float: left; margin: 5px 10px 0 0; }
+.dialogshare a { display: block; width: 32px; height: 32px; background-image: url(//static.juick.com/sharesocial.png); }
 
 /********/
author	Ugnich Anton	2014-03-09 00:03:32 +0700
committer	Ugnich Anton	2014-03-09 00:03:32 +0700
commit	f99f153619d99cd0ca44de17a22926436160d940 (patch)
tree	ea62c63ae008e9122d977522e3a94af65829fb4e
parent	d39d1bf69b4de2d8f12d4a7547cd9f7938dc1a52 (diff)