npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@mornya/ui-libs

v2.1.0

Published

The project of Global UI module.

Downloads

59

Readme

UI Libs

npm node types downloads license

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

Workers module

UI 관련 처리 모듈.

Workers.initialize

ServiceWorker 사용을 위해 초기화 한다.

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

Workers.destroy

ServiceWorker 사용을 해제 한다.

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

Change Log

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

License

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