getaddress-autocomplete
Advanced tools
Comparing version 1.3.5 to 1.3.6
@@ -5,3 +5,2 @@ import AttributeValues from "./AttributeValues"; | ||
export default class Autocomplete { | ||
readonly input: HTMLInputElement; | ||
readonly client: Client; | ||
@@ -12,12 +11,10 @@ readonly output_fields: OutputFields; | ||
private blurTimer; | ||
private container; | ||
private list; | ||
private selectedIndex; | ||
private showAllClicked; | ||
private documentClick; | ||
constructor(input: HTMLInputElement, client: Client, output_fields: OutputFields, attributeValues: AttributeValues); | ||
private readonly input; | ||
private readonly list; | ||
private readonly container; | ||
constructor(inputElement: HTMLInputElement, client: Client, output_fields: OutputFields, attributeValues: AttributeValues); | ||
destroy(): void; | ||
private destroyList; | ||
private destroyContainer; | ||
private destroyInput; | ||
private onInputFocus; | ||
@@ -28,3 +25,5 @@ private onInputPaste; | ||
private onContainerFocusOut; | ||
build(): void; | ||
private build; | ||
private onListClick; | ||
private onListMouseEnter; | ||
private debug; | ||
@@ -49,8 +48,2 @@ keyDownHandler: (event: KeyboardEvent) => void; | ||
populateList: (show_all?: boolean) => Promise<void>; | ||
private addContainerFocusedClassNames; | ||
private removeContainerFocusedClassNames; | ||
private addInputShowClassNames; | ||
private removeInputShowClassNames; | ||
private removeListShowAllClassNames; | ||
private addListShowAllClassNames; | ||
clearList: () => void; | ||
@@ -57,0 +50,0 @@ getListItem: (index: number, suggestion: Suggestion, length: number) => HTMLElement; |
@@ -12,16 +12,16 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { | ||
import { Options } from "./Options"; | ||
import Input from "./Input"; | ||
import List from "./List"; | ||
import Container from "./Container"; | ||
export default class Autocomplete { | ||
constructor(input, client, output_fields, attributeValues) { | ||
this.input = input; | ||
constructor(inputElement, client, output_fields, attributeValues) { | ||
this.client = client; | ||
this.output_fields = output_fields; | ||
this.attributeValues = attributeValues; | ||
this.container = undefined; | ||
this.list = undefined; | ||
this.selectedIndex = -1; | ||
this.showAllClicked = false; | ||
this.onInputFocus = (event) => { | ||
this.addContainerFocusedClassNames(); | ||
this.container.addFocusedClassNames(); | ||
if (this.attributeValues.options.select_on_focus) { | ||
this.input.select(); | ||
this.input.element.select(); | ||
} | ||
@@ -44,2 +44,19 @@ this.selectedIndex = -1; | ||
}; | ||
this.onListClick = (event) => { | ||
if (event.target !== this.list.element) { | ||
const suggestions = Array.from(this.list.element.children); | ||
if (suggestions.length) { | ||
var element = event.target; | ||
while (element instanceof HTMLElement && element.tagName !== "LI") { | ||
element = element.parentElement; | ||
} | ||
const suggestionIndex = suggestions.indexOf(element); | ||
this.handleSuggestionSelected(event, suggestionIndex); | ||
} | ||
} | ||
}; | ||
this.onListMouseEnter = (event) => { | ||
const suggestions = this.list.element.children; | ||
this.removeSuggestionFocusedClassName(suggestions); | ||
}; | ||
this.debug = (data) => { | ||
@@ -82,3 +99,3 @@ if (this.attributeValues.options.debug) { | ||
this.handlePageUpKey = (event) => { | ||
if (this.list !== undefined && !this.list.hidden) { | ||
if (!this.list.element.hidden) { | ||
event.preventDefault(); | ||
@@ -89,9 +106,9 @@ this.setSuggestionFocus(event, 0); | ||
this.handlePageDownKey = (event) => { | ||
if (this.list !== undefined && !this.list.hidden) { | ||
if (!this.list.element.hidden) { | ||
event.preventDefault(); | ||
this.setSuggestionFocus(event, this.list.children.length - 1); | ||
this.setSuggestionFocus(event, this.list.element.children.length - 1); | ||
} | ||
}; | ||
this.handleHomeKey = (event) => { | ||
if (this.list !== undefined && !this.list.hidden && event.target !== this.input) { | ||
if (!this.list.element.hidden && event.target !== this.input.element) { | ||
event.preventDefault(); | ||
@@ -108,4 +125,3 @@ this.setSuggestionFocus(event, 0); | ||
activeElem && | ||
this.container !== undefined && | ||
this.container.contains(activeElem)) { | ||
this.container.element.contains(activeElem)) { | ||
return; | ||
@@ -115,3 +131,3 @@ } | ||
this.clearList(); | ||
this.removeContainerFocusedClassNames(); | ||
this.container.removeFocusedClassNames(); | ||
} | ||
@@ -122,4 +138,4 @@ this.showAllClicked = false; | ||
this.handleEndKey = (event) => { | ||
if (this.list !== undefined && !this.list.hidden) { | ||
const suggestions = this.list.children; | ||
if (!this.list.element.hidden) { | ||
const suggestions = this.list.element.children; | ||
if (suggestions.length) { | ||
@@ -132,3 +148,3 @@ event.preventDefault(); | ||
this.handleEnterKey = (event) => { | ||
if (this.list !== undefined && !this.list.hidden) { | ||
if (!this.list.element.hidden) { | ||
event.preventDefault(); | ||
@@ -144,3 +160,3 @@ if (this.selectedIndex > -1) { | ||
if (this.selectedIndex > -1 && this.list !== undefined) { | ||
const suggestions = this.list.children; | ||
const suggestions = this.list.element.children; | ||
const suggestion = suggestions[this.selectedIndex]; | ||
@@ -150,3 +166,3 @@ if (suggestion.innerText === this.attributeValues.options.show_all_for_postcode_text) { | ||
this.populateList(true); | ||
this.input.focus(); | ||
this.input.element.focus(); | ||
} | ||
@@ -167,6 +183,6 @@ else if (!this.attributeValues.options.enable_get) { | ||
this.bind(success.address); | ||
AddressSelectedEvent.dispatch(this.input, id, success.address); | ||
AddressSelectedEvent.dispatch(this.input.element, id, success.address); | ||
if (this.attributeValues.options.input_focus_on_select) { | ||
this.input.focus(); | ||
this.input.setSelectionRange(this.input.value.length, this.input.value.length + 1); | ||
this.input.element.focus(); | ||
this.input.setSelectionRange(); | ||
} | ||
@@ -176,3 +192,3 @@ } | ||
const failed = addressResult.toFailed(); | ||
AddressSelectedFailedEvent.dispatch(this.input, id, failed.status, failed.message); | ||
AddressSelectedFailedEvent.dispatch(this.input.element, id, failed.status, failed.message); | ||
} | ||
@@ -232,3 +248,3 @@ } | ||
this.filterTimer = setTimeout(() => { | ||
if (this.attributeValues.options.minimum_characters && this.input.value.length >= this.attributeValues.options.minimum_characters) { | ||
if (this.attributeValues.options.minimum_characters && this.input.hasMinimumCharacters()) { | ||
this.populateList(); | ||
@@ -241,3 +257,3 @@ } | ||
} | ||
else if (this.attributeValues.options.minimum_characters && this.list !== undefined && !this.list.hidden && this.input.value.length < this.attributeValues.options.minimum_characters) { | ||
else if (this.attributeValues.options.minimum_characters && !this.list.element.hidden && !this.input.hasMinimumCharacters()) { | ||
this.clearList(); | ||
@@ -250,4 +266,4 @@ } | ||
const target = event.target; | ||
if (target == this.input) { | ||
if (this.attributeValues.options.minimum_characters && this.input.value.length < this.attributeValues.options.minimum_characters) { | ||
if (target == this.input.element) { | ||
if (this.attributeValues.options.minimum_characters && !this.input.hasMinimumCharacters()) { | ||
this.clearList(); | ||
@@ -259,5 +275,5 @@ } | ||
} | ||
else if (this.container !== undefined && this.container.contains(target)) { | ||
this.input.focus(); | ||
this.input.setSelectionRange(this.input.value.length, this.input.value.length + 1); | ||
else if (this.container.element.contains(target)) { | ||
this.input.element.focus(); | ||
this.input.setSelectionRange(); | ||
} | ||
@@ -269,3 +285,3 @@ } | ||
event.preventDefault(); | ||
if (this.list !== undefined && !this.list.hidden) { | ||
if (!this.list.element.hidden) { | ||
if (this.selectedIndex < 0) { | ||
@@ -280,25 +296,23 @@ this.setSuggestionFocus(event, 0); | ||
this.setSuggestionFocus = (event, index) => { | ||
if (this.list !== undefined) { | ||
const suggestions = this.list.children; | ||
this.removeSuggestionFocusedClassName(suggestions); | ||
if (index < 0 || !suggestions.length) { | ||
this.selectedIndex = -1; | ||
if (event && event.target !== this.input) { | ||
this.input.focus(); | ||
} | ||
return; | ||
const suggestions = this.list.element.children; | ||
this.removeSuggestionFocusedClassName(suggestions); | ||
if (index < 0 || !suggestions.length) { | ||
this.selectedIndex = -1; | ||
if (event && event.target !== this.input.element) { | ||
this.input.element.focus(); | ||
} | ||
if (index >= suggestions.length) { | ||
this.selectedIndex = suggestions.length - 1; | ||
this.setSuggestionFocus(event, this.selectedIndex); | ||
return; | ||
} | ||
const focusedSuggestion = suggestions[index]; | ||
if (focusedSuggestion) { | ||
this.selectedIndex = index; | ||
this.addSuggestionFocusedClassName(focusedSuggestion); | ||
focusedSuggestion.focus(); | ||
return; | ||
} | ||
return; | ||
} | ||
if (index >= suggestions.length) { | ||
this.selectedIndex = suggestions.length - 1; | ||
this.setSuggestionFocus(event, this.selectedIndex); | ||
return; | ||
} | ||
const focusedSuggestion = suggestions[index]; | ||
if (focusedSuggestion) { | ||
this.selectedIndex = index; | ||
this.addSuggestionFocusedClassName(focusedSuggestion); | ||
focusedSuggestion.focus(); | ||
return; | ||
} | ||
this.selectedIndex = -1; | ||
@@ -325,10 +339,9 @@ }; | ||
} | ||
const query = (_b = this.input.value) === null || _b === void 0 ? void 0 : _b.trim(); | ||
const query = (_b = this.input.element.value) === null || _b === void 0 ? void 0 : _b.trim(); | ||
const result = yield this.client.autocomplete(query, autocompleteOptions); | ||
if (result.isSuccess && this.list !== undefined) { | ||
if (this.attributeValues.options.auto_calc_list_height && this.list !== undefined) { | ||
this.list.style.removeProperty('max-height'); | ||
if (result.isSuccess) { | ||
if (this.attributeValues.options.auto_calc_list_height) { | ||
this.list.element.style.removeProperty('max-height'); | ||
} | ||
//const computedListHeight = this.list.offsetHeight; | ||
const listChildCount = this.list.children.length; | ||
const listChildCount = this.list.element.children.length; | ||
const success = result.toSuccess(); | ||
@@ -346,7 +359,7 @@ const newItems = []; | ||
&& (success.suggestions.length) === autocompleteOptions.top) { | ||
const li = this.getShowAllListItem(this.list.children.length, totalLength); | ||
const li = this.getShowAllListItem(this.list.element.children.length, totalLength); | ||
newItems.push(li); | ||
} | ||
this.list.replaceChildren(...newItems); | ||
const toFocus = this.list.children[0]; | ||
this.list.element.replaceChildren(...newItems); | ||
const toFocus = this.list.element.children[0]; | ||
if (toFocus) { | ||
@@ -356,14 +369,14 @@ this.selectedIndex = 0; | ||
} | ||
this.addInputShowClassNames(); | ||
this.list.hidden = false; | ||
this.input.setAttribute('aria-expanded', 'true'); | ||
this.list.setAttribute('aria-hidden', 'false'); | ||
this.input.addInputShowClassNames(); | ||
this.list.element.hidden = false; | ||
this.input.element.setAttribute('aria-expanded', 'true'); | ||
this.list.element.setAttribute('aria-hidden', 'false'); | ||
if (show_all) { | ||
this.addListShowAllClassNames(); | ||
this.list.addShowAllClassNames(); | ||
} | ||
if (show_all && | ||
this.attributeValues.options.auto_calc_list_height | ||
&& this.list.offsetHeight > 0 | ||
&& listChildCount < this.list.children.length) { | ||
this.list.style.maxHeight = `${this.list.offsetHeight}px`; | ||
&& this.list.element.offsetHeight > 0 | ||
&& listChildCount < this.list.element.children.length) { | ||
this.list.element.style.maxHeight = `${this.list.element.offsetHeight}px`; | ||
} | ||
@@ -375,75 +388,14 @@ document.addEventListener('click', this.documentClick); | ||
} | ||
SuggestionsEvent.dispatch(this.input, query, success.suggestions); | ||
SuggestionsEvent.dispatch(this.input.element, query, success.suggestions); | ||
} | ||
else { | ||
const failed = result.toFailed(); | ||
SuggestionsFailedEvent.dispatch(this.input, query, failed.status, failed.message); | ||
SuggestionsFailedEvent.dispatch(this.input.element, query, failed.status, failed.message); | ||
} | ||
}); | ||
this.addContainerFocusedClassNames = () => { | ||
if (this.container !== undefined) { | ||
this.container.classList.add(this.attributeValues.containerFocusedClassName); | ||
if (this.attributeValues.containerFocusedAdditionalClassNames) { | ||
for (const name of this.attributeValues.containerFocusedAdditionalClassNames) { | ||
this.container.classList.add(name); | ||
} | ||
} | ||
} | ||
}; | ||
this.removeContainerFocusedClassNames = () => { | ||
if (this.container !== undefined) { | ||
this.container.classList.remove(this.attributeValues.containerFocusedClassName); | ||
if (this.attributeValues.containerFocusedAdditionalClassNames) { | ||
for (const name of this.attributeValues.containerFocusedAdditionalClassNames) { | ||
this.container.classList.remove(name); | ||
} | ||
} | ||
} | ||
}; | ||
this.addInputShowClassNames = () => { | ||
this.input.classList.add(this.attributeValues.inputShowClassName); | ||
if (this.attributeValues.inputShowAdditionalClassNames) { | ||
for (const name of this.attributeValues.inputShowAdditionalClassNames) { | ||
this.input.classList.add(name); | ||
} | ||
} | ||
}; | ||
this.removeInputShowClassNames = () => { | ||
this.input.classList.remove(this.attributeValues.inputShowClassName); | ||
if (this.attributeValues.inputShowAdditionalClassNames) { | ||
for (const name of this.attributeValues.inputShowAdditionalClassNames) { | ||
this.input.classList.remove(name); | ||
} | ||
} | ||
}; | ||
this.removeListShowAllClassNames = () => { | ||
if (this.list !== undefined) { | ||
this.list.classList.remove(this.attributeValues.listShowAllClassName); | ||
if (this.attributeValues.listShowAllAdditionalClassNames) { | ||
for (const name of this.attributeValues.listShowAllAdditionalClassNames) { | ||
this.list.classList.remove(name); | ||
} | ||
} | ||
} | ||
}; | ||
this.addListShowAllClassNames = () => { | ||
if (this.list !== undefined) { | ||
this.list.classList.add(this.attributeValues.listShowAllClassName); | ||
if (this.attributeValues.listShowAllAdditionalClassNames) { | ||
for (const name of this.attributeValues.listShowAllAdditionalClassNames) { | ||
this.list.classList.add(name); | ||
} | ||
} | ||
} | ||
}; | ||
this.clearList = () => { | ||
if (this.list !== undefined) { | ||
this.list.replaceChildren(...[]); | ||
this.list.hidden = true; | ||
this.list.setAttribute('aria-hidden', 'true'); | ||
} | ||
this.input.setAttribute('aria-expanded', 'false'); | ||
this.list.clear(); | ||
this.input.element.setAttribute('aria-expanded', 'false'); | ||
this.selectedIndex = -1; | ||
this.removeInputShowClassNames(); | ||
this.removeListShowAllClassNames(); | ||
this.input.removeInputShowClassNames(); | ||
document.removeEventListener('click', this.documentClick); | ||
@@ -463,3 +415,3 @@ }; | ||
if (this.attributeValues.options.highlight_suggestion) { | ||
let regexvalue = this.input.value.trim().replace(/ /g, ',* +'); | ||
let regexvalue = this.input.element.value.trim().replace(/ /g, ',* +'); | ||
const regexp = new RegExp(`\\b(${regexvalue})`, "gi"); | ||
@@ -506,104 +458,23 @@ address = address.replace(regexp, `${this.attributeValues.options.highlight_suggestion_start_tag}$1${this.attributeValues.options.highlight_suggestion_end_tag}`); | ||
}; | ||
this.input = new Input(inputElement, attributeValues, this.onInputFocus, this.onInputPaste); | ||
this.list = new List(attributeValues, this.onListMouseEnter, this.onListClick); | ||
this.container = new Container(attributeValues, this.onContainerKeyDown, this.onContainerKeyUp, this.onContainerFocusOut); | ||
this.build(); | ||
} | ||
destroy() { | ||
this.destroyContainer(); | ||
this.destroyInput(); | ||
this.destroyList(); | ||
this.container.destroy(); | ||
this.input.destroy(); | ||
this.list.destroy(); | ||
} | ||
destroyList() { | ||
if (this.list !== undefined) { | ||
this.list.remove(); | ||
} | ||
} | ||
destroyContainer() { | ||
if (this.container !== undefined) { | ||
this.container.removeEventListener('keydown', this.onContainerKeyDown); | ||
this.container.removeEventListener('keyup', this.onContainerKeyUp); | ||
this.container.removeEventListener('focusout', this.onContainerFocusOut); | ||
const children = Array.from(this.container.childNodes); | ||
this.container.replaceWith(...children); | ||
} | ||
} | ||
destroyInput() { | ||
this.input.classList.remove(this.attributeValues.inputClassName); | ||
if (this.attributeValues.inputAdditionalClassNames) { | ||
for (const name of this.attributeValues.inputAdditionalClassNames) { | ||
this.input.classList.remove(name); | ||
} | ||
} | ||
this.removeInputShowClassNames(); | ||
this.input.removeAttribute('aria-expanded'); | ||
this.input.removeAttribute('autocomplete'); | ||
this.input.removeAttribute('aria-autocomplete'); | ||
this.input.removeAttribute('role'); | ||
this.input.removeAttribute('aria-owns'); | ||
this.input.removeEventListener('focus', this.onInputFocus); | ||
this.input.removeEventListener('paste', this.onInputPaste); | ||
} | ||
build() { | ||
var _a; | ||
this.documentClick = this.handleComponentBlur.bind(this); | ||
this.input.classList.add(this.attributeValues.inputClassName); | ||
if (this.attributeValues.inputAdditionalClassNames) { | ||
for (const name of this.attributeValues.inputAdditionalClassNames) { | ||
this.input.classList.add(name); | ||
} | ||
if (this.input.element.parentNode != null) { | ||
this.input.element.parentNode.insertBefore(this.container.element, this.input.element); | ||
} | ||
this.input.setAttribute('aria-expanded', 'false'); | ||
this.input.setAttribute('autocomplete', 'off'); | ||
this.input.setAttribute('aria-autocomplete', 'list'); | ||
this.input.setAttribute('role', 'combobox'); | ||
this.input.setAttribute('aria-owns', `${this.attributeValues.listId}`); | ||
this.container = document.createElement('DIV'); | ||
this.container.id = this.attributeValues.containerId; | ||
this.container.className = this.attributeValues.containerClassName; | ||
if (this.attributeValues.containerAdditionalClassNames) { | ||
for (const name of this.attributeValues.containerAdditionalClassNames) { | ||
this.container.classList.add(name); | ||
} | ||
} | ||
if (((_a = this.input) === null || _a === void 0 ? void 0 : _a.parentNode) != null) { | ||
this.input.parentNode.insertBefore(this.container, this.input); | ||
this.input.addEventListener('focus', this.onInputFocus); | ||
this.input.addEventListener('paste', this.onInputPaste); | ||
} | ||
this.container.addEventListener('focusout', this.onContainerFocusOut); | ||
this.container.appendChild(this.input); | ||
this.list = document.createElement('UL'); | ||
this.list.id = this.attributeValues.listId; | ||
this.list.hidden = true; | ||
this.list.className = this.attributeValues.listClassName; | ||
if (this.attributeValues.listAdditionalClassNames) { | ||
for (const name of this.attributeValues.listAdditionalClassNames) { | ||
this.list.classList.add(name); | ||
} | ||
} | ||
this.list.setAttribute('role', 'listbox'); | ||
this.list.setAttribute('aria-hidden', 'true'); | ||
this.list.addEventListener('mouseenter', (event) => { | ||
if (this.list !== undefined) { | ||
const suggestions = this.list.children; | ||
this.removeSuggestionFocusedClassName(suggestions); | ||
} | ||
}); | ||
this.list.addEventListener('click', (event) => { | ||
if (this.list !== undefined && event.target !== this.list) { | ||
const suggestions = Array.from(this.list.children); | ||
if (suggestions.length) { | ||
var element = event.target; | ||
while (element instanceof HTMLElement && element.tagName !== "LI") { | ||
element = element.parentElement; | ||
} | ||
const suggestionIndex = suggestions.indexOf(element); | ||
this.handleSuggestionSelected(event, suggestionIndex); | ||
} | ||
} | ||
}); | ||
this.container.addEventListener('keydown', this.onContainerKeyDown); | ||
this.container.addEventListener('keyup', this.onContainerKeyUp); | ||
this.container.appendChild(this.list); | ||
this.container.element.appendChild(this.input.element); | ||
this.container.element.appendChild(this.list.element); | ||
} | ||
handleUpKey(event) { | ||
event.preventDefault(); | ||
if (this.list !== undefined && !this.list.hidden) { | ||
if (!this.list.element.hidden) { | ||
this.setSuggestionFocus(event, this.selectedIndex - 1); | ||
@@ -610,0 +481,0 @@ } |
@@ -59,3 +59,2 @@ import Autocomplete from "./Autocomplete"; | ||
const autocomplete = new Autocomplete(textbox, client, outputFields, attributeValues); | ||
autocomplete.build(); | ||
if (index === 0) { | ||
@@ -62,0 +61,0 @@ const style = new Style(attributeValues); |
{ | ||
"name": "getaddress-autocomplete", | ||
"version": "1.3.5", | ||
"version": "1.3.6", | ||
"description": "GetAddress.io - Autocomplete plug-in", | ||
@@ -5,0 +5,0 @@ "main": "./lib/Index", |
@@ -94,3 +94,3 @@ Javascript - Autocomplete. | ||
list_width:undefined, /* if true, set the list width */ | ||
suggestion_count:6, /* number of retreived suggestions (max 20) */ | ||
suggestion_count:6, /* number of retreived suggestions */ | ||
auto_calc_list_height:true, /* if true, calculates the list's height */ | ||
@@ -97,0 +97,0 @@ suggestion_template:undefined, /* the suggestion template (see Autocomplete API)*/ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
95946
33
1131