diff options
Diffstat (limited to 'static')
| -rwxr-xr-x | static/js/pichat.js | 61 | ||||
| -rw-r--r-- | static/tests/scrolling.html | 128 | ||||
| -rw-r--r-- | static/webcam/webcam.js | 16 |
3 files changed, 172 insertions, 33 deletions
diff --git a/static/js/pichat.js b/static/js/pichat.js index 6b9c3e8..33788e2 100755 --- a/static/js/pichat.js +++ b/static/js/pichat.js @@ -1,24 +1,44 @@ var cache = {} var pendingMessages = {} +var MaxImagePosts = 40 + function escapeHtml(txt) { - if (!txt) { return ""; } - else { return $("<span>").text(txt).html(); } + if (!txt) { return ""; } + else { return $("<span>").text(txt).html(); } } function linkify(text) { - var URLRegex = /((\b(http\:\/\/|https\:\/\/|ftp\:\/\/)|(www\.))+(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi; - return text.replace(URLRegex, linkReplace); + 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(match){ - var PicRegex = /\.(jpg|jpeg|png|gif|bmp)$/i; - var matchWithoutParams = match.replace(/\?.*$/i, "") - if (PicRegex.test(matchWithoutParams)){ - return "<a target='_blank' href='" + match + "'><img src='" + match + "'></a>" - } else { - return "<a target='_blank' href='" + match + "'>" + match + "</a>" - } + var PicRegex = /\.(jpg|jpeg|png|gif|bmp)$/i; + var matchWithoutParams = match.replace(/\?.*$/i, "") + if (PicRegex.test(matchWithoutParams)){ + LastMsgContainsImage = true + return "<a target='_blank' href='" + match + "'><img src='" + match + "'></a>" + } else { + return "<a target='_blank' href='" + match + "'>" + match + "</a>" + } +} + +var ImageMsgCount = 0 +function removeOldMessages(){ + // don't count posts that are all text + if (LastMsgContainsImage) ImageMsgCount += 1; + while (ImageMsgCount > MaxImagePosts) { + var imgMsg = $(".contains-image:first") + if (imgMsg.length) { + imgMsg.prevAll().remove() // remove all text messages before the image message + imgMsg.remove() + } else break; + ImageMsgCount -= 1; + } } function buildMsgContent(content) { @@ -26,13 +46,15 @@ function buildMsgContent(content) { } function buildMessageDiv(msg, isLoading) { - var nick = escapeHtml(msg.nick); - var msgId = !isLoading ? 'id="message-' + msg.msg_id + '"' : ''; - var loadingClass = isLoading ? ' loading' : ''; - return '<div class="msgDiv ' + loadingClass + '" ' + msgId + '>' - + '<b><a href="/u/' + nick + ' ">' + nick + '</a>: </b>' - + buildMsgContent(msg.content) - + '</div>'; + removeOldMessages() + var nick = escapeHtml(msg.nick); + 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>' + + buildMsgContent(msg.content) + + '</div>'; } function buildUserDiv(user) { @@ -199,7 +221,6 @@ function initChat() { // see /static/webcam/webcam.js if ('webcam' in window) webcam.init() - setTimeout(refresh, 1000); } @@ -279,7 +300,7 @@ function isScrolledToBottom(){ } function scrollIfPossible(){ - if (lastScriptedScrolledPosition == messageList.scrollTop || isScrolledToBottom()) + if (lastScriptedScrolledPosition <= messageList.scrollTop || isScrolledToBottom()) scrollToEnd() } diff --git a/static/tests/scrolling.html b/static/tests/scrolling.html new file mode 100644 index 0000000..00e7b89 --- /dev/null +++ b/static/tests/scrolling.html @@ -0,0 +1,128 @@ +<html> +<head> +<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> +<script> + +var imageQueue = [] + +function fetch(){ + $.ajax({ + "url": "http://pipes.yahoo.com/pipes/pipe.run?_id=59b7cad3b8fb595fa7cb3c2fdf0ab328&_render=json&_callback=fetched", + "dataType": "jsonp" + }) + log("fetching more images") +} + +function fetched(data){ + log("images fetched") + var imageUrls = [] + try { + var images = data['value']['items'][0]['recent-images']['recent-image'] + for(var i = 0; i < images.length; i++) + imageQueue.push(images[i]['img']) + } catch(e) { + console.log("couldn't parse object:") + console.log(data) + } +} + +function log(m){ + $("#log").html(m) +} + +function go(){ + messagePane = $("#chat")[0] + maxImages = $("#max-images")[0] + imagePoster() + scrollToEnd() + scrollWatcher() +} + +function imagePoster(){ + if (!imageQueue.length){ + log("queue empty") + } else if (Paused) { + log("paused") + } else { + log(imageQueue.length + " images in queue ... posting image") + var image = imageQueue.shift() + imagePost(image) + } + setTimeout(imagePoster, 500) +} + +imagePosts = 0 +function imagePost(image){ + imagePosts += 1 + while (imagePosts > maxImages.value) { + var imgs = $(".image-post:first") + if (imgs.length) { + imgs.remove() + } else { + break + } + imagePosts -= 1 + } + var i = $("<img/>").attr("src", image) //.load(scrollIfPossible).error(scrollIfPossible) + var d = $("<div class='image-post'/>").html("username: ") + d.append(i).appendTo("#chat") +} + +var Paused = false +function pausego(){ + Paused = !Paused + $("#pausego-button").html(Paused ? "go" : "pause") +} + +function isScrolledToBottom(){ + var threshold = 50; + + var containerHeight = messagePane.style.pixelHeight || messagePane.offsetHeight + var currentHeight = (messagePane.scrollHeight > 0) ? messagePane.scrollHeight : 0 + + var result = (currentHeight - messagePane.scrollTop - containerHeight < threshold); + + return result; +} + +function scrollIfPossible(){ + if (lastScriptedScrolledPosition <= messagePane.scrollTop || isScrolledToBottom()) + scrollToEnd() +} + +var lastScriptedScrolledPosition = 0 +function scrollToEnd(){ + messagePane.scrollTop = messagePane.scrollHeight + lastScriptedScrolledPosition = messagePane.scrollTop +} + +function scrollWatcher(){ + scrollIfPossible() + setTimeout(scrollWatcher, 500) +} + +</script> +<style> + #chat { width: 500px; height: 90%; overflow: scroll; } + img { max-height: 300px; } +</style> +</head> +<body> + <div id="chat"> + test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br> + test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br> + test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br> + test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br> + test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br> + test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br> + </div> + <p id="log"></p> + <button onclick="fetch()">add images</button> + <button onclick="pausego()" id="pausego-button">pause</button> + <br /> + max image posts: <input name="max-images" id="max-images" value="50" /> +</body> +<script> + go() +</script> +</html>
\ No newline at end of file diff --git a/static/webcam/webcam.js b/static/webcam/webcam.js index 9829fd7..f5a5536 100644 --- a/static/webcam/webcam.js +++ b/static/webcam/webcam.js @@ -1,21 +1,11 @@ /* JPEGCam v1.0.8 */ /* Webcam library for capturing JPEG images and submitting to a server */ -/* Copyright (c) 2008 - 2009 Joseph Huckaby <jhuckaby@goldcartridge.com> */ +/* Copyright (c) 2008 - 2009 + Joseph Huckaby <jhuckaby@goldcartridge.com> + AND TIMB, ESQ. <http://bon.gs> */ /* Licensed under the GNU Lesser Public License */ /* http://www.gnu.org/licenses/lgpl.html */ -/* Usage: - <script language="JavaScript"> - document.write( webcam.get_html(320, 240) ); - webcam.set_api_url( 'test.php' ); - webcam.set_hook( 'onComplete', 'my_callback_function' ); - function my_callback_function(response) { - alert("Success! PHP returned: " + response); - } - </script> - <a href="javascript:void(webcam.snap())">Take Snapshot</a> -*/ - // Everything is under a 'webcam' Namespace window.webcam = { version: '1.0.8', |