Skip to content

Instantly share code, notes, and snippets.

@GitMurf

GitMurf/filter-focus.js

Last active Mar 12, 2021
Embed
What would you like to do?
Roam JavaScript to focus on search box when opening a filter
document.addEventListener('click', function (evt) {
if (evt.target.className === 'bp3-icon bp3-icon-filter') {
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function removeFilters(event) {
var filteredButtons = event.target.parentElement.parentElement.parentElement.getElementsByTagName('BUTTON')
if (filteredButtons.length == 0 || filteredButtons == null) { return }
var loopCtr = 0
do {
var eachButton = filteredButtons[0]
eachButton.click()
await sleep(50);
loopCtr++
} while (filteredButtons.length > 0 && loopCtr < 50)
}
async function selectBox() {
await sleep(200);
//console.log("Clicked filter button")
//Check if filter search input box is there
var tbInputSearch = document.getElementsByClassName("bp3-input bp3-minimal search-input");
if (tbInputSearch !== null && tbInputSearch !== 'undefined' && typeof tbInputSearch !== 'undefined') {
var tbInputSearchFocus = tbInputSearch[0]
if (tbInputSearchFocus !== null && tbInputSearchFocus !== 'undefined' && typeof tbInputSearchFocus !== 'undefined') {
//console.log("Found and focusing now...")
tbInputSearchFocus.focus();
tbInputSearchFocus.addEventListener("keyup", function (event) {
if (event.key === "Enter") {
if (tbInputSearchFocus.nextElementSibling.childNodes[0]) { tbInputSearchFocus.nextElementSibling.childNodes[0].click() }
}
})
}
else {
await sleep(200);
tbInputSearchFocus = document.getElementsByClassName("bp3-transition-container bp3-popover-enter-done")[0];
}
if (tbInputSearchFocus !== null && tbInputSearchFocus !== 'undefined' && typeof tbInputSearchFocus !== 'undefined') {
var filterBox = tbInputSearchFocus.parentElement.getElementsByTagName('STRONG')
if (filterBox) { if (filterBox[0].innerText == 'Includes') { var foundBox = filterBox[0] } }
var newIcon = document.createElement("span")
newIcon.className = 'bp3-icon-filter-remove'
newIcon.style.cssText = 'margin:0 -7px;font-family:Icons20;font-weight:400'
newIcon.onclick = function (event) {
removeFilters(event)
}
var iconHolder = document.createElement("span")
iconHolder.className = 'bp3-button bp3-minimal bp3-small'
iconHolder.style.float = 'right'
iconHolder.appendChild(newIcon)
foundBox.parentNode.insertBefore(iconHolder, foundBox)
if (filterBox) { if (filterBox[1].innerText == 'Removes') { var foundBox2 = filterBox[1] } }
var newIcon2 = document.createElement("span")
newIcon2.className = 'bp3-icon-filter-remove'
newIcon2.style.cssText = 'margin:0 -7px;font-family:Icons20;font-weight:400'
newIcon2.onclick = function (event) {
removeFilters(event)
}
var iconHolder2 = document.createElement("span")
iconHolder2.className = 'bp3-button bp3-minimal bp3-small'
iconHolder2.style.float = 'right'
iconHolder2.appendChild(newIcon2)
foundBox2.parentNode.insertBefore(iconHolder2, foundBox2)
}
}
}
selectBox();
}
if (evt.target.className === 'bp3-button') {
var clickedElem = evt.target
//console.log("Clicked one of the filter choices")
//Check to make sure it is a button that is part of the filter box so that we don't run code on other buttons in Roam that may have the bp3-button class
//This check is probably unnecessary but I like to be sure since who know how the future of Roam changes things
var parentNode4Class = clickedElem.parentElement.parentElement.parentElement.parentElement.className
var parentNode5Class = clickedElem.parentElement.parentElement.parentElement.parentElement.parentElement.className
if (parentNode4Class == 'bp3-popover-content' || parentNode4Class == 'bp3-popover' || parentNode5Class == 'bp3-popover' || parentNode5Class == 'bp3-popover-content') {
//console.log("Confirmed click of a filter page reference button")
var tbInputSearch = document.getElementsByClassName("bp3-input bp3-minimal search-input");
if (tbInputSearch !== null && tbInputSearch !== 'undefined' && typeof tbInputSearch !== 'undefined') {
var tbInputSearchFocus = tbInputSearch[0]
if (tbInputSearchFocus !== null && tbInputSearchFocus !== 'undefined' && typeof tbInputSearchFocus !== 'undefined') {
tbInputSearchFocus.focus();
tbInputSearchFocus.select();
}
}
}
}
});
@GitMurf

This comment has been minimized.

Copy link
Owner Author

@GitMurf GitMurf commented Nov 3, 2020

Since the new update broke my "auto focus on search box" when clicking filters so you can start typing without using mouse to activate the search box, I decided to add some more features that allow you to use the filters without much mouse need which helps get around the bug.

  • Auto focuses cursor in the search/input box when opening a filter.
  • when typing, press ENTER key and it will auto add the first item in the list/results so you don't have to use your mouse all the time.
  • added a filter clear button so that it will remove all filters so you dont have to click them one at a time.

GPm67M6Til-output

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment