Skip to content

Commit 45d09d1

Browse files
dewanakldewanakl
committed
feat: add Tenor key input and handling for GIF comments
1 parent 7828880 commit 45d09d1

File tree

6 files changed

+86
-34
lines changed

6 files changed

+86
-34
lines changed

‎dashboard.html

+15-1
Original file line numberDiff line numberDiff line change
@@ -229,7 +229,7 @@ <h5 class="fw-bold my-1 ms-0 p-0" style="color: var(--bs-gray-900); font-size: 1
229229
<label for="form-comment" class="form-label fw-bold my-1"><i class="fa-solid fa-comment me-2"></i>Comment</label>
230230

231231
<div class="position-relative">
232-
<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>
232+
<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(undangan.comment.gif.default)" aria-label="button gif" data-offline-disabled="false"><i class="fa-solid fa-photo-film"></i></button>
233233
<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>
234234
</div>
235235
</div>
@@ -290,6 +290,20 @@ <h5 class="fw-bold my-1 ms-0 p-0" style="color: var(--bs-gray-900); font-size: 1
290290
</div>
291291
</div>
292292

293+
<!-- Tenor Key -->
294+
<div class="p-3 bg-theme-auto mb-3 rounded-4 shadow">
295+
<p class="mx-0 mt-0 mb-1 p-0 fw-bold"><i class="fa-solid fa-photo-film me-2"></i>Tenor Key</p>
296+
297+
<div class="input-group input-group-sm rounded-4 mb-3">
298+
<input type="text" class="form-control form-control-sm rounded-start-4 shadow-sm" id="dashboard-tenorkey" placeholder="Api key tenor" autocomplete="off">
299+
<button class="btn btn-sm btn-outline-secondary rounded-end-4 shadow-sm" type="button" onclick="document.getElementById('dashboard-tenorkey').value = null"><i class="fa-solid fa-trash-can"></i></button>
300+
</div>
301+
302+
<div class="d-flex justify-content-end">
303+
<button type="button" class="btn btn-sm btn-primary rounded-4 shadow-sm" onclick="undangan.admin.tenor(this)" data-offline-disabled="false">Save</button>
304+
</div>
305+
</div>
306+
293307
<!-- Toggle -->
294308
<div class="p-3 bg-theme-auto mb-3 rounded-4 shadow">
295309
<p class="mx-0 mt-0 mb-1 p-0 fw-bold"><i class="fa-solid fa-sliders me-2"></i>Control</p>

‎index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -484,7 +484,7 @@ <h2 class="font-esthetic text-center mt-2 mb-4" style="font-size: 2.25rem;">Ucap
484484

485485
<label for="form-comment" class="form-label my-1"><i class="fa-solid fa-comment me-2"></i>Ucapan &amp; Doa</label>
486486
<div class="position-relative">
487-
<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>
487+
<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(undangan.comment.gif.default)" aria-label="button gif" data-offline-disabled="false"><i class="fa-solid fa-photo-film"></i></button>
488488
<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>
489489
</div>
490490
</div>

‎js/app/admin/admin.js

+25-1
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,9 @@ export const admin = (() => {
2727
document.getElementById('replyComment').checked = Boolean(res.data.can_reply);
2828
document.getElementById('editComment').checked = Boolean(res.data.can_edit);
2929
document.getElementById('deleteComment').checked = Boolean(res.data.can_delete);
30+
document.getElementById('dashboard-tenorkey').value = res.data.tenor_key;
31+
32+
storage('config').set('tenor_key', res.data.tenor_key);
3033
});
3134

3235
request(HTTP_GET, '/api/stats').token(session.getToken()).send().then((res) => {
@@ -36,6 +39,7 @@ export const admin = (() => {
3639
document.getElementById('count-absent').innerHTML = String(res.data.absent).replace(/\B(?=(\d{3})+(?!\d))/g, '.');
3740
});
3841

42+
comment.init();
3943
comment.show();
4044
};
4145

@@ -107,6 +111,26 @@ export const admin = (() => {
107111
label.restore();
108112
};
109113

114+
/**
115+
* @param {HTMLButtonElement} button
116+
* @returns {Promise<void>}
117+
*/
118+
const tenor = async (button) => {
119+
const btn = util.disableButton(button);
120+
const form = document.getElementById('dashboard-tenorkey');
121+
122+
form.disabled = true;
123+
await request(HTTP_PATCH, '/api/user').
124+
token(session.getToken()).
125+
body({
126+
tenor_key: form.value.length ? form.value : null
127+
}).
128+
send();
129+
130+
form.disabled = false;
131+
btn.restore();
132+
};
133+
110134
/**
111135
* @param {HTMLButtonElement} button
112136
* @returns {Promise<void>}
@@ -253,7 +277,6 @@ export const admin = (() => {
253277
*/
254278
const domLoaded = () => {
255279
offline.init();
256-
comment.init();
257280
theme.spyTop();
258281

259282
document.addEventListener('hidden.bs.modal', getAllRequest);
@@ -303,6 +326,7 @@ export const admin = (() => {
303326
auth,
304327
navbar,
305328
logout,
329+
tenor,
306330
download,
307331
regenerate,
308332
editComment,

‎js/app/component/card.js

+10-3
Original file line numberDiff line numberDiff line change
@@ -94,14 +94,21 @@ export const card = (() => {
9494
* @returns {string}
9595
*/
9696
const renderAction = (c) => {
97+
const isGif = c.gif_url !== null && c.gif_url !== undefined;
9798
let action = `<div class="d-flex justify-content-start align-items-center" data-button-action="${c.uuid}">`;
9899

99100
if (config.get('can_reply') === true || config.get('can_reply') === undefined) {
100101
action += `<button style="font-size: 0.8rem;" onclick="undangan.comment.reply(this)" data-uuid="${c.uuid}" class="btn btn-sm btn-outline-auto rounded-4 py-0 me-1 shadow-sm" data-offline-disabled="false">Reply</button>`;
101102
}
102103

103104
if (owns.has(c.uuid) && (config.get('can_edit') === true || config.get('can_edit') === undefined)) {
104-
action += `<button style="font-size: 0.8rem;" onclick="undangan.comment.edit(this)" data-uuid="${c.uuid}" class="btn btn-sm btn-outline-auto rounded-4 py-0 me-1 shadow-sm" data-offline-disabled="false">Edit</button>`;
105+
let result = `<button style="font-size: 0.8rem;" onclick="undangan.comment.edit(this)" data-uuid="${c.uuid}" class="btn btn-sm btn-outline-auto rounded-4 py-0 me-1 shadow-sm" data-offline-disabled="false">Edit</button>`;
106+
107+
if (isGif && config.get('tenor_key') === null) {
108+
result = '';
109+
}
110+
111+
action += result;
105112
}
106113

107114
if (session.isAdmin()) {
@@ -252,7 +259,7 @@ export const card = (() => {
252259
<p class="my-1 mx-0 p-0" style="font-size: 0.95rem;"><i class="fa-solid fa-reply me-2"></i>Reply</p>
253260
<div class="d-block mb-2" id="comment-form-${id}">
254261
<div class="position-relative">
255-
<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>
262+
${config.get('tenor_key') === null ? '' : `<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>`}
256263
<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>
257264
</div>
258265
</div>
@@ -284,7 +291,7 @@ export const card = (() => {
284291
<option value="2" ${presence ? '' : 'selected'}>Berhalangan</option>
285292
</select>`}
286293
${!is_gif ? `<textarea class="form-control shadow-sm rounded-4 mb-2" id="form-inner-${id}" minlength="1" maxlength="1000" placeholder="Type update comment" rows="3" data-offline-disabled="false"></textarea>
287-
` : `<div class="d-none mb-2" id="gif-form-${id}"></div>`}
294+
` : `${config.get('tenor_key') === null ? '' : `<div class="d-none mb-2" id="gif-form-${id}"></div>`}`}
288295
<div class="d-flex justify-content-end align-items-center mb-0">
289296
<button style="font-size: 0.8rem;" onclick="undangan.comment.cancel('${id}')" class="btn btn-sm btn-outline-auto rounded-4 py-0 me-1" data-offline-disabled="false">Cancel</button>
290297
<button style="font-size: 0.8rem;" onclick="undangan.comment.update(this)" data-uuid="${id}" class="btn btn-sm btn-outline-auto rounded-4 py-0" data-offline-disabled="false">Update</button>

‎js/app/component/gif.js

+7
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ export const gif = (() => {
66

77
const cacheName = 'gifs';
88

9+
const gifDefault = 'default';
10+
911
const breakPoint = {
1012
128: 2,
1113
256: 3,
@@ -477,9 +479,14 @@ export const gif = (() => {
477479
const lang = document.documentElement.lang.split('-')[0].toLowerCase();
478480
conf.set('country', countryMapping[lang] ?? 'US');
479481
conf.set('locale', `${lang}_${conf.get('country')}`);
482+
483+
if (conf.get('tenor_key') === null) {
484+
document.querySelector('[onclick="undangan.comment.gif.open(undangan.comment.gif.default)"]').remove();
485+
}
480486
};
481487

482488
return {
489+
default: gifDefault,
483490
init,
484491
cache,
485492
back,

‎js/app/guest/guest.js

+28-28
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,33 @@ export const guest = (() => {
9494
}
9595
};
9696

97+
/**
98+
* @returns {void}
99+
*/
100+
const slide = () => {
101+
let index = 0;
102+
const slides = document.querySelectorAll('.slide-desktop');
103+
104+
slides.forEach((s, i) => {
105+
if (i === index) {
106+
s.classList.add('slide-desktop-active');
107+
util.changeOpacity(s, true);
108+
}
109+
});
110+
111+
const nextSlide = async () => {
112+
await util.changeOpacity(slides[index], false);
113+
slides[index].classList.remove('slide-desktop-active');
114+
115+
index = (index + 1) % slides.length;
116+
117+
slides[index].classList.add('slide-desktop-active');
118+
await util.changeOpacity(slides[index], true);
119+
};
120+
121+
setInterval(nextSlide, 5000);
122+
};
123+
97124
/**
98125
* @param {HTMLButtonElement} button
99126
* @returns {void}
@@ -106,6 +133,7 @@ export const guest = (() => {
106133
document.getElementById('button-theme').style.display = 'block';
107134
}
108135

136+
slide();
109137
audio.init();
110138
theme.spyTop();
111139

@@ -174,38 +202,10 @@ export const guest = (() => {
174202
document.querySelector('#home button')?.addEventListener('click', () => window.open(url, '_blank'));
175203
};
176204

177-
/**
178-
* @returns {void}
179-
*/
180-
const slide = () => {
181-
let index = 0;
182-
const slides = document.querySelectorAll('.slide-desktop');
183-
184-
slides.forEach((s, i) => {
185-
if (i === index) {
186-
s.classList.add('slide-desktop-active');
187-
util.changeOpacity(s, true);
188-
}
189-
});
190-
191-
const nextSlide = async () => {
192-
await util.changeOpacity(slides[index], false);
193-
slides[index].classList.remove('slide-desktop-active');
194-
195-
index = (index + 1) % slides.length;
196-
197-
slides[index].classList.add('slide-desktop-active');
198-
await util.changeOpacity(slides[index], true);
199-
};
200-
201-
setInterval(nextSlide, 5000);
202-
};
203-
204205
/**
205206
* @returns {void}
206207
*/
207208
const booting = () => {
208-
slide();
209209
animateSvg();
210210
countDownDate();
211211
showGuestName();

0 commit comments

Comments
 (0)