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

(feat): added custom qr code loading delay spinner

Browse Source
This commit is contained in:
Subhamoy Biswas
2023-12-04 22:28:39 +05:30
parent 6ab0cecc3e
commit 1d600c7fd7
2 changed files with 13 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
htdocs/assets/_floatingbar.php
View File

@@ -95,7 +95,8 @@
<p class="self-start text-xl hidden md:block">Scan to Share</p> <p class="self-start text-xl hidden md:block">Scan to Share</p>
<div class="bg-bg_primary p-10 md:p-5 rounded-lg my-3"> <div class="bg-bg_primary p-10 md:p-5 rounded-lg my-3">
<div class="qrwrapper aspect-square w-full md:w-[150px]"> <div class="qrwrapper aspect-square w-full md:w-[150px]">
<img class="w-full" id="pageqrcode" src="https://api.qrserver.com/v1/create-qr-code/?data=https://neosubhamoy.dev&color=38BDF8&bgcolor=0F172A" alt="qrcode"> <img class="w-full hidden" id="pageqrcode" src="https://api.qrserver.com/v1/create-qr-code/?data=https://neosubhamoy.dev&color=38BDF8&bgcolor=0F172A" alt="qrcode">
<div id="qrspinnercont" class="qrspinnercont w-full h-full flex justify-center items-center"><div class="spinner border-[3px] border-accent_secondary_transparent border-t-[3px] border-t-accent_primary rounded-[50%] h-[30px] w-[30px] animate-spin"></div></div>
</div> </div>
</div> </div>
<button class="w-full px-4 py-2 rounded-full border-[2px] border-accent_primary text-accent_primary my-2 hover:shadow-lg hover:rounded-lg hover:shadow-accent_primary_transparent transition transform duration-500" title="Download the page qr code" onclick="download_image(document.getElementById('pageqrcode').src, document.location.href, 'qr')"><i class="fa-solid fa-download"></i>&nbsp; Download QR</button> <button class="w-full px-4 py-2 rounded-full border-[2px] border-accent_primary text-accent_primary my-2 hover:shadow-lg hover:rounded-lg hover:shadow-accent_primary_transparent transition transform duration-500" title="Download the page qr code" onclick="download_image(document.getElementById('pageqrcode').src, document.location.href, 'qr')"><i class="fa-solid fa-download"></i>&nbsp; Download QR</button>

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

@@ -13,6 +13,7 @@ const shareWin = document.getElementById("sharewindow");
const searchDef = document.getElementById("defresults"); const searchDef = document.getElementById("defresults");
const searchRes = document.getElementById("searchresults"); const searchRes = document.getElementById("searchresults");
const spinner = document.getElementById("spinnercont"); const spinner = document.getElementById("spinnercont");
const spinnerQr = document.getElementById("qrspinnercont");
const qrCode = document.getElementById("pageqrcode"); const qrCode = document.getElementById("pageqrcode");
const linkInput = document.getElementById("pageurlinput"); const linkInput = document.getElementById("pageurlinput");
const embedCode = document.getElementById("embedcodetag"); const embedCode = document.getElementById("embedcodetag");
@@ -352,6 +353,7 @@ function activate_share() {
shareCloseBtn.classList.remove("hidden"); shareCloseBtn.classList.remove("hidden");
shareWin.classList.add("floatingshare-window-show"); shareWin.classList.add("floatingshare-window-show");
document.body.classList.add("overflow-hidden"); document.body.classList.add("overflow-hidden");
show_qr_loading_delay(); //show qrcode loading delay spinner
} }
// function to close the share window // function to close the share window
@@ -394,6 +396,15 @@ document.addEventListener("keydown", function(event) {
} }
}); });
// custom qr loading delay spinner
function show_qr_loading_delay() {
setTimeout(() => {
spinnerQr.classList.remove("flex");
spinnerQr.classList.add("hidden");
qrCode.classList.remove("hidden");
}, 2000);
}
// function to share with webShareAPI (Native OS Share) // function to share with webShareAPI (Native OS Share)
function call_webshare_api() { function call_webshare_api() {
if(navigator.share) { if(navigator.share) {