randogoth/kanban-todo.txt
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Auto-resize details text area.

Browse source
This commit is contained in:
Chris McCormick 2026-03-05 21:51:42 +08:00
parent 659063d827
commit fd74f50bbf
1 changed files with 54 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

56
index.html
View file

@ -95,7 +95,6 @@
border-radius: var(--radius);
font-family: monospace;
resize: vertical;
min-height: 150px;
}
input::placeholder,
@ -1950,6 +1949,7 @@ chmod 755 kbtd
$('#card-detail-content-textarea').value = strippedContent;
updateCardDetailButtons();
resizeDetailTextarea();
}, () => {
cardDetailModalState = {
card: null,
@ -2481,8 +2481,60 @@ chmod 755 kbtd
modalMousedownTarget = null;
});
function getTextareaLineHeight(textarea) {
const style = window.getComputedStyle(textarea);
return parseFloat(style.lineHeight) ||
parseFloat(style.fontSize) * 1.2;
}
function calcTextareaHeight(textarea, rows) {
const lineHeight = getTextareaLineHeight(textarea);
const style = window.getComputedStyle(textarea);
const padding = parseFloat(style.paddingTop) +
parseFloat(style.paddingBottom);
const border = parseFloat(style.borderTopWidth) +
parseFloat(style.borderBottomWidth);
return rows * lineHeight + padding + border;
}
function modalOverflows(textarea, modal, rows) {
textarea.style.height = calcTextareaHeight(textarea, rows) + 'px';
return modal.scrollHeight > modal.clientHeight;
}
function resizeDetailTextarea() {
const textarea = $('#card-detail-content-textarea');
const modal = textarea.closest('.modal-content');
const minRows = 8;
const lineCount = textarea.value.split('\n').length;
const desiredRows = Math.max(minRows, lineCount + 1);
if (!modalOverflows(textarea, modal, desiredRows)) return;
let lo = minRows;
let hi = desiredRows;
while (lo < hi) {
const mid = Math.ceil((lo + hi) / 2);
if (modalOverflows(textarea, modal, mid)) {
hi = mid - 1;
} else {
lo = mid;
}
}
textarea.style.height = calcTextareaHeight(textarea, lo) + 'px';
}
window.addEventListener('resize', () => {
if ($('#card-detail-modal').classList.contains('active')) {
resizeDetailTextarea();
}
});
$('#card-detail-title-input').addEventListener('input', updateCardDetailButtons);
$('#card-detail-content-textarea').addEventListener('input', updateCardDetailButtons);
$('#card-detail-content-textarea').addEventListener('input', () => {
updateCardDetailButtons();
resizeDetailTextarea();
});
async function openRecentProject(projectName) {
console.log('Opening recent project:', projectName);