Skip to content

Instantly share code, notes, and snippets.

@gtb104
Last active April 17, 2018 17:21
Show Gist options
  • Save gtb104/3d59749b56d8886d993bec77dfc1815a to your computer and use it in GitHub Desktop.
Save gtb104/3d59749b56d8886d993bec77dfc1815a to your computer and use it in GitHub Desktop.
keyup Test
import Component from '@ember/component';
import { scheduleOnce } from '@ember/runloop';
import { isEmpty } from '@ember/utils';
import { computed } from '@ember/object';
export default Component.extend({
classNameBindings: ['isActive', ':pill-operator'],
isActive: false,
meta: null,
selection: null,
options: computed('meta', () => {
return [
{ displayName: '=', isExpensive: false, hasValue: true },
{ displayName: '!=', isExpensive: false, hasValue: true },
{ displayName: 'exists', isExpensive: false, hasValue: false },
{ displayName: '!exists', isExpensive: false, hasValue: false }
]
}),
didUpdateAttrs() {
this._super(...arguments);
if (this.get('isActive')) {
// We schedule this after render to give time for the power-select to
// be rendered before trying to focus on it.
scheduleOnce('afterRender', this, '_focusOnPowerSelectTrigger');
}
},
actions: {
onFocus(powerSelectAPI /* event */) {
powerSelectAPI.actions.open();
}
},
_focusOnPowerSelectTrigger() {
const trigger = this.element.querySelector('.ember-power-select-trigger input');
if (trigger) {
trigger.focus();
}
},
// Function that power-select uses to make an autosuggest match. This function
// looks at the operators's displayName property for a match.
_matcher: (o, input) => {
const _displayName = o.displayName.toLowerCase();
const _input = input.toLowerCase();
return _displayName.indexOf(_input);
}
});
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
meta: {
count: 0,
format: 'Text',
metaName: 'a',
flags: 1,
displayName: 'A'
},
keyup: () => {
console.log('keyup');
}
});
<textarea cols=10 rows=10>
{{my-operator isActive=true meta=meta}}
{{#if isActive}}
{{#power-select
allowClear=false
defaultHighlighted=undefined
extra=(hash labelPath='displayName')
initiallyOpened=false
matcher=_matcher
matchTriggerWidth=false
noMatchesMessage='All Operators Filtered out'
onfocus=(action 'onFocus')
options=options
selected=selection
as |operator|
}}
{{operator.displayName}}
{{/power-select}}
{{else}}
{{selection.displayName}}
{{/if}}
{
"version": "0.13.1",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "3.0.0",
"ember-template-compiler": "release",
"ember-testing": "release"
},
"addons": {
"ember-power-select": "1.10.4"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment