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

update reply cancel button with less clutter

Browse Source
This commit is contained in:
Kibi Kelburton
2026-05-16 18:22:18 +02:00
parent f4faffd4de
commit b96d97e213
1 changed files with 96 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
public/s/js/comments.js
View File

@@ -19,14 +19,14 @@ class CommentSystem {
this.customEmojis = CommentSystem.emojiCache || {}; this.customEmojis = CommentSystem.emojiCache || {};
this.icons = { this.icons = {
reply: `<i class="fa-solid fa-reply"></i>`, reply: `<i class="fa-solid fa-reply"></i>`,
pin: `<i class="fa-solid fa-thumbtack"></i>`, pin: `<i class="fa-solid fa-thumbtack"></i>`,
unpin: `<i class="fa-solid fa-thumbtack"></i>`, unpin: `<i class="fa-solid fa-thumbtack"></i>`,
edit: `<i class="fa-solid fa-pen"></i>`, edit: `<i class="fa-solid fa-pen"></i>`,
delete: `<i class="fa-solid fa-trash"></i>`, delete: `<i class="fa-solid fa-trash"></i>`,
link: `<i class="fa-solid fa-link"></i>`, link: `<i class="fa-solid fa-link"></i>`,
pinned: `<i class="fa-solid fa-thumbtack"></i>`, pinned: `<i class="fa-solid fa-thumbtack"></i>`,
lock: `<i class="fa-solid fa-lock"></i>`, lock: `<i class="fa-solid fa-lock"></i>`,
unlock: `<i class="fa-solid fa-lock-open"></i>` unlock: `<i class="fa-solid fa-lock-open"></i>`
}; };
@@ -143,7 +143,7 @@ class CommentSystem {
// Stale-check: only compare player element (not mediaEl — SyntheticClock is always new) // Stale-check: only compare player element (not mediaEl — SyntheticClock is always new)
if (window.danmakuInstance) { if (window.danmakuInstance) {
const stale = window.danmakuInstance.player !== playerEl const stale = window.danmakuInstance.player !== playerEl
|| !document.contains(window.danmakuInstance.player); || !document.contains(window.danmakuInstance.player);
if (stale) { if (stale) {
window.danmakuInstance.destroy(); window.danmakuInstance.destroy();
window.danmakuInstance = null; window.danmakuInstance = null;
@@ -355,9 +355,9 @@ class CommentSystem {
try { try {
targetEl.setSelectionRange(state.focused.start, state.focused.end); targetEl.setSelectionRange(state.focused.start, state.focused.end);
} catch (e) { } catch (e) {
// Fallback to end if range is invalid // Fallback to end if range is invalid
const len = targetEl.value.length; const len = targetEl.value.length;
targetEl.setSelectionRange(len, len); targetEl.setSelectionRange(len, len);
} }
} }
} }
@@ -1078,7 +1078,7 @@ class CommentSystem {
el.muted = snap.muted; el.muted = snap.muted;
el.volume = snap.volume; el.volume = snap.volume;
if (!snap.paused) { if (!snap.paused) {
el.play().catch(() => {/* autoplay may be blocked */}); el.play().catch(() => {/* autoplay may be blocked */ });
} }
}); });
} }
@@ -1515,7 +1515,7 @@ class CommentSystem {
const urlToParse = href.startsWith('//') ? window.location.protocol + href : href; const urlToParse = href.startsWith('//') ? window.location.protocol + href : href;
const urlObj = new URL(urlToParse, siteOrigin); const urlObj = new URL(urlToParse, siteOrigin);
isSameSite = (urlObj.hostname === window.location.hostname); isSameSite = (urlObj.hostname === window.location.hostname);
} catch(e) {} } catch (e) { }
} }
// Shorten internal links if text matches the URL // Shorten internal links if text matches the URL
@@ -1905,8 +1905,8 @@ class CommentSystem {
renderInput(parentId = null) { renderInput(parentId = null) {
const i18n = window.f0ckI18n || {}; const i18n = window.f0ckI18n || {};
const placeholder = i18n.write_comment || 'Write a comment...'; const placeholder = i18n.write_comment || 'Write a comment...';
const postLabel = i18n.post || 'Post'; const postLabel = i18n.post || 'Post';
const cancelLabel = i18n.cancel || 'Cancel'; const cancelLabel = i18n.cancel || 'Cancel';
const maxLen = window.f0ckSession?.comment_max_length; const maxLen = window.f0ckSession?.comment_max_length;
const maxLenAttr = (maxLen !== null && maxLen !== undefined) ? ` maxlength="${maxLen}"` : ''; const maxLenAttr = (maxLen !== null && maxLen !== undefined) ? ` maxlength="${maxLen}"` : '';
const counter = (maxLen !== null && maxLen !== undefined) const counter = (maxLen !== null && maxLen !== undefined)
@@ -1917,7 +1917,7 @@ class CommentSystem {
<textarea placeholder="${placeholder}"${maxLenAttr}></textarea> <textarea placeholder="${placeholder}"${maxLenAttr}></textarea>
<div class="input-actions"> <div class="input-actions">
${counter} ${counter}
${parentId ? `<button class="cancel-reply">${cancelLabel}</button>` : ''} ${parentId ? `<button class="cancel-reply" title="${cancelLabel}"><i class="fa-solid fa-xmark"></i></button>` : ''}
<button class="submit-comment">${postLabel}</button> <button class="submit-comment">${postLabel}</button>
</div> </div>
</div> </div>
@@ -2068,7 +2068,7 @@ class CommentSystem {
.length; .length;
counter.textContent = `${nonQuotedLen} / ${max}`; counter.textContent = `${nonQuotedLen} / ${max}`;
counter.classList.toggle('near-limit', nonQuotedLen >= max * 0.9); counter.classList.toggle('near-limit', nonQuotedLen >= max * 0.9);
counter.classList.toggle('at-limit', nonQuotedLen >= max); counter.classList.toggle('at-limit', nonQuotedLen >= max);
}); });
// Single Change Listener for Sort // Single Change Listener for Sort
@@ -2244,7 +2244,7 @@ class CommentSystem {
contentEl.innerHTML = ` contentEl.innerHTML = `
<textarea class="edit-textarea">${currentContent}</textarea> <textarea class="edit-textarea">${currentContent}</textarea>
<div class="input-actions"> <div class="input-actions">
<button class="cancel-edit-btn">Cancel</button> <button class="cancel-edit-btn" title="Cancel"><i class="fa-solid fa-comment-slash"></i></button>
<button class="save-edit-btn">Save</button> <button class="save-edit-btn">Save</button>
</div> </div>
`; `;
@@ -3052,8 +3052,11 @@ class CommentSystem {
} }
textarea.focus(); textarea.focus();
}); });
const submitBtn = actions.querySelector('.submit-comment'); const referenceNode = actions.querySelector('.cancel-reply') ||
actions.insertBefore(trigger, submitBtn); actions.querySelector('.cancel-edit-btn') ||
actions.querySelector('.submit-comment') ||
actions.querySelector('.save-edit-btn');
actions.insertBefore(trigger, referenceNode);
actions.insertBefore(spoilerBtn, trigger); actions.insertBefore(spoilerBtn, trigger);
if (this.isAdmin) { if (this.isAdmin) {
const lockBtn = document.createElement('button'); const lockBtn = document.createElement('button');