Regular Motion

개발자가 상팔자

Category: javascript (page 2 of 7)

[Javascript] draggable.js : Drag & Drop Library.

Project 진행 중 Drag&Drop Library가 필요해서 한번 만들어봤습니다.

– SourceCode & Simple Usage –

https://github.com/RegularMotion/draggable

– Demo –

* 개인적으로 Chrome, FF, Opera, Safari, IE(8.0), iOS, Android에서 정상 동작 확인하였습니다.

http://the-next.tv/draggable/ 

– Drag & Drop Library ‘draggable’을 구현하면서 배운 3가지 – 

1. Object 또는 Pointer의 위치를 Tracking할 필요가 있는 경우 Event Listener를 등록할 때 함수대신 Object를 넘겨주고 

    Object에 handleEvent 함수를 override하는 것이 좋다.

아래와 같은 방식으로 구현할 경우 Object 변수에 closure를 발생시키지 않고 접근할 수 있기 때문에

Object변수를 Tracking할 필요가 있는 경우 이점이 되는 것 같습니다.

2. ‘touchmove’나 ‘mousemove’의 경우 지나치게 자주(1초에 100회 이상) 호출되는 함수이기 때문에 해당 함수의 listener를 가볍게 구현하거나, 그렇지 않은 경우 filtering을 해주는 작업이 필요했습니다.

전부 처리할 경우 Android Device에서 버벅거림이 심해지는 것 같습니다.

저는 20ms이내에 다시 호출될 경우 listener가 동작하지 않도록 pending 변수를 두었습니다.

3. Javascript에서 css의 z-index값을 수정할 경우 style[“z-index”]가 아닌 style[“zIndex”]를 사용해야
모든 브라우저에서 동일하게 동작함.

‘draggable’이 다른 분들께 도움이 되었으면 합니다.

[Javascript] WakeUp.js : Context를 유지시켜주는 Timer Library.

JavaScript 개발을 하다보면 setTimeout 함수로 호출되는 함수의 내부 Context가 Global Context를 가리키고 있기 때문에 

1. 코드의 흐름이 끊기는 문제와
2. 원치 않는 클로져를 다수 발생시키는 문제를 항상 갖고 있었다.

그래서 호출되는 함수의 Context를 Object 자신을 가리키도록 하는 Mobule을 만들어봤다.

이름하여 WakeUp!

아직 충분히 테스트를 해보지는 못했지만 쓸모있는 모듈이 될 수 있을 것 같다!!!!!

Q : 모듈내부에서 발생하는 클로져는 어떻게 해결해야 할까요??


– Library Code –

– Usage Example –

[Javascript] PxLoader.js : Resource PreLoader Library.

HTML5 Game을 개발하다보면 Image, Audio, Video등의 Resource들을 Pre-Load할 필요가 있습니다.
굳이 Game이 아니더라도 필요한 Resource들을 Pre-Load 해두면 도음이 되는 경우는 많이 있습니다.

이때 사용하면 좋은 Library가 있어서 소개합니다.

Cut the Rope를 만든 개발팀에서 Cut the Rope를 HTML5로 Migrate할 때 사용한 Library인데요. MIT License로 공개되었습니다. 

사용방법

1. 긷에서 PxLoader(https://github.com/thinkpixellab/PxLoader)를 다운받습니다.

2. Project에 필요한 파일을 import합니다.


3. PxLoader 객체를 생성한 뒤 Pre-Load할 이미지들을 추가합니다.


4. Event Callback을 등록한 뒤 Pre-Load를 시작합니다.

자주 사용될 부분은 위에서 소개한 이미지 Pre-Load 기능일 것 같고, 그 외의 다양한 기능들은 사이트에(http://thinkpixellab.com/pxloader/) 데모와 함께 자세하게 소개되어 있습니다. 관심 있으신 분들은 한번 둘러보세요.

[Javascript] Quickly.js : Touch Device에서 Click Delay를 없애는 Library.

 스마트 폰이나 태블릿과 같이 터치 환경의 Device를 위한 WebApp / WebPage를 작성하다보면 클릭 이벤트를 수신하기까지 Delay가 존재한다는 것을 느낄 수 있다.

실제로 테스트를 해보면 약 300~500ms 정도의 Delay가 존재한다.




버튼에 클릭 효과가 발생할 때까지 300~500ms 정도의 Delay가 발생한다면 사용자가 답답하다고 느낄 수 있기 때문에 터치가 시작되는 시점에 클릭 효과를 추가하고 터치가 끝나는 시점에 클릭 효과를 제거하는 방법으로 Delay를 제거할 수 있다.




이러한 작업을 위해 iScroll의 개발자로 유명한 Matteo Spinell씨가 NoClickDelay라는 Object를 만들어놨다. (http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone)




하지만 실제로 사용해보니 약간의 버그?(터치가 시작되는 Element와 터치가 끝나는 Element가 서로 다를 경우 추가된 css class가 제대로 제거되지 않는 문제)가 있고 PC 환경은 지원하지 않기 때문에 모바일/PC 환경에서 동일하게 사용할 수 있도록 Quickly라는 이름으로 Custom 하였다.


PS) touchend/mouseup 이벤트 리스너를 클릭된 element가 아닌 window object에 등록하였기 때문에 터치가 시작되는 Element와 터치가 끝나는 Element가 달라도 정상 동작한다.


– Source Code –

https://github.com/RegularMotion/Quickly/


– Demo –

http://the-next.tv/quickly/


– 사용법 –

1. new Quickly(‘element_id’);

   Element의 ID 또는 Element Object를 이용하여 Quickly Object를 생성한다.


– 내부동작 –


1. 터치/클릭 이벤트가 시작되는 시점에 element에 clicked Class를 추가.


2. 터치/클릭 이벤트가 끝나는 시점에 element에서 clicked Class 제거.




clicked CSS Class 정의 –


– Javascript 구현부 –

– Hover Effect까지 처리해주는 Version 

[Javascript] Mobile Browser Address Bar 제거.

시작시에 주소 영역 만큼을 Scroll 하고, window에 대해 터치 기본 동작을 막는다.

기본적으로 height는 100% + 주소창 크기를 설정해야 scrollTo가 정상동작한다.

Older posts Newer posts

© 2017 Regular Motion

Theme by Anders NorenUp ↑