Skip to content

Commit

Permalink
native-like search
Browse files Browse the repository at this point in the history
  • Loading branch information
@viperehonchuk
viperehonchuk committed Jan 11, 2024
1 parent 83aaac1 commit 1476954
Show file tree
Hide file tree
Showing 3 changed files with 150 additions and 118 deletions.
92 changes: 63 additions & 29 deletions src/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,55 +13,80 @@ document.addEventListener('DOMContentLoaded', () => {
});
});

// const nolintCodeBlocks =
// document.querySelectorAll('code[class*="language-"][class*="-nolint"]');
// nolintCodeBlocks.forEach((codeBlock) => {
// codeBlock.classList.forEach((className) => {
// if (className.endsWith('-nolint')) {
// codeBlock.classList.remove(className);
// codeBlock.classList.add(className.slice(0, -'-nolint'.length));
// }
// });
// });

const leftButtons = document.querySelector('.left-buttons');
const menuBar = document.querySelector('.menu-bar');
const searchButton = document.createElement('button');
searchButton.type = 'button';
searchButton.classList.add('icon-button');
searchButton.title = 'Пошук. (Швидка клавіша: ш)';
searchButton.setAttribute('aria-label', 'Показати пошук');
searchButton.setAttribute('aria-expanded', 'false');
searchButton.setAttribute('aria-keyshortcuts', 'ш');
searchButton.setAttribute('aria-controls', 'searchbar');
const searchIcon = document.createElement('i');
searchIcon.classList.add('fa', 'fa-search');
searchButton.append(searchIcon);
leftButtons.append(searchButton);
const searchWrapper = document.createElement('div');
searchWrapper.id = 'search-wrapper';
const searchBox = document.createElement('div');
searchBox.id = 'searchbox';
searchBox.id = 'searchbar-outer';
searchBox.classList.add('searchbar-outer');
searchWrapper.classList.add('hidden');
searchWrapper.append(searchBox);

const searchresultsOuter = document.createElement('div');
searchresultsOuter.id = 'searchresults-outer';
searchresultsOuter.classList.add('searchresults-outer');
searchWrapper.append(searchresultsOuter);

const hits = document.createElement('div');
hits.id = 'hits';
searchresultsOuter.append(hits);
const closeButton = document.createElement('button');
closeButton.classList.add('close-button');
leftButtons.append(searchBox, hits, closeButton);
menuBar.parentElement.insertBefore(searchWrapper, menuBar.nextElementSibling);
// leftButtons.append(searchBox, hits, closeButton);

function activateSearch() {
searchBox.classList.add('active');
searchButton.setAttribute('aria-expanded', 'true');
searchButton.setAttribute('aria-label', 'Сховати пошук');
// searchBox.classList.add('active');
searchWrapper.classList.remove('hidden');
hits.classList.add('active');
document.body.style.overflow = 'hidden';
document.querySelector('.ais-SearchBox-input').focus();
// document.body.style.overflow = 'hidden';
}

function deactivateSearch() {
searchBox.classList.remove('active');
searchButton.setAttribute('aria-expanded', 'false');
searchButton.setAttribute('aria-label', 'Показати пошук');
// searchBox.classList.remove('active');
searchWrapper.classList.add('hidden');
hits.classList.remove('active');
document.body.style.overflow = '';
// document.body.style.overflow = '';
}

function handleClick(event) {
// if clicked outside of the search box
if (!event.target.closest('#searchbox') && !event.target.closest('.hits')) {
// hide the search box
function triggerSearch(event) {
if (event.currentTarget.getAttribute('aria-expanded') === 'true') {
deactivateSearch();
} else {
// show the search box
activateSearch();
}
}
window.addEventListener('keydown', (event) => {
if (event.key === 'i') {
// event.preventDefault();
triggerSearch(event);
}
});

searchButton.addEventListener('click', triggerSearch);
closeButton.addEventListener('click', (event) => {
event.stopPropagation();
deactivateSearch();
});

document.addEventListener('click', handleClick);

document.addEventListener('keydown', (event) => {
if (event.key === 'Escape') {
deactivateSearch();
Expand All @@ -74,21 +99,30 @@ document.addEventListener('DOMContentLoaded', () => {
indexName: 'articles',
insights: true,
searchClient,
searchFunction(helper) {
searchresultsOuter.style.display = helper.state.query === '' ? 'none' : '';

helper.search();
},
});

search.addWidgets([
window.instantsearch.widgets.searchBox({
container: '#searchbox',
container: searchBox,
cssClasses: {
form: 'searchbar-outer',
},
}),

window.instantsearch.widgets.hits({
container: '#hits',
container: hits,
templates: {
empty: 'Нічого не знайдено на тему {{query}}.',
item(hit, { html, components }) {
return html`
<a href="/uk/docs/${hit.slug}"><h2>${components.Highlight({ hit, attribute: 'title' })}</h2>
<p>${components.Snippet({ hit, attribute: 'slug' })}</p></a>
`;
<a href="/uk/docs/${hit.slug}">${components.Highlight({ hit, attribute: 'title' })}</a>
${components.Snippet({ classNames: { root: 'teaser' }, hit, attribute: 'text' })}
`;
},
},
}),
Expand Down
175 changes: 87 additions & 88 deletions src/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,12 @@

.missing-link,
.missing-link>.hljs {
color: var(--sidebar-non-existant) !important;
color: color-mix(in oklab, var(--links) 66%, red 66%) !important;
}

.missing-link:hover,
.missing-link>.hljs:hover {
color: var(--searchbar-fg) !important;
color: red !important;
}

a[href*="//"]::before {
Expand Down Expand Up @@ -54,96 +54,10 @@ a[href*="//"]::before {
height: 385px;
}

.ais-SearchBox-form {
font-size: 2rem;
height: 50px;
}

#hits {
border-color: var(--searchresults-border-color);
border-style: solid;
border-width: 1px;
overflow: auto;
top: 50px;
max-height: calc(100vh - 50px);
position: fixed;
transition: cubic-bezier(1, 0, 0, 1) 0.5s;
width: 100vw;
}

#hits:not(.active) {
max-height: 0px;
}

.ais-Hits-item,
.ais-InfiniteHits-item {
color: var(--fg);
background-color: var(--searchresults-li-bg);
padding: 0;
}

.ais-Hits-item>a,
.ais-InfiniteHits-item>a {
padding: 1.5rem;
text-decoration: none;
width: 100%;
}

.ais-Hits-item>a:hover,
.ais-InfiniteHits-item>a:hover {
text-decoration: underline;
}

#searchbox.active {
position: fixed;
right: 50px;
left: 0;
z-index: 20;
}

.close-button {
display: none;
height: 50px;
position: fixed;
right: 0;
top: 0;
width: 50px;
}

.close-button::before {
content: "×";
font-size: 2rem;
line-height: 50px;
text-align: center;
}

#hits.active+.close-button {
display: block;
}

.ais-SearchBox-form::before {
height: 16px;
width: 16px;
}

.ais-SearchBox-input {
background-color: var(--searchbar-bg);
border-color: var(--searchbar-border-color);
box-shadow: var(--searchbar-shadow-color) 0 1px 4px 0 inset;
color: var(--searchbar-fg);
padding-left: 4rem;
}

#formalnyi-syntaksys+pre {
white-space: initial;
}


.ais-Highlight-nonHighlighted {
background-color: transparent;
color: currentColor;
}

.sample-code-frame {
width: 100%;
max-width: 100%;
Expand Down Expand Up @@ -306,4 +220,89 @@ screen and (min-width: 1008px) {

.icon.icon-experimental {
mask-image: url(/static/experimental.svg);
}

.searchbar-outer {
margin-left: auto;
margin-right: auto;
max-width: var(--content-max-width);
height: auto;
}

#searchbar {
width: 100%;
margin: 5px auto 0px auto;
padding: 10px 16px;
transition: box-shadow 300ms ease-in-out;
border: 1px solid var(--searchbar-border-color);
border-radius: 3px;
background-color: var(--searchbar-bg);
color: var(--searchbar-fg);
}

#searchbar:focus,
#searchbar.active {
box-shadow: 0 0 3px var(--searchbar-shadow-color);
}

.ais-SearchBox-input {
width: 100%;
margin: 5px auto 0px auto;
padding: 10px 16px;
transition: box-shadow 300ms ease-in-out;
border: 1px solid var(--searchbar-border-color);
border-radius: 3px;
background-color: var(--searchbar-bg);
color: var(--searchbar-fg);
}

.ais-SearchBox-input :focus,
.ais-SearchBox-input .active {
box-shadow: 0 0 3px var(--searchbar-shadow-color);
}


#hits a {
text-decoration: none;
}

mark {
border-radius: 2px;
padding: 0 3px 1px 3px;
margin: 0 -3px -1px -3px;
background-color: var(--search-mark-bg);
transition: background-color 300ms linear;
cursor: pointer;
}

mark.fade-out {
background-color: rgba(0, 0, 0, 0) !important;
cursor: auto;
}

#hits {
list-style: none;
padding-left: 20px;
}

#hits li {
margin: 10px 0px;
padding: 2px;
border-radius: 2px;
}

#hits li.focus {
background-color: var(--searchresults-li-bg);
}

#hits .ais-Snippet {
display: block;
clear: both;
margin: 5px 0 0 20px;
font-size: 0.8em;
}

#hits .ais-Snippet em {
font-weight: bold;
font-style: normal;
}
1 change: 0 additions & 1 deletion theme/head.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/algoliasearch-lite.umd.js" integrity="sha256-DABVk+hYj0mdUzo+7ViJC6cwLahQIejFvC+my2M/wfM=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch.production.min.js" integrity="sha256-9242vN47QUX50UG5Gf5XDO1YREWCEJRyXHofh5fsl24=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/themes/reset-min.css" integrity="sha256-2AeJLzExpZvqLUxMfcs+4DWcMwNfpnjUeAAvEtPr0wU=" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/themes/satellite-min.css" integrity="sha256-p/rGN4RGy6EDumyxF9t7LKxWGg6/MZfGhJM/asKkqvA=" crossorigin="anonymous">

0 comments on commit 1476954

Please sign in to comment.