diff options
-rw-r--r-- | src/java/com/juick/http/www/PageTemplates.java | 5 | ||||
-rw-r--r-- | src/java/com/juick/http/www/UserThread.java | 13 | ||||
-rw-r--r-- | web/scripts3.js | 138 | ||||
-rw-r--r-- | web/style3.css | 12 |
4 files changed, 136 insertions, 32 deletions
diff --git a/src/java/com/juick/http/www/PageTemplates.java b/src/java/com/juick/http/www/PageTemplates.java index dabbea99..c64f99dd 100644 --- a/src/java/com/juick/http/www/PageTemplates.java +++ b/src/java/com/juick/http/www/PageTemplates.java @@ -51,9 +51,9 @@ public class PageTemplates { out.println("<!DOCTYPE html>"); out.print("<html>"); out.print("<head>"); - out.print("<link rel=\"stylesheet\" href=\"/style.2014070300.css\"/>"); + out.print("<link rel=\"stylesheet\" href=\"/style.2014072300.css\"/>"); out.print("<script type=\"text/javascript\" src=\"//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js\"></script>"); - out.print("<script type=\"text/javascript\" src=\"/scripts.2014070500.js\"></script>"); + out.print("<script type=\"text/javascript\" src=\"/scripts.2014071701.js\"></script>"); if (headers != null) { out.print(headers); } @@ -247,6 +247,7 @@ public class PageTemplates { out.println("m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)"); out.println("})(window,document,'script','//www.google-analytics.com/analytics.js','ga');"); out.println("ga('create','UA-385578-4','juick.com');"); + out.println("ga('require','displayfeatures');"); out.println("ga('send','pageview');"); if (sapeon) { diff --git a/src/java/com/juick/http/www/UserThread.java b/src/java/com/juick/http/www/UserThread.java index d2b65b77..c2d7cb14 100644 --- a/src/java/com/juick/http/www/UserThread.java +++ b/src/java/com/juick/http/www/UserThread.java @@ -80,6 +80,15 @@ public class UserThread { out.println("</section>"); PageTemplates.pageFooter(request, out, visitor, false); + + out.println("<script type='text/javascript'>"); + if (visitor != null && visitor.UID == 1 && msg.User.UID == 1) { + out.println("var juickDebug=1;"); + } + out.println("var pageMID=" + msg.MID + ";"); + out.println("initWS();"); + out.println("</script>"); + PageTemplates.pageEnd(out); } finally { out.close(); @@ -298,7 +307,7 @@ public class UserThread { if (msg.User.Banned == false) { out.println(" <div class=\"msg-header\"><a href=\"/" + msg.User.UName + "/\">@" + msg.User.UName + "</a>:</div>"); } else { - out.println(" <div class=\"msg-header\">[banned]:</div>"); + out.println(" <div class=\"msg-header\">[удалено]:</div>"); } out.println(" <div class=\"msg-ts\"><a href=\"/" + msg.MID + "#" + msg.RID + "\" title=\"" + msg.TimestampString + " GMT\">" + PageTemplates.formatDate(msg.TimeAgo, msg.TimestampString) + "</a></div>"); out.println(" <div class=\"msg-txt\">" + PageTemplates.formatMessage(msg.Text) + "</div>"); @@ -344,7 +353,7 @@ public class UserThread { if (msg.User.Banned == false) { out.println(" <div class=\"msg-header\"><a href=\"/" + msg.User.UName + "/\">@" + msg.User.UName + "</a>:</div>"); } else { - out.println(" <div class=\"msg-header\">[banned]:</div>"); + out.println(" <div class=\"msg-header\">[удалено]:</div>"); } out.println(" <div class=\"msg-ts\"><a href=\"/" + msg.MID + "#" + msg.RID + "\" title=\"" + msg.TimestampString + " GMT\">" + PageTemplates.formatDate(msg.TimeAgo, msg.TimestampString) + "</a></div>"); out.println(" <div class=\"msg-txt\">" + PageTemplates.formatMessage(msg.Text) + "</div>"); diff --git a/web/scripts3.js b/web/scripts3.js index 9cb72a98..3d35b441 100644 --- a/web/scripts3.js +++ b/web/scripts3.js @@ -1,43 +1,123 @@ -/* var ws=null; +var pageTitle; function initWS() { - ws = new WebSocket("wss://ws.juick.com/?hash="+hash); - ws.onopen = function() { - $('#sidepanel').addClass('online'); - }; - ws.onclose = function() { - $('#sidepanel').removeClass('online'); - ws=null; - initWS(); - }; - ws.onmessage = function(msg) { - if(msg.data==' ') { - ws.send(' '); + if(typeof(pageMID)!="undefined" && pageMID>0) { + var url; + if(typeof(juickDebug)!="undefined") { + url="wss://ws.juick.com/_replies"; } else { - try { - var jsonMsg=$.parseJSON(msg.data); - if(jsonMsg.rid>0) { - //incomingComment(jsonMsg); - } else if(jsonMsg.mid>0) { - //incomingPost(jsonMsg); - } else { - //incomingPM(jsonMsg); + url="wss://ws.juick.com/"+pageMID; + } + if(typeof(hash)!="undefined" && hash) { + url+="?hash="+hash; + } + + ws = new WebSocket(url); + ws.onopen = function() { + console.log('online'); + if($('#wsthread').length==0) { + var d=$('<div id="wsthread"/>'); + d.on('click',onclickNextReply); + d.appendTo("body"); + pageTitle=document.title; + } + }; + ws.onclose = function() { + console.log('offline'); + ws=null; + setTimeout(function() { + initWS(); + },2000); + }; + ws.onmessage = function(msg) { + if(msg.data==' ') { + ws.send(' '); + } else { + try { + var jsonMsg=$.parseJSON(msg.data); + console.log('data: '+msg.data); + wsIncomingReply(jsonMsg); + } catch(err) { + console.log(err); } - } catch(err) { - console.log(err); } - } - }; - setInterval(wsSendKeepAlive, 90000); + }; + setInterval(wsSendKeepAlive, 90000); + } } function wsSendKeepAlive() { - if(ws!=null) { + if(ws) { ws.send(' '); } } - */ + +function wsShutdown() { + if(ws) { + ws.onclose=function(){}; + ws.close(); + } +} + +function wsIncomingReply(msg) { + var p; + if(msg.replyto>0) { + p=$('#'+msg.replyto); + if(p.length==0) { + p=null; + } + } + + var li=$('<li class="msg reply-new" id="'+msg.rid+'" onclick="onclickNewReply(this)" onmouseover="onclickNewReply(this)">'); + li.html('<div class="msg-avatar"><a href="/'+msg.user.uname+'/"><img src="//i.juick.com/a/'+msg.user.uid+'.png"/></a></div>'+ + '<div class="msg-cont">'+ + '<div class="msg-menu"><a href="#" onclick="showMessageLinksDialog('+msg.mid+','+msg.rid+'); return false"></a></div>'+ + '<div class="msg-header"><a href="/'+msg.user.uname+'/">@'+msg.user.uname+'</a>:</div>'+ + '<div class="msg-ts"><a href="/'+msg.mid+'#'+msg.rid+'" title="'+msg.timestamp+' GMT">'+msg.timestamp+'</a></div>'+ + '<div class="msg-txt">'+msg.body+'</div>'+ + '<div class="msg-links"><a href="#" onclick="return showCommentForm('+msg.mid+','+msg.rid+')">Ответить</a></div>'+ + '<div class="msg-comment" style="display: none"></div>'+ + '</div>'); + + if(p) { + li.css('margin-left',parseInt(p.css('margin-left'))+20+'px'); + p.after(li); + } else { + $('#replies').append(li); + } + + updateRepliesCounter(); +} + +function onclickNewReply(e) { + var li=$(e); + li.removeClass('reply-new'); + li.off('click'); + li.off('mouseover'); + updateRepliesCounter(); +} + +function onclickNextReply() { + var li=$('#replies>li.reply-new:first'); + if(li.length) { + li.removeClass('reply-new'); + li.off('click'); + li.get(0).scrollIntoView(); + updateRepliesCounter(); + } +} + +function updateRepliesCounter() { + var replies=$('#replies>li.reply-new').length; + if(replies>0) { + $('#wsthread').text(replies).css('display','block'); + document.title='['+replies+'] '+pageTitle; + } else { + $('#wsthread').css('display','none'); + document.title=pageTitle; + } +} /******************************************************************************/ /******************************************************************************/ @@ -592,4 +672,6 @@ $(document).ready(function() { unfoldReply(); $(window).bind('hashchange',unfoldPostForm); $(window).bind('hashchange',unfoldReply); + + $(window).on('beforeunload',wsShutdown); }); diff --git a/web/style3.css b/web/style3.css index 0f23d6b4..3bd9141e 100644 --- a/web/style3.css +++ b/web/style3.css @@ -99,6 +99,7 @@ article input { width: 50px; margin-left: 6px; vertical-align: top; border: 1px .attach-photo-active { display: inline-block; padding: 2px 4px; cursor: pointer; width: 16px; height: 13px; overflow: hidden; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAANCAMAAACXZR4WAAAAAXNSR0IArs4c6QAAAEVQTFRFAAAAAJUAAJ0AAJIAAJkAAJYAAJwAAJcAAJoAAJgAAJkAAJoAAJoAAJgAAJkAAJoAAJkAAJkAAJkAAJkAAJkAAJkAAJkA9z3GXQAAABZ0Uk5TAAwNDg8REkBHSktRU1RVv9jZ2+Lj5OeV7PgAAABSSURBVAhbdcjBFkAgFADRIUlE9Or9/6daUC0cs5pzAXD65niKFSJQv/aChHHcrg4yA9jcILCW4tkbDGRVwfzDhs+yEBqcFsCmBiqHmULSDr0P3JdgDbuscEckAAAAAElFTkSuQmCC") no-repeat 3px 4px; } .msg-comment input { width: 50px; margin-left: 6px; vertical-align: top; border: 1px solid #CCC; background: #EEE; color: #999; } .msg-recomms { margin-top: 10px; overflow: hidden; font-size: small; color: #AAA; text-indent: 10px; } +.reply-new .msg-cont { border-right: 5px solid #0C0; } blockquote { border-left: 1px dashed #CCC; margin: 10px 0 10px 10px; padding-left: 10px; } #mtoolbar { width: 670px; margin-left: 58px; background: #E5E5DD; border-top: 1px solid #CCC; } @@ -126,6 +127,12 @@ blockquote { border-left: 1px dashed #CCC; margin: 10px 0 10px 10px; padding-lef /********/ +#readerlinks li { margin: 15px 0; } +#readerlinks img { vertical-align: top; margin: 1px 7px 0 0; } +#readerlinks a { color: #000; border-bottom: 1px dotted #666; } + +/********/ + .newpm { margin: 20px 60px 30px 60px; } .newpm textarea { width: 100%; resize: vertical; } .newpm-send input { width: 100px; } @@ -173,6 +180,11 @@ blockquote { border-left: 1px dashed #CCC; margin: 10px 0 10px 10px; padding-lef .dialogshare a { display: block; width: 32px; height: 32px; background-image: url(//static.juick.com/sharesocial.png); } .dialogtxt { background: #EEEEE5; padding: 20px; } + +/********/ + +#wsthread { position: fixed; bottom: 20px; right: 20px; background: #CCC; cursor: pointer; padding: 5px 10px; display: none; } + /********/ #footer { clear: both; font-size: 10pt; padding: 10px 0; color: #999; width: 1004px; margin: 0 auto 20px 0; } |