diff options
Diffstat (limited to 'web')
| -rw-r--r-- | web/scripts3.js | 405 | ||||
| -rw-r--r-- | web/style3.css | 11 |
2 files changed, 415 insertions, 1 deletions
diff --git a/web/scripts3.js b/web/scripts3.js index e1cc59526..9b16e33ad 100644 --- a/web/scripts3.js +++ b/web/scripts3.js @@ -1,3 +1,406 @@ +var ws=null; +var currentPMUser=""; +var currentMID=0; + +/******************************************************************************/ + +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(' '); + } else { + try { + var jsonMsg=$.parseJSON(msg.data); + if(jsonMsg.rid>0) { + incomingComment(jsonMsg); + } else if(jsonMsg.mid>0) { + incomingPost(jsonMsg); + } else { + incomingPM(jsonMsg); + } + } catch(err) { + console.log(err); + } + } + }; + setInterval(wsSendKeepAlive, 90000); +} + +function wsSendKeepAlive() { + if(ws!=null) { + ws.send(' '); + } +} + +/******************************************************************************/ + +function initPMUList() { + var ul=$('#pmulist'); + ul.empty(); + $.each(lastConversations,function(i,item) { + var img=$("<img/>").attr("src","https://i.juick.com/as/"+item.uid+".png"); + var a=$("<a/>").attr("href","#").attr("onclick","return showPM('"+item.uname+"')"); + a.append(img).append(item.uname); + if(item.MessagesCount) { + a.append($("<div/>").attr("class","unreadcnt").text(item.MessagesCount)); + } + var li=$("<li/>").append(a); + ul.append(li); + }); +} + +/******************************************************************************/ + +function incomingPost(msg) { + console.log(msg); + if(groups[0].MessagesCount>0) { + groups[0].MessagesCount++; + } else { + groups[0].MessagesCount=1; + } + initGroupsList(); +} + +function incomingComment(msg) { + console.log(msg); +} + +function showGroup(gid) { + currentPMUser=""; + currentMID=0; + groups[0].MessagesCount=0; + initGroupsList(); + + $.getJSON('https://api.juick.com/home?hash='+hash+'&callback=?').done(function(data) { + var ul=$('<ul/>'); + ul.attr("id","msglist"); + $.each(data,function(i,item) { + var tags=""; + if(item.tags) { + $.each(item.tags,function(t,tag) { + tags+=" *"+tag; + }); + } + var photo=""; + if(item.photo) { + photo="<div class=\"msg-media\"><img src=\""+item.photo.small+"\"/></div>"; + } + var replies=""; + if(item.replies>0) { + replies="<div class=\"msg-replies\"><a href=\"#\" onclick=\"return showMessage("+item.mid+")\">"+item.replies+" "; + if(item.replies%10==1) { + replies+="reply"; + } else { + replies+="replies"; + } + replies+=" </a>"; + if(item.repliesby) { + replies+=" by "+item.repliesby; + } + replies+="</div>"; + } + var li=$("<li/>").attr("class","msg").html( + "<div class=\"msg-header\">"+ + "<div class=\"msg-menu\"></div>"+ + "<div class=\"msg-avatar\"><a href=\"#\" onclick=\"return showUser('"+item.user.uname+"')\"><img src=\"//i.juick.com/a/"+item.user.uid+".png\"/></a></div>"+ + "<div class=\"msg-uname\"><a href=\"#\" onclick=\"return showUser('"+item.user.uname+"')\">@"+item.user.uname+"</a>:"+tags+"</div>"+ + "<div class=\"msg-ts\"><a href=\"#\" onclick=\"return showMessage("+item.mid+")\">"+item.timestamp+"</a></div>"+ + "</div>"+ + "<div class=\"msg-txt\">"+item.body+"</div>"+ + photo+ + "<div class=\"msg-comment\"><textarea id=\"tareply-"+item.mid+"\" name=\"body\" rows=\"1\" class=\"reply\" placeholder=\"Add a comment...\" onkeypress=\"postformListener(this.form,event)\"></textarea></div>"+ + replies + ); + ul.append(li); + }); + $('#toppanel').css("display","none"); + $('#bottompanel').css("display","none"); + var content=$('#content'); + content.attr("class",""); + content.empty(); + content.append(ul); + $(window).scrollTop(0); + }); + return false; +} + +function showMessages(param) { + currentPMUser=""; + currentMID=0; + $.getJSON('https://api.juick.com/messages?hash='+hash+'&'+param+'&callback=?').done(function(data) { + var ul=$('<ul/>'); + ul.attr("id","msglist"); + $.each(data,function(i,item) { + var tags=""; + if(item.tags) { + $.each(item.tags,function(t,tag) { + tags+=" *"+tag+"</a>"; + }); + } + var photo=""; + if(item.photo) { + photo="<div class=\"msg-media\"><img src=\""+item.photo.small+"\"/></div>"; + } + var replies=""; + if(item.replies>0) { + replies="<div class=\"msg-replies\"><a href=\"#\" onclick=\"return showMessage("+item.mid+")\">"+item.replies+" "; + if(item.replies%10==1) { + replies+="reply"; + } else { + replies+="replies"; + } + replies+=" </a>"; + if(item.repliesby) { + replies+=" by "+item.repliesby; + } + replies+="</div>"; + } + var li=$("<li/>").attr("class","msg").html( + "<div class=\"msg-header\">"+ + "<div class=\"msg-menu\"></div>"+ + "<div class=\"msg-avatar\"><a href=\"#\" onclick=\"return showUser('"+item.user.uname+"')\"><img src=\"//i.juick.com/a/"+item.user.uid+".png\"/></a></div>"+ + "<div class=\"msg-uname\"><a href=\"#\" onclick=\"return showUser('"+item.user.uname+"')\">@"+item.user.uname+"</a>:"+tags+"</div>"+ + "<div class=\"msg-ts\"><a href=\"#\" onclick=\"return showMessage("+item.mid+")\">"+item.timestamp+"</a></div>"+ + "</div>"+ + "<div class=\"msg-txt\">"+item.body+"</div>"+ + photo+ + "<div class=\"msg-comment\"><textarea name=\"body\" rows=\"1\" class=\"reply\" placeholder=\"Add a comment...\" onkeypress=\"postformListener(this.form,event)\"></textarea></div>"+ + replies + ); + ul.append(li); + }); + $('#toppanel').css("display","none"); + $('#bottompanel').css("display","none"); + var content=$('#content'); + content.attr("class",""); + content.empty(); + content.append(ul); + $(window).scrollTop(0); + }); + return false; +} + +/******************************************************************************/ + +function showUser(uname) { + showMessages('uname='+uname); + return false; +} + +/******************************************************************************/ + +function showMessage(mid) { + currentPMUser=""; + currentMID=mid; + $.getJSON('https://api.juick.com/thread?mid='+mid+'&hash='+hash+'&callback=?').done(function(data) { + var ul=$('<ul/>'); + ul.attr("id","thread"); + + var post=data.shift(); + var tags=""; + if(post.tags) { + $.each(post.tags,function(t,tag) { + tags+=" *"+tag+"</a>"; + }); + } + var photo=""; + if(post.photo) { + photo="<div class=\"msg-media\"><img src=\""+post.photo.small+"\"/></div>"; + } + var li=$("<li/>").attr("class","msg").html( + "<div class=\"msg-header\">"+ + "<div class=\"msg-menu\"></div>"+ + "<div class=\"msg-avatar\"><a href=\"#\" onclick=\"return showUser('"+post.user.uname+"')\"><img src=\"//i.juick.com/a/"+post.user.uid+".png\"/></a></div>"+ + "<div class=\"msg-uname\"><a href=\"#\" onclick=\"return showUser('"+post.user.uname+"')\">@"+post.user.uname+"</a>:"+tags+"</div>"+ + "<div class=\"msg-ts\">"+post.timestamp+"</div>"+ + "</div>"+ + "<div class=\"msg-txt\">"+post.body+"</div>"+ + photo+ + "<div class=\"msg-comment\"><textarea name=\"body\" rows=\"1\" class=\"reply\" placeholder=\"Add a comment...\" onkeypress=\"postformListener(this.form,event)\"></textarea></div>" + ); + ul.append(li); + + var content=$('#content'); + var maxmargin=content.width()-li.width()-50; + + var start,end; + start=new Date(); + showThread(ul,data,0,20,maxmargin); + end=new Date(); + console.log("Execution time: "+(end.getTime()-start.getTime())); + + $('#toppanel').css("display","none"); + $('#bottompanel').css("display","none"); + content.attr("class",""); + content.empty(); + content.append($('<div/>').attr("id","threadwrap").append(ul)); + $(window).scrollTop(0); + }); + return false; +} + +function showThread(ul,data,rid,margin,maxmargin) { + $.each(data,function(i,item) { + var replyto=item.replyto || 0; + if(replyto==rid) { + var photo=""; + if(item.photo) { + photo="<div class=\"msg-media\"><img src=\""+item.photo.small+"\"/></div>"; + } + var li=$("<li/>").attr("class","msg").css("margin-left",margin).html( + "<div class=\"msg-header\">"+ + "<div class=\"msg-menu\"></div>"+ + "<div class=\"msg-avatar\"><a href=\"#\" onclick=\"return showUser('"+item.user.uname+"')\"><img src=\"//i.juick.com/a/"+item.user.uid+".png\"/></a></div>"+ + "<div class=\"msg-uname\"><a href=\"#\" onclick=\"return showUser('"+item.user.uname+"')\">@"+item.user.uname+"</a>:</div>"+ + "<div class=\"msg-ts\">"+item.timestamp+"</div>"+ + "</div>"+ + "<div class=\"msg-txt\">"+item.body+"</div>"+ + photo//+ + //"<div class=\"msg-comment\"><textarea name=\"body\" rows=\"1\" class=\"reply\" placeholder=\"Add a comment...\" onkeypress=\"postformListener(this.form,event)\"></textarea></div>" + ); + ul.append(li); + + var newmargin=margin+20; + if(newmargin>maxmargin) { + newmargin=maxmargin; + } + showThread(ul,data.slice(i),item.rid,newmargin,maxmargin); + } + }); +} + +/******************************************************************************/ + +function incomingPM(msg) { + try { + if(msg.user.uname===currentPMUser) { + $('#pmlist').append($("<li/>").attr("class","pm-in").text(msg.body)); + $(window).scrollTop($(document).height()); + } else { + var modified=false; + $.each(lastConversations,function(i,item) { + if(item.uname===msg.user.uname) { + if(item.MessagesCount>0) { + item.MessagesCount++; + } else { + item.MessagesCount=1; + } + modified=true; + } + }); + if(!modified) { + lastConversations.unshift({ + uname:msg.user.uname, + uid:msg.user.uid, + MessagesCount:"1" + }); + } + initPMUList(); + } + } catch(err) { } +} + +function showPM(uname) { + currentMID=0; + + var modified=false; + $.each(lastConversations,function(i,item) { + if(item.uname===uname && item.MessagesCount>0) { + item.MessagesCount=0; + modified=true; + } + }); + if(modified) { + initPMUList(); + } + + $.getJSON('https://api.juick.com/pm?hash='+hash+'&uname='+uname+'&callback=?').done(function(data) { + var ul=$('<ul/>'); + ul.attr("id","pmlist"); + $.each(data,function(i,item) { + var li=$("<li/>"); + if(item.user.uid==user_id) { + li.attr("class","pm-out"); + } else { + li.attr("class","pm-in"); + } + li.text(item.body); + ul.append(li); + }); + + currentPMUser=uname; + +/* + var toppanel=$('#toppanel'); + toppanel.css("display","block"); + toppanel.html("<h1>"+uname+"</h1>"); + + var bottompanel=$('#bottompanel'); + bottompanel.html("<input type=\"text\" name=\"reply\" id=\"replypmtext\" onkeypress=\"sendPMformListener(this.form,event)\"/><input type=\"button\" value=\">\" id=\"replypmbutton\" onclick=\"return sendPM()\"/>"); + bottompanel.css("display","block"); +*/ + + var content=$('#content'); + content.empty(); + content.append(ul); + $(window).scrollTop($(document).height()); + //$('#replypmtext').focus(); + }); + return false; +} + +function sendPMformListener(formEl,ev) { + if(ev.ctrlKey && (ev.keyCode==10 || ev.keyCode==13)) { + sendPM(); + } +} + +function sendPM() { + var replypmtext=$('#replypmtext'); + var replypmbutton=$('#replypmbutton'); + replypmtext.prop('disabled', true); + replypmbutton.prop('disabled', true); + + var body=replypmtext.val(); + + $.ajax({ + url:"https://api.juick.com/pm", + type:"POST", + data:{ + hash:hash, + uname:currentPMUser, + body:body + }, + success:function(data) { + replypmtext.val(""); + $('#pmlist').append($("<li/>").attr("class","pm-out").text(body)); + $(window).scrollTop($(document).height()); + }, + error:function(jqxhr,status) { + alert("Error: "+status); + }, + complete:function() { + replypmtext.removeAttr("disabled"); + replypmbutton.removeAttr("disabled"); + replypmtext.focus(); + } + }); + return false; +} + +/******************************************************************************/ +/******************************************************************************/ +/******************************************************************************/ + function inlinevideo(mid) { var flashvars={ file:'http://i.juick.com/video/'+mid+'.mp4', @@ -401,6 +804,8 @@ jQuery.fn.selectText = function(){ /******************************************************************************/ $(document).ready(function() { + initPMUList(); + var tareply=$('textarea.reply'); tareply.autoResize({ extraSpace: 0, diff --git a/web/style3.css b/web/style3.css index cd66bc20d..211c759ce 100644 --- a/web/style3.css +++ b/web/style3.css @@ -93,6 +93,12 @@ blockquote { border-left: 1px dashed #CCC; margin: 10px 0 10px 10px; padding-lef /********/ +.pm-in,.pm-out { border: 1px solid #E0E0E0; margin: 10px 0; padding: 10px; } +.pm-in { width: 85%; background: #FFF; } +.pm-out { margin-left: 15%; background: #DFD; } + +/********/ + #column { width: 230px; top: 0; padding-top: 10px; overflow: hidden; } #column ul, #column p, #column hr { margin: 10px 0; } #column li { margin: 6px 0; } @@ -109,6 +115,9 @@ blockquote { border-left: 1px dashed #CCC; margin: 10px 0 10px 10px; padding-lef .abs { position: absolute; } .fix { position: fixed; } +#pmulist img { width: 32px; height: 32px; margin-right: 5px; vertical-align: middle; } +#pmulist .unreadcnt { float: right; margin-top: 4px; background: #CCC; padding: 2px 4px; } + /********/ #dialogb { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.5; background: #000; z-index: 10; } @@ -134,7 +143,7 @@ blockquote { border-left: 1px dashed #CCC; margin: 10px 0 10px 10px; padding-lef #topwrapper { margin-top: 3em; } #header li { line-height: 42px; } - #search { position: absolute; left: 84px; right: 222px; min-width: 55px; } + #search { position: absolute; left: 84px; right: 222px; min-width: 32px; } #header a { padding: 0 7px; } #header .text { width: 100%; } #header label { display: none; } |