Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
122 lines (110 sloc) 3.68 KB
Edit mode for contact information
Provides the various input fields and some keyboard handling.
class window.DetailsEditor extends ContactDetails
left: [
{ html: "div", ref: "photoContainer", content:
{ html: "img", ref: "photo" }
control: BasicButton, ref: "buttonDelete", generic: false, content:
# Trash icon from Iconic icon set.
"<img src='resources/trash_stroke_16x16.png' title='Delete contact'/>"
main: [
control: ValidatingTextBox,
placeholder: "Name"
ref: "name"
required: true
validateOnBlur: false
validateOnSet: false
{ control: TextBox, ref: "email", class: "optional", placeholder: "Email" }
control: AutoSizeTextBox
ref: "address"
class: "optional"
minimumLines: 2
placeholder: "Address"
{ control: TextBox, ref: "phone", class: "optional", placeholder: "Phone" }
html: "div", ref: "buttonPanel", content: [
{ control: BasicButton, ref: "buttonSave", content: "Save", class: "prominent" }
{ control: BasicButton, ref: "buttonCancel", content: "Cancel" }
# Cancel any edit in progress.
cancel: ->
if @contact().isNew()
@trigger "cancel"
delete: ->
# Set the focus to the input or textarea with the given named field.
focusField: ( fieldName ) ->
control = @[ "$" + fieldName ]()
control.find( "input, textarea" ).andSelf().focus()
initialize: ->
# Wire up event handlers.
# The keyboard and click handlers triggered here in edit mode generally
# override the behavior provided by the overall card and the list box,
# hence the need to stop these events from propagating up.
@$buttonCancel().click ( event ) =>
@$buttonDelete().click ( event ) =>
@$buttonSave().click ( event ) =>
# In the keyboard handlers, we check to see if we're still visible before
# deciding whether to handle. Right after leaving edit mode, the keyboard
# focus may still be in one of this control's fields, even though this
# control itself is hidden.
@find( "input" ).keydown ( event ) =>
# Pressing Enter in single-line input fields saves the contact.
if @is( ":visible" ) and event.which == 13 # Enter
@keydown ( event ) =>
if @is( ":visible" )
if event.which == 27 # Esc
@$name().keyup ( event ) =>
if @is( ":visible" )
@find( ".optional, .optional input, .optional textarea" ).focus =>
# When focus moves into an optional field, validate the name field.
# We don't do this simply when the name field blurs, because then a click
# on Cancel would validate, and that'd be annoying.
@$name().validate true
name: ( name ) ->
result = super name
if name isnt undefined
# Save the contact data to the model.
save: ->
contact = @contact()
name: @name()
email: @email()
address: @address()
phone: @phone()
@trigger "save"
# If the user changed the name, the save() operation may cause the contact
# to be resorted, which will cause this card to be removed. So do the save
# last, and don't try to manipulate the card afterwards.
# See if we've got a valid contact
_validate: ->
@$buttonSave().disabled !@$name().valid()