https://lhkef.or.kr/js/components/atoms/skeleton-shimmer/index.js

1/** I. 기본 정보
2 * ==========================================
3 * <Skeleton Shimmer - Main Entry Point>
4 *
5 * Author: Innobaebae Co.
6 * Created: 2025-01-27
7 * Version: 1.0.0
8 * Dependency: skeleton-shimmer.css.js, skeleton-shimmer.config.js
9 * Cross browser: Chrome 55+, Firefox 52+, Safari 13+, Edge 79+
10 *
11 * ==========================================
12 *
13 * 1. 목적:
14 *    이미지/컴포넌트 로딩 중 Shimmer 효과를 제공하는 범용 Atom 컴포넌트
15 *
16 * 2. 특징:
17 *    - 순수 함수 기반 (React 전환 용이)
18 *    - 데이터 속성 기반 자동 초기화
19 *    - 수동 생성/제거 API 제공
20 *    - 커스터마이징 가능
21 *
22 * 3. 사용법:
23 *    // HTML에 데이터 속성 추가
24 *    <div style="position: relative;">
25 *      <img src="image.jpg">
26 *      <div data-skeleton-shimmer></div>
27 *    </div>
28 *
29 *    // JavaScript 자동 초기화
30 *    import { SkeletonShimmer } from './index.js';
31 *    SkeletonShimmer.init();
32 *
33 *    // 또는 수동 생성
34 *    const shimmer = SkeletonShimmer.create(parentElement);
35 *    SkeletonShimmer.remove(shimmer);
36 */
37
38// @ts-check
39
40import { SKELETON_SHIMMER_CONFIG }                        from './constants/skeleton-shimmer.config.js';
41import { injectShimmerStyles, applyShimmerStyles, hideShimmer, showShimmer } from './skeleton-shimmer.css.js';
42
43/**
44 * Skeleton Shimmer 컴포넌트
45 */
46export const SkeletonShimmer = {
47	/**
48	 * 전역 초기화 - 모든 [data-skeleton-shimmer] 요소에 자동 적용
49	 * @param {Object} options - 전역 옵션
50	 */
51	init(options = {}) {
52		injectShimmerStyles();
53
54		const shimmerElements = document.querySelectorAll(`[${SKELETON_SHIMMER_CONFIG.ATTRIBUTES.SHIMMER}]`);
55		shimmerElements.forEach(element => {
56			this.apply(element, options);
57		});
58	},
59
60	/**
61	 * 특정 요소에 shimmer 스타일 적용
62	 * @param {HTMLElement} element - 대상 요소
63	 * @param {Object} options - 커스터마이징 옵션
64	 */
65	apply(element, options = {}) {

66		element.classList.add(SKELETON_SHIMMER_CONFIG.CLASSES.SHIMMER);
67
68		// 데이터 속성에서 옵션 읽기
69		const dataBaseColor      = element.getAttribute(SKELETON_SHIMMER_CONFIG.ATTRIBUTES.BASE_COLOR);
70		const dataHighlightColor = element.getAttribute(SKELETON_SHIMMER_CONFIG.ATTRIBUTES.HIGHLIGHT_COLOR);
71		const dataSpeed          = element.getAttribute(SKELETON_SHIMMER_CONFIG.ATTRIBUTES.SPEED);
72		const dataDirection      = element.getAttribute(SKELETON_SHIMMER_CONFIG.ATTRIBUTES.DIRECTION);
73
74		const finalOptions = {
75			baseColor:      dataBaseColor || options.baseColor,
76			highlightColor: dataHighlightColor || options.highlightColor,
77			duration:       dataSpeed ? parseFloat(dataSpeed) : options.duration,
78			direction:      dataDirection || options.direction,
79		};
80
81		if (finalOptions.baseColor || finalOptions.highlightColor || finalOptions.duration) {
82			applyShimmerStyles(element, finalOptions);
83		}
84	},
85
86	/**
87	 * 새로운 shimmer 요소 생성
88	 * @param {HTMLElement} parentElement - 부모 요소 (position: relative 필요)
89	 * @param {Object} options - 커스터마이징 옵션
90	 * @returns {HTMLElement} 생성된 shimmer 요소
91	 */
92	create(parentElement, options = {}) {
93		injectShimmerStyles();
94
95		const shimmer = document.createElement('div');
96		shimmer.setAttribute(SKELETON_SHIMMER_CONFIG.ATTRIBUTES.SHIMMER, '');

97		shimmer.classList.add(SKELETON_SHIMMER_CONFIG.CLASSES.SHIMMER);
98
99		this.apply(shimmer, options);
100
101		parentElement.appendChild(shimmer);
102		return shimmer;
103	},
104
105	/**
106	 * Shimmer 요소 제거
107	 * @param {HTMLElement} shimmerElement - shimmer 요소
108	 * @param {boolean} animate - 페이드아웃 애니메이션 여부
109	 */
110	remove(shimmerElement, animate = true) {
111		if (!shimmerElement) return;
112
113		if (animate) {
114			hideShimmer(shimmerElement);
115			setTimeout(() => {
116				shimmerElement.remove();
117			}, 300);
118		} else {
119			shimmerElement.remove();
120		}
121	},
122
123	/**
124	 * Shimmer 숨기기 (DOM 유지)
125	 * @param {HTMLElement} shimmerElement - shimmer 요소
126	 */
127	hide(shimmerElement) {
128		hideShimmer(shimmerElement);
129	},
130
131	/**
132	 * Shimmer 표시
133	 * @param {HTMLElement} shimmerElement - shimmer 요소
134	 */
135	show(shimmerElement) {
136		showShimmer(shimmerElement);
137	},
138
139	/**
140	 * 모든 shimmer 제거
141	 */
142	removeAll() {
143		const shimmerElements = document.querySelectorAll(`[${SKELETON_SHIMMER_CONFIG.ATTRIBUTES.SHIMMER}]`);
144		shimmerElements.forEach(element => {
145			this.remove(element, false);
146		});
147	},
148};
149
150// Barrel export
151export { SKELETON_SHIMMER_CONFIG } from './constants/skeleton-shimmer.config.js';
152export { injectShimmerStyles, applyShimmerStyles, hideShimmer, showShimmer } from './skeleton-shimmer.css.js';