PM on Home (initial)

2 files changed, 415 insertions, 1 deletions

diff --git a/web/scripts3.js b/web/scripts3.js
index e1cc5952..9b16e33a 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 cd66bc20..211c759c 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; }