Skip to content

Commit

Permalink
fix: Fixed Localities API Samples style and dom elements Access
Browse files Browse the repository at this point in the history
  • Loading branch information
@gaelsimon
gaelsimon committed Feb 29, 2024
1 parent e6454fc commit e860d4f
Show file tree
Hide file tree
Showing 4 changed files with 99 additions and 42 deletions.
52 changes: 31 additions & 21 deletions samples/localities-api-autocomplete-advanced/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,10 @@ const woosmap_key = "YOUR_API_KEY";
let debouncedAutocomplete: (
...args: any[]
) => Promise<woosmap.map.localities.LocalitiesAutocompleteResponse>;

const inputElement = document.getElementById(
"autocomplete-input",
) as HTMLInputElement;
const suggestionsList = document.getElementById(
"suggestions-list",
) as HTMLUListElement;
const clearSearchBtn = document.getElementsByClassName(
"clear-searchButton",
)[0] as HTMLButtonElement;
const responseElement = document.getElementById(
"response-container",
) as HTMLElement;
let inputElement: HTMLInputElement;
let suggestionsList: HTMLUListElement;
let clearSearchBtn: HTMLButtonElement;
let responseElement: HTMLElement;

function init(): void {
if (inputElement && suggestionsList) {
Expand All @@ -34,7 +25,7 @@ function init(): void {
inputElement.value = "";
suggestionsList.style.display = "none";
clearSearchBtn.style.display = "none";
responseElement.innerHTML = "";
responseElement.style.display = "none";
inputElement.focus();
});
debouncedAutocomplete = debouncePromise(autocompleteAddress, 0);
Expand All @@ -54,9 +45,13 @@ function handleAutocomplete(): void {
.catch((error) =>
console.error("Error autocomplete localities:", error),
);
} else {
suggestionsList.style.display = "none";
clearSearchBtn.style.display = "none";
}
}
}

function displaySuggestions(
localitiesPredictions: woosmap.map.localities.LocalitiesPredictions[],
) {
Expand All @@ -80,6 +75,7 @@ function displaySuggestions(
}
}
}

function formatPredictionList(locality): string {
const prediction = locality;
const predictionClass = "no-viewpoint";
Expand All @@ -102,13 +98,16 @@ function formatPredictionList(locality): string {

return html;
}

function displayLocalitiesResponse(
selectedLocality: woosmap.map.localities.LocalitiesPredictions,
) {
if (responseElement) {
responseElement.innerHTML = `<code>${JSON.stringify(selectedLocality, null, 2)}</code>`;
responseElement.style.display = "block";
}
}

function bold_matched_substring(string: string, matched_substrings: string[]) {
matched_substrings = matched_substrings.reverse();
for (const substring of matched_substrings) {
Expand All @@ -125,6 +124,7 @@ function bold_matched_substring(string: string, matched_substrings: string[]) {
}
return string;
}

function autocompleteAddress(
input: string,
components: string,
Expand All @@ -146,6 +146,7 @@ function autocompleteAddress(
`https://api.woosmap.com/localities/autocomplete/?${buildQueryString(args)}`,
).then((response) => response.json());
}

function buildQueryString(params: object) {
const queryStringParts = [];

Expand All @@ -159,6 +160,7 @@ function buildQueryString(params: object) {
}
return queryStringParts.join("&");
}

type DebouncePromiseFunction<T, Args extends any[]> = (
...args: Args
) => Promise<T>;
Expand Down Expand Up @@ -195,14 +197,22 @@ function debouncePromise<T, Args extends any[]>(
};
}

init();
document.addEventListener("DOMContentLoaded", () => {
inputElement = document.getElementById(
"autocomplete-input",
) as HTMLInputElement;
suggestionsList = document.getElementById(
"suggestions-list",
) as HTMLUListElement;
clearSearchBtn = document.getElementsByClassName(
"clear-searchButton",
)[0] as HTMLButtonElement;
responseElement = document.getElementById(
"response-container",
) as HTMLElement;
init();
});

declare global {
interface Window {
init: () => void;
}
}
window.init = init;
// [END woosmap_localities_api_autocomplete_advanced]

export {};
21 changes: 18 additions & 3 deletions samples/localities-api-autocomplete-advanced/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,26 @@
@include meta.load-css("../../shared/scss/_autocomplete_input.scss");
@include meta.load-css("../../shared/scss/_autocomplete_list.scss");

#response-container {
margin-top: 70px;
body {
background-color: #eee;
overflow: auto;
}

pre {
display: none;
margin: 70px 10px;
padding: 10px;
border: 3px solid #c8c8c8;
background-color: white;
border-radius: 8px;
white-space: pre-wrap;
overflow-x: auto;
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
}


.bold {
font-weight: 700;
}
/* [END woosmap_localities_api_autocomplete_advanced] */

/* [END woosmap_localities_api_autocomplete_advanced] */
47 changes: 32 additions & 15 deletions samples/localities-api-autocomplete/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,10 @@ const woosmap_key = "YOUR_API_KEY";
let debouncedAutocomplete: (
...args: any[]
) => Promise<woosmap.map.localities.LocalitiesAutocompleteResponse>;

const inputElement = document.getElementById(
"autocomplete-input",
) as HTMLInputElement;
const suggestionsList = document.getElementById(
"suggestions-list",
) as HTMLUListElement;
const clearSearchBtn = document.getElementsByClassName(
"clear-searchButton",
)[0] as HTMLButtonElement;
const responseElement = document.getElementById(
"response-container",
) as HTMLElement;
let inputElement: HTMLInputElement;
let suggestionsList: HTMLUListElement;
let clearSearchBtn: HTMLButtonElement;
let responseElement: HTMLElement;

function init(): void {
if (inputElement && suggestionsList) {
Expand All @@ -34,7 +25,7 @@ function init(): void {
inputElement.value = "";
suggestionsList.style.display = "none";
clearSearchBtn.style.display = "none";
responseElement.innerHTML = "";
responseElement.style.display = "none";
inputElement.focus();
});

Expand All @@ -55,9 +46,13 @@ function handleAutocomplete(): void {
.catch((error) =>
console.error("Error autocomplete localities:", error),
);
} else {
suggestionsList.style.display = "none";
clearSearchBtn.style.display = "none";
}
}
}

function displaySuggestions(
localitiesPredictions: woosmap.map.localities.LocalitiesPredictions[],
) {
Expand All @@ -81,6 +76,7 @@ function displaySuggestions(
}
}
}

function formatPredictionList(locality): string {
const prediction = locality;
const predictionClass = "no-viewpoint";
Expand All @@ -103,13 +99,16 @@ function formatPredictionList(locality): string {

return html;
}

function displayLocalitiesResponse(
selectedLocality: woosmap.map.localities.LocalitiesPredictions,
) {
if (responseElement) {
responseElement.innerHTML = `<code>${JSON.stringify(selectedLocality, null, 2)}</code>`;
responseElement.style.display = "block";
}
}

function bold_matched_substring(string: string, matched_substrings: string[]) {
matched_substrings = matched_substrings.reverse();
for (const substring of matched_substrings) {
Expand All @@ -126,6 +125,7 @@ function bold_matched_substring(string: string, matched_substrings: string[]) {
}
return string;
}

function autocompleteAddress(
input: string,
components: string,
Expand All @@ -146,6 +146,7 @@ function autocompleteAddress(
`https://api.woosmap.com/localities/autocomplete/?${buildQueryString(args)}`,
).then((response) => response.json());
}

function buildQueryString(params: object) {
const queryStringParts = [];

Expand All @@ -159,6 +160,7 @@ function buildQueryString(params: object) {
}
return queryStringParts.join("&");
}

type DebouncePromiseFunction<T, Args extends any[]> = (
...args: Args
) => Promise<T>;
Expand Down Expand Up @@ -195,7 +197,22 @@ function debouncePromise<T, Args extends any[]>(
};
}

init();
document.addEventListener("DOMContentLoaded", () => {
inputElement = document.getElementById(
"autocomplete-input",
) as HTMLInputElement;
suggestionsList = document.getElementById(
"suggestions-list",
) as HTMLUListElement;
clearSearchBtn = document.getElementsByClassName(
"clear-searchButton",
)[0] as HTMLButtonElement;
responseElement = document.getElementById(
"response-container",
) as HTMLElement;
init();
});

// [END woosmap_localities_api_autocomplete]

export {};
21 changes: 18 additions & 3 deletions samples/localities-api-autocomplete/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,26 @@
@include meta.load-css("../../shared/scss/_autocomplete_input.scss");
@include meta.load-css("../../shared/scss/_autocomplete_list.scss");

#response-container {
margin-top: 70px;

body {
background-color: #eee;
overflow: auto;
}

pre {
display: none;
margin: 70px 10px;
padding: 10px;
border: 3px solid #c8c8c8;
background-color: white;
border-radius: 8px;
white-space: pre-wrap;
overflow-x: auto;
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
}

.bold {
font-weight: 700;
}
/* [END woosmap_localities_api_autocomplete] */

/* [END woosmap_localities_api_autocomplete] */

0 comments on commit e860d4f

Please sign in to comment.