custom form fields.js

/*
  Password text fields 
*/
NB.PasswordField = SC.TextField.extend({
  template: SC.Handlebars.compile('<input type="password">')
});


/*
  Text fields with variable type
*/
NB.TextField = SC.TextField.extend({
  type: 'text',
  template: SC.Handlebars.compile('<input {{bindAttr type="type"}}>')
});


/*
  Select list fields
*/
NB.SelectField = SC.TemplateCollectionView.extend({
  tagName: 'select',
  valueKey: 'id',
  titleKey: 'name',
  selection: null,
  template: SC.Handlebars.compile('<option value=""></option>'),
  
  value: function() {
    return this.getPath('selection.' + this.get('valueKey'));
  }.property('selection', 'valueKey'),
  
  didCreateLayer: function() {
    this.$().val(this.value());
    SC.Event.add(this.$(), 'change', this, this.domValueDidChange);
  },
  
  domValueDidChange: function() {
    SC.Event.trigger(this.$('option:selected'), 'selection');
  },
  
  viewValueDidChange: function() {
    var input = this.$(),
        value = this.get('value');

    if(value !== input.val()) {
      input.val(value);
    }
  }.observes('value'),
  
  itemViewTemplate: SC.Handlebars.compile('{{title}}'),
  
  itemView: SC.TemplateView.extend({
    tagName: 'option',

    value: function() {
      return this.getPath('content.' + this.getPath('parentView.valueKey'));
    }.property('content', 'valueKey').cacheable(),
    
    title: function() {
      return this.getPath('content.' + this.getPath('parentView.titleKey'));
    }.property('content', 'titleKey').cacheable(),
    
    renderContext: function(context) {
      return SC.RenderContext(context).attr('value', this.get('value'));
    },
    
    mouseDown: function() {}, // clicks weren't registering on the select without this
    
    didCreateLayer: function() {
      SC.Event.add(this.$(), 'selection', this, this.elementDidSelect);
    },
    
    elementDidSelect: function() {
      this.get('parentView').set('selection', this.get('content'));
    }
  })
});


/*
  Nested lists for use with jquery ui menu
*/
NB.FlyoutField = SC.TemplateView.extend({
  template: SC.Handlebars.compile('<a>{{buttonText}}</a>{{collection menu}}'),
  classNames: ['flyout'],
  
  target: null,
  action: null,
  
  titleKey: 'name',
  childrenKey: 'children',
  emptyText: 'Select',
  selection: null,
  
  buttonText: function() {
    var selection = this.get('selection');
    return selection ? selection.get(this.get('titleKey')) : this.get('emptyText');
  }.property('selection', 'titleKey', 'emptyText').cacheable(),

  selectionDidChange:function() {
    this.$('.ui-button').button('option', 'label', this.get('buttonText'));
  }.observes('selection'),
  
  menu: SC.TemplateCollectionView.extend({  
    contentBinding: '.parentView.content',
    
    itemViewTemplate: SC.Handlebars.compile('<a>{{title}}</a>{{collection submenu}}'),
    itemView: SC.TemplateView.extend({
      
      children: function() {
        return this.getPath('content.' + this.getPath('parentView.parentView.childrenKey'));
      }.property('parentView.parentView.childrenKey', 'content').cacheable(),

      title: function() {
        return this.getPath('content.' + this.getPath('parentView.parentView.titleKey'));
      }.property('parentView.parentView.titleKey', 'content').cacheable(),
      
      submenu: SC.TemplateCollectionView.extend({
        contentBinding: '.parentView.children',
        itemViewTemplate: SC.Handlebars.compile('<a>{{content.name}}</a>'),
        itemView: SC.TemplateView.extend(SC.DelegateSupport, {
          mouseUp: function() {
            var root = this.getPath('parentView.parentView.parentView.parentView'),
                content = this.get('content');
            this.set('selection', this.get('content'));
            root.$('.ui-menu:first').hide(); // ui menu will not close automatically without this for some reason
          }
        })
      })    
    })
  })
});