모바일 레이어 백버튼으로 닫기

모바일 리스트에서 상세로 넘어갔다가 다시 돌아왔을때 보고있던 페이지 유지를 위해서 

상세는 레이어로, 레이어가 닫히면 보고있던 리스트가 보이게 하는게 목적.

리스트에서 상세뜰때 레이어를 띄우는건 문제없이 적용.

상세에서 닫기를 누르거나, 뒤로가기(안드로이드에서는 back버튼, 아이폰에서는 스와이프) 동작시 레이어가 닫히는 액션을 주어야 한다.

검색을 통해서 두가지 방법을 찾았다.

1. hashchange

href="#ID" 로 같은페이지 내에서 이동했을때 hash가 변경되면 실행

뒤로가기( history back )이 되었을때 hash가 지워지고 hashchange가 발생 

hashchange가 발생하면서 설정한 함수(close버튼 trigger) 실행된다.

<a href="#view_page" class="detailbtn">상세</a>
<div id="view_page" class="lyr_pop"> 
    detail view
    <button type="button" class="close">닫기</button>
</div>
 
<script>        
    // 팝업띄우기
    $('.detailbtn').click(function(e){
        popupShow(e);
    })
    $('.lyr_pop .close').click(function(e){
        popupHide();
    })
    function popupShow(e) {
        $('.lyr_pop').addClass('on');
    }
    function popupHide() {
        $('.lyr_pop').removeClass('on');
    }
    
    window.addEventListener("hashchange", function(e) {
        $('.lyr_pop .close').trigger('click')
    })        
</script>

2. pushState

2중 레이어를 위해 pushstate 방식으로 

.detailbtn 을 클릭하면 href의 값과 레이어 본 창의 id값을 연결시켜 해당 레이어 open.

그 ID값을 배열(popupHistory)에 넣고

history back이 일어날때 배열의 제일 마지막 ID를 close 시켜주는 방식.

window.history.pushState( {}, title, id )

window.onpopstate = window.onpushstate

popstate : 현재 활성화된 히스토리 엔트리에 변화가 있을때마다 실행

popstate 이벤트는 브라우저의 백 버튼이나 (history.back()) 호출 등을 통해서만 발생된다. 

pushstate or replacestate : 함수에 의해 현재 활성화 되어있는 히스토리 엔트리가 조작, 변경된다면 popstate 이벤트의 state 속성은 히스토리상의 state객체의 사본이 된다.

/** 
 * 레이어 상세 띄우기
 */
function popupShow($id) {
    $($id).addClass('on');
}
function popupHide($id) {
    $($id).removeClass('on');
}
 
/**
 * 백버튼시 레이어 닫힘
 */
var layerPopup = {
    open : function(layerId){
        popupShow(layerId);
    },
    close : function(layerId){
        popupHide(layerId);
    }
};
var popupHistory=[];
$(document).on('click', '.lyr_pop .close', function(){
    window.history.back();
}).on('click', '.detailbtn', function(e){
    var layerId = $(this).attr('href'); // 상세버튼 클릭시 layer ID값과 연결된 href값 가져옴
    var layerTitle = $(this).attr('title');
 
    window.history.pushState({}, layerTitle, layerId); // window.location에 id값 삽입
    layerPopup.open(layerId); // layer ID open
    popupHistory.push(layerId); // 배열에 지금 불러온 ID값 삽입
});
 
window.onpopstate = history.onpushstate = function() {
    var layerID = popupHistory[popupHistory.length-1]; // 배열의 마지막에 열었던 ID 값
    layerPopup.close(layerID); // 현재의 모달을 닫는다.
    popupHistory.pop(); // 닫는 layer ID값 삭제
}

line 24 에서 .close를 클릭하면 history.back 발생. history.back이 발생해도(뒤로가기 버튼을 클릭할때) line 34 실행

line 34 onpopstate 가 히스토리엔드리 변화를 감지하고 해당 ID의 레이어 닫는 함수 실행(layerrPopup.close)