Skip to content

Commit

Permalink
feat: refactor code
Browse files Browse the repository at this point in the history
  • Loading branch information
@dewanakl
dewanakl committed Aug 11, 2024
1 parent 24f61ec commit 7135c68
Show file tree
Hide file tree
Showing 6 changed files with 29 additions and 20 deletions.
2 changes: 1 addition & 1 deletion dashboard.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -221,7 +221,7 @@ <h4 class="m-0 p-0 flex-grow-1 text-end" id="dashboard-name">
</div>

<!-- Comments -->
<div class="my-3 pt-3" id="comments"></div>
<div class="my-3 pt-3" id="comments" data-loading="false"></div>

<!-- Pagination -->
<nav class="d-flex justify-content-center py-3 mb-4">
Expand Down
8 changes: 4 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#ucapan">
<a class="nav-link" href="#comment">
<i class="fa-solid fa-comments"></i>
<span class="d-block" style="font-size: 0.7rem;">Ucapan</span>
</a>
Expand Down Expand Up @@ -456,8 +456,8 @@ <h1 class="font-esthetic mt-0 mb-3" style="font-size: 3rem;">Love Gift</h1>
</div>
</div>

<!-- Comments -->
<section class="m-0 px-0 pb-0 pt-2" id="ucapan">
<!-- Comment -->
<section class="m-0 px-0 pb-0 pt-2" id="comment">
<div class="container">

<div class="card-body border rounded-4 shadow p-3">
Expand Down Expand Up @@ -496,7 +496,7 @@ <h1 class="font-esthetic text-center mb-3" style="font-size: 3rem;">Ucapan &amp;
</div>
</div>

<div class="my-3 pt-3" id="comments"></div>
<div class="my-3 pt-3" id="comments" data-loading="false"></div>

<nav class="d-flex justify-content-center mb-0 pt-2">
<ul class="pagination mb-0">
Expand Down
8 changes: 7 additions & 1 deletion js/card.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,13 @@ export const card = (() => {
const showHide = storage('comment');

const renderLoading = () => {
document.getElementById('comments').innerHTML = `
const comments = document.getElementById('comments');
if (comments.getAttribute('data-loading') === 'true') {
return;
}

comments.setAttribute('data-loading', 'true');
comments.innerHTML = `
<div class="card-body bg-theme-${theme.isDarkMode('dark', 'light')} shadow p-3 mx-0 mt-0 mb-3 rounded-4">
<div class="d-flex flex-wrap justify-content-between align-items-center placeholder-wave">
<span class="placeholder bg-secondary col-4 rounded-3"></span>
Expand Down
4 changes: 3 additions & 1 deletion js/comment.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -229,6 +229,7 @@ export const comment = (() => {

const comment = async () => {
card.renderLoading();
const onNullComment = `<div class="h6 text-center fw-bold p-4 my-3 bg-theme-${theme.isDarkMode('dark', 'light')} rounded-4 shadow">Yuk bagikan undangan ini biar banyak komentarnya</div>`;

await request(HTTP_GET, `/api/comment?per=${pagination.getPer()}&next=${pagination.getNext()}`)
.token(session.get('token'))
Expand All @@ -241,7 +242,7 @@ export const comment = (() => {
pagination.setResultData(res.data.length);

if (res.data.length === 0) {
comments.innerHTML = `<div class="h6 text-center fw-bold p-4 my-3 bg-theme-${theme.isDarkMode('dark', 'light')} rounded-4 shadow">Yuk bagikan undangan ini biar banyak komentarnya</div>`;
comments.innerHTML = onNullComment;
return;
}

Expand All @@ -260,6 +261,7 @@ export const comment = (() => {
return arrHidden;
})());

comments.setAttribute('data-loading', 'false');
comments.innerHTML = res.data.map((comment) => card.renderContent(comment)).join('');

uuids.forEach((c) => {
Expand Down
11 changes: 8 additions & 3 deletions js/progress.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,13 @@ export const progress = (() => {
bar.style.width = Math.min((loaded / total) * 100, 100).toString() + "%";
info.innerText = `Loading assets (${loaded}/${total}) [${parseInt((loaded / total) * 100).toFixed(0)}%]`;

if (loaded == total) {
util.show();
if (loaded === total) {
util.guest();
util.opacity('loading', 0.025);
window.scroll({
top: 0,
behavior: 'instant',
});
}
};

Expand All @@ -32,7 +37,7 @@ export const progress = (() => {
if (asset.complete && asset.naturalWidth !== 0) {
progress();
} else {
asset.addEventListener('load', () => progress());
asset.addEventListener('load', progress);
}
});
};
Expand Down
16 changes: 6 additions & 10 deletions js/util.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,12 +73,6 @@ export const util = (() => {
guest.appendChild(div);
};

const show = () => {
guest();
opacity('loading', 0.025);
window.scrollTo(0, 0);
};

const modal = (img) => {
document.getElementById('show-modal-image').src = img.src;
(new bootstrap.Modal('#modal-image')).show();
Expand Down Expand Up @@ -169,7 +163,8 @@ export const util = (() => {
zIndex: 1057
});

document.querySelector('body').style.overflowY = 'scroll';
document.body.style.overflowY = 'scroll';
document.getElementById('home').scrollIntoView({ behavior: 'instant' });
opacity('welcome', 0.025);

audio.play();
Expand Down Expand Up @@ -209,13 +204,14 @@ export const util = (() => {
const token = document.querySelector('body').getAttribute('data-key');

countDownDate();

if (storage('information').get('info')) {
document.getElementById('information')?.remove();
}

if (!token || token.length === 0) {
document.getElementById('ucapan')?.remove();
document.querySelector('a.nav-link[href="#ucapan"]')?.closest('li.nav-item')?.remove();
document.getElementById('comment')?.remove();
document.querySelector('a.nav-link[href="#comment"]')?.closest('li.nav-item')?.remove();
return;
}

Expand All @@ -238,9 +234,9 @@ export const util = (() => {
init,
open,
copy,
show,
close,
modal,
guest,
opacity,
animate,
animation,
Expand Down

0 comments on commit 7135c68

Please sign in to comment.