https://www.bigdata-transportation.kr/js/frn/popup/mobilePopup.js?v=2.1.0_RELEASE

1async function MobilePopup(body, windowPopupList) {
2	const Option = {
3		width: window.innerWidth,
4		height: window.innerHeight,
5		sliderCount: windowPopupList.length
6	}
7	const swiperOption = {
8		navigation: {
9			nextEl: "#popupSliderNext",
10			prevEl: "#popupSliderPrev",
11		},
12		longSwipesRatio: 0.2,
13		autoHeight: true,
14		on: {
15			activeIndexChange: function() {
16				const target = document.querySelector("#curIndexDiv");
17				let direction = (this.prevIndex > this.realIndex)?"left":"right";
18				let distance = (Option.width / Option.sliderCount);
19
20				let szTransform = target.style.transform;
21				if(szTransform == ''){
22					target.style.transform = `translate(${distance}px, 0)`;
23				} else {
24					let curLoc = parseInt(szTransform.substring(szTransform.indexOf("(")+1, szTransform.indexOf("px")));
25					if(direction == "left"){
26						target.style.transform = `translate(${curLoc-distance}px, 0)`;
27					} else {
28						target.style.transform = `translate(${curLoc+distance}px, 0)`;
29					}
30				}
31				
32			},
33			touchStart : function() {
34				this.prevIndex = this.realIndex;
35			},
36			click :  function() {
37				this.prevIndex = this.realIndex;
38			}
39		}
40
41	}
42
43	// 모바일 위에 본문 바로가기 뜨는거
44	createBlackBg(body, Option);
45	createPopupDiv(body, Option);
46	await createImage(windowPopupList);
47	new Swiper(".swiper-container.popupSlider", swiperOption);
48	
49};
50
51
52
53// 배경 생성	
54const createBlackBg = (body, Option) => {
55	const bg = document.createElement("div");
56	bg.id = "popupBg";
57	bg.style.backgroundColor = "#222222";
58	bg.style.opacity = "0.5";
59	bg.style.width = Option.width + "px";
60	bg.style.height = "100%";
61	bg.style.position = "fixed";
62	bg.style.top = "0px";
63	bg.style.left = "0px";
64	bg.style.zIndex = "800";
65
66	body.appendChild(bg);
67}
68
69// 이미지 div
70const createPopupDiv = (body, Option) => {
71	const mobilePopupDiv = document.createElement("div");
72	mobilePopupDiv.id = "mobilePopupDiv";
73
74	mobilePopupDiv.style.position = "fixed";
75	mobilePopupDiv.style.width = "100%";
76	mobilePopupDiv.style.top = "50%";
77	mobilePopupDiv.style.left = "50%";
78	mobilePopupDiv.style.zIndex = "900";
79	mobilePopupDiv.style.transform = 'translate(-50%, -50%)';
80	mobilePopupDiv.appendChild(createSliderContainer(Option));
81	body.appendChild(mobilePopupDiv);
82};
83
84const createSliderContainer = (Option) => {
85	const container = document.createElement("div");
86	container.id = "popupSliderContainer"
87	container.className = "swiper-container popupSlider";
88	container.appendChild(createIndexDiv(Option));
89	container.appendChild(createSliderWrapper());
90	container.appendChild(createNotTodayDiv());
91
92
93	/*const next = document.createElement("div");
94	next.id = "popupSliderNext";
95	next.className = "swiper-button-next popupNext";
96	next.style.display = "none";
97	const prev = document.createElement("div");
98	prev.id = "popupSliderPrev";
99	prev.className = "swiper-button-prev popupPrev";
100	prev.style.display = "none";
101	
102	container.appendChild(next);
103	container.appendChild(prev);*/
104
105	return container;
106};
107
108const createSliderWrapper = () => {
109	const Wrapper = document.createElement("div");
110	Wrapper.id = "mobileSliderWrap";
111	Wrapper.className = "swiper-wrapper";
112	return Wrapper;
113};
114
115const createIndexDiv = (Option) => {
116	const indexDiv = document.createElement("div");
117	indexDiv.style.backgroundColor = "#eeeeee";
118	indexDiv.style.height = "5px";
119	indexDiv.style.marginBottom = "10px";
120	const curIndexDiv = document.createElement("div");
121	curIndexDiv.id = "curIndexDiv";
122	curIndexDiv.style.backgroundColor = "#149ceb";
123	curIndexDiv.style.height = "5px";
124	curIndexDiv.style.width = (Option.width / Option.sliderCount) + "px";
125
126	indexDiv.appendChild(curIndexDiv);
127	return indexDiv;
128}
129
130
131const createNotTodayDiv = () => {
132	const notTodayDiv = document.createElement("div");
133	notTodayDiv.id = "notTodayDiv";
134	notTodayDiv.style.backgroundColor = "#ffffff";
135	notTodayDiv.style.height = "30px";
136	notTodayDiv.style.padding = "3px";
137	notTodayDiv.style.display = "flex";
138	notTodayDiv.style.justifyContent = "space-between";
139
140	const checkBoxInput = document.createElement("input");
141	checkBoxInput.type = "checkbox";
142	checkBoxInput.id = "popupNotTodayCheck";
143	checkBoxInput.name = "popupNotTodayCheck";
144	checkBoxInput.className = "form_chk af_chk";
145
146	const checkBoxLabel = document.createElement("label");
147	checkBoxLabel.htmlFor = "popupNotTodayCheck";
148
149	const checkBoxSpan = document.createElement("span");
150	checkBoxSpan.className = "label-txt";
151
152	const checkBoxStrong = document.createElement("strong");
153	checkBoxStrong.innerText = "오늘 하루 그만보기";
154	checkBoxSpan.appendChild(checkBoxStrong);
155	checkBoxLabel.append(checkBoxSpan);
156
157	const closeBtnSpan = document.createElement("span");
158	closeBtnSpan.className = "label-btn";
159
160	const closeBtn = document.createElement("button");
161	closeBtn.value = "close";
162	closeBtn.id = "popupCloseBtn";
163	closeBtn.innerText = "닫기";
164	closeBtn.style.fontSize = "16px";
165	closeBtn.style.paddingRight = "3px";
166	closeBtn.style.marginTop = "2px";
167	closeBtn.onclick = fnCloseBtn;
168	closeBtnSpan.append(closeBtn);
169
170	notTodayDiv.appendChild(checkBoxInput);
171	notTodayDiv.appendChild(checkBoxLabel);
172	notTodayDiv.appendChild(closeBtnSpan);
173	return notTodayDiv;
174};
175
176// 이미지 요청 후 슬라이더 생성
177const createImage = async (windowPopupList) => {
178	let reqList = windowPopupList.reduce((acc, cur) => {
179		acc.push(reqImage(cur.atchFileId));
180		return acc;
181	}, []);
182
183	await Promise.all(reqList).then((objectUrlList) => {
184		if (objectUrlList && objectUrlList.length > 0) {
185			objectUrlList.forEach((objectUrl, i) =>

185 document.querySelector("#mobileSliderWrap").appendChild(popupImg(objectUrl, windowPopupList[i].linkAddrs)));
186		};
187	});
188};
189
190const reqImage = (atchFileId) => {
191	return fetch(`/frn/main/api/popupImg?atchFileId=${atchFileId}`, {
192		method: "GET",
193		headers: {
194			"Content-Type": "application/json; charset=utf-8",
195			"Accept": "application/octet-stream"
196		},
197		responseType: "blob"
198	})
199		.then(response => {
200			if (!response.ok) {
201				throw new Error('Network response was not ok');
202			}
203			return response.blob();
204		})
205		.then(blob => {
206			const objectUrl = URL.createObjectURL(blob);
207			return objectUrl;
208		});
209};
210
211const popupImg = (objectUrl, linkAddr) => {
212	const linkA = document.querySelector("a");
213	linkA.href = linkAddr;
214	linkA.className = "swiper-slide";
215	linkA.target = "_blank";
216	linkA.innerText = "";
217	const img = document.createElement("img");
218	img.src = objectUrl;
219
220	linkA.appendChild(img);
221	return linkA;
222};
223
224const fnCloseBtn = () => {
225	let cookieName = "MAIN_MOBILE_POPUP";
226	if (document.getElementById("popupNotTodayCheck").checked) {
227		$main.util.setCookie(cookieName, "N", 1);
228	};
229
230	document.querySelector("#popupBg").remove();
231	const mobilePopupDiv = document.querySelector("#mobilePopupDiv");
232	while (mobilePopupDiv.firstChild) {
233		mobilePopupDiv.firstChild.remove();
234	};
235
236};
237