getaddress-autocomplete-modal
Version:
GetAddress.io - Autocomplete modal plug-in
169 lines • 7.58 kB
JavaScript
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
import { Debug } from "./Debug.js";
export default class Input {
constructor(client, modal, suggestionList, attributeValues, historyList) {
this.client = client;
this.modal = modal;
this.suggestionList = suggestionList;
this.attributeValues = attributeValues;
this.historyList = historyList;
this.input = document.createElement('INPUT');
this.element = this.input;
this.handlePaste = (event) => {
this.populateList(true);
};
this.clear = () => {
this.element.value = '';
this.suggestionList.clear();
this.historyList.populate();
};
this.focus = () => {
this.element.focus();
};
this.value = () => {
return this.element.value;
};
this.setValue = (value) => {
if (value) {
this.element.value = value;
this.dispatchInput();
this.populateList(true);
}
else {
this.historyList.populate();
}
};
this.hasMinimumCharacters = () => {
var _a, _b;
var minimumCharacters = (_b = (_a = this.attributeValues.options) === null || _a === void 0 ? void 0 : _a.minimum_characters) !== null && _b !== void 0 ? _b : 2;
return this.element.value.length >= minimumCharacters;
};
this.getSuggestions = () => __awaiter(this, void 0, void 0, function* () {
var _a;
const autocompleteOptions = {
all: true,
top: this.attributeValues.options.suggestion_count,
template: this.attributeValues.options.suggestion_template
};
if (this.attributeValues.options.filter) {
autocompleteOptions.filter = this.attributeValues.options.filter;
}
if (this.attributeValues.options.show_postcode) {
autocompleteOptions.show_postcode = this.attributeValues.options.show_postcode;
}
const query = (_a = this.element.value) === null || _a === void 0 ? void 0 : _a.trim();
if (!query) {
return [];
}
const result = yield this.client.autocomplete(query, autocompleteOptions);
if (!result.isSuccess) {
const failed = result.toFailed();
this.modal.dispatchSuggestionsFailed(query, failed.status, failed.message);
return [];
}
const success = result.toSuccess();
const suggestions = success.suggestions;
for (let suggestion of suggestions) {
suggestion.address = this.highlightSuggestion(suggestion.address);
}
this.modal.dispatchSuggestions(query, suggestions);
return success.suggestions;
});
this.highlightSuggestion = (address) => {
if (this.attributeValues.options.highlight_suggestion
&& this.element.value
&& this.attributeValues.options.highlight_suggestion_start_tag
&& this.attributeValues.options.highlight_suggestion_end_tag) {
let regexvalue = this.element.value.trim().replace(/ /g, ',* +');
const regexp = new RegExp(`\\b(${regexvalue})`, "gi");
address = address.replace(regexp, `${this.attributeValues.options.highlight_suggestion_start_tag}$1${this.attributeValues.options.highlight_suggestion_end_tag}`);
}
return address;
};
this.keyDownHandler = (event) => {
switch (event.key) {
case "Enter":
this.handleEnterKey(event);
break;
default:
this.handleKeyDownDefault(event);
break;
}
};
this.handleEnterKey = (event) => {
this.modal.close();
event.preventDefault();
};
this.handleKeyDownDefault = (event) => {
Debug.Log(this.attributeValues, event);
let isPrintableKey = (event.key.length === 1 || event.key === 'Unidentified');
this.populateList(isPrintableKey);
};
this.handleKeyUp = (event) => {
Debug.Log(this.attributeValues, event);
const isPrintableKey = event.key === 'Backspace' || event.key === 'Delete';
this.populateList(isPrintableKey);
};
this.populateList = (isPrintableKey) => {
if (isPrintableKey) {
clearTimeout(this.filterTimer);
this.filterTimer = setTimeout(() => __awaiter(this, void 0, void 0, function* () {
if (this.hasMinimumCharacters()) {
const suggestions = yield this.getSuggestions();
this.suggestionList.populate(suggestions);
}
else {
this.suggestionList.clear();
}
}), this.attributeValues.options.delay);
}
else if (!this.hasMinimumCharacters()) {
this.suggestionList.clear();
}
if (this.element.value.length === 0) {
this.historyList.populate();
}
else {
this.historyList.clear();
}
};
this.build();
}
build() {
this.input.classList.add(this.attributeValues.inputClassName);
if (this.attributeValues.options.placeholder !== undefined) {
this.input.setAttribute('placeholder', this.attributeValues.options.placeholder);
}
this.input.setAttribute('type', 'text');
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.suggestionList.element.id);
this.input.addEventListener('paste', this.handlePaste);
this.input.addEventListener('keydown', this.keyDownHandler);
this.input.addEventListener('keyup', this.handleKeyUp);
}
destroy() {
this.input.classList.remove(this.attributeValues.inputClassName);
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('paste', this.handlePaste);
}
dispatchInput() {
const evt = new Event("input", { bubbles: true });
this.element.dispatchEvent(evt);
}
}
//# sourceMappingURL=Input.js.map