Merge branch 'master' of ssh://sostler@dump.fm/pichat/repo

2 files changed, 81 insertions, 47 deletions

diff --git a/static/js/home.js b/static/js/home.js
index 441a992..58fc384 100755
--- a/static/js/home.js
+++ b/static/js/home.js
@@ -6,15 +6,15 @@ function ifEnter(fn) {
 
 function initLoginForm() {
 
-	var nick = "#nickInput", nickFiller = "username"
-	var pass = "#passwordInput", passLabel = "#passwordInputLabel", passFiller = "password"
-	var submit = "#signin-submit"
-	
-	// username input logic:
-	// set filler text for the login form only if empty
-	if ($(nick).val() == "") $(nick).val(nickFiller);
-	
-	// erase the form text when clicked only if it is filler text, otherwise select it
+  var nick = "#nickInput", nickFiller = "username"
+  var pass = "#passwordInput", passLabel = "#passwordInputLabel", passFiller = "password"
+  var submit = "#signin-submit"
+  
+  // username input logic:
+  // set filler text for the login form only if empty
+  if ($(nick).val() == "") $(nick).val(nickFiller);
+  
+  // erase the form text when clicked only if it is filler text, otherwise select it
   $(nick).focus(function(){
     if($(nick).val() == nickFiller) $(nick).val("")
     else $(nick).select()
@@ -38,8 +38,8 @@ function initLoginForm() {
     $(pass).addClass("invisible")
     $(passLabel).removeClass("invisible")
   }
-	
-	// only show password label if input is empty
+  
+  // only show password label if input is empty
   if ($(pass).val() == "") hidePassShowLabel()
 
   $(passLabel).click(showPassHideLabel)
@@ -48,8 +48,8 @@ function initLoginForm() {
   $(pass).blur(function(){
     if($(pass).val() == "") hidePassShowLabel()
   })
-	
-	$(nick).keypress(ifEnter(login));
+  
+  $(nick).keypress(ifEnter(login));
   $(pass).keypress(ifEnter(login));
   $(submit).click(login);
     
@@ -80,10 +80,12 @@ function initExpandableLoginForm() {
 }
 
 function initBigHand(id){
-  var cursor = "#cursor-big"
+  var cursorId = "#cursor-big"
+  var cursor = $(cursorId)[0]
   
-  if (!$(cursor).length) // add cursor image to page if it doesn't exist already...    
-    $('<img src="/static/img/cursors/osx.hand.gif" class="invisible no-cursor" id="cursor-big">').appendTo('body')
+  // jquery's reported element sizes are not exactly the same as the browser's 'mouseover' target sizes
+  // so we'll allow a few pixels extra
+  var fudgeFactor = 2
 
   $(id).addClass("no-cursor")
 
@@ -97,6 +99,7 @@ function initBigHand(id){
   //    find image co-ords
   //    bind a global mousemove func
   //    bind cursor click event
+  //    unbind mouseover
   // mousemove func:
   //    move image to mouse co-ords
   //    if mouse co-ords are outside the image co-ords:
@@ -105,17 +108,17 @@ function initBigHand(id){
   //        unbind cursor click event
 
   var mousemove = function(e){
-    $(cursor).css({
-      "top": e.pageY + "px",
-      "left": e.pageX - 32 + "px" // 32: (4 pixels * 8 pixels per big pixel) to line up pointy finger with cursor
-    })
-    $(id).unbind('mouseover', imageMouseOver)
-    if (e.pageY < initBigHand.coords.top || 
-        e.pageY > initBigHand.coords.bottom ||
-        e.pageX < initBigHand.coords.left || 
-        e.pageX > initBigHand.coords.right) {
-          $(cursor).addClass('invisible')
-          $(cursor).unbind('click', cursorClick)
+    var y = e.pageY, x = e.pageX, coords = initBigHand.coords
+    
+    cursor.style.top = y + "px"
+    cursor.style.left = x - 32 + "px" // 32: (4 pixels * 8 pixels per big pixel) to line up pointy finger with cursor
+    if (y < coords.top || 
+        y > coords.bottom ||
+        x < coords.left || 
+        x > coords.right) {
+          $(cursorId).addClass('invisible')
+          $(cursorId).css({"top": 0, "left": 0 })
+          $(cursorId).unbind('click', cursorClick)
           $('body').unbind('mousemove', mousemove)
           $(id).mouseover(imageMouseOver)
       }    
@@ -124,15 +127,17 @@ function initBigHand(id){
   var cursorClick = function(){ $(id).click() }
   
   var imageMouseOver = function(){
+    //console.log("moused over...")
     initBigHand.coords = {
-      "left":   $(id).offset().left,
-      "top":    $(id).offset().top,
-      "right":  $(id).offset().left + $(id).width(),
-      "bottom": $(id).offset().top + $(id).height()
+      "left":   $(id).offset().left - fudgeFactor,
+      "top":    $(id).offset().top - fudgeFactor,
+      "right":  $(id).offset().left + $(id).width() + fudgeFactor,
+      "bottom": $(id).offset().top + $(id).height() + fudgeFactor
     }
     $('body').mousemove(mousemove)
-    $(cursor).click(cursorClick)
-    $(cursor).removeClass('invisible')
+    $(cursorId).click(cursorClick)
+    $(cursorId).removeClass('invisible')
+    $(id).unbind('mouseover', imageMouseOver)
   }
   
   $(id).mouseover(imageMouseOver)
@@ -163,4 +168,4 @@ function login() {
         success: onSuccess,
         error: onError
     });
-};
\ No newline at end of file
+};
diff --git a/static/js/pichat.js b/static/js/pichat.js
index a8557c1..48b11ae 100755
--- a/static/js/pichat.js
+++ b/static/js/pichat.js
@@ -56,12 +56,7 @@ function buildGrowlDataAndPopDatShit(msg) {
 }
 
 function growl(user, msg) {
-    $.gritter.add({
-        // (string | mandatory) the heading of the notification
-        title: user,
-        // (string | mandatory) the text inside the notification
-        text: msg
-    });
+    $.gritter.add({title: user, text: msg});
 }
 
 function handleMsgError(resp) {
@@ -111,6 +106,7 @@ function ifEnter(fn) {
     };
 }
 
+/*
 function isScrolledToBottom(div) {
     return Math.abs(div.scrollTop - (div.scrollHeight - div.offsetHeight)) <= 3;
 }
@@ -124,20 +120,18 @@ function scrollToBottom(div) {
 function delayedScrollToBottom(delay) {
     setTimeout(scrollToBottom, delay, $('#messageList')[0]);
 }
+*/
 
 function addNewMessages(msgs) {
-    var wasScrolledToBottom = isScrolledToBottom($('#messageList')[0]);
+    //var wasScrolledToBottom = isScrolledToBottom($('#messageList')[0]);
     var msgStr = $.map(msgs, buildMessageDiv).join('');
     $('#messageList').append(msgStr);
-    
-    if (wasScrolledToBottom) { delayedScrollToBottom(500); }
 }
 
 function addNewMessage(msg, isLoading) {
-    var wasScrolledToBottom = isScrolledToBottom($('#messageList')[0]);
+    //var wasScrolledToBottom = isScrolledToBottom($('#messageList')[0]);
     var msgStr = buildMessageDiv(msg, isLoading);
     var div = $(msgStr).appendTo('#messageList');
-    if (wasScrolledToBottom) { delayedScrollToBottom(500); }
     return div;
 }
 
@@ -177,7 +171,7 @@ function refresh() {
                 json.messages,
                 function(m) { return !isDuplicateMessage(m) });
             updateUI(messages, json.users);
-            if (!HasFocus && typeof UnseenMsgCounter !== 'undefined') {
+            if (typeof UnseenMsgCounter !== 'undefined' && !HasFocus) {
                 UnseenMsgCounter += messages.length;
             }
         } catch(e) {
@@ -215,10 +209,15 @@ function initChat() {
     $('#msgInput').keyup(ifEnter(submitMessage));
     $('#msgSubmit').click(submitMessage);
 
-    delayedScrollToBottom(500);
+    messageList = $("#messageList")[0]
+
+    scrollToEnd()
+    scrollWatcher()
+
     setTimeout(refresh, 1000);
 }
 
+
 function initProfile() {
     $('.logged-dump .content').each(function() {
         var t = $(this);
@@ -278,4 +277,34 @@ function setupUpload(elementId, roomKey) {
         name: 'image',
         data: { room: roomKey }
     });
+}
+
+// scrolling stuff
+// this code keeps the div scrolled to the bottom, but will also let the user scroll up, without jumping down
+
+function isScrolledToBottom(){
+  var threshold = 15;
+  
+  var containerHeight = messageList.style.pixelHeight || messageList.offsetHeight
+  var currentHeight = (messageList.scrollHeight > 0) ? messageList.scrollHeight : 0
+
+  var result = (currentHeight - messageList.scrollTop - containerHeight < threshold);
+
+  return result;  
+}
+
+function scrollIfPossible(){
+  if (lastScriptedScrolledPosition == messageList.scrollTop || isScrolledToBottom())
+    scrollToEnd()
+}
+
+var lastScriptedScrolledPosition = 0
+function scrollToEnd(){
+  messageList.scrollTop = messageList.scrollHeight
+  lastScriptedScrolledPosition = messageList.scrollTop
+}
+
+function scrollWatcher(){
+  scrollIfPossible()
+  setTimeout(scrollWatcher, 500)
 }
\ No newline at end of file