Rev. 2.73

jQuery.fracs은 현재 보고있는 페이지의 뷰포트(보여지는 일부분)와 상호 작용하여 특정한 요소들이 정해진 조건으로 뷰포트에 지속해서 노출될수 있도록 만들어주는 jQuery용 플러그인 입니다. 브라우저의 창 크기에 구애받지 않는 웹 컨텐츠를 생산하도록 돕는 것이 목적이라 할 수 있겠습니다. 그리고 페이지 전체를 간략하게 보여주는 아웃라인 기능이 확장의 형태로 포함되어 있습니다. 아웃라인만을 그리는 것이 목적인 플러그인이 아니란 얘기죠.

하지만 저는 이 아웃라인(미니맵) 기능만 사용하고 싶었기에 코어에 해당하는 부분을 모두 날려버리고 미니맵 기능만 수행하도록 수정해야 했습니다. 상속으로 구현된 다수의 이벤트 핸들러들과 포지셔닝 관련 메서드들이 불필요했기 때문입니다. 그리고 개인적으로 jQuery를 그다지 좋아하는 편이 아니어서 뜯어 고치는 김에 Prototype용으로 작성했습니다. 해당 코드는 Gist에 등록했으니 혹시라도 필요한 분은 포크하시면 되겠습니다.

var minimap = new Minimap({
    crop: true
  , width: 80
  , height: 512
  , duration: 0.3
  , transition: Effect.Transitions.expoOut
  , styles: [
      {selector: "header,footer,section,article,nav a,pre,._c"}
    , {selector: ".article img,.article canvas,object,embed,p", fillStyle: "#ccc"}
    , {selector: "h2,h3,h4,.article a", fillStyle: "#c30"}
  ]
});

function doSomeUpdate() {
  ...
  minimap.draw();
}

이 미니맵은 Canvas 요소로 표현되는 것입니다. Minimap 클래스를 호출할 때 옵션으로 전달받은 선택자와 색상등을 참조하여 해당 요소의 포지션을 계산하고 스케일링하여 Canvas 요소에 그려냅니다. 다수의 이벤트 감시를 통해 페이지 상황을 갱신하며 뷰포트 위치를 트래킹하고 해당 위치로 스크롤할 수 있습니다. 그리고 모바일 브라우저나, Canvas를 지원하지 않는 브라우저에서는 나타나지 않습니다. 추가적으로 화면이 좁아지면 토글 되도록했으며, Smails의 갱신 시간에 Minimap이 redraw되도록 하였습니다. 이제 멀리 도망간 스마일을 추적할 수 있습니다. (ㅋㅋ) 우측에 달려있는 녀석이니 많이 애용해 주세요.

Updates:

* 2011/09/20 - 갱신 콜백 호출횟수 제한
* 2011/09/15 - context stroke 처리 개선
* 2011/09/15 - 캐시 리드로우(스크롤 오버해드 감소)
* 2011/09/15 - 토글 오류 수정
* 2011/09/15 - 전역 이벤트 버블 차단 오류 수정
* 2011/09/14 - 클릭 정확성을 위한 드래그 의도 검사
* 2011/09/14 - 텍스트 요소가 줄 변경된 경우 렉트 분할
* 2011/09/13 - 페이지 크기에 반응하는 자동 토글
* 2011/09/13 - 숨겨진 요소는 그리지 않음

Comments

Got something to add? You can just leave a comment.

  • nogari nogari

    @firejune 안녕하세요~ 예전부터 좋은 포스팅들 잘 보고 있습니다~ 다름이 아니라 요즘 거의 대세인 jquey 보다 prototype 을 선호하신다고 했는데 혹시 구체적인 이유를 들을 수 있을까요? 웹개발에 관심이 많아서요 ^^;

    from twitter

  • firejune firejune

    @nogari78 글쎄요 취향이랄까요...

    from TwitBird

  • nogari nogari

    @firejune 단지 취향이신 건가요? ^^ 특별한 이유는 없는지 궁금했었는데~ 답변 감사합니다~ ^^

    from twitter

Your Reaction Time!

captcha

avatar