neosubhamoy/neosubhamoy-portfolio
1
1
Fork 0
mirror of https://github.com/neosubhamoy/neosubhamoy-portfolio.git synced 2025-12-19 22:53:03 +05:30
Code Issues Wiki Activity

(feat): implemented floatingsearchpage warapper in out animation

Browse Source
This commit is contained in:
Subhamoy Biswas
2023-11-06 21:22:53 +05:30
parent 211d40affc
commit e6190d3339
3 changed files with 26 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
htdocs/assets/_floatingbar.php
View File

@@ -1,4 +1,4 @@
<div class="floatingwindowwrapper fixed top-0 left-0 w-screen h-screen z-30 bg-[rgba(0,_0,_0,_0.4)] backdrop-filter backdrop-blur-lg"></div>
<div id="floatingwindowwrapper" class="floatingwindowwrapper fixed top-0 left-0 w-screen h-screen z-30 bg-[rgba(0,_0,_0,_0.4)] hidden"></div>
<div id="floating-bar" class="fixed inset-x-0 bottom-[7vh] z-[50] flex justify-center items-center">
<div id="searchbar" class="searchbar bg-bg_secondary rounded-full p-[0.30rem] flex items-center cursor-pointer mx-2 hover:shadow-[0px_0px_30px] hover:shadow-accent_primary_extratransparent transition transform duration-300">
<button class="bg-accent_primary px-3 py-2 rounded-full"><i class="fa-solid fa-magnifying-glass text-bg_primary"></i></button>

14
htdocs/assets/extra-style.css
View File

@@ -162,4 +162,18 @@ background: #38BDF8;
}
}
}
.flotingbar-window-wrapper-show {
animation: blurWindowWrapper 0.5s ease-in-out;
backdrop-filter: blur(16px);
}
@keyframes blurWindowWrapper {
from {
backdrop-filter: blur(0px);
}
to {
backdrop-filter: blur(16px);
}
}

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

@@ -5,6 +5,7 @@ const shareBtn = document.getElementById("sharebutton");
const closeBtn = document.getElementById("closebutton");
const searchTxt = document.getElementById("searchtext");
const searchInput = document.getElementById("searchinput");
const windowWrapper = document.getElementById("floatingwindowwrapper");
let lastScrollTop = 0;
window.addEventListener("scroll", function () {
@@ -26,7 +27,7 @@ window.addEventListener("scroll", function () {
});
// function to open floating search window
function activate_search(searchBar, floatingBar, closeBtn, shareBtn, searchTxt, searchInput) {
function activate_search(searchBar, floatingBar, closeBtn, shareBtn, searchTxt, searchInput, windowWrapper) {
floatingBar.classList.remove("floatingbar-click-slide-down");
floatingBar.classList.add("floatingbar-click-slide-up");
searchBar.classList.remove("searchbar-click-decrease-width");
@@ -37,10 +38,12 @@ function activate_search(searchBar, floatingBar, closeBtn, shareBtn, searchTxt,
searchInput.classList.remove("hidden");
searchInput.focus();
document.body.classList.add("overflow-hidden");
windowWrapper.classList.remove("hidden");
windowWrapper.classList.add("flotingbar-window-wrapper-show");
}
// function to close floating search window
function close_search(searchBar, floatingBar, closeBtn, shareBtn, searchTxt, searchInput) {
function close_search(searchBar, floatingBar, closeBtn, shareBtn, searchTxt, searchInput, windowWrapper) {
floatingBar.classList.remove("floatingbar-click-slide-up");
floatingBar.classList.add("floatingbar-click-slide-down");
searchBar.classList.remove("searchbar-click-increase-width");
@@ -50,29 +53,31 @@ function close_search(searchBar, floatingBar, closeBtn, shareBtn, searchTxt, sea
searchTxt.classList.remove("hidden");
searchInput.classList.add("hidden");
document.body.classList.remove("overflow-hidden");
windowWrapper.classList.remove("flotingbar-window-wrapper-show");
windowWrapper.classList.add("hidden");
}
// when the search icon is clicked
searchBar.addEventListener("click", function () {
activate_search(searchBar, floatingBar, closeBtn, shareBtn, searchTxt, searchInput);
activate_search(searchBar, floatingBar, closeBtn, shareBtn, searchTxt, searchInput, windowWrapper);
});
// when ALT + K shortcut key is pressed
document.addEventListener("keydown", function(event) {
if (event.altKey && event.key === "k") {
activate_search(searchBar, floatingBar, closeBtn, shareBtn, searchTxt, searchInput);
activate_search(searchBar, floatingBar, closeBtn, shareBtn, searchTxt, searchInput, windowWrapper);
}
});
// when close button is clicked
closeBtn.addEventListener("click", function () {
close_search(searchBar, floatingBar, closeBtn, shareBtn, searchTxt, searchInput);
close_search(searchBar, floatingBar, closeBtn, shareBtn, searchTxt, searchInput, windowWrapper);
});
// when ESC key is pressed
document.addEventListener("keydown", function(event) {
if (event.key === "Escape") {
close_search(searchBar, floatingBar, closeBtn, shareBtn, searchTxt, searchInput);
close_search(searchBar, floatingBar, closeBtn, shareBtn, searchTxt, searchInput, windowWrapper);
}
});