오늘은 게시판 관련 작업에서
남은 두 가지 작업 중
선택 삭제, 선택 복사, 선택 이동 페이지를 작업합니다.
기본 그누 테마의 화면과 현재 작업중인 테마의 화면을 비교하려고 하는데
현재 테마에서 선택 삭제/복사/이동 버튼이 전혀 동작을 안하고 있네요...
오늘은 금방 끝날 줄 알았는데,
처음부터 발목을 잡혔네요.
기존 코드는 button 태그에 type에 submit을 적용하여
클릭시 바로 form.submit()을 수행하도록 되어 있는데,
제작 중인 테마는 bootstrap의 dropdown을 이용하여 화면을 만들었더니
submit()을 타지 못하고 있네요.
뭐 스크립트 함수 하나 만들어서
강제로 script를 타게 하면 될거라고 생각됩니다.
// === 그누 기본 테마의 코딩
// === 클릭하면 바로 form문의 submit을 수행하도록 코딩이 되어 있다.
<li>
<button type="button" class="btn_more_opt is_list_btn btn_b01 btn" title="게시판 리스트 옵션"><i class="fa fa-ellipsis-v" aria-hidden="true"></i><span class="sound_only">게시판 리스트 옵션</span></button>
<?php if ($is_checkbox) { ?>
<ul class="more_opt is_list_btn">
<li><button type="submit" name="btn_submit" value="선택삭제" onclick="document.pressed=this.value"><i class="fa fa-trash-o" aria-hidden="true"></i> 선택삭제</button></li>
<li><button type="submit" name="btn_submit" value="선택복사" onclick="document.pressed=this.value"><i class="fa fa-files-o" aria-hidden="true"></i> 선택복사</button></li>
<li><button type="submit" name="btn_submit" value="선택이동" onclick="document.pressed=this.value"><i class="fa fa-arrows" aria-hidden="true"></i> 선택이동</button></li>
</ul>
<?php } ?>
</li>
<?php } ?>
// === 현재 제작중인 테마의 코딩
// === A tag로 되어 있어 바로 submit을 태울 수 없다.
<ul class="navi navi-hover py-1">
<li class="navi-item">
<a href="javascript:document.pressed=this.value;" class="navi-link">
<span class="navi-icon">
<i class="fa fa-trash-o"></i>
</span>
<span class="navi-text">선택 삭제</span>
</a>
</li>
<li class="navi-item">
<a href="javascript:document.pressed=this.value;" class="navi-link">
<span class="navi-icon">
<i class="fa fa-files-o"></i>
</span>
<span class="navi-text">선택 복사</span>
</a>
</li>
<li class="navi-item">
<a href="javascript:document.pressed=this.value;" class="navi-link">
<span class="navi-icon">
<i class="fa fa-arrows"></i>
</span>
<span class="navi-text">선택 이동</span>
</a>
</li>
</ul>함수를 만들기전에 기존 테마의 분석을 해봅니다.
분석이라고 해봤자 별거 있겠습니까? 걍 주석 막 찍어보는거죠~ ㅎ
<button type="submit" name="btn_submit" value="선택복사"
onclick="document.pressed=this.value; alert(this.value+' / '+ document.pressed);">
<i class="fa fa-files-o" aria-hidden="true"></i> 선택복사</button>
function fboardlist_submit(f) { alert("START fboardlist_submit()!");
var chk_count = 0;
for (var i=0; i<f.length; i++) {
if (f.elements[i].name == "chk_wr_id[]" && f.elements[i].checked)
chk_count++;
} alert("chk_count : "+ chk_count);
if (!chk_count) {
alert(document.pressed + "할 게시물을 하나 이상 선택하세요.");
return false;
}
alert("document.pressed : "+ document.pressed);
if(document.pressed == "선택복사") {
select_copy("copy");
return;
}
if(document.pressed == "선택이동") {
select_copy("move");
return;
}
if(document.pressed == "선택삭제") {
if (!confirm("선택한 게시물을 정말 삭제하시겠습니까?\n\n한번 삭제한 자료는 복구할 수 없습니다\n\n답변글이 있는 게시글을 선택하신 경우\n답변글도 선택하셔야 게시글이 삭제됩니다."))
return false;
f.removeAttribute("target");
f.action = g5_bbs_url+"/board_list_update.php";
}
return true;
}
선택 복사를 누르게 되면,
1. document.pressd 변수에 "선택복사"라는 문자열을 할당
2. form의 submit()을 호출하게 됨으로 form문에 정의된 onsubmit을 먼저 호출하게 됨.
3. fboardlist_submit(this)에서 document.pressd 변수의 값을 체크함.
4. document.pressd 변수에 "선택복사"가 들어 있으면 선택복사를 위한 팝업을 띄움.
분석은 끝났고, 자동 submit을 대신해서 위 동작을 수행해줄 함수를 개발해야 겠네요.
제작 중인 테마에는 button 태그가 아닌 a 태그가 적용이 되어 있어
자동으로 onsubmit을 호출할 수 없습니다.
그래서 대신 수행해줄 함수를 만들 것입니다.
길게 적었지만
실제 코딩 내용은 아주 심플합니다.
앗... 이게 뭐래...
"올바른 방법으로 이용해 주세요"라는 얼럿이...
음... 뭘까요???
쩝.. 또 오타네요... press가 아니라 pressd였네요. ㅠㅠ
아.. 그래도...
선택복사와 선택이동은 팝업이 잘 뜨는데
선택삭제시 같은 에러가 나타납니다.
/bbs/board_list_update.php 를 보면
btn_submit 을 $_POST 변수로 받아오게 되어있습니다.
아.. 오늘 처음 알았네요.
button 태그도 input이나 select처럼 값을 넘긴다는것을요!
그럼... Hidden Input에 btn_submit 을 하나 만들고, 거기에 값을 넘겨주어야 하겠습니다.
이제 삭제가 정상적으로 수행됨을 확인하였습니다.
아래는 위 문제를 해결하기 위해 작성한 코드입니다.
// === 선택삭제/복사/이동에 필요한 값을 저장하기 위해 별도 선언.
<form name="fboardlist" id="fboardlist" action="<?php echo G5_BBS_URL; ?>/board_list_update.php" onsubmit="return fboardlist_submit(this);" method="post">
... 중간생략 ...
<input type="hidden" name="btn_submit">
// 기존 코드 : document.pressed=this.value
// 변경 코드 : fboardlist_onsubmit_mng('선택삭제')
<ul class="navi navi-hover py-1">
<li class="navi-item">
<a href="javascript:fboardlist_onsubmit_mng('선택삭제');" class="navi-link">
<span class="navi-icon">
<i class="fa fa-trash-o"></i>
</span>
<span class="navi-text">선택 삭제</span>
</a>
</li>
<li class="navi-item">
<a href="javascript:fboardlist_onsubmit_mng('선택복사');" class="navi-link">
<span class="navi-icon">
<i class="fa fa-files-o"></i>
</span>
<span class="navi-text">선택 복사</span>
</a>
</li>
<li class="navi-item">
<a href="javascript:fboardlist_onsubmit_mng('선택이동');" class="navi-link">
<span class="navi-icon">
<i class="fa fa-arrows"></i>
</span>
<span class="navi-text">선택 이동</span>
</a>
</li>
</ul>
// 리스트에서 선택 삭제/복사/이동 버튼을 클릭했을때 onsubmit을 수행하게 해주기 위해 만듦. by tank. at 200706.
// * mngValue : 선택삭제, 선택복사, 선택삭제 중 하나의 문자열을 받아옴.
function fboardlist_onsubmit_mng(mngValue) {
if ( !(mngValue=="선택삭제" || mngValue=="선택복사" || mngValue=="선택이동") ) {
return false;
}
var f = document.getElementById("fboardlist");
f.btn_submit.value = mngValue;
document.pressed = mngValue;
if ( fboardlist_submit(f) )
f.submit();
}에휴... 고생했다. 고생했어!
또 고민이네요...
모달로 할 것인가? 걍 팝업으로 할 것인가?
아무리 생각해도 전 모달 팝업이 맞는 것 같네요.
기존에 작업한 스크랩이나, 쪽지도 전부 모달로 바꿔야 할 것 같네요.
(언제 하게 될런지...)
Modal 창으로 진행하겠습니다.
/bbs/move.php를 열어 테마의 스킨 파일을 확인합니다.
오옷... 이 녀석은 관리자만 쓰는 화면이라 그런지 스킨 파일 자체가 존재하지 않는군요.
그렇죠. 관리자... 사용자가 쓰는 파일이 아닌...
굳이 이쁘게 만드는건 개발자의 욕심이겠군요.
관련 CSS를 이전에 만들어놓은 gnuboard.css로 옮겨
화면이 깨지지 않도록 조치하는 것으로 마무리해야겠습니다.
우선 현재화면과 이전화면을 비교해볼게요.
그러기 위해서는 기본 테마로 설정을 바꾸어놓고,
사용되는 CSS를 확인 후 옮기도록 하겠습니다.
/* 관리자를 위한 선택복사, 선택이동 팝업 관련 CSS 옮김. by tank. at 200707. */
/* 게시물 선택복사 선택이동 */
#copymove {}
#copymove .win_desc {text-align:center;display:block}
#copymove .tbl_wrap {margin:20px}
#copymove .win_btn {padding:0 20px 20px}
.win_btn .btn_submit {border:0;background:#3a8afd;color:#fff;cursor:pointer;border-radius:3px}
.win_btn .btn_submit:hover {background:#2375eb}
.win_btn .btn_close {border:1px solid #dcdcdc;cursor:pointer;border-radius:3px;background:#fff}
.win_btn a.btn_close {text-align:center;line-height:50px}
#copymove .copymove_current {float:right;background:#ff3061;padding:5px;color:#fff;border-radius:3px;margin-right: 10px;}
#copymove .copymove_currentbg {background:#f4f4f4}
/* 새창 기본 스타일 */
#copymove {position:relative}
#copymove .tbl_wrap {margin:0 20px}
#copymove #win_title {font-size:1.3em;height:50px;line-height:30px;padding:10px 20px;background:#fff;color:#000;-webkit-box-shadow:0 1px 10px rgba(0,0,0,.1);
-moz-box-shadow:0 1px 10px rgba(0,0,0,.1);
box-shadow:0 1px 10px rgba(0,0,0,.1)}
#copymove #win_title .sv {font-size:0.75em;line-height:1.2em}
#copymove .win_ul {margin-bottom:15px;padding:0 20px}
#copymove .win_ul:after {display:block;visibility:hidden;clear:both;content:""}
#copymove .win_ul li {float:left;background:#fff;text-align:center;padding:0 10px;border:1px solid #d6e9ff;border-radius:30px;margin-left:5px}
#copymove .win_ul li:first-child {margin-left:0}
#copymove .win_ul li a {display:block;padding:8px 0;color:#6794d3}
#copymove .win_ul .selected {background:#3a8afd;border-color:#3a8afd;position:relative;z-index:5}
#copymove .win_ul .selected a {color:#fff;font-weight:bold}
#copymove .win_desc {position:relative;margin:10px;border-radius:5px;font-size:1em;background:#f2838f;color:#fff;line-height:50px;text-align:left;padding:0 20px}
#copymove .win_desc i {font-size:1.2em;vertical-align:baseline}
#copymove .win_desc:after {content:"";position:absolute;left:0;top:0;width:4px;height:50px;background:#da4453;border-radius:3px 0 0 3px}
#copymove .frm_info {font-size:0.92em;color:#919191}
#copymove .win_total {float:right;display:inline-block;line-height:30px;font-weight:normal;font-size:0.75em;color:#3a8afd;background:#f6f6f6;padding:0 10px;border-radius:5px}
#copymove #copymove_con {margin:20px 0;padding:20px}
#copymove #copymove_con:after {display:block;visibility:hidden;clear:both;content:""}
#copymove #copymove_con2 {margin:20px 0}
#copymove .btn_confirm:after {display:block;visibility:hidden;clear:both;content:""}
#copymove .win_btn {text-align:center}
#copymove .btn_close {height:45px;width:60px;overflow:hidden;cursor:pointer}
#copymove .btn_submit {padding:0 20px;height:45px;font-weight:bold;font-size:1.083em}
/* 기본테이블 */
#copymove .tbl_wrap table {width:90%;margin:0 auto;border-collapse:collapse;border-spacing:0 5px;background:#fff;border-top:1px solid #ececec;border-bottom:1px solid #ececec}
#copymove .tbl_wrap caption {padding:10px 0;font-weight:bold;text-align:left}
#copymove .tbl_head01 {margin:0 0 10px}
#copymove .tbl_head01 caption {padding:0;font-size:0;line-height:0;overflow:hidden}
#copymove .tbl_head01 thead th {padding:20px 0;font-weight:normal;text-align:center;border-bottom:1px solid #ececec;height:40px}
#copymove .tbl_head01 thead th input {vertical-align:top} /* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */
#copymove .tbl_head01 tfoot th, .tbl_head01 tfoot td {padding:10px 0;border-top:1px solid #c1d1d5;border-bottom:1px solid #c1d1d5;background:#d7e0e2;text-align:center}
#copymove .tbl_head01 tbody th {padding:8px 0;border-bottom:1px solid #e8e8e8}
#copymove .tbl_head01 td {color:#666;padding:10px 5px;border-top:1px solid #ecf0f1;border-bottom:1px solid #ecf0f1;line-height:1.4em;height:60px;word-break:break-all}
#copymove .tbl_head01 td.td_chk {text-align:center;}
#copymove .tbl_head01 td label {display:unset;}
#copymove .tbl_head01 tbody tr:hover td {background:#fafafa}
#copymove .tbl_head01 a:hover {text-decoration:underline}
#copymove .tbl_head02 {margin:0 0 10px}
#copymove .tbl_head02 caption {padding:0;font-size:0;line-height:0;overflow:hidden}
#copymove .tbl_head02 thead th {padding:5px 0;border-top:1px solid #d1dee2;border-bottom:1px solid #d1dee2;background:#e5ecef;color:#383838;font-size:0.95em;text-align:center;letter-spacing:-0.1em}
#copymove .tbl_head02 thead a {color:#383838}
#copymove .tbl_head02 thead th input {vertical-align:top} /* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */
#copymove .tbl_head02 tfoot th, .tbl_head02 tfoot td {padding:10px 0;border-top:1px solid #c1d1d5;border-bottom:1px solid #c1d1d5;background:#d7e0e2;text-align:center}
#copymove .tbl_head02 tbody th {padding:5px 0;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:#fff}
#copymove .tbl_head02 td {padding:5px 3px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:#fff;line-height:1.4em;word-break:break-all}
#copymove .tbl_head02 a {}
/* 폼 테이블 */
#copymove .tbl_frm01 {margin:0 0 20px}
#copymove .tbl_frm01 table {width:100%;border-collapse:collapse;border-spacing:0}
#copymove .tbl_frm01 th {width:70px;padding:7px 13px;border:1px solid #e9e9e9;border-left:0;background:#f5f8f9;text-align:left}
#copymove .tbl_frm01 td {padding:7px 10px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:transparent}
#copymove .wr_content textarea,.tbl_frm01 textarea,.form_01 textarea, .frm_input {border:1px solid #d0d3db;background:#fff;color:#000;vertical-align:middle;border-radius:3px;padding:5px;
-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);
-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);
}
#copymove .tbl_frm01 textarea {padding:2px 2px 3px}
#copymove .frm_input {height:40px}
#copymove .full_input {width:100%}
#copymove .half_input {width:49.5%}
#copymove .twopart_input {width:385px;margin-right:10px}
#copymove .tbl_frm01 textarea, .write_div textarea {width:100%;height:100px}
#copymove .tbl_frm01 a {text-decoration:none}
#copymove .tbl_frm01 .frm_file {display:block;margin-bottom:5px}
#copymove .tbl_frm01 .frm_info {display:block;padding:0 0 5px;line-height:1.4em}
이제 기능 테스트 후 완료하겠습니다.
이로써 관리자 기능이 완료되었네요.
괜히 개발자의 욕심으로 모달로 진행했으면
시간이 두배 이상은 더 필요했겠어요.
완료된 /bbs/move.php의 소스는 건들지 않았습니다.
(단지 그누 기본 테마의 CSS를 활용하였을 뿐...)
테마 폴더 이외의 파일은 절대 건드리면 안된다는 생각으로 진행중이거든요.
다음 포스트는 전체검색을 진행하겠습니다.
'재밌는 IT 개발 > 그누보드 테마 제작기(記)' 카테고리의 다른 글
| 그누보드 테마 제작 27 - 새글 페이지 개발 (2) | 2020.07.18 |
|---|---|
| 그누보드 테마 제작 26 - 전체 검색 페이지 개발 (4) | 2020.07.16 |
| 그누보드 테마 제작 24 - 갤러리 게시판 페이지 개발 (5) | 2020.07.13 |
| 그누보드 테마 제작 23 - 게시글 부가 페이지 개발 (2) | 2020.07.10 |
| 그누보드 테마 제작 22 - 게시글 리스트 페이지 개발 (4) | 2020.07.09 |
댓글