diff options
| author | Scott Ostler <sostler@deathmachine.local> | 2010-02-23 10:00:55 -0500 |
|---|---|---|
| committer | Scott Ostler <sostler@deathmachine.local> | 2010-02-23 10:00:55 -0500 |
| commit | af3d49a9c3092f600e62a66cc78a462ef9a70e7e (patch) | |
| tree | 6f6e2f7576eea87c7d45fa4d8a63a835c253ac22 /static/tests/scrolling.html | |
| parent | 8a981f390c286cb9c5935290e7846df903148278 (diff) | |
| parent | 2b6c2cef9a3398dbafb1f6cfbc0323c0b83e2053 (diff) | |
Merge
Diffstat (limited to 'static/tests/scrolling.html')
| -rw-r--r-- | static/tests/scrolling.html | 128 |
1 files changed, 128 insertions, 0 deletions
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 |