unepwcmc/SAPI

// Select box utilizing Select2 functionality that overrides Ember.Select;
// Define view in the same way that you would an Ember.Select view. 
// Additional attributes supported are: width, allowClear, and closeOnSelect;
// Example view:
//                {{ view App.Select2 
//                     viewName="fieldValueSelect2"
//                     prompt="Please select a value list"
//                     contentBinding="controller.fieldValuesLists" 
//                     optionLabelPath="content.name"
//                     optionValuePath="content.id"
//                     selectionBinding="content.allowedValuesList"
//                     required="" }}
// 
// To enable routing upon selection of an item from Select2 box, subclass the 
// Select2 view and add the actions to the valueDidChange event:
//
//  App.ContainterSelect2 = App.Select2.extend({
//  
//  // bind change in selected portfolio to trigger routing 
//  // to show portfolio or portfolio list if null
//    valueDidChange: Ember.observer(function() {
//        this._super();
//        var selection = this.get('selection');
//        if (selection) {
//            console.log('select2 value changed to ' + selection.get('name'));
//          this.get('controller').transitionToRoute('container.show', selection);
//        } else {
//          this.get('controller').transitionToRoute('container.index');
//        }
//    }, 'value')
//});
//
// Author: http://github.com/aboma

Trade.Select2 = Ember.Select.extend({
  defaultTemplate: Ember.Handlebars.compile('<option>{{#if prompt}}{{unbound prompt}}{{/if}}</option>{{#each view.content}}{{view Ember.SelectOption contentBinding="this"}}{{/each}}'),
  attributeBindings: ['required'],
  required: false,
  width: 'resolve',
  allowClear: true,
  closeOnSelect: true,
  classNames: ['select2'],

  // initialize Select2 once view is inserted in DOM
  didInsertElement : function() {
    //this._super();
    var placeholderText = this.get('prompt') || '';
      if (!this.$().select2) 
        throw new Exception('select2 is required for Trade.Select2 control');
    this.$().select2({
      containerCssClass: 'select2-portfolio',
      placeholder: placeholderText,
      allowClear: this.get('allowClear'),
      closeOnSelect: this.get('closeOnSelect'),
      width: this.get('width')
    });
  },

  willDestroyElement : function() {
      //console.log('destroying select2');
      this.$().select2('destroy');
  },

  // when data is loaded, update select2 to show
  // this data
  itemsLoaded : function() {
    //console.log('select2 items loaded');
    Ember.run.sync();
    // trigger change event on selectbox once data
    // has been loaded to update options values
    Ember.run.next(this, function() {
      //console.log('updating select2 options list');
      // trigger change event on select2
      if (this.$())
        this.$().change();
    });
  }.observes('controller.content.isLoaded'),

  setSelectedValue: function(value) {
    if (!value) {
      //clear the selection + show placeholder again
      this.$().select2('data', null);
    } else {
      //console.log('setting select2 selected value to ' + value);
      this.$().select2('val', value);
    }
  },

  // observe controller selected content and update select2
  // selected item if selected item is changed on the 
  // controller and does not match currently selected value;
  // this occurs when the selected value is changed outside of
  // the control; must wait until next ember run since 
  // it seems that after create, a new item is not yet available
  // in the list to be selected
  setSelected : function() {
    var path = this.get('optionValuePath');
    var s = path.split('.');
    var fieldname = s[s.length-1];
    var fieldvalue = '';
    var selected = this.get('selection');
    var sel2Val = this.$().select2('val');
    if (selected) { 
      fieldvalue = selected.get(fieldname);
    }
    Ember.run.sync();
    // trigger change event on selectbox once data
    // has been loaded to update options values
    Ember.run.next(this, function() {
      this.setSelectedValue(fieldvalue);
    });
  }.observes('selection')
});