diff options
Diffstat (limited to 'web')
| -rw-r--r-- | web/scripts3.js | 138 | ||||
| -rw-r--r-- | web/style3.css | 12 |
2 files changed, 122 insertions, 28 deletions
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; } |