Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Double click
<div {{ bind-attr class="placeholderClass :value" }} {{ action "open" }}>
{{ preview }}
<i class="icon icon-down"></i>
</div>
{{#if opened}}
<div class="collection">
<div class="icon-input">
{{ input value=query class="form-control input-sm" id="custom-select-filter" }}
<i class="icon icon-search"></i>
</div>
<ul>
{{#each option in options}}
<li {{ bind-attr class="option.active" }} {{ action 'select' option.label bubbles=false }}>{{ highlight-word option.label queryRegex }}</li>
{{/each}}
</ul>
<hr>
<div class="custom">Custom...</div>
</div>
{{/if}}
import Ember from 'ember';
var $ = Ember.$;
export default Ember.Component.extend({
classNameBindings: [ 'opened' ],
classNames: [ 'custom-select' ],
// Properties
index: null,
selected: null,
placeholderClass: 'placeholder',
opened: false,
query: '',
preview: function () {
if (this.get('selected')) {
this.set('placeholderClass', '');
return this.get('selected');
} else {
this.set('placeholderClass', 'placeholder');
return 'Select an organisation...';
}
}.property('selected'),
queryRegex: function () {
if (!Ember.isEmpty(this.get('query'))) {
return new RegExp(this.get('query'), 'i');
}
}.property('query'),
options: function () {
var collection = this.get('collection') || Ember.A(),
activeIndex = this.get('index'),
query = this.get('query'),
options;
options = collection.sortBy('label').map(function (item, index) {
return {
value: item.value,
label: item.label,
active: activeIndex === index ? 'active' : ''
};
});
if (!Ember.isEmpty(query)) {
query = query.toLowerCase();
options = options.filter(function (item) {
return item.label.toLowerCase().indexOf(query) > -1;
});
}
return options;
}.property('collection', 'index', 'query'),
// Observes
initEventsOnOpen: function () {
var self = this;
if (this.get('opened')) {
console.log("INIT EVENTS - ADD");
$('body').on('click.custom-select', function (e) {
if ($(e.target).closest('.custom-select').size() === 0) {
self.send('open');
}
});
} else {
console.log("INIT EVENTS - REMOVE");
$('body').off('click.custom-select');
}
}.observes('opened'),
// Methods
switchActive: function (dir) {
var index;
if (!Ember.isEmpty(this.get('index'))) {
index = this.get('index') + dir;
if (index > -1 && index < this.get('options.length')) {
this.set('index', index);
}
} else {
this.set('index', 0);
}
},
resetAttributes: function () {
console.log('CLOSING');
this.setProperties({
opened: false,
query: null,
index: null
});
},
eventManager: {
keyDown: function (e, view) {
console.log("KEYDOWN");
var parent = view.get('parentView');
// Arrow keys
if (e.keyCode === 38 || e.keyCode === 40) {
parent.switchActive(e.keyCode - 39);
e.preventDefault();
}
// Enter
if (e.keyCode === 13) {
if (!Ember.isEmpty(parent.get('index')) && parent.get('options').objectAt(parent.get('index'))) {
parent.set('selected', parent.get('options').objectAt(parent.get('index')).label);
}
parent.resetAttributes();
}
// Esc
if (e.keyCode === 27) {
parent.resetAttributes();
}
}
},
actions: {
open: function () {
console.log('OPEN');
var self = this;
this.toggleProperty('opened');
if (this.get('opened')) {
Ember.run.next(function () {
self.$('#custom-select-filter').focus();
});
} else {
this.resetAttributes();
}
},
select: function (label) {
console.log('SELECT');
this.set('selected', label);
this.resetAttributes();
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.