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)

AntiFlexBug module

iOS 웹뷰/사파리 등에서 flex height를 제대로 잡지 못하는 현상 해결을 위해 조정 값을 CSS 변수로 등록해준다.

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.isFrozenBody

freezeBody가 실행된 상태인지의 여부를 리턴.

function isFrozenBody (): boolean {}

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 파일 참조.