aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGravatar Ugnich Anton2013-10-24 02:14:29 +0700
committerGravatar Ugnich Anton2013-10-24 02:14:29 +0700
commit145852361d049d4d51e727f7f62f970418f2a34a (patch)
tree5132cb233df811d9dcb2922588b9c016b268229e
parent19dbb5c44b3c32b894ed2c3c83d6c67aa69e7c17 (diff)
PM on Home (initial)
-rw-r--r--src/java/com/juick/http/www/Home.java14
-rw-r--r--src/java/com/juick/http/www/PageTemplates.java4
-rw-r--r--web/scripts3.js405
-rw-r--r--web/style3.css11
4 files changed, 430 insertions, 4 deletions
diff --git a/src/java/com/juick/http/www/Home.java b/src/java/com/juick/http/www/Home.java
index b9009a80..dae573ca 100644
--- a/src/java/com/juick/http/www/Home.java
+++ b/src/java/com/juick/http/www/Home.java
@@ -17,7 +17,9 @@
*/
package com.juick.http.www;
+import com.juick.json.Users;
import com.juick.server.MessagesQueries;
+import com.juick.server.PMQueries;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
@@ -77,6 +79,15 @@ public class Home {
PageTemplates.pageHead(out, title, null);
PageTemplates.pageNavigation(out, locale, visitor, null);
+ ArrayList<com.juick.User> lastconv = PMQueries.getPMLastConversationsUsers(sql, visitor.UID, 10);
+ String lastConvJSON = Users.arrayToString(lastconv);
+
+ out.println("<script type=\"text/javascript\">");
+ out.println("var hash='" + Utils.getCookie(request, "hash") + "';");
+ out.println("var user_id=" + visitor.UID + ";");
+ out.println("var lastConversations=" + lastConvJSON + ";");
+ out.println("</script>");
+
out.println("<div id=\"topwrapper\">");
out.println("<div id=\"wrapper\">");
out.println("<div id=\"content\">");
@@ -101,13 +112,14 @@ public class Home {
out.println("<div id=\"column\" class=\"abs\">");
out.println(" <ul>");
- out.println(" <li><a href=\"/?show=my\">" + rb.getString("My feed") + "</a></li>");
+ out.println(" <li><a href=\"/\">" + rb.getString("My feed") + "</a></li>");
out.println(" <li><a href=\"/?show=private\">" + rb.getString("Private") + "</a></li>");
out.println(" <li><a href=\"/?show=discuss\">" + rb.getString("Discussions") + "</a></li>");
out.println(" <li><a href=\"/?show=recommended\">" + rb.getString("Recommended") + "</a></li>");
out.println(" <li class=\"margtop\"><a href=\"/?show=top\">" + rb.getString("Popular") + "</a></li>");
out.println(" </ul>");
out.println(" <hr/>");
+ out.println(" <ul id=\"pmulist\"></ul>");
out.println("</div>");
out.println("</div>"); // topwrapper
diff --git a/src/java/com/juick/http/www/PageTemplates.java b/src/java/com/juick/http/www/PageTemplates.java
index 0c98f26f..3e08cd97 100644
--- a/src/java/com/juick/http/www/PageTemplates.java
+++ b/src/java/com/juick/http/www/PageTemplates.java
@@ -50,10 +50,10 @@ public class PageTemplates {
out.println("<!DOCTYPE html>");
out.print("<html>");
out.print("<head>");
- out.print("<link rel=\"stylesheet\" href=\"/style.2013102401.css\"/>");
+ out.print("<link rel=\"stylesheet\" href=\"/style.2013102403.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=\"//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js\" defer=\"defer\" async=\"async\"></script>");
- out.print("<script type=\"text/javascript\" src=\"/scripts.2013072200.js\" defer=\"defer\"></script>");
+ out.print("<script type=\"text/javascript\" src=\"/scripts.2013102401.js\" defer=\"defer\"></script>");
if (headers != null) {
out.print(headers);
}
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; }