ember-slack-search-input
v2.0.2
Published
Ember Slack Search Input addon
Downloads
29
Maintainers
Readme
ember-slack-search-input
Attempt to replicate slack search input field as ember addon.
Demo
Like search input field in slack, special keywords(modifiers) are used to filter out the search. This modifiers are passed as form of config object with options like:
configHash: {
"@": { // '@' is special key (modifier) which highlighted in input
type: 'list', // type of modifier (either list or date)
defaultHint: 'any user', // displayed when modifier is active but has no value
sectionTitle: 'Users', // used as header when all modifiers content displayed
content: [ // content to be used for displaying list
{value: 'abrahm', label: 'Abrahm Micanski' },
{value: 'lilly', label: 'Lilly Richards' },
{value: 'emma', label: 'Emma Roberts' },
]
},
"before:": {
type: 'date',
defaultHint: 'a date',
}
}
{{slack-search-input
placeholder='search for objects'
configHash=configHash
inputValue=''
isPopupHidden=false
maxlength=250
valueChange=(action 'searchValueChange')
modifierAutoComplete=(action 'modifierAutoComplete')
enter=(action 'search')
focus-in=(action 'inputFocusedIn')
focus-out=(action 'inputFocusedOut')
}}
There is also help popup which is displayed when user focuses input first time. The content of popup should be passed to slack-search-input
in block form.
{{#slack-search-input as |concatToInputValue|}}
<div class="help-title">
Search with Filters
</div>
<span class='help-text'>Narrow your search using filter <span onmousedown={{action concatToInputValue 'before:'}} class='modifier'>before:</span>, <span onmousedown={{action concatToInputValue 'channel:'}} class='modifier'>channel:</span> or <span onmousedown={{action concatToInputValue '@'}} class='modifier'>@</span>. Or press plus key <span onmousedown={{action concatToInputValue '+'}} class='modifier'>+</span> to get all available filters</span>
{{/slack-search-input}}
slack-search-input options
placeholder:String
Simple placeholder displayed when input has no value
configHash:Object
Config object used for getting modifiers
inputValue:String
Initial value of input
isPopupHidden:Boolean
Can be used to hide popups
maxlength:Number
Max character length of input
valueChange(newValue:String)
Fired when inputValue changes
modifierAutoComplete(newValue:String, modifierValue:Object)
Fired when modifier has valid value
escape()
Fired when the escape key is hit
Modifier Types
Currently two types of modifiers are supported list
and date
:
- Date - Date picker popup is showed when modifier is active.
- List - List is simple list of possible options
Deserialize Query String
Once you got query string, you can deserialze it to object.
import { deserializeQueryString } from `ember-slack-search-input`;
search() {
let queryString = get(this, 'queryString');
console.log(queryString) // `before:2000-23-23 lorem`
let modifiers = deserializeQueryString(queryString);
let before = modifiers['before:'];
let { model, fullText, modifier, value } = before[0]; //first occurance of `before:`
console.log(model); // moment date
console.log(fullText); // before:2000-23-23
console.log(modifier); // before:
console.log(value); // 2000-23-23
}
Requirements
Currently addon styles has hard dependency on bootstrap 3.x.x
, bootstrap should be installed already to styles work properly.
For input field to react properly to paste/cut
events, they should be added to customEvents
hash in app.js
.
App = Ember.Application.extend({
customEvents: {
paste: "paste",
cut: "cut"
},
...
});
Installation
ember install ember-slack-search-input
TODO
- write more tests
- add more modifier types
- remove bootstrap dependency