사이드바 외부 이벤트로 닫기 구현 기록-#2스킨

티스토리 스킨의 사이드바 커스텀

 

사용하던 스킨의 모바일 사이드바 폼을 전체창 출력에서 사이드 좌측 70% 출력하도록 모바일 폼을 변경한 후, 스킨의 남은 30% 영역의 사이드바 외부 클릭 이벤트로 사이드바를 닫기 위한 구현을 하기 위해 인터넷에 흔하게 떠돌던 코드를 하나 가지고 와 사용 스킨의 환경에 맞게 조립하던 중 문제가 하나 발생했습니다.

스킨의 사이드바 내비게이션을 담당하던 script코드를 수정해 봤는데 외부영역 이외의 사이드바 내부에서도 사이드바가 닫히는 이벤트가 발생하여서 결국 이리저리 살펴보고 검사를 반복하다 스크립트 코드의   $(document).on("mouseup", function(e)" 한 줄 코드의 "(document ) 부분에 외부이벤트 발생을 위한 DIV 레이어의  Element ID를 주고 그 아이디를 코드의 $(document) 대신 지정한 엘레멘트 요소의 ID값으로 명시해 주고 셀렉터로 불러와 선택한 요소 안에서만 이벤트가 발생하도록 구현하고 이를 기록으로 남겨놓았습니다.

이를 티스토리 스킨에 반영후 오류없이 코드가 작동하는 것을 확인 후 추후 스킨 수정 시 자료와 또한 이런 문제로 고민할 다른 사용자를 위해서 기록으로 남겨놓기로 했습니다.

사이드바의 (X) 닫기 버턴 기능외 이미지에 표시된 사이드바 외부 클릭으로 "mouseup" 이벤트를 발생시켜 사이드바에 주어진 addclass를 무효화 시킴으로 사이드바를 닫는 기능의 구현을 위한 방법입니다.

물론 이외에도 수많은 로직으로 이벤트를 발생시키는 다수의 방법이 있으며 기록한 닫기 이벤트의 방법은 많은 구현 방법 중 한 가지 임을 참고 삼아 봐주시면 되겠네요.

구현 방법은 제가 사용하는 T스토리 제공 티스토리#2스킨을 기준 삼아 구현해 보았습니다. 해당 스킨은 모바일 사이드바가 전체 창으로 출력되던 반응형 스킨이며 pc화면에서도 사이드바의 close(X) 닫기 버턴외에는 주어진 사이드 바의 오픈 class를 removeClass 시켜주는 이벤트는 없는 스킨입니다. 이 스킨에 구현한 모바일 사이드바의 외부 마우스 온다운 이벤트로 사이드 바를 닫는 기능을 추가하며 반응형 pc에서도 동일한 이벤트의 기능을 구현하도록 코드를 구성해 봤습니다.

일반적으로 외부 닫기 기능의 구현을 위한 코드구성

/// 선택자 변수 생성 

  var $wrap = $(".wrap_skin"),
            $btnCategory = $(".area_head .btn_cate"),
            $btnCloseCategory =  $(".wrap_sub .btn_close"),
		    $sidebar = $("(예).sbox-bg"), // 사이드바 선택자 추가
		    $sidebarCloseCategory = $("(예).sbox-bg .sbox-bg_on"); // Close 사이드바 선택자 추가
 
 $btnCategory.on("click", function() {
            $wrap.addClass("navi_on");
			$sidebar.addClass("sbox-bg_on"); //버턴 클릭시 sbox-bg_on 클라스 부여
        });

        $btnCloseCategory.on("click", function() {
            $wrap.removeClass("navi_on");
			$sidebar.removeClass("sbox-bg_on"); //버턴 클릭시 sbox-bg_on 클라스 제거
        });


 // 사이드바 외부 이벤트를 document로 처리할경우 전체창에 이벤트가 발생함
           $(document).on("mouseup", function(e) {
            if (!$sidebarCloseCategory.is(e.target) && $sidebarCloseCategory.has(e.target).length === 0) {
                $wrap.removeClass("navi_on ");
				$sidebar.removeClass("sbox-bg_on");
            }
        });
        
        
		  //위에 코드를 아래 코드로 수정 document - > #아이디 명으로 변경
           $("#SletBox").on("mouseup", function(e) {
            if (!$sidebarCloseCategory.is(e.target) && $sidebarCloseCategory.has(e.target).length === 0) {
                $wrap.removeClass("navi_on ");
				$sidebar.removeClass("sbox-bg_on");
            }
        });
       
     })();

위에 코드에서 $(document). on 부분에 아래와 같이 선택자를 위해 작성한 DIV 박스에 아이디(ID) 값을 만들어 주고 아이디를 이 부분에 실렉터 요서로 변경해 주어 다른 곳이 아닌 딱 선택한 박스 안에서만 이벤트를 발생 키도록 해주었습니다.

스크립트 코드는 해당 스킨의 사용자의 경우 images 폴더의 "script.js"파일을 메모장이나 편집기로 열어 편집 하시면됩니다.

*html 부분의 요소 박스 : 스킨의 가장하단 foot 스타일 아래 기입

<div id="SletBox" class="sbox-bg sbox-bg_on"></div>

*해당 css 코드블록 

/*외부클릭 네비게이션 닫기 선택자*/
.sbox-bg {display:none} //_on class 가 주어지기 전엔 none 으로 출력 중지//
.sbox-bg.sbox-bg_on{
display:block; 
height:100%;
position:fixed; 
top:0; right:0; 
bottom:0; 
left:0; 
width:100%; 
background-color:#22222273; //클레스 부여시 어둡게 만들기 위한 백그라운드 
transition:.2s; z-index: 90}

위와 같은 구성으로 해당 스킨의 사이드바 외부 클릭으로 닫기 이벤트를 구현했습니다 해당 스킨의 사용자는 위와 같은 방법으로 구현하시면 되며 다른 스킨의 사용자도 해당 방법의 구성을 응용하여 구현하면 될 듯합니다.

 

*요점 정리 : $(document). on으로 영역을 설정하면 사이드바 외 문서의 모든 영역에서 발생하는 removeClass 이벤트를 요소에 ID값을 주고 이를 document 대신 사용하여 해당 요소를 명시해 주어서 해당 요소 안에서만 이벤트가 발생하도록 구성해 보았습니다.

 

*문제점 :기본 스킨의 모바일 레이아웃 구조가 사이드의 열고 닫기 이벤트시 서서히 열림 등의 애니메이션 효과를 구현하기가 힘든 구조라 아무래도 모바일 레이아웃 구조를 모두 display:none 처리한 후 연관 레이아웃 박스를 모바일 전용으로 class를 생성한 후 다시 구축해야 할 듯합니다.;;;;  기본 레이아웃 뼈대 구조를 유지하고 애니메이션 효과를 줄 수 있을지 좀 더 고민해 보기로.....

 

*이후에 수정한 목록 들..

결국 위에 표기된 문제점을 해결하기 위해서 원래있던 "<div id="dkHead" role="banner" class="area_head">"의 모바일 상단 사이드 바에 올라가는 베너를 모바일 용으로 따로 만들고 (예: <div class="area_m_head"> 종속된 자식 목록 들을 모두 class= m_을 추가하여 생성한 후 해당 목록들의 css 스타일을 따로 부여한 후 "<div id="mFeature" class="wrap_sub">" 아래로 종속되게 만들어 해결했다 이로서 사이드 박스가 열릴 때나 닫힐때 "wrap_sub" 안에서 발생하는 트렌지션의 시간 딜레이 효과를 적용했다" transition: width ease-in-out 0.3" 사이드 바가 열릴때 프로필 베너의 이미지가 먼저 열리는 현상은 있는데 이 부분은 이미지를 백그라운드 이미지로 처리해서 "<span class="thumb_m_profile">" 안에서 처리하면 될듯한데.. 구현할지는 좀 더 지켜보기로 했다.

남은 과제:

1. 생성 후 레이아웃 정리 : 스킨의 박스 순서와 불필요한 블록 정리

2. 잉여 코드들과 스타일시트 정리 : 기존 코드의 클래스를 가져와 사용하다 보니 불필요한 코드등과 배치 문제등이 있다.

다음 목표는 티스토리 1형 스킨에 없는 인기글 목록 등을 블로그 프런트와 포스팅 아래 티스토리의 인기 글 치환자 등을 이용해서 인기글과 전체글 등의 목록을 위젯화 하여 리스트 형식이나 웹진형 형식으로 구현해 보려 하는데 이 부분을 위해서 좀 더 많은 자료를 찾아본 후 구현해 보도록 하겠습니다.

내용과 연관된 글 : https://lookchang.tistory.com/214