Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Set focus on docu search input field #1196

Merged
merged 6 commits into from
Mar 31, 2020
+38 −23
Merged

Set focus on docu search input field #1196

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d73b116
Added input focus
ndricimrr Mar 25, 2020
7f2e92b
Prettier
ndricimrr Mar 25, 2020
7d9869a
Merge branch 'master' into 1166-set-focus-search-input
ndricimrr Mar 25, 2020
b9f0220
Merge branch 'master' into 1166-set-focus-search-input
maxmarkus Mar 27, 2020
ef13884
Merge branch 'master' into 1166-set-focus-search-input
marynaKhromova Mar 30, 2020
88b89db
Merge branch 'master' into 1166-set-focus-search-input
ndricimrr Mar 31, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 38 additions & 23 deletions website/docs/src/luigi-config/extended/search.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,12 @@ class DocSearch {
}

addSearchField() {
const createElementFromHTML = (htmlString) => {
const createElementFromHTML = htmlString => {
var div = document.createElement('div');
div.innerHTML = htmlString.trim();
// Change this to div.childNodes to support multiple top-level nodes
return div.firstChild;
}
return div.firstChild;
};
const searchElement = createElementFromHTML(`
<div class="fd-shellbar__action">
<div class="fd-search-input fd-search-input--closed">
Expand All @@ -47,16 +47,19 @@ class DocSearch {
}

initDocSearch() {
const transformData = (suggestions) => {
return suggestions.map((sg) => {
const transformData = suggestions => {
return suggestions.map(sg => {
if (this.isDevelop) {
sg.url = sg.url.replace('https://docs.luigi-project.io', this.coreBaseUrl);
sg.url = sg.url.replace(
'https://docs.luigi-project.io',
this.coreBaseUrl
);
}
sg.url = sg.url.replace('/docu-microfrontend', '');
return sg;
});
};

const handleSelected = (_, event) => {
if (
!event ||
Expand All @@ -69,17 +72,22 @@ class DocSearch {
return;
}
const url = new URL(event._args[0].url);
const urlWithPath = url.pathname.replace(this.coreBaseUrl, '').replace('.md', '').replace('/docu-microfrontend', '');
const urlWithPath = url.pathname
.replace(this.coreBaseUrl, '')
.replace('.md', '')
.replace('/docu-microfrontend', '');
if (url.hash) {
Luigi.navigation().withParams({'section': url.hash.substring(1).toLowerCase()}).navigate(urlWithPath);
Luigi.navigation()
.withParams({ section: url.hash.substring(1).toLowerCase() })
.navigate(urlWithPath);
} else {
Luigi.navigation().navigate(urlWithPath);
}
};

const createAlgoliaOptions = () => {
const algoliaOptions = {
hitsPerPage: 8,
hitsPerPage: 8
};

return {
Expand All @@ -88,14 +96,14 @@ class DocSearch {
inputSelector: '#docsearch',
autocompleteOptions: {
debug: this.isDevelop,
openOnFocus: true,
openOnFocus: false,
autoselect: true,
hint: true,
keyboardShortcuts: [`s`],
clearOnSelected: true
},
algoliaOptions,
transformData,
handleSelected,
handleSelected
};
};
docsearch(createAlgoliaOptions());
Expand All @@ -105,25 +113,32 @@ class DocSearch {
const inputEl = document.getElementById('lui-search-field');

const focusSearch = () => {
let inputField = document.getElementById('docsearch');
if (this.inputActive) {
inputEl.focus();
setTimeout(() => {
inputField.focus();
}, 200);
} else {
inputField.value = '';
}
};

const toggleInputActive = () => {
this.inputActive = !this.inputActive;
const searchButton = document.getElementById('lui-search-button');
const searchButton = document.getElementById('lui-search-button');
searchButton.setAttribute('aria-hidden', this.inputActive);
searchButton.setAttribute('aria-expanded', !this.inputActive);
inputEl.setAttribute('aria-hidden', !this.inputActive);
}
};

document.getElementById('lui-search-button').addEventListener('click', (e) => {
e.preventDefault();
toggleInputActive();
focusSearch();
});
document
.getElementById('lui-search-button')
.addEventListener('click', e => {
e.preventDefault();
toggleInputActive();
focusSearch();
});
}
}

export const search = new DocSearch();
export const search = new DocSearch();