README
@mornya/ui-libs
The project of Global UI module.
This project has been created by Vessel CLI. For a simple and quick reference about it, click here.
About
프론트엔드 프로젝트 개발에 사용되는 모듈들에 대해 집합적인 형태로 제공되는 패키지.
Installation
해당 라이브러리를 사용 할 프로젝트에서는 아래와 같이 의존성 모듈로 설치한다.
$ npm install --save @mornya/ui-libs
or
$ yarn add @mornya/ui-libs
Modules in the package
본 패키지에는 아래와 같은 모듈들을 포함한다.
제공되는 모듈과 메소드 사용법 등은 코드 스니핏을 참고한다.
AnimationFrame module
window.requestAnimationFrame를 이용한 애니메이션 프레임 구현 (requestTimeout
, requestInterval
)
Easing module
Easing 관련 각종 메소드 제공 (gizma.com/easing
참고)
EasingSimple module
간단한 Easing 관련 각종 메소드 제공 (Vuetify
내장 라이브러리 참고)
Helper module
debounce, throttle 등 개발에 도움이 되어 줄 각종 헬퍼 메소드 제공
Helper.debounce
function debounce<F extends (...args: any[]) => any> (callback: F, debounceOption?: DebounceOption): DebouncedFunction<F> {}
Helper.throttle
function throttle<F extends (...args: any[]) => any> (callback: F, throttleOption?: ThrottleOption): ThrottledFunction<F> {}
ImageLib module
이미지 관련 처리 모듈.
ImageLib.getImageSize
입력 받은 URL에 대한 이미지 사이즈를 얻는다.
type ImageSizeOption = {
timeout?: number; // 이미지 로딩 타임아웃 설정
isIgnoreError?: boolean; // 오류시 무시(ImageSize 리턴)하거나 throw
};
function getImageSize (url: string, option?: ImageSizeOption): Promise<ImageSize> {}
ImageObserver module
IntersectionObserver
를 이용한 이미지 옵저버 모듈.
ImageObserver.initialize
모듈 초기화
function initialize (option?: IntersectionObserverInit): void {}
ImageObserver.destroy
모듈 해제
function destroy (): void {}
ImageObserver.subscribe
특정 HTML 엘리먼트에 대해 옵저버 등록 및 구독
function subscribe<T extends Element> (target: T, callback?: EventListenerOrEventListenerObject): void {}
PopupLib module
팝업 / 새 창 관련 처리 모듈.
PopupLib.openWindow
브라우저 새 창 열기 및 윈도우 객체 상태에 따른 콜백기능을 제공.
function openWindow (openWindowOption: OpenWindowOption): Window | null {}
ScrollHelper module
브라우저 화면 스크롤 제어 및 콜백함수 제공.
ScrollHelper.run
AnimationFrame.requestTimeout
를 이용한 화면 스크롤 기법.
function run (option?: ScrollHelperOption): Promise<void> {}
ScrollHelper.easingTo
window.requestAnimationFrame
및 easing 라이브러리를 이용한 화면 스크롤 기법.
function easingTo (el: Element, to: number, duration: number | undefined = 500): void {}
ScrollLib module
화면 스크롤 관련 처리 모듈.
ScrollLib.scroll
화면에서 해당 엘리먼트 객체가 위치한 곳으로 스크롤 이동 및 콜백 리턴.
function scroll (scrollOption: ScrollOption): Promise<ScrollResult | null> {}
UI module
UI 관련 처리 모듈.
UI.documentBody
document.body를 얻어온다 (모던/IE 브라우저 대응)
function documentBody (): DocumentBody {}
UI.getScrollOffsetX
window.pageXOffset과 동일 (모던/IE 브라우저 대응)
function getScrollOffsetX (): number {}
UI.getScrollOffsetY
window.pageYOffset과 동일 (모던/IE 브라우저 대응)
function getScrollOffsetY (): number {}
UI.getUrlToBlob
MIME 타입으로 지정한 원격 파일을 읽어와 리턴.
function getUrlToBlob (file: File, mimeType: string): Promise<string> {}
UI.getImageFileToData
원격 이미지를 파일 객체로 변환하여 저장.
function getImageFileToData (file: File): Promise<string> {}
UI.freezeBody
스크롤제어(팝업 레이어 등) 필요시 document.body에 backface-visibility 적용 클래스를 추가.
function freezeBody (): void {}
UI.unfreezeBody
freezeBody 해제.
function unfreezeBody (): void {}
UI.freezeBodyScroll
freezeBody 메소드 수행 후 추가적으로 스크롤이 불가하도록 처리.
function freezeBodyScroll (): void {}
UI.unfreezeBodyScroll
freezeBodyScroll 해제.
function unfreezeBodyScroll (): void {}
UI.createDOM
문자열로 HTML 엘리먼트를 생성한다 (첫 child element를 리턴).
function createDOM<E extends HTMLElement | Element> (html: string): E {}
UI.showKeyboardOnFocus
iOS 디바이스에서 입력 폼에 스크립트로 포커스시 소프트키보드가 올라오지 않는 현상에 대한 우회 처리 (모든 디바이스 및 브라우저에 공통으로 사용가능)
function showKeyboardOnFocus<T extends HTMLElement | null> (el: T, timeout: number = 100): Promise<boolean> {}
Change Log
프로젝트 변경사항은 CHANGELOG.md 파일 참조.
License
프로젝트 라이센스는 LICENSE 파일 참조.