kibi/f0ckm
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

add item titles

Browse Source
This commit is contained in:
Kibi Kelburton
2026-05-24 23:02:49 +02:00
parent 187f35227b
commit 613f099a8b
13 changed files with 334 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
public/s/js/f0ckm.js
View File

@@ -8991,6 +8991,81 @@ if (navigator.vibrate) {
return;
}
// Title save button
const saveBtn = e.target.closest('#info-title-save');
if (saveBtn) {
e.preventDefault();
const input = document.getElementById('info-title-input');
const status = document.getElementById('info-title-status');
if (!input) return;
const itemId = input.dataset.itemId;
const newTitle = input.value.trim();
const csrf = window.f0ckSession?.csrf_token;
saveBtn.disabled = true;
const origIcon = saveBtn.innerHTML;
saveBtn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i>';
fetch(`/api/v2/items/${itemId}/title`, {
method: 'PATCH',
headers: {
'Content-Type': 'application/json',
'X-CSRF-Token': csrf
},
body: JSON.stringify({ title: newTitle })
})
.then(r => r.json())
.then(data => {
saveBtn.disabled = false;
saveBtn.innerHTML = origIcon;
if (data.success) {
// Update the live .item_title bar below the ID bar
let titleBar = document.querySelector('.item_title');
if (data.title) {
if (titleBar) {
titleBar.textContent = data.title;
titleBar.style.display = '';
} else {
// Create it if it doesn't exist yet
const idBar = document.querySelector('.item-main-content > ._204863');
if (idBar) {
titleBar = document.createElement('div');
titleBar.className = 'item_title';
titleBar.textContent = data.title;
idBar.insertAdjacentElement('afterend', titleBar);
}
}
} else {
// Title cleared
if (titleBar) titleBar.remove();
}
if (status) {
status.textContent = '✓ Saved';
status.style.color = 'var(--accent, #5cb85c)';
status.style.display = 'inline';
setTimeout(() => { status.style.display = 'none'; }, 2000);
}
} else {
if (status) {
status.textContent = data.msg || 'Error saving title';
status.style.color = '#e84040';
status.style.display = 'inline';
}
}
})
.catch(() => {
saveBtn.disabled = false;
saveBtn.innerHTML = origIcon;
if (status) {
status.textContent = 'Network error';
status.style.color = '#e84040';
status.style.display = 'inline';
}
});
return;
}
// Close when clicking outside modal content
const infoModal = document.getElementById('info-modal');
if (infoModal && e.target === infoModal) {

39
public/s/js/upload.js
View File

@@ -590,7 +590,7 @@ window.initUploadForm = (selector) => {
}
lines.forEach(url => {
if (!selectedFiles.some(item => item.type === 'url' && item.url === url)) {
selectedFiles.push({ type: 'url', url, rating: '', tags: [], comment: '', is_oc: false });
selectedFiles.push({ type: 'url', url, rating: '', tags: [], comment: '', title: '', is_oc: false });
}
});
urlInput.value = '';
@@ -613,7 +613,7 @@ window.initUploadForm = (selector) => {
const val = urlInput.value.trim();
if (!val || !/^https?:\/\//i.test(val)) return;
if (!selectedFiles.some(item => item.type === 'url' && item.url === val)) {
selectedFiles.push({ type: 'url', url: val, rating: '', tags: [], comment: '', is_oc: false });
selectedFiles.push({ type: 'url', url: val, rating: '', tags: [], comment: '', title: '', is_oc: false });
}
urlInput.value = '';
if (urlBadge) urlBadge.style.display = 'none';
@@ -812,7 +812,7 @@ window.initUploadForm = (selector) => {
if (!selectedFiles.some(f => (f.file || f).name === file.name && (f.file || f).size === file.size)) {
if (isShitpost) {
selectedFiles.push({ type: 'file', file: file, rating: '', tags: [], comment: '', is_oc: false });
selectedFiles.push({ type: 'file', file: file, rating: '', tags: [], comment: '', title: '', is_oc: false });
} else {
selectedFiles.push(file); // Legacy single file mode uses raw File
}
@@ -978,6 +978,7 @@ window.initUploadForm = (selector) => {
let tagsUI = '';
let ocUI = '';
let commentUI = '';
let titleUI = '';
if (isShitpost) {
const nsflEnabled = !!form.querySelector('input[name="rating"][value="nsfl"]');
// Build per-item rating HTML
@@ -1012,8 +1013,13 @@ window.initUploadForm = (selector) => {
</div>
`;
titleUI = `
<div class="item-title-container">
<input type="text" class="item-title-input" placeholder="Add Title..." maxlength="500" value="${window.escapeHtmlUpload(item.title || '')}">
</div>
`;
const commentPlaceholder = window.f0ckI18n?.upload_comment_placeholder || 'Comment (optional)...';
const commentPlaceholder = window.f0ckI18n?.upload_comment_placeholder || 'AddComment...';
const maxLenHtml = (commentMaxLen !== null && !isNaN(commentMaxLen)) ? ` maxlength="${commentMaxLen}"` : '';
commentUI = `
<div class="item-comment-container">
@@ -1035,6 +1041,7 @@ window.initUploadForm = (selector) => {
<span class="file-name-small" title="${window.escapeHtmlUpload(fileNameStr)}">${window.escapeHtmlUpload(fileNameStr)}</span>
<span class="file-size-small">${fileSizeStr}</span>
</div>
${titleUI}
${ratingSwitch}
${tagsUI}
${commentUI}
@@ -1057,6 +1064,12 @@ window.initUploadForm = (selector) => {
if (emojiTrigger) setupItemEmojiPicker(commentInput, emojiTrigger);
}
// Handle Title
const titleInput = infoRow.querySelector('.item-title-input');
if (titleInput) {
titleInput.oninput = () => { item.title = titleInput.value.trim(); };
}
// Handle Tags
const tagList = infoRow.querySelector('.item-tags-list');
const tagInput = infoRow.querySelector('.item-tag-input');
@@ -1794,6 +1807,15 @@ window.initUploadForm = (selector) => {
window.f0ckInitTagAutocomplete(tagInput, tagSuggestions, addTag, () => tags);
}
// Prevent Enter in the title input from submitting the form and
// accidentally flushing whatever is currently typed in the tag input as a tag.
const titleInputEl = form.querySelector('.upload-title-input');
if (titleInputEl) {
titleInputEl.addEventListener('keydown', (e) => {
if (e.key === 'Enter') e.preventDefault();
});
}
form.querySelectorAll('input[name="rating"]').forEach(radio => {
radio.addEventListener('change', updateSubmitButton);
});
@@ -1831,6 +1853,7 @@ window.initUploadForm = (selector) => {
const dragModal = form.closest('#upload-drag-modal');
const comment = form.querySelector('.upload-comment')?.value.trim() || '';
const isOc = form.querySelector('#upload-oc-checkbox')?.checked || false;
const titleVal = form.querySelector('.upload-title-input')?.value.trim() || '';
const setBtnLoading = (text) => {
isUploading = true;
@@ -1893,7 +1916,8 @@ window.initUploadForm = (selector) => {
rating: globalRatingEl.value,
tags: tags.join(','),
comment: comment,
is_oc: isOc
is_oc: isOc,
title: titleVal || undefined
})
});
@@ -1980,6 +2004,7 @@ window.initUploadForm = (selector) => {
const fileRating = isShitpost ? item.rating : (globalRatingEl ? globalRatingEl.value : 'sfw');
const fileTags = isShitpost ? item.tags : tags;
const fileComment = isShitpost ? item.comment : comment;
const fileTitle = isShitpost ? (item.title || '') : titleVal;
if (isShitpost) {
const statusMsg = window.f0ckI18n?.upload_shitposting_status || 'Shitposting';
@@ -1996,6 +2021,7 @@ window.initUploadForm = (selector) => {
formData.append('tags', fileTags.join(','));
formData.append('is_oc', (isShitpost ? item.is_oc : isOc) ? 'true' : 'false');
if (isShitpost) formData.append('is_shitpost', 'true');
if (fileTitle) formData.append('title', fileTitle);
// Add custom thumbnail if provided (only for single SWF files)
if (selectedFiles.length === 1 && thumbInput && thumbInput.files && thumbInput.files[0]) {
@@ -2046,7 +2072,8 @@ window.initUploadForm = (selector) => {
tags: fileTags.join(','),
is_oc: (isShitpost ? item.is_oc : isOc),
comment: fileComment,
is_shitpost: isShitpost ? true : undefined
is_shitpost: isShitpost ? true : undefined,
title: fileTitle || undefined
}));
} else {
xhr.send(formData);