Permalink
Browse files

[enhance] loginbox: cleaned and extended the loginbox widget a bit

  • Loading branch information...
Aqua-Ye committed Aug 23, 2011
1 parent 3854ea8 commit 97200c73ff99bc0ea0cd20cc92894f03ef4dce39
Showing with 66 additions and 51 deletions.
  1. +66 −51 stdlib/widgets/loginbox/loginbox.opa
@@ -23,13 +23,21 @@
import stdlib.widgets.core
import stdlib.widgets.button
+type WLoginbox.stylers = {
+ login_box : WStyler.styler
+ logged_box : WStyler.styler
+ unlogged_box : WStyler.styler
+}
+
type WLoginbox.config = {
login_text : string
login_label : option(string)
password_label : option(string)
login_placeholder : option(string)
password_placeholder : option(string)
- style : WStyler.styler
+ password_help : option(xhtml)
+ fading_time : int // in ms
+ stylers : WLoginbox.stylers
}
/** Display a login or the logged user if there is one. */
@@ -44,46 +52,50 @@ WLoginbox =
{{
- @private
- fading_time = 0 //ms
+ default_config = {
+ login_text = "Login"
+ login_label = none
+ password_label = none
+ login_placeholder = some("username")
+ password_placeholder = some("password")
+ password_help = none
+ fading_time = 0
+ stylers = {
+ login_box = WStyler.empty
+ logged_box = WStyler.empty
+ unlogged_box = WStyler.empty
+ }
+ } : WLoginbox.config
@private @client
- place_holder(id,init,is_password)(_)=
- if false //not(Dom.Support.placeholder())
- then
- if is_password
- then
- fid = "{id}_placeholder"
- real() : void = do Dom.hide(#{fid}) Dom.show(#{id})
- fake() : void = do Dom.show(#{fid}) Dom.hide(#{id})
- blur() : void = if Dom.get_value(#{id}) == "" then fake() else real()
- finput = Dom.of_xhtml(<input id="{fid}" type="text" value="{init}" style="display:none" onfocus={_ -> _ = real() Dom.give_focus(#{id})} />)
- _ = Dom.put_after(#{id},finput)
- _ = Dom.bind(#{id},{blur},( _ -> blur()))
- _ = Dom.bind(#{id},{ready},( _ -> blur()))
- Scheduler.sleep(300,blur)
- else
- f() = if Dom.get_value(#{id}) == ""
- then Dom.set_value(#{id}, init)
- else void
- g() = if Dom.get_value(#{id}) == init
- then Dom.set_value(#{id}, "")
- else void
- _ = Dom.bind(#{id},{blur},(_ ->f() ))
- _ = Dom.bind(#{id},{focus},(_ -> g()))
- Scheduler.sleep(300,f)
- else void
-
- default_config = {
- login_text = "Login"
- login_label = none
- password_label = none
- login_placeholder = some("username")
- password_placeholder = some("password")
- style = WStyler.empty
- } : WLoginbox.config
-
- /* Set the username and password fields to [username_init] and
+ place_holder(_id,_init,_is_password)(_)= void
+// if false //not(Dom.Support.placeholder())
+// then
+// if is_password
+// then
+// fid = "{id}_placeholder"
+// real() : void = do Dom.hide(#{fid}) Dom.show(#{id})
+// fake() : void = do Dom.show(#{fid}) Dom.hide(#{id})
+// blur() : void = if Dom.get_value(#{id}) == "" then fake() else real()
+// finput = Dom.of_xhtml(<input id="{fid}" type="text" value="{init}" style="display:none" onfocus={_ -> _ = real() Dom.give_focus(#{id})} />)
+// _ = Dom.put_after(#{id},finput)
+// _ = Dom.bind(#{id},{blur},( _ -> blur()))
+// _ = Dom.bind(#{id},{ready},( _ -> blur()))
+// Scheduler.sleep(300,blur)
+// else
+// f() = if Dom.get_value(#{id}) == ""
+// then Dom.set_value(#{id}, init)
+// else void
+// g() = if Dom.get_value(#{id}) == init
+// then Dom.set_value(#{id}, "")
+// else void
+// _ = Dom.bind(#{id},{blur},(_ ->f() ))
+// _ = Dom.bind(#{id},{focus},(_ -> g()))
+// Scheduler.sleep(300,f)
+// else void
+
+ /**
+ * Set the username and password fields to [username_init] and
* [password_init] values as an hint to the user. The fields are cleared when
* focused, and the password field, initially set to 'text' type (to make the
* hint visible), is turned to a real 'password' type field.
@@ -142,6 +154,7 @@ WLoginbox =
{some=s} -> <label for={password_id}>{s}</label>
{none} -> <></>}
<input id={password_id} type="password" autocomplete="on" name="{password_id}" placeholder="{init_password}" onready={place_holder(password_id,init_password,true)} />
+ {match config.password_help {some=ph} -> ph {none} -> <></>}
<input type="submit" value="{config.login_text}" />
</span>
</form>
@@ -151,32 +164,34 @@ WLoginbox =
// Login XHTML chunk itself
<div id={id}>
{login_form(lg_ph, ps_ph)}
- <span id={logged_id}>
- {usr_opt ? <></>}
- </span>
- <span id={unlogged_id}>
- </span>
- </div>
- |> WStyler.add(config.style, _)
+ {<span id={logged_id}>{usr_opt ? <></>}</span> |> WStyler.add(config.stylers.logged_box, _)}
+ {<span id={unlogged_id}/> |> WStyler.add(config.stylers.unlogged_box, _)}
+ </div> |> WStyler.add(config.stylers.login_box, _)
+ // FIXME: we should use config (pass it in parameter), but we need for that to modify CLogin also...
@client
set_logged_in(id: string, message: xhtml): void =
logged_id = get_logged_id(id)
d = Dom.unsplit([Dom.select_id(get_unlogged_id(id)), Dom.select_id(get_not_logged_id(id))])
- _ = Dom.transition(d, Dom.Effect.with_duration({millisec = fading_time}, Dom.Effect.hide()))
+ //_ = Dom.transition(d, Dom.Effect.with_duration({millisec = config.fading_time}, Dom.Effect.hide()))
+ _ = Dom.hide(d)
do Dom.transform([#{logged_id} <- message])
- _ = Dom.transition(#{logged_id}, Dom.Effect.with_duration({millisec = fading_time}, Dom.Effect.show()))
- do init_login(id, "username", "password")
+ //_ = Dom.transition(#{logged_id}, Dom.Effect.with_duration({millisec = config.fading_time}, Dom.Effect.show()))
+ _ = Dom.show(#{logged_id})
+ do init_login(id, default_config.login_placeholder?"", default_config.password_placeholder?"")
void
+ // FIXME: we should use config (pass it in parameter), but we need for that to modify CLogin also...
@client
set_logged_out(id: string, message:xhtml): void =
logged_id = get_logged_id(id)
unlogged_id = get_unlogged_id(id)
- _ = Dom.transition(#{logged_id}, Dom.Effect.with_duration({millisec = fading_time}, Dom.Effect.hide()))
+ //_ = Dom.transition(#{logged_id}, Dom.Effect.with_duration({millisec = config.fading_time}, Dom.Effect.hide()))
+ _ = Dom.hide(#{logged_id})
do Dom.transform([#{unlogged_id} <- message])
d = Dom.unsplit([Dom.select_id(unlogged_id), Dom.select_id(get_not_logged_id(id))])
- _ = Dom.transition(d, Dom.Effect.with_duration({millisec = fading_time}, Dom.Effect.show()))
+ //_ = Dom.transition(d, Dom.Effect.with_duration({millisec = config.fading_time}, Dom.Effect.show()))
+ _ = Dom.show(d)
_ = Dom.remove(#{get_logged_user_id(id)})
void

0 comments on commit 97200c7

Please sign in to comment.