vibegif/vibegif.lol
1
0
Fork 0
mirror of https://github.com/vibegif/vibegif.lol.git synced 2026-04-07 10:12:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Feat: UI state management and DOM helpers

Browse Source
This commit is contained in:
multipleof4
2026-03-20 22:07:56 -07:00
parent 47fcdb2edc
commit 72b69455e9
1 changed files with 87 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
ui.js Normal file
View File

@@ -0,0 +1,87 @@
const $ = (s) => document.querySelector(s);
export const el = {
setupScreen: $('#setup-screen'),
mainScreen: $('#main-screen'),
setupKey: $('#setup-key'),
setupSave: $('#setup-save'),
btnSettings: $('#btn-settings'),
modal: $('#modal-settings'),
modalKey: $('#modal-key'),
modalSave: $('#modal-save'),
btnCloseModal: $('#btn-close-modal'),
selModel: $('#sel-model'),
inpPrompt: $('#inp-prompt'),
inpFrames: $('#inp-frames'),
inpFps: $('#inp-fps'),
selSize: $('#sel-size'),
selRatio: $('#sel-ratio'),
btnGenerate: $('#btn-generate'),
progressArea: $('#progress-area'),
progressBar: $('#progress-bar'),
progressText: $('#progress-text'),
framesPreview: $('#frames-preview'),
resultArea: $('#result-area'),
resultGif: $('#result-gif'),
btnDownload: $('#btn-download'),
};
export function showSetup() {
el.setupScreen.classList.remove('hidden');
el.mainScreen.classList.add('hidden');
}
export function showMain() {
el.setupScreen.classList.add('hidden');
el.mainScreen.classList.remove('hidden');
}
export function showModal(currentKey) {
el.modalKey.value = currentKey;
el.modal.classList.remove('hidden');
}
export function hideModal() {
el.modal.classList.add('hidden');
}
export function setProgress(pct, text) {
el.progressArea.classList.remove('hidden');
el.progressArea.classList.add('flex-col');
el.progressBar.style.width = `${pct}%`;
el.progressText.textContent = text;
}
export function addFramePreview(base64, index) {
const img = document.createElement('img');
img.src = base64;
img.className = 'w-16 h-16 rounded-lg border border-neutral-200 object-cover';
img.title = `frame ${index + 1}`;
el.framesPreview.appendChild(img);
}
export function resetProgress() {
el.progressArea.classList.add('hidden');
el.progressArea.classList.remove('flex-col');
el.progressBar.style.width = '0%';
el.progressText.textContent = '';
el.framesPreview.innerHTML = '';
}
export function showResult(blobUrl) {
el.resultArea.classList.remove('hidden');
el.resultArea.classList.add('flex-col');
el.resultGif.src = blobUrl;
el.btnDownload.href = blobUrl;
}
export function hideResult() {
el.resultArea.classList.add('hidden');
el.resultArea.classList.remove('flex-col');
}
export function setGenerating(active) {
el.btnGenerate.disabled = active;
el.btnGenerate.classList.toggle('opacity-50', active);
el.btnGenerate.classList.toggle('cursor-not-allowed', active);
}