Skip to content

Instantly share code, notes, and snippets.

@barryofguilder
Last active April 19, 2016 15:07
Show Gist options
  • Save barryofguilder/25a135fedf0e6064330d9ffc4f985142 to your computer and use it in GitHub Desktop.
Save barryofguilder/25a135fedf0e6064330d9ffc4f985142 to your computer and use it in GitHub Desktop.
New Twiddle
import Ember from 'ember';
/* global $ */
// import layout from '../templates/components/ted-select';
export default Ember.Component.extend({
// layout: layout,
classNames: 'Ted-select',
selectClassNames: null,
content: Ember.A([]),
optionValueKey: 'id',
optionLabelKey: 'title',
optionDisabledKey: null,
selected: null,
prompt: 'Select an option',
sortBy: null,
multiple: false,
disabled: false,
sortArray: Ember.computed('sortBy', function(){
if (this.get('sortBy')){
return this.get('sortBy').replace(' ', '').split(',');
}
return [];
}),
sortedContent: Ember.computed.sort('content', 'sortArray'),
actions: {
onChange(target){
let value = $(target).val(),
selection;
//if multiple, .val() returns an array. if not, it's a single value
if (this.get('multiple')){
let values = Ember.A(value);
selection = this.get('content').filter(option => {
let optionVal = Ember.get(option, this.get('optionValueKey')).toString();
return values.contains(optionVal);
});
} else {
selection = this.get('content').find(option => {
return Ember.get(option, this.get('optionValueKey')).toString() === value;
});
}
if (this.attrs.onchange){
this.attrs.onchange(selection);
}
},
}
});
import Ember from 'ember';
let _options = Ember.A([{
id: 1, name: 'Option 1' }, {
id: 2, name: 'Option 2' }, {
id: 3, name: 'Option 3' }]);
export default Ember.Controller.extend({
appName: 'TED-select',
options: _options,
selectedOption1: _options[0],
selectedOption2: null,
filteredOptions1: Ember.computed('options.[]', 'selectedOption2', function() {
let selectedOption = this.get('selectedOption2.id');
console.log('recalculating options for dropdown 1');
return this.get('options').filter((option) => {
if (selectedOption !== option.id) {
console.log(`option ${option.id} is added`);
return true;
}
return false;
});
}),
filteredOptions2: Ember.computed('options.[]', 'selectedOption1', function() {
let selectedOption = this.get('selectedOption1.id');
console.log('recalculating options for dropdown 2');
return this.get('options').filter((option) => {
if (selectedOption !== option.id) {
console.log(`option ${option.id} is added`);
return true;
}
return false;
});
}),
actions: {
update1(selectedOption) {
this.set('selectedOption1', selectedOption);
},
update2(selectedOption) {
this.set('selectedOption2', selectedOption);
}
}
});
import Ember from 'ember';
export function tedSelectIsEqual([leftside, rightside]) {
return leftside === rightside;
}
export default Ember.Helper.helper(tedSelectIsEqual);
<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{ted-select
content=filteredOptions1
optionValueKey="id"
optionLabelKey="name"
onchange=(action "update1")
selected=selectedOption1
}}
<br>
{{ted-select
content=filteredOptions2
optionValueKey="id"
optionLabelKey="name"
onchange=(action "update2")
selected=selectedOption2
}}
<select
onchange={{action "onChange" value="target"}}
class={{selectClassNames}}
multiple={{multiple}}
disabled={{disabled}}>
{{#if prompt}}
<option
value=""
selected={{ted-select-is-equal null selected}}
class="Ted-select__prompt">
{{prompt}}
</option>
{{/if}}
{{#each sortedContent key="@index" as |option|}}
<option
value="{{get option optionValueKey}}"
selected={{ted-select-is-equal option selected}}
disabled={{get option optionDisabledKey}}>
{{get option optionLabelKey}}
</option>
{{/each}}
</select>
{
"version": "0.7.2",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.4/ember.debug.js",
"ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.4.3/ember-data.js",
"ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.4/ember-template-compiler.js",
"ember-ted-select": "2.0.1"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment