sproutcore custom fields.js

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

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

NB.SelectField = SC.TemplateCollectionView.extend({
  tagName: 'select',
  valueKey: 'id',
  titleKey: 'name',
  selected: null,
  
  value: function() {
    return this.getPath('selected.' + this.get('valueKey'));
  }.property('selected', 'valueKey'),
  
  didCreateLayer: function() {
    this.$().val(this.value());
    SC.Event.add(this.$(), 'change', this, this.domValueDidChange);
  },
  
  domValueDidChange: function() {
    SC.Event.trigger(this.$('option:selected'), 'selected');
  },
  
  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 without this
    
    didCreateLayer: function() {
      SC.Event.add(this.$(), 'selected', this, this.elementDidSelect);
    },
    
    elementDidSelect: function() {
      this.get('parentView').set('selected', this.get('content'));
    }
  })
});


NB.FlyoutField = SC.TemplateView.extend({
  template: SC.Handlebars.compile('<a>{{buttonText}}</a>{{collection menu}}'),
  classNames: ['flyout'],
  
  valueKey: 'id',
  titleKey: 'name',
  childrenKey: 'children',
  emptyText: 'Select',
  selected: null,
  
  buttonText: function() {
    var selection = this.get('selected');
    return selection ? selection.get(this.get('titleKey')) : this.get('emptyText');
  }.property('selected', 'titleKey', 'emptyText').cacheable(),
  
  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(),

      value: function() {
        return this.getPath('content.' + this.getPath('parentView.parentView.valueKey'));
      }.property('parentView.parentView.valueKey', '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({
          mouseUp: function() {
            var root = this.getPath('parentView.parentView.parentView.parentView');
            root.set('selected', this.get('content'));
            root.$('.ui-menu:first').hide(); // ui menu will not close automatically without this for some reason
          }
        })
      })    
    })
  })
});