hmw1001
105 lines
4.4 KiB
JavaScript
105 lines
4.4 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
|
const listBody = document.getElementById('bo_list_body');
|
|
const toggleBtn = document.getElementById('view-toggle-btn');
|
|
|
|
if (!listBody || !toggleBtn) {
|
|
return; // 필수 요소가 없으면 스크립트 중단
|
|
}
|
|
|
|
const toggleIcon = toggleBtn.querySelector('i');
|
|
const savedViewMode = localStorage.getItem('board_view_mode') || 'list'; // 기본값은 'list'
|
|
|
|
// 뷰 모드를 설정하고 버튼의 아이콘과 툴팁을 업데이트하는 함수
|
|
function setViewMode(mode) {
|
|
if (mode === 'card') {
|
|
listBody.classList.remove('list-view');
|
|
listBody.classList.add('card-view');
|
|
// 현재 카드뷰 -> 다음 행동은 '목록형 보기'
|
|
toggleIcon.className = 'fa fa-bars';
|
|
toggleBtn.title = '목록형으로 보기';
|
|
} else { // 'list'
|
|
listBody.classList.remove('card-view');
|
|
listBody.classList.add('list-view');
|
|
// 현재 목록뷰 -> 다음 행동은 '카드형 보기'
|
|
toggleIcon.className = 'fa fa-th-large';
|
|
toggleBtn.title = '카드형으로 보기';
|
|
}
|
|
// 사용자의 선택을 로컬 스토리지에 저장
|
|
localStorage.setItem('board_view_mode', mode);
|
|
}
|
|
|
|
|
|
// 토글 버튼 클릭 이벤트
|
|
toggleBtn.addEventListener('click', function() {
|
|
// 현재 뷰 모드를 확인하고 반대 모드로 전환
|
|
const currentMode = listBody.classList.contains('card-view') ? 'list' : 'card';
|
|
setViewMode(currentMode);
|
|
});
|
|
|
|
// 페이지 로드 시 저장된 뷰 모드를 적용
|
|
setViewMode(savedViewMode);
|
|
|
|
// 카드형 뷰에서 체크박스 클릭 시, 목록형 뷰의 동일한 체크박스도 동기화
|
|
const cardCheckboxes = document.querySelectorAll('input[name="chk_wr_id_card[]"]');
|
|
cardCheckboxes.forEach((cardChk, index) => {
|
|
cardChk.addEventListener('change', function() {
|
|
const listChk = document.getElementById('chk_wr_id_' + index);
|
|
if (listChk) {
|
|
listChk.checked = this.checked;
|
|
}
|
|
});
|
|
});
|
|
|
|
// ▼▼▼ [추가] 노출 상태 토글 기능 ▼▼▼
|
|
$('#bo_list_body').on('click', '.btn-status-toggle', function(e) {
|
|
e.preventDefault();
|
|
|
|
const button = $(this);
|
|
const wr_id = button.data('wr-id');
|
|
const is_on = button.hasClass('status-on');
|
|
const new_status = is_on ? 'hide' : 'show';
|
|
const bo_table = $('input[name="bo_table"]').val();
|
|
|
|
// 아이콘을 로딩 상태로 변경
|
|
button.find('i').removeClass('fa-toggle-on fa-toggle-off').addClass('fa-spinner fa-spin');
|
|
|
|
$.ajax({
|
|
url: board_skin_url + '/ajax.status_update.php',
|
|
type: 'POST',
|
|
data: {
|
|
bo_table: bo_table,
|
|
wr_id: wr_id,
|
|
status: new_status
|
|
},
|
|
dataType: 'json',
|
|
success: function(data) {
|
|
if (data.success) {
|
|
// 버튼 상태 업데이트
|
|
button.removeClass('status-on status-off');
|
|
button.find('i').removeClass('fa-spinner fa-spin');
|
|
|
|
if (data.new_status === 'hidden') {
|
|
button.addClass('status-off').attr('title', '노출 상태로 변경');
|
|
button.find('i').addClass('fa-toggle-off');
|
|
} else {
|
|
button.addClass('status-on').attr('title', '숨김 상태로 변경');
|
|
button.find('i').addClass('fa-toggle-on');
|
|
}
|
|
// 페이지를 새로고침하여 상태 배지 텍스트 등을 완전히 업데이트합니다.
|
|
location.reload();
|
|
} else {
|
|
alert(data.error || '상태 변경에 실패했습니다.');
|
|
// 실패 시 아이콘 원상복구
|
|
button.find('i').removeClass('fa-spinner fa-spin').addClass(is_on ? 'fa-toggle-on' : 'fa-toggle-off');
|
|
}
|
|
},
|
|
error: function() {
|
|
alert('서버와 통신 중 오류가 발생했습니다.');
|
|
// 실패 시 아이콘 원상복구
|
|
button.find('i').removeClass('fa-spinner fa-spin').addClass(is_on ? 'fa-toggle-on' : 'fa-toggle-off');
|
|
}
|
|
});
|
|
});
|
|
// ▲▲▲ 여기까지 ▲▲▲
|
|
|
|
}); |