1 files changed, 117 insertions, 0 deletions
diff --git a/static/tests/scrolling.html b/static/tests/scrolling.html
new file mode 100644
index 0000000..bb3c6bd
--- /dev/null
+++ b/static/tests/scrolling.html
@@ -0,0 +1,117 @@
+<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(){
+  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)
+}
+
+function imagePost(image){
+  var i = $("<img/>").attr("src", image) //.load(scrollIfPossible).error(scrollIfPossible)
+  var d = $("<div/>").html("username: ")
+  d.append(i).appendTo("#chat")
+}
+
+var Paused = false
+function pausego(){
+  Paused = !Paused
+  $("#pausego-button").html(Paused ? "go" : "pause")
+}
+
+
+function isScrolledToBottom(id){
+  var threshold = 50;
+  var obj = $(id)[0]
+  
+  var containerHeight = obj.style.pixelHeight || obj.offsetHeight
+  var currentHeight = (obj.scrollHeight > 0) ? obj.scrollHeight : 0
+
+  var result = (currentHeight - obj.scrollTop - containerHeight < threshold);
+
+  return result;  
+}
+
+function scrollIfPossible(){
+  var obj = $("#chat")[0]
+  if (lastScriptedScrolledPosition == obj.scrollTop || isScrolledToBottom("#chat"))
+    scrollToEnd()
+}
+
+var lastScriptedScrolledPosition = 0
+function scrollToEnd(){
+  var obj = $("#chat")[0]
+  obj.scrollTop = obj.scrollHeight
+  lastScriptedScrolledPosition = obj.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>
+</body>
+<script>
+  go()
+</script>
+</html>
+\ No newline at end of file