summaryrefslogtreecommitdiff
path: root/static/js/pichat.js
diff options
context:
space:
mode:
Diffstat (limited to 'static/js/pichat.js')
-rw-r--r--static/js/pichat.js300
1 files changed, 216 insertions, 84 deletions
diff --git a/static/js/pichat.js b/static/js/pichat.js
index 2cb577f..bdd2471 100644
--- a/static/js/pichat.js
+++ b/static/js/pichat.js
@@ -1,11 +1,27 @@
var cache = {}
var PendingMessages = {}
+var MessageContentCache = {}
var MaxImagePosts = 40
// Utils
-// use e.g. "backgroundColor" not "background-color"
+/*Object.size = function(obj) {
+ var size = 0, key;
+ for (key in obj) {
+ if (obj.hasOwnProperty(key)) size++;
+ }
+ return size;
+};*/
+
+isEmptyObject = function(obj) {
+ for (key in obj) {
+ if (obj.hasOwnProperty(key)) return false;
+ }
+ return true
+}
+
+
function isCSSPropertySupported(prop){
return prop in document.body.style;
}
@@ -15,16 +31,30 @@ function escapeHtml(txt) {
else { return $("<span>").text(txt).html(); }
}
+
+URLRegex = /((\b(http\:\/\/|https\:\/\/|ftp\:\/\/)|(www\.))+(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi;
+PicRegex = /\.(jpg|jpeg|png|gif|bmp)$/i;
+
+function getImagesAsArray(text) {
+ var imgs = []
+ var urls = text.match(URLRegex)
+ for (var i = 0; i<urls.length; i++){
+ var url = urls[i]
+ var urlWithoutParams = url.replace(/\?.*$/i, "");
+ if (PicRegex.test(urlWithoutParams))
+ imgs.push(url)
+ }
+ return imgs
+}
+
function linkify(text) {
LastMsgContainsImage = false
- var URLRegex = /((\b(http\:\/\/|https\:\/\/|ftp\:\/\/)|(www\.))+(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi;
return text.replace(URLRegex, linkReplace);
}
// durty hack to use a global to check this... but otherwise i'd have to rewrite the String.replace function? :/
var LastMsgContainsImage = false
function linkReplace(url) {
- var PicRegex = /\.(jpg|jpeg|png|gif|bmp)$/i;
var urlWithoutParams = url.replace(/\?.*$/i, "");
if (url.indexOf('http://') == 0 || url.indexOf('https://') == 0 || url.indexOf('ftp://') == 0)
@@ -42,12 +72,10 @@ function linkReplace(url) {
function linkifyWithoutImage(text) {
LastMsgContainsImage = false
- var URLRegex = /((\b(http\:\/\/|https\:\/\/|ftp\:\/\/)|(www\.))+(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi;
return text.replace(URLRegex, linkReplaceWithoutImage);
}
function linkReplaceWithoutImage(url){
- var PicRegex = /\.(jpg|jpeg|png|gif|bmp)$/i;
var urlWithoutParams = url.replace(/\?.*$/i, "");
linkUrl = url.indexOf('http://') == 0 ? url : 'http://' + url;
@@ -80,8 +108,10 @@ function buildMessageDiv(msg, isLoading) {
var msgId = !isLoading ? 'id="message-' + msg.msg_id + '"' : '';
var loadingClass = isLoading ? ' loading' : '';
var containsImageClass = LastMsgContainsImage ? ' contains-image' : '';
- return '<div class="msgDiv ' + loadingClass + containsImageClass + '" ' + msgId + '>'
- + '<b><a href="/u/' + nick + ' ">' + nick + '</a>: </b>'
+ return '<div class="msgDiv dump ' + loadingClass + containsImageClass + '" ' + msgId + '>'
+ + '<span class="nick"><b><a href="/u/' + nick + ' ">' + nick + '</a></b>'
+ + ' <img src="'+Imgs.chatThumbDot+'" class="thumb chat-thumb" onclick="Tag.favorite(this)"> '
+ + '</span>'
+ buildMsgContent(msg.content)
+ '</div>';
}
@@ -130,7 +160,7 @@ function submitMessage() {
var content = $.trim($('#msgInput').val());
$('#msgInput').val('');
if (content == '') { return; }
- if (content.length > 1000) {
+ if (content.length > 1337) {
alert("POST TOO LONG DUDE!");
return;
} // this shouldn't just be client side :V
@@ -193,18 +223,19 @@ function flattenUserJson(users) {
}
function updateUI(msgs, users) {
- if (window['growlize'] && msgs && msgs.length > 0) {
- $.map(msgs, buildGrowlDataAndPopDatShit)
- } else if (msgs && msgs.length > 0) {
- addNewMessages(msgs);
- }
- if (users !== null) {
- var flattened = flattenUserJson(users);
- if (!('userlist' in cache) || flattened != cache.userlist) {
- $("#userList").html($.map(users.sort(sortUsersByAlpha), buildUserDiv).join(''));
- }
- cache.userlist = flattened
- }
+
+ if (window['growlize'] && msgs && msgs.length > 0) {
+ $.map(msgs, buildGrowlDataAndPopDatShit)
+ } else if (msgs && msgs.length > 0) {
+ addNewMessages(msgs);
+ }
+ if (users !== null) {
+ var flattened = flattenUserJson(users);
+ if (!('userlist' in cache) || flattened != cache.userlist) {
+ $("#userList").html($.map(users.sort(sortUsersByAlpha), buildUserDiv).join(''));
+ }
+ cache.userlist = flattened
+ }
}
function sortUsersByAlpha(a, b){
@@ -248,6 +279,9 @@ function refresh() {
var onSuccess = function(json) {
try {
Timestamp = json.timestamp;
+
+ $.map(json.messages, function(msg){ MessageContentCache[msg.msg_id.toString()] = msg.content })
+
var messages = $.grep(
json.messages,
function(m) { return !isDuplicateMessage(m) });
@@ -292,9 +326,14 @@ function initChat() {
$('#msgInput').keyup(ifEnter(submitMessage));
$('#msgSubmit').click(submitMessage);
+ $('#palette-button').click(paletteToggle);
messageList = $("#messageList")[0]
+ if (!isEmptyObject(RawFavs)) paletteButtonShow()
+
+ initChatThumb()
+
scrollToEnd()
scrollWatcher()
@@ -372,6 +411,7 @@ function initProfile() {
var t = $(this);
t.html(buildMsgContent(t.text()));
});
+ initLogThumb()
};
function initLog() {
@@ -379,57 +419,154 @@ function initLog() {
var t = $(this);
t.html(buildMsgContent(t.text()));
});
- initAnimThumb();
+ initLogThumb();
+}
+
+// todo: preload these. also, look into image sprites (no go on animating their sizes tho)
+Imgs = {
+ "chatThumb": "/static/img/thumbs/color.right.gif",
+ "chatThumbBig": "/static/img/thumbs/color.right.4x.gif",
+ "chatThumbOff": "/static/img/thumbs/bw.right.gif",
+ "chatThumbDot": "/static/img/thumbs/pink.circle.gif",
+ "logThumb": "/static/img/thumbs/color.left.gif",
+ "logThumbBig": "/static/img/thumbs/color.left.4x.gif",
+ "logThumbOff": "/static/img/thumbs/bw.left.gif"
+}
+
+Anim = {
+ "chatThumbBig": {"width": "56px", "height": "60px", "right": "-35px", "bottom": "-10px"},
+ "chatThumbTiny": {"width": "8px", "height": "8px", "right": "8px", "bottom": "8px"},
+ "chatThumb": {"width": "16px", "height": "16px", "right": "4px", "bottom": "4px"},
+ "logThumb": {"width": "16px", "height": "16px", "marginLeft": "0px", "marginTop": "0px"},
+ "logThumbBig": {"width": "56px", "height": "60px", "marginLeft": "-40px", "marginTop": "-27px"}
}
// jesus this logic is ugly
-function initAnimThumb(){
+function initLogThumb(){
$(".buttons .thumb").bind('mouseover mouseout',
function(e) {
- var favorited = $(this).hasClass("favorite") ? true : false;
+ var favorited = $(this).parents(".dump").hasClass("favorite") ? true : false;
if (e.type == "mouseover") {
if (favorited) {
- $(this).attr("src", "/static/thumbup.gif");
-/* $(this).stop().animate({
- "width": "14px",
- "height": "15px",
- "marginLeft": "0px",
- "marginTop": "0px"
- }, 'fast'); */
+ $(this).attr("src", Imgs.logThumbOff);
} else {
- $(this).attr("src", "/static/thumbup.colored.4x.gif");
- $(this).stop().animate({
- "width": "56px",
- "height": "60px",
- "marginLeft": "-44px",
- "marginTop": "-27px"
- }, 'fast');
+ $(this).attr("src", Imgs.logThumbBig);
+ $(this).stop().animate(Anim.logThumbBig, 'fast');
}
} else { // mouseout
if (favorited) {
- $(this).attr("src", "/static/thumbup.colored.gif");
- $(this).stop().animate({
- "width": "14px",
- "height": "15px",
- "marginLeft": "0px",
- "marginTop": "0px"
- }, 'fast');
+ $(this).attr("src", Imgs.logThumb);
+ $(this).stop().animate(Anim.logThumb, 'fast');
} else {
- $(this).attr("src", "/static/thumbup.gif");
- $(this).stop().animate({
- "width": "14px",
- "height": "15px",
- "marginLeft": "0px",
- "marginTop": "0px"
- }, 'fast');
+ $(this).attr("src", Imgs.logThumbOff);
+ $(this).stop().animate(Anim.logThumb, 'fast');
}
}
})
}
+function initChatThumb(){
+
+ $(".chat-thumb").live('mouseover mouseout',
+ function(e) {
+ var favorited = $(this).parents(".dump").hasClass("favorite") ? true : false;
+ if (e.type == "mouseover") {
+ if (favorited) {
+ $(this).attr("src", Imgs.chatThumbOff);
+ } else {
+ $(this).attr("src", Imgs.chatThumbBig);
+ $(this).stop().animate(Anim.chatThumbBig, 'fast')
+ }
+ } else { // mouseout
+ if (favorited) {
+ $(this).attr("src", Imgs.chatThumb);
+ $(this).stop().animate(Anim.chatThumb, 'fast');
+ } else {
+ $(this).stop().animate(Anim.chatThumbTiny, 'fast', 'swing',
+ function(){
+ $(this).attr("src", Imgs.chatThumbDot)
+ $(this).animate(Anim.chatThumb, 0)
+ })
+ }
+ }
+ })
+}
+
+function paletteButtonHideAnim(){
+ $("#msginputrapper").stop().animate({"marginRight": "374px"}, 'fast')
+ $("#msgSubmit").stop().animate({"right": "260px"}, 'fast')
+ $("#palette-button").stop().animate({"width": "0px"}, 'fast', 'swing', function(){ $("#palette-button").css("display", "none") })
+}
+function paletteButtonHide(){
+ $("#msginputrapper").css("marginRight", "374px")
+ $("#msgSubmit").css("right", "260px")
+ $("#palette-button").css("width", "0px")
+ $("#palette-button").css("display", "none")
+}
+function paletteButtonShowAnim(){
+ $("#msginputrapper").stop().animate({"marginRight": "415px"}, 'fast')
+ $("#msgSubmit").stop().animate({"right": "300px"}, 'fast')
+ $("#palette-button").css("display", "inline-block")
+ $("#palette-button").stop().animate({"width": "40px"}, 'fast')
+}
+function paletteButtonShow(){
+ $("#msginputrapper").css("marginRight", "415px")
+ $("#msgSubmit").css("right", "300px")
+ $("#palette-button").css("display", "inline-block")
+ $("#palette-button").css("width", "40px")
+}
+
+function paletteToChat(img){
+ var chatText = $("#msgInput").val()
+ if (chatText.length && chatText[chatText.length - 1] != " ")
+ chatText += " "
+ chatText += $(img).attr("src") + " "
+ $("#msgInput").val(chatText)
+ $("#msgInput").focus().val($("#msgInput").val()) //http://stackoverflow.com/questions/1056359/
+ paletteHide()
+}
+
+paletteImageCache = false
+function paletteBuildImageThumbs(){
+ if (paletteImageCache) {
+ var imgs = paletteImageCache
+ } else {
+ var imgs = []
+ var dupeFilter = {}
+ for(fav in RawFavs){
+ var parsedImgs = getImagesAsArray(RawFavs[fav])
+ for (var i=0; i<parsedImgs.length; i++){
+ var img = parsedImgs[i]
+ if (!dupeFilter[img]) {
+ imgs.push(img)
+ dupeFilter[img] = true
+ }
+ }
+ }
+ paletteImageCache = imgs
+ }
+
+ for(var i=0; i<imgs.length; i++){
+ $("#palette-thumbs").append("<img onclick='paletteToChat(this)' src='"+imgs[i]+"'>")
+ }
+}
+
+function paletteShow(){
+ $("#palette").css("display", "block")
+ paletteBuildImageThumbs()
+}
+function paletteHide(){
+ $("#palette").css("display", "none")
+ $("#palette-thumbs").html("")
+}
+
+function paletteToggle(){
+ if ($("#palette").css("display") == "none")
+ paletteShow()
+ else
+ paletteHide()
+}
-// TODO
-function favoriteImage() {};
function setupUpload(elementId, roomKey) {
var onSubmit = function(file, ext) {
@@ -551,7 +688,6 @@ function initDirectory() {
//big hand stuff
// TODO: replace this with simple pointer-events thing.
-
function initBigHand(id){
var cursorId = "#cursor-big"
var cursor = $(cursorId)[0]
@@ -617,70 +753,66 @@ function initBigHand(id){
}
-Share = {
-<<<<<<< HEAD
- "getMessage": function(button){
- var message = $(button).parents(".logged-dump")
+// grab message id etc from some element e that's inside a message
+function getMessageInfo(e){
+ var message = $(e).parents(".dump")
var id = message.attr("id").substr(8) // cut "message-001" to "001"
- var nick = message.attr("nick") // cut "/u/timb" to "timb"
+ var nick = message.attr("nick")
var link = "http://dump.fm/p/" + nick + "/" + id
var content = message.find(".linkify")
if (!content.length) content = message.find(".content")
var rawContent = content.html()
var img = content.find("img").attr("src")
var via = "via " + nick + " on dump.fm"
- return {"nick": nick, "id": id, "link": encodeURIComponent(link), "content": content, "img": encodeURIComponent(img), "via": encodeURIComponent(via)}
- },
+ return {"nick": nick, "id": id, "link": encodeURIComponent(link),
+ "content": rawContent, "img": encodeURIComponent(img),
+ "via": encodeURIComponent(via)}
+}
+
+Share = {
"openLink": function(url){
window.open(url, "_blank")
},
"facebook": function(button){
- var message = Share.getMessage(button)
+ var message = getMessageInfo(button)
var url = "http://www.facebook.com/share.php?u=" + message.img + "&t=" + message.via
Share.openLink(url)
},
"tumblr": function(button){
- var message = Share.getMessage(button)
+ var message = getMessageInfo(button)
var url = "http://www.tumblr.com/share?v=3&u=" + message.img + "&t=" + message.via
Share.openLink(url)
},
"twitter": function(button){
- var message = Share.getMessage(button)
+ var message = getMessageInfo(button)
var url = "http://twitter.com/home?status=" + message.img + encodeURIComponent(" ") + message.via
Share.openLink(url)
},
"delicious": function(button){
- var message = Share.getMessage(button)
+ var message = getMessageInfo(button)
var url = "http://delicious.com/save?url=" + message.img + "&title=" + message.img + "&notes=" + message.via
Share.openLink(url)
}
}
Tag = {
- // todo: get rid of all the duplicated code here and in share
- "getMessage": function(button){
- var message = $(button).parents(".logged-dump")
- var id = message.attr("id").substr(8) // cut "message-001" to "001"
- var nick = message.attr("nick") // cut "/u/timb" to "timb"
- var link = "http://dump.fm/p/" + nick + "/" + id
- var content = message.find(".linkify")
- if (!content.length) content = message.find(".content")
- var rawContent = content.html()
- var img = content.find("img").attr("src")
- var via = "via " + nick + " on dump.fm"
- return {"nick": nick, "id": id, "link": encodeURIComponent(link),
- "content": content, "img": encodeURIComponent(img),
- "via": encodeURIComponent(via)}
- },
"favorite": function(button){
- var message = Share.getMessage(button)
- var favorited = ($(button).hasClass("favorite")) ? true : false
+ var message = getMessageInfo(button)
+ var favorited = ($(button).parents(".dump").hasClass("favorite")) ? true : false
if (favorited) {
Tag.rm(message.id, "favorite")
- $(button).removeClass("favorite")
+ $(button).parents(".dump").removeClass("favorite")
+ if (RawFavs && RawFavs[message.id]) {
+ delete RawFavs[message.id]
+ paletteImageCache = false
+ }
} else {
Tag.add(message.id, "favorite")
- $(button).addClass("favorite")
+ $(button).parents(".dump").addClass("favorite")
+ if (RawFavs && MessageContentCache[message.id]) {
+ RawFavs[message.id] = MessageContentCache[message.id]
+ paletteImageCache = false
+ }
}
},
"add": function(message_id, tag){