From a5541502fbb496fbbd83ccd2e8c14b7558a9ebb0 Mon Sep 17 00:00:00 2001 From: timb Date: Fri, 22 Jan 2010 07:13:41 -0800 Subject: can login from profile; plaintext pw filler; better form handling; huge cursor on sign in button --- static/form_login/front.css | 5 +- static/index.html | 17 +++-- static/js/home.js | 158 ++++++++++++++++++++++++++++++++++++-------- static/js/pichat.js | 2 +- static/pichat.css | 9 +-- template/form_login.st | 31 ++------- template/head.st | 3 +- 7 files changed, 159 insertions(+), 66 deletions(-) diff --git a/static/form_login/front.css b/static/form_login/front.css index ea767b0..df339b3 100644 --- a/static/form_login/front.css +++ b/static/form_login/front.css @@ -143,4 +143,7 @@ border:0; #loginSubmit:hover, #loginSubmit:focus { background-position:0 -5px; cursor:pointer; -} \ No newline at end of file +} +.no-cursor { cursor: none; } +.invisible { display: none !important; } +#cursor-big { position: absolute; z-index: 1000; } \ No newline at end of file diff --git a/static/index.html b/static/index.html index f80e5da..b06fa39 100755 --- a/static/index.html +++ b/static/index.html @@ -5,9 +5,10 @@ + dump.fm @@ -168,7 +169,9 @@ body { } #nickInput {color:#000; } - +.no-cursor { cursor: none; } +.invisible { display: none !important; } +#cursor-big { position: absolute; z-index: 1000; } --> @@ -198,12 +201,14 @@ body {

Talk with pictures.

 


- +
- + +

-


- +


+ +

 

 

diff --git a/static/js/home.js b/static/js/home.js index b955d8a..441a992 100755 --- a/static/js/home.js +++ b/static/js/home.js @@ -4,37 +4,143 @@ function ifEnter(fn) { }; } -function initHome() { +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); - var defaults = { - '#nickInput': "username", - "#passwordInput": "not-a-real-password" - } + // 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() + }) + + // restore filler text on blur if field is empty + $(nick).blur(function(){ + if($(nick).val() == "") $(nick).val(nickFiller); + }) + + // password input logic: + + var showPassHideLabel = function(){ + $(passLabel).addClass("invisible") + $(pass).removeClass("invisible") + $(pass).focus() + } + + var hidePassShowLabel = function(){ + $(passLabel).val(passFiller) + $(pass).addClass("invisible") + $(passLabel).removeClass("invisible") + } - _.map(defaults, function(value, id){ - - // set default values for the login form only if empty - if ($(id).val() == "") $(id).val(value); - - // erase the form text when clicked only if it is filler text, otherwise select it - $(id).focus(function(){ - if($(id).val() == value) $(id).val("") - else $(id).select() - }) - - // restore filler text on blur if field is empty - $(id).blur(function(){ - if($(id).val() == "") $(id).val(value); - }) - - }) + // only show password label if input is empty + if ($(pass).val() == "") hidePassShowLabel() + + $(passLabel).click(showPassHideLabel) + $(passLabel).focus(showPassHideLabel) + + $(pass).blur(function(){ + if($(pass).val() == "") hidePassShowLabel() + }) - $('#passwordInput').keyup(ifEnter(login)); - $('#loginSubmit').click(login); + $(nick).keypress(ifEnter(login)); + $(pass).keypress(ifEnter(login)); + $(submit).click(login); + + initBigHand(submit) +} + +function initExpandableLoginForm() { + + initLoginForm() + + $(".signin").click( function(e){ + e.preventDefault(); + $("fieldset#signin_menu").toggle(); + $(".signin").toggleClass("menu-open"); + $("#nickInput").select() + }); + + $("fieldset#signin_menu").mouseup( function(){ + return false + }); + + $(document).mouseup(function(e) { + if ($(e.target).parent("a.signin").length == 0) { + $(".signin").removeClass("menu-open"); + $("fieldset#signin_menu").hide(); + } + }); +} + +function initBigHand(id){ + var cursor = "#cursor-big" + + if (!$(cursor).length) // add cursor image to page if it doesn't exist already... + $('').appendTo('body') + + $(id).addClass("no-cursor") + + // i have to do this weirdly bc putting the cursor image where the mouse cursor is causes problems with mouse events: + // * it stops mousemove events on the image below the mouse cursor + // * it fucks up mouseover/out and even mouseenter/leave events, as well as click + + // so i am doing this: + // on mousing over the image: + // make cursor visible + // find image co-ords + // bind a global mousemove func + // bind cursor click event + // mousemove func: + // move image to mouse co-ords + // if mouse co-ords are outside the image co-ords: + // make cursor invisible + // unbind mousemove func + // 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) + $('body').unbind('mousemove', mousemove) + $(id).mouseover(imageMouseOver) + } + } + + var cursorClick = function(){ $(id).click() } + + var imageMouseOver = function(){ + initBigHand.coords = { + "left": $(id).offset().left, + "top": $(id).offset().top, + "right": $(id).offset().left + $(id).width(), + "bottom": $(id).offset().top + $(id).height() + } + $('body').mousemove(mousemove) + $(cursor).click(cursorClick) + $(cursor).removeClass('invisible') + } + + $(id).mouseover(imageMouseOver) + } function login() { - $('#passwordInput, #loginSubmit').blur(); + //$('#passwordInput, #loginSubmit').blur(); var nick = $('#nickInput').val(); var password = $('#passwordInput').val(); var hash = hex_sha1(nick + '$' + password + '$dumpfm'); @@ -50,7 +156,7 @@ function login() { $.ajax({ type: 'GET', timeout: 5000, - url: 'login', + url: '/login', data: {'nick': nick, ts: '', 'hash': hash }, cache: false, dataType: 'json', diff --git a/static/js/pichat.js b/static/js/pichat.js index 20d3928..1c378e2 100755 --- a/static/js/pichat.js +++ b/static/js/pichat.js @@ -153,7 +153,7 @@ function updateUI(msgs, users) { } if (users !== null) { var flattened = users.sort().join(",") - if (!('userlist' in cache) || flattened != cache.userlist) { + if (!('userlist' in cache) || flattened != cache.userlist) { $("#userList").html($.map(users, buildUserDiv).join('')); } cache.userlist = flattened diff --git a/static/pichat.css b/static/pichat.css index 0e5fb5f..cd4dd77 100755 --- a/static/pichat.css +++ b/static/pichat.css @@ -287,13 +287,8 @@ background-color:#f3f3f3; font-family: Arial, Helvetica, sans-serif; font-size: 11px; bottom - #chatrap{ - top: 105px; - left:0px; - position:absolute; - width: 100%; - padding-bottom:20px; } +/* #chatrap{ top: 105px; left:0px; @@ -494,3 +489,5 @@ td { color: #000000; } .btnav { border: 0px #000000 solid;} +*/ +.invisible { display: none !important; } diff --git a/template/form_login.st b/template/form_login.st index aee9283..a028769 100644 --- a/template/form_login.st +++ b/template/form_login.st @@ -3,42 +3,25 @@

-


- +

- + +

- + + +

\ No newline at end of file diff --git a/template/head.st b/template/head.st index a9bb0f0..a873b7b 100755 --- a/template/head.st +++ b/template/head.st @@ -1,8 +1,7 @@ - - + -- cgit v1.2.3-70-g09d2