hehihoho3/h-lab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(channels): 전체 선택을 현재 활성 국가 탭으로 한정

Browse Source 
전체 선택/카운트/선택 영상 보기를 보이는 카드 기준으로 동작, 탭 전환 시
숨겨진 카드는 자동 선택 해제.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
hehihoho3@gmail.com 2026-06-26 15:45:09 +09:00
parent 24f964364a
commit db8452d1ea
1 changed files with 20 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/main/resources/templates/channels.html
View File

@ -198,20 +198,27 @@
} }
} }
// 현재 탭에서 보이는(숨겨지지 않은) 카드의 체크박스만 반환
function visibleCheckboxes() {
return Array.from(document.querySelectorAll('.channel-checkbox'))
.filter(cb => { const c = cb.closest('.card'); return c && c.style.display !== 'none'; });
}
function updateSelectedCount() { function updateSelectedCount() {
const checkboxes = document.querySelectorAll('.channel-checkbox'); const checkboxes = document.querySelectorAll('.channel-checkbox');
const checked = document.querySelectorAll('.channel-checkbox:checked'); const visibleBoxes = visibleCheckboxes();
const count = checked.length; const checkedVisible = visibleBoxes.filter(cb => cb.checked);
const count = checkedVisible.length;
document.getElementById('selectedCount').innerText = count; document.getElementById('selectedCount').innerText = count;
document.getElementById('viewSelectedBtn').style.display = count > 0 ? 'flex' : 'none'; document.getElementById('viewSelectedBtn').style.display = count > 0 ? 'flex' : 'none';
// Update select all checkbox state // 전체 선택 상태는 '보이는 탭' 기준
const selectAll = document.getElementById('selectAllCheckbox'); const selectAll = document.getElementById('selectAllCheckbox');
if (count === 0) { if (count === 0) {
selectAll.checked = false; selectAll.checked = false;
selectAll.indeterminate = false; selectAll.indeterminate = false;
} else if (count === checkboxes.length) { } else if (count === visibleBoxes.length) {
selectAll.checked = true; selectAll.checked = true;
selectAll.indeterminate = false; selectAll.indeterminate = false;
} else { } else {
@ -245,8 +252,8 @@
function toggleSelectAll() { function toggleSelectAll() {
const isChecked = document.getElementById('selectAllCheckbox').checked; const isChecked = document.getElementById('selectAllCheckbox').checked;
const checkboxes = document.querySelectorAll('.channel-checkbox'); // 현재 활성 탭에서 보이는 카드만 선택/해제
checkboxes.forEach(cb => cb.checked = isChecked); visibleCheckboxes().forEach(cb => cb.checked = isChecked);
updateSelectedCount(); updateSelectedCount();
} }
@ -285,9 +292,14 @@
const visible = (code === 'ALL') || (g === code); const visible = (code === 'ALL') || (g === code);
card.style.display = visible ? '' : 'none'; card.style.display = visible ? '' : 'none';
if (visible) shown++; if (visible) shown++;
else { // 숨겨진 카드는 선택 해제(전체 선택/선택 영상 보기를 현재 탭으로 한정)
const cb = card.querySelector('.channel-checkbox');
if (cb) cb.checked = false;
}
}); });
const empty = document.getElementById('emptyCountry'); const empty = document.getElementById('emptyCountry');
if (empty) empty.style.display = shown === 0 ? 'block' : 'none'; if (empty) empty.style.display = shown === 0 ? 'block' : 'none';
updateSelectedCount();
} }
function updateCountryTabCounts() { function updateCountryTabCounts() {
const counts = { ALL: 0, KR: 0, JP: 0, US: 0, ETC: 0 }; const counts = { ALL: 0, KR: 0, JP: 0, US: 0, ETC: 0 };