From e6190d33395098eeb97daeaa0870d7c12abd3812 Mon Sep 17 00:00:00 2001
From: Subhamoy Biswas <subhamoybiswas636@gmail.com>
Date: Mon, 6 Nov 2023 21:22:53 +0530
Subject: [PATCH] (feat): implemented floatingsearchpage warapper in out
 animation

---
 htdocs/assets/_floatingbar.php         |  2 +-
 htdocs/assets/extra-style.css          | 14 ++++++++++++++
 htdocs/assets/js/floatingbar-config.js | 17 +++++++++++------
 3 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/htdocs/assets/_floatingbar.php b/htdocs/assets/_floatingbar.php
index 350b689..c16db73 100644
--- a/htdocs/assets/_floatingbar.php
+++ b/htdocs/assets/_floatingbar.php
@@ -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>
diff --git a/htdocs/assets/extra-style.css b/htdocs/assets/extra-style.css
index 3b4b646..aba9f8e 100644
--- a/htdocs/assets/extra-style.css
+++ b/htdocs/assets/extra-style.css
@@ -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);
+    }
 }
\ No newline at end of file
diff --git a/htdocs/assets/js/floatingbar-config.js b/htdocs/assets/js/floatingbar-config.js
index 5c729a0..a9a2994 100644
--- a/htdocs/assets/js/floatingbar-config.js
+++ b/htdocs/assets/js/floatingbar-config.js
@@ -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);
     }
 });