scrolling fix i think...

1 files changed, 23 insertions, 12 deletions

diff --git a/static/tests/scrolling.html b/static/tests/scrolling.html
index bb3c6bd..bef6f7e 100644
--- a/static/tests/scrolling.html
+++ b/static/tests/scrolling.html
@@ -31,6 +31,8 @@ function log(m){
 }
 
 function go(){
+  messagePane = $("#chat")[0]
+  maxImages = $("#max-images")[0]
   imagePoster()
   scrollToEnd()
   scrollWatcher()
@@ -49,9 +51,20 @@ function imagePoster(){
   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/>").html("username: ")
+  var d = $("<div class='image-post'/>").html("username: ")
   d.append(i).appendTo("#chat")
 }
 
@@ -61,30 +74,26 @@ function pausego(){
   $("#pausego-button").html(Paused ? "go" : "pause")
 }
 
-
-function isScrolledToBottom(id){
+function isScrolledToBottom(){
   var threshold = 50;
-  var obj = $(id)[0]
   
-  var containerHeight = obj.style.pixelHeight || obj.offsetHeight
-  var currentHeight = (obj.scrollHeight > 0) ? obj.scrollHeight : 0
+  var containerHeight = messagePane.style.pixelHeight || messagePane.offsetHeight
+  var currentHeight = (messagePane.scrollHeight > 0) ? messagePane.scrollHeight : 0
 
-  var result = (currentHeight - obj.scrollTop - containerHeight < threshold);
+  var result = (currentHeight - messagePane.scrollTop - containerHeight < threshold);
 
   return result;  
 }
 
 function scrollIfPossible(){
-  var obj = $("#chat")[0]
-  if (lastScriptedScrolledPosition == obj.scrollTop || isScrolledToBottom("#chat"))
+  if (lastScriptedScrolledPosition >= messagePane.scrollTop || isScrolledToBottom())
     scrollToEnd()
 }
 
 var lastScriptedScrolledPosition = 0
 function scrollToEnd(){
-  var obj = $("#chat")[0]
-  obj.scrollTop = obj.scrollHeight
-  lastScriptedScrolledPosition = obj.scrollTop
+  messagePane.scrollTop = messagePane.scrollHeight
+  lastScriptedScrolledPosition = messagePane.scrollTop
 }
 
 function scrollWatcher(){
@@ -110,6 +119,8 @@ function scrollWatcher(){
   <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()