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

본 패키지에는 아래와 같은 모듈들을 포함한다.
제공되는 모듈과 메소드 사용법 등은 코드 스니핏을 참고한다.

A11y module

웹접근성(Accessibility)에 반하는 메소드 구현 (정확한 동작이 이루어지지 않을 수 있음)

A11y.preventPinchZoom

브라우저 Pinch zoom 기능 비활성화

function preventPinchZoom(): void {}

A11y.preventDoubleTapZoom

브라우저 DoubleTap zoom 기능 비활성화

function preventDoubleTapZoom(): void {}

AnimationFrame module

window.requestAnimationFrame를 이용한 애니메이션 프레임 구현 (requestTimeout, requestInterval)

AntiFlexBug module

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

AntiFlexBug.initialize

AntiFlexBug 핸들러 등록

function initialize (isForce: boolean | undefined = false): void {}

AntiFlexBug.destroy

AntiFlexBug 핸들러 해제

function destroy (): void {}

AntiFlexBug.setPropertyName

document property name 변경

function setPropertyName (newName: string | undefined = '--vh'): void {}

AntiFlexBug.resizeHandler

AntiFlexBug 조정을 위해 화면 크기가 조정될 때마다 document property에 값을 저장

function resizeHandler (): void {}

Easing module

Easing 관련 각종 메소드 제공 (gizma.com/easing 참고)

EasingSimple module

간단한 Easing 관련 각종 메소드 제공 (Vuetify 내장 라이브러리 참고)

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(el: HTMLElement | Element | null, scrollOption: ScrollOption): Promise<ScrollResult | null> {}

ServiceWorkers module

서비스워커 등록 및 해제.

ServiceWorkers.register

ServiceWorker를 등록하고 registration을 리턴.

function register(
  swUrl: string | URL,
  swOptions?: RegistrationOptions,
): Promise<ServiceWorkerRegistration> {}

ServiceWorkers.unregister

등록된 ServiceWorker를 해제.

function unregister(registration?: ServiceWorkerRegistration | null): Promise<boolean> {}

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.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> {}

UI.getSafeArea

iOS 디바이스에서 SafeArea 영역을 구한다 (스타일에 정의된 safe-area-inset-* 값 참조)

function getSafeArea(): SafeArea {}

WebWorkers module

멀티스레드를 위한 웹워커 생성 및 삭제.

WebWorkers.initialize

WebWorker 사용을 위해 초기화 하고 워커 스레드를 리턴.

function initialize(workerUrl: string, max: number | undefined = DEFAULT_MAX_WORKERS): Worker[] {}

WebWorkers.destroy

WebWorker 사용을 해제.

function destroy(workers: Worker[] | undefined | null): void {}

Change Log

프로젝트 변경사항은 CHANGELOG.md 파일 참조.

License

프로젝트 라이센스는 LICENSE 파일 참조.