From aff9574a9b035a86c1a6036bf2341cb74a9785fe Mon Sep 17 00:00:00 2001 From: dewanakl Date: Sun, 22 Dec 2024 09:23:43 +0700 Subject: [PATCH] feat(UI): update button and navbar --- css/app.css | 13 +++++++------ css/common.css | 8 ++++++++ index.html | 8 ++++---- js/guest.js | 35 +++++++++++++++++++++++++++++++++-- js/like.js | 21 +++++++++++++++++++++ js/request.js | 43 +++++++++++++++++-------------------------- js/util.js | 32 -------------------------------- 7 files changed, 90 insertions(+), 70 deletions(-) diff --git a/css/app.css b/css/app.css index 31a5942..7651cf2 100644 --- a/css/app.css +++ b/css/app.css @@ -26,16 +26,17 @@ object-fit: cover; } -.btn-music { - bottom: 9vh; +.btn-float { right: 2vh; z-index: 1055; } -.btn-theme { - bottom: 15vh; - right: 2vh; - z-index: 1055; +.btn-float.bg-dark { + background-color: rgba(var(--bs-dark-rgb), 0.9) !important; +} + +.btn-float.bg-light { + background-color: rgba(var(--bs-light-rgb), 0.9) !important; } .loading-page { diff --git a/css/common.css b/css/common.css index 18afe23..c4db19a 100644 --- a/css/common.css +++ b/css/common.css @@ -21,6 +21,14 @@ svg>path { transition: color 350ms ease; } +.navbar.bg-dark { + background-color: rgba(var(--bs-dark-rgb), 0.9) !important; +} + +.navbar.bg-light { + background-color: rgba(var(--bs-light-rgb), 0.9) !important; +} + .bg-theme-light { background-color: var(--bs-gray-100); } diff --git a/index.html b/index.html index 9689f60..4b8ea92 100644 --- a/index.html +++ b/index.html @@ -131,7 +131,7 @@

Wahyu & Riski

-
+
@@ -432,7 +432,7 @@

Ucapa
- - diff --git a/js/guest.js b/js/guest.js index 5439b5d..fd31456 100644 --- a/js/guest.js +++ b/js/guest.js @@ -9,6 +9,31 @@ import { confetti } from './confetti.js'; export const guest = (() => { + /** + * @param {string} id + * @param {number} speed + * @returns {void} + */ + const opacity = (id, speed = 0.01) => { + const el = document.getElementById(id); + let op = parseFloat(el.style.opacity); + + let clear = null; + const callback = () => { + if (op > 0) { + el.style.opacity = op.toFixed(3); + op -= speed; + return; + } + + clearInterval(clear); + clear = null; + el.remove(); + }; + + clear = setInterval(callback, 10); + }; + /** * @type {ReturnType|null} */ @@ -97,7 +122,7 @@ export const guest = (() => { form.value = information.get('name') ?? name; } - util.opacity('loading', 0.025); + opacity('loading', 0.025); }; const open = (button) => { @@ -109,7 +134,7 @@ export const guest = (() => { zIndex: 1057 }); - util.opacity('welcome', 0.025); + opacity('welcome', 0.025); audio.play(); audio.showButton(); @@ -120,6 +145,11 @@ export const guest = (() => { util.timeOut(animation, 1500); }; + /** + * @returns {void} + */ + const closeInformation = () => information.set('info', true); + const init = () => { session.init(); countDownDate(); @@ -173,5 +203,6 @@ export const guest = (() => { init, open, name, + closeInformation, }; })(); \ No newline at end of file diff --git a/js/like.js b/js/like.js index 7e0fe78..f985d22 100644 --- a/js/like.js +++ b/js/like.js @@ -11,6 +11,12 @@ export const like = (() => { */ let likes = null; + /** + * Handles the like button functionality. + * + * @param {HTMLButtonElement} button - The button element that was clicked. + * @returns {Promise} - A promise that resolves when the like action is complete. + */ const like = async (button) => { const id = button.getAttribute('data-uuid'); @@ -58,6 +64,11 @@ export const like = (() => { button.disabled = false; }; + /** + * Triggers a confetti animation with heart shapes around a specified div element. + * + * @param {HTMLElement} div - The div element around which the confetti animation will occur. + */ const animation = (div) => { if (!confetti) { return; @@ -102,6 +113,13 @@ export const like = (() => { }()); }; + /** + * Handles the tap event on a given div element. If the tap is detected within a certain time frame, + * it triggers a like action and an animation. + * + * @param {HTMLElement} div - The div element that was tapped. + * @returns {Promise} - A promise that resolves when the like action is complete. + */ const tapTap = async (div) => { if (!navigator.onLine) { return; @@ -124,6 +142,9 @@ export const like = (() => { div.setAttribute('data-tapTime', currentTime); }; + /** + * Initializes the likes variable by retrieving it from storage. + */ const init = () => { likes = storage('likes'); }; diff --git a/js/request.js b/js/request.js index ffcf4e8..1206d2b 100644 --- a/js/request.js +++ b/js/request.js @@ -39,15 +39,12 @@ export const request = (method, path) => { throw new Error(json.error[0]); } - return json; - }); - }) - .then((res) => { - if (transform) { - res.data = transform(res.data); - } + if (transform) { + json.data = transform(json.data); + } - return dto.baseResponse(res.code, res.data, res.error); + return dto.baseResponse(json.code, json.data, json.error); + }); }) .catch((err) => { alert(err); @@ -61,7 +58,7 @@ export const request = (method, path) => { return fetch(url + path, req) .then((res) => { if (res.status !== 200) { - return null; + return false; } const existingLink = document.querySelector('a[download]'); @@ -70,28 +67,22 @@ export const request = (method, path) => { } const filename = res.headers.get('content-disposition')?.match(/filename="(.+)"/)?.[1] ?? 'download.csv'; - return res.blob().then((blob) => ({ blob, filename })); - }) - .then((res) => { - if (res === null) { - return false; - } - - const { blob, filename } = res; - const link = document.createElement('a'); - const href = window.URL.createObjectURL(blob); + return res.blob().then((blob) => { + const link = document.createElement('a'); + const href = window.URL.createObjectURL(blob); - link.href = href; - link.download = filename; - document.body.appendChild(link); + link.href = href; + link.download = filename; + document.body.appendChild(link); - link.click(); + link.click(); - document.body.removeChild(link); - window.URL.revokeObjectURL(href); + document.body.removeChild(link); + window.URL.revokeObjectURL(href); - return true; + return true; + }); }) .catch((err) => { alert(err); diff --git a/js/util.js b/js/util.js index e30a5f0..3c8d422 100644 --- a/js/util.js +++ b/js/util.js @@ -3,31 +3,6 @@ import { bootstrap } from './bootstrap.js'; export const util = (() => { - /** - * @param {string} id - * @param {number} speed - * @returns {void} - */ - const opacity = (id, speed = 0.01) => { - const el = document.getElementById(id); - let op = parseInt(el.style.opacity); - - let clear = null; - const callback = () => { - if (op > 0) { - el.style.opacity = op.toFixed(3); - op -= speed; - return; - } - - clearInterval(clear); - clear = null; - el.remove(); - }; - - clear = setInterval(callback, 10); - }; - /** * @param {string} unsafe * @returns {string} @@ -150,23 +125,16 @@ export const util = (() => { return decoder.decode(decodedBytes); }; - /** - * @returns {void} - */ - const closeInformation = () => storage('information').set('info', true); - return { open, copy, modal, timeOut, - opacity, animate, escapeHtml, base64Encode, base64Decode, disableButton, - closeInformation, addLoadingCheckbox, }; })(); \ No newline at end of file