// (2018.7.23, 차재복, Cha Jae Bok, cjbword@gmailcom)
// (웹브라우저 뒤로가기,앞으로가기), (다큐먼트 준비시 이벤트 발생)
$( function () {
// 웹브라우저 뒤로가기,앞으로가기 이벤트 발생시 (본 루틴은, 향후 더욱 개선 필요)
$(window).on("popstate", function(e) {
var id = e.originalEvent.state['id'],
no = e.originalEvent.state['no'];
$.ajax ({
type : 'POST',
url : './yoyak_contents_ajax.php',
data : { 'id' : id, 'win' : 'left' },
success : function(result){
// 사용자 모드
$('#contents').html(result);
},
error : function(request, status, error ) {
console.log ("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
}
});
});
// 다큐먼트 준비 이벤트 발생시
$(document).ready( function() {
// url query string으로부터 id=?&no=? 추출
var urlParams = new URLSearchParams(window.location.search);
var id = urlParams.get('id'),
no = urlParams.get('no');
if (!no) return;
$('.detail_view[data-id='+id+'][data-no='+no+']').toggle();
$('.view[data-id='+id+'][data-no='+no+']').toggleClass('toggleBold');
$.ajax ({
type : 'POST',
url : 'yoyak_view_ajax.php',
data : { 'no' : no, 'id' : id },
success : function(result){
// console.log(result);
$('.detail_view[data-id='+id+'][data-no='+no+']').html(result[0]);
// web storage 활용 저장
for (var sub_no=1; sub_no<Object.keys(result).length; sub_no++) {
sessionStorage.setItem('no_'+no+'_'+sub_no,result[sub_no]);
}
},
error : function(request, status, error ) {
console.log ("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
}
});
});
});
// 항목목차 보이기/숨기기 및 ajax 호출
$( function () {
// 페이지 기반으로, 해당 id에 대한 하부 항목들을 보여줌
// ▷를 누르면, ajax 호출 => yoyak_contents_ajax.php 또는 yoyak_contents_right_ajax.php)
$(document).on("click", ".ajax_page",
function(event){
// a 링크 디폴트 이벤트 방지
event.preventDefault();
// ▷ 누를때, 잠깐 볼드체 적용됨
$(this).css({'font-weight':'bold','color':'black'});
var id = $(this).data('id') ;
// div 좌우 구분
win = $(this).closest('div').data('win');
// 좌/우 화면 구분
if ( win == 'right') {
var filename = './yoyak_contents_right_ajax.php',
moved_id = $('#contents_right').data('id'),
moved_title = $('#contents_right').data('title');
} else {
var filename = './yoyak_contents_ajax.php';
// var filename = './yoyak_contents_id_ajax.php';
}
$.ajax ({
type : 'POST', // GET/POST 구분, 기본값은 GET
url : filename,
data : { 'id' : id, 'win' : win },
success : function(result){
// eitor 모드
if ( win == 'right') {
// $('#contents_right').html(result);
$('#contents_right_down').html(result);
// $('#source').text('"'+moved_title+'"('+moved_id+')');
$('.no_move_submit').prop('disabled', true);
// 사용자 모드
} else {
$('#contents').html(result);
/*
if ($('#ol_'+id).length==0) {
$('#li_'+id).append(result);
$('.ajax_page[data-id='+id+']').text('▽');
$('.ajax_page[data-id='+id+']')
.removeClass('ajax_page')
.addClass('lower_ol_hideshow');
}
*/
}
// history 기록
history.pushState({'id':id},null,'./yoyak.php?id='+id);
},
error : function(request, status, error ) {
console.log("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
}
});
}
);
// 클릭하면, ajax 호출 없이, 조건에 따라 해당 하위 요소를 숨기거나 나타나게 함
$(document).on('click','.lower_ol_hideshow',
function(event) {
// a 링크 디폴트 이벤트 방지
event.preventDefault();
if ( $(this).text() == '▽' ) {
$(this).siblings('ol').hide();
// $(this).children('ol').hide();
$(this).text('▷');
$(this).next('a').css('color','');
} else if ( $(this).text() == '▷' ) {
$(this).siblings('ol').show();
$(this).text('▽');
$(this).next('a').css('color','Crimson');
}
event.preventDefault();
}
);
});
// (jQuery) 항목 View 보기
$( function () {
// view 클릭하면, .detail_view div에 분류항목 또는 용어해설 세부내용 나타남
$(document).on("click", ".view",
function(event) {
// a 링크 디폴트 이벤트 방지
event.preventDefault();
// view 클릭시, toggleClass
$(this).toggleClass('toggleBold');
var no = $(this).data('no'),
id = $(this).data('id');
if(!no) no = '';
var unique = ( no ? 'no_'+no+'_'+'0' : 'id_'+id+'_'+'0' );
// 해당 항목 일 때, div toggle // (web storage 기저장 여부 확인)
if (no) {
$('.detail_view[data-id='+id+'][data-no='+no+']').toggle();
if (sessionStorage.getItem(unique)) {
// web storage 활용, 직접 추출 및 표시 (
$('.detail_view[data-id='+id+'][data-no='+no+']').html(sessionStorage.getItem(unique));
return;
}
} else {
$('.detail_view[data-id='+id+'][data-no='+no+']').toggle();
if (sessionStorage.getItem(unique)) {
// web storage 활용, 직접 추출 및 표시
$('.detail_view[data-id='+id+'][data-no='+no+']').html(sessionStorage.getItem(unique));
return;
}
}
$.ajax ({
type : 'POST',
url : 'yoyak_view_ajax.php',
data : { 'no' : no, 'id' : id },
success : function(result){
console.log(result);
$('.detail_view[data-id='+id+'][data-no='+no+']').html(result[0]);
// web storage 저장
for (var sub_no=0 in result ) {
if (no) {
sessionStorage.setItem('no_'+no+'_'+sub_no,result[sub_no]);
} else {
sessionStorage.setItem('id_'+id+'_'+sub_no,result[sub_no]);
}
}
// history 기록
history.replaceState({'id':id,'no':no},null,'./yoyak.php?id='+id+'&no='+no);
},
error : function(request, status, error ) {
console.log ("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
}
});
}
);
// 각 sub_name 버튼 클릭하면, 각 구절 세부내용이 그때그때 나타남
$(document).on("click", ".sub_no_click",
function(event) {
// a 링크 디폴트 이벤트 방지
event.preventDefault();
var id = $(this).data('id'),
no = $(this).data('no'),
sub_no = $(this).data('sub_no'),
unique = ( no ? 'no_'+no+'_'+sub_no : 'id_'+id+'_'+sub_no );
// 해당 버튼 만 글자 강조
if (no) {
$(this).css('font-weight','bold');
} else {
$(this).css({'font-weight':'bold','color':'red'});
}
$('.sub_no_click[data-id='+id+'][data-no='+no+']').not('[data-sub_no='+sub_no+']').css({'font-weight':'normal','color':'black'});
// web storage 활용 추출 및 표시
$('.sub_div[data-id='+id+'][data-no='+no+']').html('<pre>'+sessionStorage.getItem(unique)+'</pre>');
}
);
});
// strip tags 함수 (출처 : 인터넷, but 불명확)
function strip_tags (input, allowed) {
allowed = (((allowed || "") + "").toLowerCase().match(/<[a-z][a-z0-9]*>/g) || []).join(''); // making sure the allowed arg is a string containing only tags in lowercase (<a><b><c>)
var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi,
commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi;
return input.replace(commentsAndPhpTags, '').replace(tags, function ($0, $1) { return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '';
});
}