diff options
Diffstat (limited to 'static/js/pichat.js')
| -rw-r--r-- | static/js/pichat.js | 300 |
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 + "¬es=" + 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){ |
