이온디
4년 전
구현내용 : 신고하기를 새창이 아닌 모달레이어로 구현
작업방법 : 기존 신고하기 새창의 소스를 그대로 복사해서, 게시판 스킨 내부 글보기 페이지, 코멘트 페이지에 삽입함.
url만 XE 코드에 맞게 삽입함.
수정한 코드 경로
modules/board/skins/assets/css/report.scss
modules/board/skins/assets/js/board.js
modules/board/skins/eden_feed/components/article/article.html
modules…
구현내용 : 신고하기를 새창이 아닌 모달레이어로 구현
작업방법 : 기존 신고하기 새창의 소스를 그대로 복사해서, 게시판 스킨 내부 글보기 페이지, 코멘트 페이지에 삽입함.
url만 XE 코드에 맞게 삽입함.
수정한 코드 경로
modules/board/skins/assets/css/report.scss
modules/board/skins/assets/js/board.js
modules/board/skins/eden_feed/components/article/article.html
modules/board/skins/eden_feed/components/comment/comment.html
modules/board/skins/eden_feed/_header.html
board.js
jQuery(function($) {
const btnReportDocument = $(".btn-report-document");
const btnReportComment = $(".btn-report-comment");
const modalWinDocument = $(".modal-wrap-document");
const modalWinComment = $(".modal-wrap-comment");
const btnClose = $(".btn-close");
btnReportDocument.on('click', function(){
modalWinDocument.addClass('active');
});
btnReportComment.on('click', function(){
console.log("코멘트열기");
$(this).next(".modal-wrap-comment").addClass('active');
// modalWinComment.addClass('active');
});
btnClose.on('click', function(){
modalWinDocument.removeClass('active');
modalWinComment.removeClass('active');
});
// $(".modal-wrap.active").not(".modal.modal-view").on("click", function(){
// $(this).removeClass('active');
// })
$('html').on('click', function(e){
//모달창 개수
// var modal = $(e.target).parents('.mark').length;
//켜짐여부
var hasClass = $(e.target).hasClass('active');
// console.log($(e.target))
// console.log(modal)
// var modal = $(e.target).length;
if(hasClass){
// console.log('외부이프문')
if(!$(e.target).hasClass('.modal-view')){
// console.log('내부이프문')
// console.log($(e.target).parent('.mark').hasClass('on'))
$('.modal-wrap-document').removeClass('active');
$('.modal-wrap-comment').removeClass('active');
$('body').css('overflow','');
}else{
// console.log('내부이프문2')
}
// console.log('켜짐');
// console.log(e.target);
}else {
// console.log('맞음');
// console.log(e.target);
}
});
});
article.html
<div class="modal-wrap-document">
<div class="modal modal-view">
<div class="modal-header">
<div class="title">신고하기</div>
<div class="btn-close"><i class="ion ion-md-close"></i></div>
</div>
<div class="modal-body">
<load target="../../ruleset/insertDeclare.xml" />
<form action="./" method="post" id="for_document">
<input type="hidden" name="error_return_url" value="{getUrl('','document_srl',$document_srl,'status','error')}">
<input type="hidden" name="mid" value="">
<input type="hidden" name="ruleset" value="insertDeclare">
<input type="hidden" name="module" value="document">
<input type="hidden" name="act" value="procDocumentDeclare">
<input type="hidden" name="target_srl" value="{$document_srl}">
<input type="hidden" name="success_return_url" value="{getUrl('','document_srl', $document_srl,'status','success')}">
<input type="hidden" name="xe_validator_id" value="modules/document/tpl/1">
<div class="x_modal-body x_form-horizontal" style="max-height:none">
<blockquote>
<section class="target_article">
<div class="item">
<div class="label">작성자</div>
<div class="text">{$oDocument->getNickName()}</div>
</div>
<div class="item">
<div class="label">제목</div>
<div class="text">{$oDocument->getTitle()}</div>
</div>
</section>
</blockquote>
<div class="x_control-group">
<label class="x_control-label" for="message_option">사유선택</label>
<div class="x_controls">
<select name="message_option" id="message_option">
<option loop="$lang->improper_document_reasons => $key,$text" value="{$key}">{$text}</option>
<textarea name="declare_message" id="declare_message"></textarea>
<p>{$lang->about_improper_document_declare}</p></div>
</div>
</div>
<div class="x_modal-footer">
<span class="x_btn-group x_pull-right">
<button type="submit" class="x_btn x_btn-primary">{$lang->cmd_submit}</button>
</span>
</div>
</form>
<script cond="$XE_VALIDATOR_MESSAGE && $XE_VALIDATOR_ID == 'modules/document/tpl/1'">
alert("{$XE_VALIDATOR_MESSAGE}");
// window.close();
</script>
<script cond="$XE_VALIDATOR_MESSAGE && $XE_VALIDATOR_ID == 'modules/comment/tpl/1'">
alert("{$XE_VALIDATOR_MESSAGE}");
// window.close();
</script>
</div>
</div>
</div>
comment.html
<div class="btn-report-comment">신고</div>
<div class="modal-wrap-comment">
<div class="modal modal-view">
<div class="modal-header">
<div class="title">신고하기</div>
<div class="btn-close"><i class="ion ion-md-close"></i></div>
</div>
<div class="modal-body">
<load target="../../ruleset/insertDeclare.xml" />
<form action="./" method="post" id="for_comment">
<input type="hidden" name="error_return_url" value="{getUrl('','document_srl',$comment->get('document_srl'),'comment_srl',$comment->comment_srl,'status','error')}">
<input type="hidden" name="mid" value="index">
<input type="hidden" name="ruleset" value="insertDeclare">
<input type="hidden" name="module" value="comment">
<input type="hidden" name="act" value="procCommentDeclare">
<input type="hidden" name="target_srl" value="{$comment->comment_srl}">
<input type="hidden" name="success_return_url" value="{getUrl('','document_srl',$comment->get('document_srl'),'comment_srl',$comment->comment_srl,'status','success')}">
<input type="hidden" name="xe_validator_id" value="modules/comment/tpl/1">
<!-- <div class="x_modal-header">-->
<!-- <h1>불량 댓글 신고 </h1>-->
<!-- </div>-->
<div class="x_modal-body x_form-horizontal" style="max-height:none">
<blockquote>
<section class="target_article">
<div class="item">
<div class="label">댓글내용</div>
<div class="text">{$comment->getContent(false)}</div>
</div>
</section>
</blockquote>
<div class="x_control-group">
<label class="x_control-label" for="message_option">신고 이유</label>
<div class="x_controls">
<select name="message_option" id="message_option">
<option value="advertisement">본문 주제나 흐름에 맞지 않는 광고 글입니다.</option>
<option value="theme">주제에 맞지 않는 글입니다.</option>
<option value="bad_word">과도한 욕설을 담고 있습니다.</option>
<option value="violence">폭력적인 내용을 담고 있습니다.</option>
<option value="racism">인종차별적인 내용을 담고 있습니다.</option>
<option value="pornography">음란물을 포함하고 있습니다.</option>
<option value="privacy">민감한 개인정보가 노출 되어있습니다.</option>
<option value="others">기타(직접작성)</option>
</select>
<textarea name="declare_message" id="declare_message"></textarea>
<p>댓글을 신고하신 이유를 간단히 적어서 제출해주시면 관리자 검토 후 조치하겠습니다.</p><p>
</p></div>
</div>
<div class="x_modal-footer">
<span class="x_btn-group x_pull-right">
<button type="submit" class="x_btn x_btn-primary">등록</button>
</span>
</div>
</div>
</form>
</div>
</div>
</div>
header.html
<load target="../assets/css/report.min.css" />
report.scss
$line-color:#eee;
.btn-report-document,.btn-report-comment{
display:inline-block;
margin-right: 10px;
font-size: 13px !important;
line-height: 1.2em !important;
color: #999;
cursor: pointer;
}
.modal-wrap-document,
.modal-wrap-comment{
background: rgba(0,0,0,.5);
//display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 999;
bottom: 0;
display: none;
&.active{
display: flex;
}
}
// 신고하기
.modal.modal-view{
display:block !important;
width: 21rem;
height: 25rem;
background:#fff;
position: initial;
border: 1px solid #444;
box-shadow: 4px 4px 8px rgba(0,0,0,0.1);
.modal-header{
border-bottom: 1px solid $line-color;
.title{
}
.btn-close{
cursor: pointer;
i{
font-size: 24px;
}
}
}
.modal-body{
padding: 0;
select,
textarea{
margin-top: 2px;
width: 100%;
}
.target_article{
display: flex;
flex-direction: column;
gap: .5rem;
padding: .5rem;
border-bottom: 1px solid $line-color;
.item{
display: flex;
.label{
color: #aaa;
border-right: 1px solid #ddd;
width: 6rem;
}
.text{
padding-left: 1rem;
}
}
font-size: 13px;
}
.x_control-group{
padding: .5rem;
.x_controls{
p{
font-size: 12px;
color: #aaa;
}
}
}
.x_modal-footer{
padding: 0 .5rem;
.x_btn-group{
.x_btn{
width: 100%;
background: #ff5d6b;
border: 0;
height: 40px;
color: #fff;
border-radius: 3px;
}
}
}
}
}