[BootStrap] 탭 내용 전환하기 전에 다이얼로그를 띄우기

탭을 변경했을 때 데이터를 비교하여, 값을 서버로 전송해야 할 경우가 발생했다. BootStrap의 탭을 이용해서 UI를 그리고, 탭을 이동할 때 select로 함수를 바인딩한 후 Modal을 출력했다. 클릭한 탭이 표시된 상태로 Modal이 표시되고 있었다. Modal로 confirm을 구현하고나니 더더욱 이상해졌다. 탭을 변경하기 전에 데이터를 저장해야합니다. 변경된 데이터를 저장하시겠습니까? (Y/N)이라는 내용의 Modal이 화면상에 떠 있는데, 어둡게 표시된 화면의 저 편에 클릭한 탭의 내용이 표시되고 있다. 이러한 경유로 탭을 클릭하면 사용자에게 탭 이동여부를 묻고, 사용자의 선택에 따라 클릭한 탭의 내용을 표시하는 UI가 필요했다.

사용자가 OK를 눌렀을 때 Confirm Modal을 띄워봤다. (Tab의 헤더는 Hello1, Hello2, Hello3으로 적어놓고, Tab의 내용에는 Hello0, Hello1, Hello2로 적어놨더니 인덱스가 맞지 않는다. 현재 Hello2의 내용이 보이고 있는게 맞다.) Confrim Modal에 의해 어둠게 처리된 영역의 뒤로, Hello2 탭의 내용인 Hello1이 표시되고 있다. 여기서 Cancel을 누르면 Hello1 탭으로 이동하게 할 수는 있지만, 사용자의 입장에서 미묘하게 느낄 수 있다.

해결방법이야 여러개 있긴 하겠지만, 나의 경우에는 가짜 Tab을 하나 생성하여 간단하게 해결했다.

<ul tabset>
  <li tab heading="HELLO1" active="activateFakeTabs[0]" select="changeTabEventHandler(0)">
  </li>
  <li tab heading="HELLO2" active="activateFakeTabs[1]" select="changeTabEventHandler(1)">
  </li>
  <li tab heading="HELLO3" active="activateFakeTabs[2]" select="changeTabEventHandler(2)">
  </li>
</ul>

<ul tabset>
  <li tab class="hide" heading="HELLO1" active="activateTabs[0]">
    <span>HELLO1</span>
  </li>
  <li tab class="hide" heading="HELLO2" active="activateTabs[1]">
    <span>HELLO2</span>
  </li>
  <li tab class="hide" heading="HELLO3" active="activateTabs[2]">
    <span>HELLO3</span>
  </li>
</ul>

html에서 구현한 가짜 Tab과 진짜 Tab이다. 진짜 탭의 헤더는 class="hide"를 지정하여, 숨김처리되어 표시되지 않는다. 따라서 실제 Tab의 내용은 active로 바인딩된 값이 변경될 때만 표시된다. 목적을 달성하기 위해서는 가짜 Tab을 선택했을 때 호출되는 changeTabEventHandler를 통해서, 진짜 Tab에 active로 바인딩 된 activateTabs값을 변경해주면 된다. 가짜 Tab에 active로 바인딩 된 activateFakeTabs는, 진짜 Tab과의 동기화를 위해 사용되고 있다.

$scope.changeTabEventHandler = function(param_tab){
  var beforeTab = $scope.current_tabs;
  var currentTab = param_tab;

  if (currentTab == beforeTab) {return false;}

  _activeTabs(currentTab);

  $scope.current_tabs = currentTab;
}

function _activeTabs(param_tab_index) {
  for(var index=0; index<$scope.activateTabs.length; index++) {
    if(index==param_tab_index) {
      $scope.activateFakeTabs[index]=true;
      $scope.activateTabs[index]=true;
    }
    else {
      $scope.activateFakeTabs[index]=false;
      $scope.activateTabs[index]=false;
    }
  }
}

가짜 Tab의 select에 바인딩 된 changeTabEventHandler를 살펴보자. $scope내에서 저장하고 있던 이전 탭의 index를 beforeTab값으로 저장하고, 파라메터로 넘겨받은 값을 currentTab에 저장한다. 이후 조건문에 따라서 activateTabs와 activateFakeTabs값을 변경해주는 _activeTabs 함수를 호출해준다.

코드상에서는 Confirm Modal을 호출하는 코드가 누락되어있으나, 적용해보면 잘 동작하는 것을 확인할 수 있다. :)

​