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

htdocs/assets/_floatingbar.php

@@ -4,4 +4,5 @@
         <p class="ml-3 mr-4 text-accent_three">SEARCH</p>
     </div>
     <button id="sharebutton" class="sharebutton bg-accent_primary px-[0.80rem] py-2 rounded-full mx-2 hover:shadow-[0px_0px_30px] hover:shadow-accent_primary_transparent transition transform duration-300"><i class="fa-solid fa-share-nodes text-bg_primary"></i></button>
+    <button id="closebutton" class="closebutton bg-accent_primary px-[0.80rem] py-2 rounded-full mx-2 hover:shadow-[0px_0px_30px] hover:shadow-accent_primary_transparent transition transform duration-300 hidden"><i class="fa-solid fa-xmark text-bg_primary"></i></button>
 </div>

htdocs/assets/extra-style.css

@@ -87,3 +87,40 @@ background: #38BDF8;
     transform: translateY(-10%);
     transition: transform 0.5s ease-in-out;
 }
+
+.floatingbar-click-slide-up {
+    transform: translateY(-55vh);
+    transition: transform 0.5s ease-in-out;
+}
+
+.floatingbar-click-slide-down {
+    transform: translateY(0);
+    transition: transform 0.5s ease-in-out;
+}
+
+.searchbar-click-increase-width {
+    animation: increaseSearchbarWidth 0.5s ease-in-out;
+    width: 40vw;
+}
+
+.searchbar-click-decrease-width {
+    animation: decreaseSearchbarWidth 0.5s ease-in-out;
+    width: fit-content;
+}
+
+@keyframes increaseSearchbarWidth {
+    from {
+      width: 10vw;
+    }
+    to {
+      width: 40vw;
+    }
+}
+@keyframes decreaseSearchbarWidth {
+    from {
+      width: 40vw;
+    }
+    to {
+      width: 10vw;
+    }
+}

htdocs/assets/js/floatingbar-config.js

@@ -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");
+    floatingBar.classList.remove("floatingbar-click-slide-down");
-    document.getElementById("floating-bar").classList.remove("floatingbar-slide-up");
+    floatingBar.classList.add("floatingbar-slide-down");
+    floatingBar.classList.remove("floatingbar-slide-up");
     } else {
     // Scrolling up
-    document.getElementById("floating-bar").classList.remove("floatingbar-slide-down");
+    floatingBar.classList.remove("floatingbar-click-slide-down");
-    document.getElementById("floating-bar").classList.add("floatingbar-slide-up");
+    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);
+    }
+});
+

htdocs/assets/style.css

@@ -941,6 +941,10 @@ video {
   width: 100vw;
 }
 
+.w-\[40vw\] {
+  width: 40vw;
+}
+
 .rotate-\[15deg\] {
   --tw-rotate: 15deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1197,6 +1201,11 @@ video {
   padding-bottom: 0.30rem;
 }
 
+.px-\[0\.82rem\] {
+  padding-left: 0.82rem;
+  padding-right: 0.82rem;
+}
+
 .text-center {
   text-align: center;
 }
@@ -1376,6 +1385,24 @@ video {
   transition-duration: 150ms;
 }
 
+.transition-\[width\] {
+  transition-property: width;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-\[width_box-shadow\] {
+  transition-property: width box-shadow;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-\[width\2c _box-shadow\] {
+  transition-property: width, box-shadow;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .duration-100 {
   transition-duration: 100ms;
 }
@@ -1388,6 +1415,10 @@ video {
   transition-duration: 500ms;
 }
 
+.duration-1000 {
+  transition-duration: 1000ms;
+}
+
 .last\:mb-3:last-child {
   margin-bottom: 0.75rem;
 }