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

Sidebar Search Filter #160

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Sidebar Search Filter #160

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
83f209c
Add search filter to sidebar
denisahearn Dec 19, 2024
995df4f
Changed search-filter to search
denisahearn Dec 19, 2024
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
2 changes: 1 addition & 1 deletion CONTRIBUTING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Contribuing Guide
# Contributing Guide

Contributions to this project are welcome. If you have an idea for a bigger change, [open an issue first](https://github.com/brettchalupa/graphql-docs/issues/new/choose) and we can discuss it.

Expand Down
32 changes: 32 additions & 0 deletions lib/graphql-docs/layouts/assets/_sass/_sidebar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,38 @@
}
}
}
#search {
display: flex;
position: relative;
align-items: center;
border: 1px solid #ddd;
border-radius: 5px;
padding: 0.01em 16px;
margin-bottom: 20px;

img {
position: absolute;
left: 10px;
height: 16px;
width: 16px;
}

input {
height: 24px;
line-height: 1.5;
width: 100%;
padding-left: 15px;
background-color: transparent;
color: #444;
border: none;
font-size: 14px;
font-family: 'ProximaNova-Semibold';
}

input:focus {
outline: none;
}
}
}

#sidebar-mobile {
Expand Down
3 changes: 3 additions & 0 deletions lib/graphql-docs/layouts/assets/images/search.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
57 changes: 56 additions & 1 deletion lib/graphql-docs/layouts/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,71 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/3.2.2/anchor.min.js"></script>
<script>

// Add anchors on DOMContentLoaded
document.addEventListener("DOMContentLoaded", function(event) {
// Add anchors
anchors.options = {
placement: 'left',
visible: 'hover',
icon: '¶'
};
anchors.add('h2, h3, h4, h5, h6, .anchored');

// Add listener for search filter input
const sidebarDiv = document.getElementById('sidebar');
const searchDiv = sidebarDiv.querySelector('#search')

if (searchDiv) {
const searchInput = searchDiv.querySelector('input');
const menuElements = sidebarDiv.querySelectorAll('ul.menu-root');

const listener = debounce((event) => {
const searchValue = event.target.value;
applySearchFilter(searchValue, menuElements)
}, 500);

searchInput.addEventListener('input', listener);
}
});

function debounce(func, wait) {
let timeout;

return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};

clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}

function applySearchFilter(searchValue, menuElements) {
menuElements.forEach(menuElement => {
const listElements = menuElement.getElementsByTagName('li');
let hasVisibleElements = false;
Array.from(listElements).forEach(listElement => {
let contains = true
if (searchValue.length > 0) {
const anchorElement = listElement.querySelector('a');
const textContent = anchorElement.innerText;
contains = textContent.toLowerCase().includes(searchValue.toLowerCase());
}

// Hide the list element if its text does not contain the search value
listElement.style.display = contains ? '' : 'none';

if (contains) {
hasVisibleElements = true;
}
});

// Hide the entire menu if none of the list items are visible
const menuParentElement = menuElement.closest('li')
menuParentElement.style.display = hasVisibleElements ? '' : 'none';
});
}
Comment on lines +20 to +76
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I considered adding this Javascript in a separate file that gets added via a `<script> tag, but in the end opted to leave it here for simplicity. Please let me know if you would prefer it moved out, and if so, any thoughts you have on doing that.

</script>
</head>
<body>
Expand Down
4 changes: 4 additions & 0 deletions lib/graphql-docs/layouts/includes/sidebar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
<div id="search">
<img src="<%= base_url %>/assets/images/search.svg">
<input autocomplete="off" placeholder="Search" />
</div>
Comment on lines +1 to +4
Copy link
Contributor Author

@denisahearn denisahearn Dec 19, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One thing to note about the search behavior - if you filter the list, and then click on something that is in the sidebar, when the page renders, the search input is empty and the full sidebar is shown again.

To fix this would require adding the current search value either to the URL or in the browser's local state.

I am ok with the current behavior, but please let me know if you think this should be fixed so that when navigating between pages with a search applied, the search value is retained.

<ul class="categories">
<li>
<ul class="menu-root">
Expand Down
Loading