neosubhamoy/neosubhamoy-portfolio
1
1
Fork 0
mirror of https://github.com/neosubhamoy/neosubhamoy-portfolio.git synced 2025-12-20 01:09:35 +05:30
Code Issues Wiki Activity

(refactor+feat): improved floating search config and implemented basic search page

Browse Source
This commit is contained in:
Subhamoy Biswas
2023-11-06 00:02:45 +05:30
parent 33231c2bf3
commit 448700e364
4 changed files with 125 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
htdocs/assets/js/floatingbar-config.js
View File

@@ -1,4 +1,8 @@
//---controls the bottom floating bar behaviour
const floatingBar = document.getElementById("floating-bar");
const searchBar = document.getElementById("searchbar");
const shareBtn = document.getElementById("sharebutton");
const closeBtn = document.getElementById("closebutton");
let lastScrollTop = 0;
window.addEventListener("scroll", function () {
@@ -6,13 +10,60 @@ window.addEventListener("scroll", function () {
if (st > lastScrollTop) {
// Scrolling down
document.getElementById("floating-bar").classList.add("floatingbar-slide-down");
document.getElementById("floating-bar").classList.remove("floatingbar-slide-up");
floatingBar.classList.remove("floatingbar-click-slide-down");
floatingBar.classList.add("floatingbar-slide-down");
floatingBar.classList.remove("floatingbar-slide-up");
} else {
// Scrolling up
document.getElementById("floating-bar").classList.remove("floatingbar-slide-down");
document.getElementById("floating-bar").classList.add("floatingbar-slide-up");
floatingBar.classList.remove("floatingbar-click-slide-down");
floatingBar.classList.remove("floatingbar-slide-down");
floatingBar.classList.add("floatingbar-slide-up");
}
lastScrollTop = st <= 0 ? 0 : st;
});
});
// function to open floating search window
function activate_search(searchBar, floatingBar, closeBtn, shareBtn) {
floatingBar.classList.remove("floatingbar-click-slide-down");
floatingBar.classList.add("floatingbar-click-slide-up");
searchBar.classList.remove("searchbar-click-decrease-width");
searchBar.classList.add("searchbar-click-increase-width");
closeBtn.classList.remove("hidden");
shareBtn.classList.add("hidden");
}
// function to close floating search window
function close_search(searchBar, floatingBar, closeBtn, shareBtn) {
floatingBar.classList.remove("floatingbar-click-slide-up");
floatingBar.classList.add("floatingbar-click-slide-down");
searchBar.classList.remove("searchbar-click-increase-width");
searchBar.classList.add("searchbar-click-decrease-width");
closeBtn.classList.add("hidden");
shareBtn.classList.remove("hidden");
}
// when the search icon is clicked
searchBar.addEventListener("click", function () {
activate_search(searchBar, floatingBar, closeBtn, shareBtn);
});
// when ALT + K shortcut key is pressed
document.addEventListener("keydown", function(event) {
if (event.altKey && event.key === "k") {
activate_search(searchBar, floatingBar, closeBtn, shareBtn);
}
});
// when close button is clicked
closeBtn.addEventListener("click", function () {
close_search(searchBar, floatingBar, closeBtn, shareBtn);
});
// when ESC key is pressed
document.addEventListener("keydown", function(event) {
if (event.key === "Escape") {
close_search(searchBar, floatingBar, closeBtn, shareBtn);
}
});