Skip to content

Commit

Permalink
feat: enhance GIF handling functions
Browse files Browse the repository at this point in the history
  • Loading branch information
@dewanakl
dewanakl committed Feb 27, 2025
1 parent 6e7598f commit fc4a1b3
Show file tree
Hide file tree
Showing 5 changed files with 94 additions and 53 deletions.
2 changes: 1 addition & 1 deletion dashboard.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -229,7 +229,7 @@ <h5 class="fw-bold my-1 ms-0 p-0" style="color: var(--bs-gray-900); font-size: 1
<label for="form-comment" class="form-label fw-bold my-1"><i class="fa-solid fa-comment me-2"></i>Comment</label>

<div class="position-relative">
<button class="btn btn-secondary btn-sm rounded-4 shadow-sm me-1 my-1 position-absolute bottom-0 end-0" onclick="undangan.comment.gif.open('default')" data-offline-disabled="false"><i class="fa-solid fa-photo-film"></i></button>
<button class="btn btn-secondary btn-sm rounded-4 shadow-sm me-1 my-1 position-absolute bottom-0 end-0" onclick="undangan.comment.gif.open('default')" aria-label="button gif" data-offline-disabled="false"><i class="fa-solid fa-photo-film"></i></button>
<textarea class="form-control shadow-sm mb-3 rounded-4" id="form-comment" name="form-comment" rows="3" minlength="1" maxlength="1000" placeholder="Type to comment" data-offline-disabled="false"></textarea>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -473,7 +473,7 @@ <h2 class="font-esthetic text-center mt-2 mb-4" style="font-size: 2.25rem;">Ucap

<label for="form-comment" class="form-label my-1"><i class="fa-solid fa-comment me-2"></i>Ucapan &amp; Doa</label>
<div class="position-relative">
<button class="btn btn-secondary btn-sm rounded-4 shadow-sm me-1 my-1 position-absolute bottom-0 end-0" onclick="undangan.comment.gif.open('default')" data-offline-disabled="false"><i class="fa-solid fa-photo-film"></i></button>
<button class="btn btn-secondary btn-sm rounded-4 shadow-sm me-1 my-1 position-absolute bottom-0 end-0" onclick="undangan.comment.gif.open('default')" aria-label="button gif" data-offline-disabled="false"><i class="fa-solid fa-photo-film"></i></button>
<textarea class="form-control shadow-sm rounded-4" id="form-comment" rows="4" minlength="1" maxlength="1000" placeholder="Tulis Ucapan dan Doa" autocomplete="off" data-offline-disabled="false"></textarea>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion js/app/component/card.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -252,7 +252,7 @@ export const card = (() => {
<p class="my-1 mx-0 p-0" style="font-size: 0.95rem;"><i class="fa-solid fa-reply me-2"></i>Reply</p>
<div class="d-block mb-2" id="comment-form-${id}">
<div class="position-relative">
<button class="btn btn-secondary btn-sm rounded-4 shadow-sm me-1 my-1 position-absolute bottom-0 end-0" onclick="undangan.comment.gif.open('${id}')" data-offline-disabled="false"><i class="fa-solid fa-photo-film"></i></button>
<button class="btn btn-secondary btn-sm rounded-4 shadow-sm me-1 my-1 position-absolute bottom-0 end-0" onclick="undangan.comment.gif.open('${id}')" aria-label="button gif" data-offline-disabled="false"><i class="fa-solid fa-photo-film"></i></button>
<textarea class="form-control shadow-sm rounded-4 mb-2" id="form-inner-${id}" minlength="1" maxlength="1000" placeholder="Type reply comment" rows="3" data-offline-disabled="false"></textarea>
</div>
</div>
Expand Down
103 changes: 53 additions & 50 deletions js/app/component/comment.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,11 +48,6 @@ export const comment = (() => {
});
};

/**
* @returns {void}
*/
const scroll = () => document.getElementById('comments').scrollIntoView({ behavior: 'smooth' });

/**
* @param {ReturnType<typeof dto.getCommentResponse>} c
* @returns {void}
Expand Down Expand Up @@ -135,9 +130,8 @@ export const comment = (() => {
isChecklist = badge.classList.contains('text-success');
}

const gifContainer = document.getElementById(`gif-form-${id}`);
const gifIsOpen = gifContainer === null ? false : !gifContainer.classList.contains('d-none');
const gifId = document.getElementById(`gif-result-${id}`)?.getAttribute('data-id');
const gifIsOpen = gif.isOpen(id);
const gifId = gif.getResultId(id);
const gifCancel = document.getElementById(`gif-cancel-${id}`);
const form = document.getElementById(`form-inner-${id}`);

Expand All @@ -164,7 +158,7 @@ export const comment = (() => {

const status = await request(HTTP_PUT, '/api/comment/' + owns.get(id))
.token(session.getToken())
.body(dto.updateCommentRequest(presence ? isPresent : null, form?.value, gifId))
.body(dto.updateCommentRequest(presence ? isPresent : null, form.value.length ? form.value : null, gifId))
.send(dto.statusResponse)
.then((res) => res.data.status, () => false);

Expand All @@ -191,7 +185,7 @@ export const comment = (() => {
}

if (gifIsOpen && gifId) {
document.getElementById(`img-gif-${id}`).src = document.getElementById(`gif-result-${id}`).querySelector('img').src;
document.getElementById(`img-gif-${id}`).src = gif.getAttribute(id, 'result').querySelector('img').src;
gifCancel.dispatchEvent(new Event('click'));
}

Expand All @@ -206,6 +200,7 @@ export const comment = (() => {
if (original.length > card.maxCommentLength) {
content.innerHTML = show?.getAttribute('data-show') === 'false' ? original.slice(0, card.maxCommentLength) + '...' : original;
content.setAttribute('data-comment', util.base64Encode(original));
// todo: use bootstrap class
if (show?.style.display === 'none') {
show.style.display = 'block';
}
Expand Down Expand Up @@ -267,8 +262,8 @@ export const comment = (() => {
return;
}

const gifIsOpen = !document.getElementById(`gif-form-${id ? id : 'default'}`)?.classList.contains('d-none');
const gifId = document.getElementById(`gif-result-${id ? id : 'default'}`)?.getAttribute('data-id');
const gifIsOpen = gif.isOpen(id ? id : 'default');
const gifId = gif.getResultId(id ? id : 'default');
const gifCancel = document.getElementById(`gif-cancel-${id ? id : 'default'}`);

if (gifIsOpen && !gifId) {
Expand Down Expand Up @@ -317,7 +312,7 @@ export const comment = (() => {

const response = await request(HTTP_POST, '/api/comment')
.token(session.getToken())
.body(dto.postCommentRequest(id, nameValue, isPresence, form?.value, gifId))
.body(dto.postCommentRequest(id, nameValue, isPresence, form.value.length ? form.value : null, gifId))
.send(dto.getCommentResponse)
.then((res) => res, () => null);

Expand Down Expand Up @@ -358,24 +353,25 @@ export const comment = (() => {
}

if (!id) {
const comments = document.getElementById('comments');
const newPage = await pagination.reset();

if (newPage) {
await show();
scroll();
comments.scrollIntoView({ behavior: 'smooth' });
return;
}

const c = document.getElementById('comments');
pagination.setResultData(c.children.length);

pagination.setResultData(comments.children.length);
if (pagination.getResultData() === pagination.getPer()) {
c.lastElementChild.remove();
comments.lastElementChild.remove();
}

response.data.is_admin = session.isAdmin();
const newComment = await card.renderContent(response.data);
c.innerHTML = newComment + c.innerHTML;
scroll();

comments.insertAdjacentHTML('afterbegin', newComment);
comments.scrollIntoView({ behavior: 'smooth' });
}

if (id) {
Expand All @@ -400,8 +396,8 @@ export const comment = (() => {
anchorTag.remove();
}

containerDiv.querySelector(`button[onclick="undangan.comment.like.love(this)"][data-uuid="${id}"]`)
.insertAdjacentHTML('beforebegin', card.renderReadMore(id, anchorTag ? anchorTag.getAttribute('data-uuids').split(',').concat(uuids) : uuids));
const query = `button[onclick="undangan.comment.like.love(this)"][data-uuid="${id}"]`;
containerDiv.querySelector(query).insertAdjacentHTML('beforebegin', card.renderReadMore(id, anchorTag ? anchorTag.getAttribute('data-uuids').split(',').concat(uuids) : uuids));
}

addListenerLike(response.data);
Expand All @@ -426,16 +422,13 @@ export const comment = (() => {
isChecklist = badge.classList.contains('text-success');
}

const gifContainer = document.getElementById(`gif-form-${id}`);
const gifIsOpen = gifContainer === null ? false : !gifContainer.classList.contains('d-none');
const gifId = document.getElementById(`gif-result-${id}`)?.getAttribute('data-id');

if (gifIsOpen) {
if (!gifId || confirm('Are you sure?')) {
if (gif.isOpen(id)) {
if (!gif.getResultId(id) || confirm('Are you sure?')) {
gif.remove(id);
changeButton(id, false);
document.getElementById(`inner-${id}`).remove();
}

return;
}

Expand All @@ -460,7 +453,7 @@ export const comment = (() => {
gif.remove(id);
document.getElementById(`button-${id}`).insertAdjacentElement('afterend', card.renderReply(id));

document.getElementById(`gif-form-${id}`).addEventListener('gif.open', () => {
gif.onOpen(id, () => {
document.querySelector(`[for="gif-search-${id}"]`)?.remove();
});
};
Expand All @@ -487,13 +480,16 @@ export const comment = (() => {
return res;
}

const isParent = document.getElementById(id).getAttribute('data-parent') === 'true' && !session.isAdmin();
const isGif = res.data.gif_url !== null && res.data.gif_url !== undefined;
gif.remove(id);
if (isGif) {
gif.remove(id);
}

const isParent = document.getElementById(id).getAttribute('data-parent') === 'true' && !session.isAdmin();
document.getElementById(`button-${id}`).insertAdjacentElement('afterend', card.renderEdit(id, res.data.presence, isParent, isGif));

if (isGif) {
document.getElementById(`gif-form-${id}`).addEventListener('gif.open', () => {
gif.onOpen(id, () => {
document.querySelector(`[for="gif-search-${id}"]`)?.remove();
document.querySelector(`[onclick="undangan.comment.gif.back('${id}')"]`)?.remove();
});
Expand Down Expand Up @@ -534,37 +530,37 @@ export const comment = (() => {
* @returns {Promise<ReturnType<typeof dto.getCommentsResponse>>}
*/
const show = () => {
const c = document.getElementById('comments');
const comments = document.getElementById('comments');

if (c.getAttribute('data-loading') === 'false') {
c.setAttribute('data-loading', 'true');
c.innerHTML = card.renderLoading().repeat(pagination.getPer());
if (comments.getAttribute('data-loading') === 'false') {
comments.setAttribute('data-loading', 'true');
comments.innerHTML = card.renderLoading().repeat(pagination.getPer());
}

return request(HTTP_GET, `/api/comment?per=${pagination.getPer()}&next=${pagination.getNext()}`)
.token(session.getToken())
.send(dto.getCommentsResponse)
.then(async (res) => {
gif.remove();
pagination.setResultData(res.data.length);
c.setAttribute('data-loading', 'false');
comments.setAttribute('data-loading', 'false');

if (res.data.length === 0) {
c.innerHTML = onNullComment();
comments.innerHTML = onNullComment();
return res;
}

gif.remove();
showHide.set('hidden', traverse(res.data, showHide.get('hidden')));

let data = '';
for (const i of res.data) {
data += await card.renderContent(i);
}
c.innerHTML = data;
comments.innerHTML = data;

res.data.forEach(fetchTracker);
res.data.forEach(addListenerLike);
c.dispatchEvent(new Event('comment.result'));
comments.dispatchEvent(new Event('comment.result'));

return res;
});
Expand Down Expand Up @@ -611,11 +607,11 @@ export const comment = (() => {
* @returns {void}
*/
const showMore = (anchor, uuid) => {
const c = document.getElementById(`content-${uuid}`);
const original = util.base64Decode(c.getAttribute('data-comment'));
const comments = document.getElementById(`content-${uuid}`);
const original = util.base64Decode(comments.getAttribute('data-comment'));
const isCollapsed = anchor.getAttribute('data-show') === 'false';

c.innerHTML = isCollapsed ? original : original.slice(0, card.maxCommentLength) + '...';
comments.innerHTML = isCollapsed ? original : original.slice(0, card.maxCommentLength) + '...';
anchor.innerText = isCollapsed ? 'Sebagian' : 'Selengkapnya';
anchor.setAttribute('data-show', isCollapsed ? 'true' : 'false');
};
Expand All @@ -637,6 +633,16 @@ export const comment = (() => {
return;
}

/**
* @param {string} uuid
* @param {string} ip
* @param {string} result
* @returns {void}
*/
const setResult = (uuid, ip, result) => {
document.getElementById(`ip-${uuid}`).innerHTML = `<i class="fa-solid fa-location-dot me-1"></i>${util.escapeHtml(ip)} <strong>${util.escapeHtml(result)}</strong>`;
};

request(HTTP_GET, `https://freeipapi.com/api/json/${c.ip}`)
.default()
.then((res) => res.json())
Expand All @@ -648,11 +654,9 @@ export const comment = (() => {
}

tracker.set(c.ip, result);
document.getElementById(`ip-${c.uuid}`).innerHTML = `<i class="fa-solid fa-location-dot me-1"></i>${util.escapeHtml(c.ip)} <strong>${result}</strong>`;
setResult(c.uuid, c.ip, result);
})
.catch((err) => {
document.getElementById(`ip-${c.uuid}`).innerHTML = `<i class="fa-solid fa-location-dot me-1"></i>${util.escapeHtml(c.ip)} <strong>${util.escapeHtml(err.message)}</strong>`;
});
.catch((err) => setResult(c.uuid, c.ip, err.message));
};

/**
Expand Down Expand Up @@ -684,13 +688,12 @@ export const comment = (() => {
like,
pagination,
init,
scroll,
cancel,
send,
edit,
reply,
remove,
update,
cancel,
show,
showMore,
showOrHide,
Expand Down
38 changes: 38 additions & 0 deletions js/app/component/gif.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -427,6 +427,40 @@ export const gif = (() => {
*/
const remove = (uuid = null) => uuid ? objectPool.delete(uuid) : objectPool.clear();

/**
* @param {string} uuid
* @returns {boolean}
*/
const isOpen = (uuid) => {
if (!objectPool.has(uuid)) {
return false;
}

const ses = objectPool.get(uuid);
return ses.container === null ? false : !ses.container.classList.contains('d-none');
};

/**
* @param {string} uuid
* @returns {string|null}
*/
const getResultId = (uuid) => objectPool.get(uuid)?.result?.getAttribute('data-id');

/**
* @param {string} uuid
* @param {function} callback
*/
const onOpen = (uuid, callback) => {
objectPool.get(uuid)?.container?.addEventListener('gif.open', callback);
};

/**
* @param {string} uuid
* @param {string} att
* @returns {null|string|number|HTMLElement}
*/
const getAttribute = (uuid, att) => objectPool.get(uuid)[att];

/**
* @returns {void}
*/
Expand Down Expand Up @@ -454,5 +488,9 @@ export const gif = (() => {
cancel,
click,
remove,
isOpen,
onOpen,
getResultId,
getAttribute,
};
})();

0 comments on commit fc4a1b3

Please sign in to comment.