diff options
Diffstat (limited to 'static/js')
| -rwxr-xr-x | static/js/home.js | 73 | ||||
| -rwxr-xr-x | static/js/pichat.js | 55 |
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 |