material-design-style drawer 옵션화 요청

[gitaeks]

@kieregh , 요청하신 material-design-style drawer 입니다.
문서를 보시면 별도의 css와 js 를 추가해야 구현이 가능한 상태인데요.

drawer 익스텐션의 옵션으로 아래의 방식이 구현가능하면 좋지 않을까도 생각됩니다. ( 추가되는 css 는rc-snap.css 에 내장시킨후 drawer에 별도의 class를 부여하면 적용하면 될 것 같습니다.

문서
http://rc.kimsq.com/extensions/snap/#material-design-style

데모
http://rc.kimsq.com/examples/extensions/snap/material-design-style.html

css 추가

.snap-drawer-left {
  position: fixed;
  top: 0;
  left: -1px;
  right: 0;
  bottom: 0;
  -webkit-transform: translate3d(-265px, 0, 0);
          transform: translate3d(-265px, 0, 0);
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
          box-shadow: 0px 0px 10px rgba(0,0,0,0.9);
}
.snapjs-left .snap-drawer-left {
  z-index: 11;
}

js 추가

snapper = new Snap({
  element: $("#myDrawer")[0],
  maxPosition: 1,
  minPosition: -1,
  transitionSpeed: 0.1,
})

// Initialize drawer
RC_initDrawer();

[kieregh]

아래와 같이 의견 드립니다.

이슈

무엇이 슬라이딩되게 할 것인가?

오리지널 사용법 리뷰

https://github.com/jakiestfu/Snap.js/

기본 마크업 및 초기화

<div class="snap-drawers">
</div>
<div id="content" class="snap-content">
</div>
<script>
 var snapper = new Snap({
  element: document.getElementById('content')
});
</script>

element 에 대한 정의

해당 페이지에 아래와 같이 정의되어 있습니다.

element: The element which the user will be sliding side to side

요컨대, 마크업에서 이 element(슬라이딩 대상)를 지정하고 별도 class 를 부여해서 움직이게 하고 z-index 값을 조정하면 될 것으로 생각합니다.

개선 방법 제안

target 개념 및 기능 재정립

RC 에서는 특정 액션에 대해서 target 이라는 개념을 사용하고 있습니다. drawer 에서 역시 사용하고 있는데 기존방식과 다르게 작동되고 있는 것으로 생각됩니다.

즉, 모달에서는 target 이 움직이는데....drawer 에서는 target 이 움직이지 않고 content 영역이 움직이고 있었습니다. 물론, 이 것은 오리지널 방식에 따른 것이긴 한데요....RC 에서는 target 이라는 개념을 사용하는 만큼 개선될 필요성이 있다고 생각합니다.

요컨대, target 을 슬라이딩 대상으로 지정하는 것입니다.

drawer-content, drawer-handle ID 추가 고정

snap.js 에제 제공하는 기본 마크업 구조는 크게 .snap-drawers 와 .snap-content 영역으로 분리가 되며 .snap-drawers 영역에는 보통 메뉴가 들어가던지..아무튼....말그대로 서랍속의 내용이 들어갑니다. 반대로 .snap-content 영역에는 .snap-drawers 영역이 보이지 않는 상태의 기존 내용(content) 영역입니다...
위와 같은 구조는 snap.js 관점에서만 보면 크게 문제가 없어보입니다.

그러나 RC 에서는 snap 이라는 용어를 사용하지 않고 drawer 라는 용어와 개념을 사용합니다.
실제 서랍을 여는 행위를 세분화하면 아래와 같습니다.

1. 서랍손잡이를 당기면(data-toggle="drawer" 클릭)
2. 서랍이 열린다. (.snap-drawer 내용이 보여진다.)

따라서, 실제 마크업에서는 서랍내용물과 손잡이 부분이 정의가 되야 한다고 생각합니다.
또한, 서랍손잡이 부분은 반드시 최초의 .snap-content 영역에 노출이되야 합니다.

그래서..이것을 id="drawer-content" 와 id="drawer-handle" 로 구분하는 것입니다.

즉,

.snap-drawers = #drawer-content 가 되고
.snap-content = #drawer-handle 이 됩니다.

위와 같이 한 후 data-target 을 drawer-handle 로 할지 drawer-content 로 할지 선택하는 방식입니다.

target 이 #drawer-content 가 되는 경우 아래의 class 를 추가해줍니다.

.snapDrawers-sliding {
  position: fixed;
  top: 0;
  left: -1px;
  right: 0;
  bottom: 0;
  -webkit-transform: translate3d(-265px, 0, 0);
          transform: translate3d(-265px, 0, 0);
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
          box-shadow: 0px 0px 10px rgba(0,0,0,0.9);
  z-index: 11;
}

rc-snap.js 수정

RC_initDrawer() 를 통해서 drawer 가 초기화되면....rc-snap.js 에서는 아래와 같이 snap.js 부분에 대한 초기화가 자동으로 세팅되도록 되어 있습니다.

  window.snapper = new Snap({
            element: $('[data-extension="drawer"]')[0]
  });

즉, 저 역시 최초에 제공된 마크업에 의거해서 .snap-content 에 data-extension="drawer" 를 추가해서 일괄 적으로 .snap-content 부분을 슬라이딩 대상으로 지정했던 것입니다.

위와 같은 방식을 아래와 같이 수정합니다.

• target 으로 지정된 부분을 element 로 지정한다.
• target 이 #drawer-content 인 경우 아래의 옵션을 추가합니다.

          maxPosition: 1,
          minPosition: -1,
          transitionSpeed: 0.1

개선방법 데모

오리지널 방식

http://www.withconsumer.net/rc-test/extension/drawer-original.html

gmail 방식

http://www.withconsumer.net/rc-test/extension/drawer-gmail.html

참고로, 이 방식을 도큐먼트에서 material style 로 규정하는 것은 무리가 있어보입니다.

이상입니다.