This repository has been archived by the owner on Nov 25, 2020. It is now read-only.
feat(project): add items bindable #2
Merged
Merged
Changes from all commits
Commits
Show all changes
10 commits
Select commit
Hold shift + click to select a range
ab34d06
feat(project): add items bindable
bas080 c2ba4ee
feat(auto-complete): ignore all but last find request
bas080 3dde726
fix(auto-complete): set autocomplete off
bas080 5c54b3c
fix(template): remove form-group div around input
bas080 ec26fb0
fix(view-model): set the initial text of input
bas080 11f9948
refactor(view-model): remove unused showResults view model property
bas080 e2958a0
fix(label-with-matches): only replace with strong is label returns a …
bas080 d8d8888
fix(view-model): overrule bootstrap.js' class open behavior
bas080 326fe13
refactor(click-event): use aurelia instead of addEventListener
bas080 aacbcf6
fix(component): make href inert
bas080 File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,14 +1,14 @@ | ||
import {inject, bindable, TaskQueue, bindingMode} from 'aurelia-framework'; | ||
import {Config} from 'aurelia-api'; | ||
import {logger} from '../aurelia-autocomplete'; | ||
import {DOM} from 'aurelia-pal'; | ||
import {resolvedView} from 'aurelia-view-manager'; | ||
import {computedFrom, inject, bindable, TaskQueue, bindingMode} from 'aurelia-framework'; | ||
import {Config} from 'aurelia-api'; | ||
import {logger} from '../aurelia-autocomplete'; | ||
import {DOM} from 'aurelia-pal'; | ||
import {resolvedView} from 'aurelia-view-manager'; | ||
|
||
@resolvedView('spoonx/auto-complete', 'autocomplete') | ||
@inject(DOM, Config, DOM.Element, TaskQueue) | ||
export class AutoCompleteCustomElement { | ||
|
||
showResults = false; | ||
lastFindPromise; | ||
|
||
// the query string is set after selecting an option. To avoid this | ||
// triggering a new query we set the justSelected to true. When true it will | ||
|
@@ -20,12 +20,16 @@ export class AutoCompleteCustomElement { | |
liEventListeners = []; | ||
|
||
//the max amount of results to return. (optional) | ||
@bindable limit; | ||
@bindable limit = 10; | ||
|
||
//the string that is appended to the api endpoint. e.g. api.com/language. | ||
//language is the resource. | ||
@bindable resource; | ||
|
||
// used when one already has a list of items to filter on. Requests is not | ||
// necessary | ||
@bindable items; | ||
|
||
//the string to be used to do a contains search with. By default it will look | ||
//if the name contains this value | ||
@bindable search = ''; | ||
|
@@ -64,10 +68,13 @@ export class AutoCompleteCustomElement { | |
} | ||
|
||
bind() { | ||
if (!this.resource) { | ||
return logger.error('auto complete requires resource to be defined'); | ||
if (!this.resource && !this.items) { | ||
return logger.error('auto complete requires resource or items bindable to be defined'); | ||
} | ||
|
||
this.search = this.label(this.value); | ||
this.justSelected = true; | ||
|
||
this.apiEndpoint = this.apiEndpoint.getEndpoint(this.endpoint); | ||
} | ||
|
||
|
@@ -125,35 +132,35 @@ export class AutoCompleteCustomElement { | |
} | ||
|
||
/** | ||
* returns HTML that wraps matching substrings with strong tags | ||
* returns HTML that wraps matching substrings with strong tags. | ||
* If not a "stringable" it returns an empty string. | ||
* | ||
* @param {Object} result | ||
* | ||
* @returns {String} | ||
*/ | ||
labelWithMatches(result) { | ||
return this.label(result).replace( | ||
new RegExp(this.search, 'gi'), | ||
match => { | ||
return `<strong>${match}</strong>`; | ||
}); | ||
let label = this.label(result); | ||
|
||
if (!label.replace) { | ||
return ''; | ||
} | ||
|
||
return label.replace(this.regex, match => { | ||
return `<strong>${match}</strong>`; | ||
}); | ||
} | ||
|
||
/** | ||
* Prepares the DOM by adding event listeners | ||
*/ | ||
attached() { | ||
this.inputElement = this.element.querySelectorAll('input')[0]; | ||
this.dropdownElement = this.element.querySelectorAll('#dropdown')[0]; | ||
this.dropdownElement = this.element.querySelectorAll('.dropdown.open')[0]; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Why is this still needed? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Because bootstrap.js will add and remove the open class for you |
||
|
||
let openDropdown = (show = true) => { | ||
this.showResults = show; | ||
}; | ||
|
||
this.inputElement.addEventListener('focus', openDropdown); | ||
this.inputElement.addEventListener('click', openDropdown); | ||
|
||
this.inputElement.addEventListener('blur', () => openDropdown(false)); | ||
this.registerKeyDown(this.inputElement, '*', event => { | ||
this.dropdownElement.className = 'dropdown open'; | ||
}); | ||
|
||
this.registerKeyDown(this.inputElement, 'down', event => { | ||
this.selected = this.nextFoundResult(this.selected); | ||
|
@@ -201,7 +208,6 @@ export class AutoCompleteCustomElement { | |
this.results = []; | ||
this.justSelected = true; | ||
this.search = this.label(this.value); | ||
this.showResults = false; | ||
} | ||
|
||
/** | ||
|
@@ -211,49 +217,76 @@ export class AutoCompleteCustomElement { | |
* @param {string} newValue | ||
* @param {string} oldValue | ||
* | ||
* @returns {void} | ||
* @returns {Promise} | ||
*/ | ||
searchChanged(newValue, oldValue) { | ||
if (!this.shouldPerformRequest()) { | ||
this.results = []; | ||
|
||
return; | ||
return Promise.resolve(); | ||
} | ||
|
||
return this.findResults(this.searchQuery(this.search)).then(results => { | ||
// when resource is not defined it will not perform a request. Instead it | ||
// will search for the first items that pass the predicate | ||
if (this.items) { | ||
this.results = this.sort(this.filter(this.items)); | ||
|
||
return Promise.resolve(); | ||
} | ||
|
||
this.lastFindPromise = this.findResults(this.searchQuery(this.search)).then(results => { | ||
if (this.lastFindPromise !== promise) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Can be removed I guess |
||
return; | ||
} | ||
|
||
this.lastFindPromise = false; | ||
|
||
this.results = this.sort(results); | ||
|
||
if (this.results.length !== 0) { | ||
this.selected = this.results[0]; | ||
this.value = this.selected; | ||
this.showResults = true; | ||
} | ||
}); | ||
} | ||
|
||
/** | ||
* when the results change, add the event listeners to the li items. | ||
* This has to be done because bootstrap will otherwise overrule the events | ||
* returns a list of length that is smaller or equal to the limit. The | ||
* default predicate is based on the regex | ||
* | ||
* @param {Object[]} items | ||
* | ||
* @returns {Object[]} | ||
*/ | ||
resultsChanged() { | ||
this.removeEventListeners(this.liEventListeners); | ||
this.liEventListeners = []; | ||
|
||
this.queue.queueTask(() => { | ||
this.element.querySelectorAll('li').forEach((li, index) => { | ||
let clickEventFunction = () => { | ||
this.onSelect(this.results[index]) | ||
}; | ||
|
||
li.addEventListener('click', clickEventFunction); | ||
|
||
this.liEventListeners.push({ | ||
callback : clickEventFunction, | ||
eventName: 'click', | ||
element : li | ||
}); | ||
}); | ||
filter(items) { | ||
let results = []; | ||
|
||
items.some(item => { | ||
// add an item if it matches | ||
if (this.itemMatches(item)) { | ||
results.push(item); | ||
} | ||
|
||
return (results.length >= this.limit) | ||
}); | ||
|
||
return results; | ||
} | ||
|
||
/** | ||
* returns true when the finding of matching results should continue | ||
* | ||
* @param {*} item | ||
* | ||
* @return {Boolean} | ||
*/ | ||
itemMatches(item) { | ||
return this.regex.test(this.label(item)); | ||
} | ||
|
||
@computedFrom('search') | ||
get regex() { | ||
return new RegExp(this.search, 'gi'); | ||
} | ||
|
||
/** | ||
|
@@ -268,7 +301,7 @@ export class AutoCompleteCustomElement { | |
return false; | ||
} | ||
|
||
return this.search !== ''; | ||
return true; | ||
} | ||
|
||
/** | ||
|
@@ -299,6 +332,8 @@ export class AutoCompleteCustomElement { | |
where: mergedWhere | ||
}; | ||
|
||
// only assign limit to query if it is defined. Allows to default to server | ||
// limit when limit bindable is set to falsy value | ||
if (this.limit) { | ||
query.limit = this.limit; | ||
} | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sloppy code style