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

(feat): initialised basic share button functions

Browse Source
This commit is contained in:
Subhamoy Biswas
2023-11-21 21:35:59 +05:30
parent f7f30d34f3
commit 670d6ecc06
3 changed files with 36 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
htdocs/assets/_floatingbar.php
View File

@@ -108,4 +108,5 @@
</div> </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="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> <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>
<button id="shareclosebutton" 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> </div>

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

@@ -4,6 +4,7 @@ const floatingBar = document.getElementById("floating-bar");
const searchBar = document.getElementById("searchbar"); const searchBar = document.getElementById("searchbar");
const shareBtn = document.getElementById("sharebutton"); const shareBtn = document.getElementById("sharebutton");
const closeBtn = document.getElementById("closebutton"); const closeBtn = document.getElementById("closebutton");
const shareCloseBtn = document.getElementById("shareclosebutton");
const searchTxt = document.getElementById("searchtext"); const searchTxt = document.getElementById("searchtext");
const searchInput = document.getElementById("searchinput"); const searchInput = document.getElementById("searchinput");
const windowWrapper = document.getElementById("floatingwindowwrapper"); const windowWrapper = document.getElementById("floatingwindowwrapper");
@@ -295,3 +296,29 @@ searchInput.addEventListener('input', function() {
fallback_search(searchDef, searchRes); fallback_search(searchDef, searchRes);
} }
}); });
//---share window config starts here
function activate_share() {
windowWrapper.classList.remove("hidden");
windowWrapper.classList.add("flotingbar-window-wrapper-show");
shareBtn.classList.add("hidden");
shareCloseBtn.classList.remove("hidden");
}
function close_share() {
windowWrapper.classList.remove("flotingbar-window-wrapper-show");
windowWrapper.classList.add("hidden");
shareCloseBtn.classList.add("hidden");
shareBtn.classList.remove("hidden");
}
shareBtn.addEventListener("click", function () {
activate_share();
});
shareCloseBtn.addEventListener("click", function () {
close_share();
});

32
htdocs/assets/style.css
View File

@@ -874,6 +874,10 @@ video {
height: 200px; height: 200px;
} }
.h-\[27px\] {
height: 27px;
}
.h-\[2px\] { .h-\[2px\] {
height: 2px; height: 2px;
} }
@@ -914,18 +918,6 @@ video {
height: 100vh; height: 100vh;
} }
.h-\[20px\] {
height: 20px;
}
.h-\[25px\] {
height: 25px;
}
.h-\[27px\] {
height: 27px;
}
.w-0 { .w-0 {
width: 0px; width: 0px;
} }
@@ -942,6 +934,10 @@ video {
width: 250px; width: 250px;
} }
.w-\[27px\] {
width: 27px;
}
.w-\[300px\] { .w-\[300px\] {
width: 300px; width: 300px;
} }
@@ -995,18 +991,6 @@ video {
width: 100vw; width: 100vw;
} }
.w-\[20px\] {
width: 20px;
}
.w-\[25px\] {
width: 25px;
}
.w-\[27px\] {
width: 27px;
}
.rotate-\[15deg\] { .rotate-\[15deg\] {
--tw-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)); 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));