일렉트론 커스텀 네비게이션바

[작업한 이유]

데스크탑 설치형 서비스를 일렉트론이라는 툴을 이용해서 개발하고 있다.

그리고 일렉트론은 기본적으로 제공하는 상단 바가 존재하지 않는다.

크롬은 일반적으로 익숙한 형태의 상단바가 있음

이전에 우리 서비스는 뒤로가기/앞으로가기가 따로 없이 레이어를 전환하는 방식으로 구현되어있었는데

이번 웹 리뉴얼에서 뒤로가기/앞으로가기가 생기면서

설치형에서도 해당 기능을 사용할 수 있도록 상단바의 일부 기능이 필요하게 되었다.

 

찾아보니 라이브러리를 이용하는 방식도 있지만

직접 아이콘으로 커스텀하여 기능을 적용하는 방식이

더 서비스에 녹아들기 좋을 것 같아 직접 기능을 넣는 방식으로 결정했다.

 

- 뒤로가기

- 앞으로가기

- 새로고침

- 우클릭시 새로고침 / 강력새로고침 선택팝업 

 

[작업방식]

이참에 일렉트론의 이벤트만 처리하는 파일도 분리해서 작업했고 이벤트 위임방식을 사용했다.

(일부 클래스명/함수명은 블로그용으로 한글로 바꿨음.)

function 클릭이벤트함수($eTarget) {

        if (isBackBtnAndAction()) return;
        if (isForwardBtnAndAction()) return;
        if (isReloadBtnAndAction()) return;
        if (isReloadMenuAndAction()) return;

        function isBackBtnAndAction() {
            var $backBtn = $eTarget.closest('.뒤로가기');
            if($backBtn.length === 0) return false;

            history.go(-1);
            return true;
        }

        function isForwardBtnAndAction() {
            var $forwardBtn = $eTarget.closest('.앞으로가기');
            if($forwardBtn.length === 0) return false;

            history.go(1);
            return true;
        }

        function isReloadBtnAndAction() {
            var $reloadBtn = $eTarget.closest('.새로고침');
            if($reloadBtn.length === 0) return false;

            location.reload();
            return true;
        }

        function isReloadMenuAndAction() {
            var $reloadMenu = $eTarget.closest('.새로고침팝업');
            if($reloadMenu.length === 0) return false;

            var dataCode = $reloadMenu.attr('data-code');
            if(dataCode === '새로고침') window.location.reload();
            else if (dataCode === '강력새로고침') window.location.reload(true);
            return true;
        }
    }

 

 

결국 요약하자면 매우매우매우 간단

 - 뒤로가기 : history.go(-1)

 - 앞으로가기 : history.go(1)

 - 새로고침 :  window.location.reload();

 - 강력새로고침 :  window.location.reload(true);