https://www.dozn.co.kr/js/common/utils.js

1import {
2  BG_IMG_320_568,
3  BG_IMG_360_640,
4  BG_IMG_375_812,
5  BG_IMG_375_667,
6  BG_IMG_411_823,
7  BG_IMG_414_736,
8  BG_IMG_768_1024,
9  BG_IMG_3840
10} from './constants.js';
11
12/**
13 * 메인 첫 화면 background image 를 가져오는 함수
14 * @returns {string}
15 */
16export const getBackgroundImgSrc = (windowWidth, windowHeight) => {
17  let imageSrc;
18
19  if (windowWidth < 768 && windowWidth < windowHeight) {
20    if (windowWidth <= 320) {
21      imageSrc = BG_IMG_320_568;
22    } else if(windowWidth <= 360) {
23      imageSrc = BG_IMG_360_640;
24    } else if(windowWidth <= 375) {
25      if (windowHeight > 811) {
26        imageSrc = BG_IMG_375_812;
27      } else {
28        imageSrc = BG_IMG_375_667;
29      }
30    } else if (windowWidth <= 414) {
31      if (windowHeight > 822) {
32        imageSrc = BG_IMG_411_823;
33      } else {
34        imageSrc = BG_IMG_414_736;
35      }
36    } else if (windowWidth <= 768) {
37      imageSrc = BG_IMG_768_1024;
38    }
39  } else {
40    imageSrc = BG_IMG_3840;
41  }
42
43  return imageSrc;
44};
45
46export const random = (min, max) => {
47  let targetMin;
48  let targetMax;
49
50  if (max === undefined) {
51    targetMax = min;
52    targetMin = 0;
53  } else {
54    targetMin = min;
55    targetMax = max;
56  }
57
58  if (targetMin > targetMax) {
59    const hold = targetMax;
60    targetMax = targetMin;
61    targetMin = hold;
62  }
63
64  return Math.floor(Math.random() * (targetMax - targetMin + 1)) + targetMin;
65};
66
67export const addClass = (targetEl, className) => {
68  if (targetEl) {
69    targetEl.classList.add(className);
70  }
71};
72
73export const addClassAll = (targetClass, className) => {
74  const targetList = document.querySelectorAll(targetClass);
75
76  targetList.forEach((targetEl) => {
77    addClass(targetEl, className);
78  });
79};
80
81export const removeClass = (targetEl, className) => {
82  if (targetEl) {
83    targetEl.classList.remove(className);
84  }
85};
86
87export const removeClassAll = (targetClass, className) => {
88  const targetList = document.querySelectorAll(targetClass);
89
90  targetList.forEach((targetEl) => {
91    removeClass(targetEl, className);
92  });
93};
94
95/**
96 * userAgent 를 돌려주는 함수
97 * @param {boolean} option - true 일 경우 lowerCase 로 돌려줌
98 * @returns {string}
99 */
100export const getUserAgent = (option) => {
101  const userAgent = navigator.userAgent;
102
103  return option ? userAgent.toLowerCase() : userAgent;
104};
105
106/**
107 * chrome browser 인지 아닌지 체크
108 * @returns {boolean}
109 */
110export const isChrome = () => {
111  const userAgent = getUserAgent(true);
112
113  return userAgent.indexOf('chrome') !== -1;
114};
115
116/**
117 * IE 브라우저인지 아닌지 체크
118 * @returns {boolean}
119 */
120export const isIeBrowser = () => {
121  const userAgent = getUserAgent(false);
122
123  return (navigator.appName === 'Netscape' &&
124    userAgent.indexOf('Trident') !== -1) ||
125    userAgent.indexOf('MSIE') !== -1;
126};
127
128/**
129 * IE 버전을 돌려주는 함수
130 * @returns {number}
131 */
132export const getVersionToIe = () => {
133  let IE = -1;
134  const userAgent = getUserAgent();
135  const regExp = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
136
137  if (isIeBrowser()) {
138    IE = parseFloat('11.0');
139  } else if (navigator.appName === 'Microsoft Internet Explorer') {
140    if (regExp.exec(userAgent) != null) {
141      IE = parseFloat(RegExp.$1);
142    }
143  }
144
145  return IE;
146};
147
148/**
149 * Android 인지 아닌지 체크
150 * @returns {boolean}
151 */
152export const isAndroid = () => {
153  const agent = getUserAgent(true);
154
155  return agent.match('android') != null;
156};
157
158/**
159 * iPhone 인지 아닌지 판단하는 함수
160 *
161 * @returns {boolean}
162 */
163export const isIphone = () => {
164  const agent = getUserAgent(true);
165
166  return agent.match('iphone') != null;
167};
168
169/**
170 * iPad 인지 아닌지 판단하는 함수
171 *
172 * @returns {boolean}
173 */
174export const isIpad = () => {
175  const agent = getUserAgent(true);
176
177  return agent.match('ipad') != null;
178};
179
180/**
181 * IOS 인지 아닌지 판단하는 함수
182 *
183 * @returns {boolean}
184 */
185export const isIos = () => {
186  return isIphone() || isIpad();
187};
188
189/**
190 * MacOS 인지 아닌지 판단하는 함수
191 *
192 * @returns {boolean}
193 */
194export const isMacOs = () => {
195  return /macintosh/.test(getUserAgent(true));
196};
197
198/**
199 * MacOS safari 브라우저인지 아닌지 판단하는 함수
200 *
201 * @returns {boolean}
202 */
203export const isMacSafari = () => {
204  return isMacOs() && !(/Chrome/.test(getUserAgent(false)));
205}
206
207export const isPadSafari = () => {
208  return isIos() && !(/crios/.test(getUserAgent(true)));
209}
210
211/**
212 * OS 정보를 돌려주는 함수
213 * - 현재는 Mac OS 판단 로직 빼고는 쓰이지 않아, 함수ë¡

213œë§Œ 남겨둠.
214 *
215 * @returns {{Unix: boolean, Linux: boolean, Windows: boolean, Mac: boolean}}
216 */
217export const getOsInfo = () => {
218  const userAgent = getUserAgent(true);
219
220  return {
221    Linux:/linux/.test(userAgent),
222    Unix:/x11/.test(userAgent),
223    Mac:/mac/.test(userAgent),
224    Windows:/win/.test(userAgent)
225  };
226};
227
228/**
229 * 스마트폰 브라우저인지 체크하는 함수
230 * @returns {boolean}
231 */
232export const isSmartPhone = () => {
233  return isAndroid() || isIos();
234};