https://innobranch.com/resources/front/js/page/main.js

1const exposurePercentage = 100; // 스크롤 했을 때 $counters 컨텐츠가 화면에 100% 노출되면 숫자가 올라갑니다.
2const duration = 1500; // 1000 = 1초
3const addCommas = false; // 숫자에 쉼표를 추가할지 결정
4
5$(document).ready(function() {
6  const $counters = $(".counter");
7  // 스크롤 이벤트를 모니터링
8  $(window).on('scroll', function() {
9      $counters.each(function() {
10          const $el = $(this);
11          if (!$el.data('scrolled')) {
12              const rect = $el[0].getBoundingClientRect();
13              const winHeight = window.innerHeight;
14              const contentHeight = rect.bottom - rect.top;
15              
16              if (rect.top <= winHeight - (contentHeight * exposurePercentage / 100) && rect.bottom >= (contentHeight * exposurePercentage / 100)) {
17                  const start = parseInt($el.data("start"));
18                  const end = parseInt($el.data("end"));
19                  updateCounter($el, start, end);
20                  $el.data('scrolled', true);
21              }
22          }
23      });
24  }).scroll();
25
26	//모바일 헤더
27	updateSpanClass();
28
29	// MutationObserver 설정
30	const observer = new MutationObserver(updateSpanClass);
31	observer.observe(document.getElementById('inno-header'), { attributes: true, attributeFilter: ['class'] });
32
33	// 헤더 클릭 이벤트 추가
34	$('#inno-header').click(function() {
35			$('.inno-mb-bar > span').removeClass("black");
36	});
37		
38	// channel swiper
39	var channelSwiper = new Swiper(".channel-swiper", {
40	  navigation: {
41	    nextEl: ".ch-button-next",
42	    prevEl: ".ch-button-prev",
43	  },
44	  allowTouchMove: true,
45	  slidesPerView: 5,
46	  spaceBetween: 24,
47	  loop: true,
48	  loopAdditionalSlides: 1,
49	  slidesPerGroup: 1,
50	  breakpoints: {
51	    360: { slidesPerView: 2 },
52	    500: { slidesPerView: 2 },
53	    767: { slidesPerView: 3 },
54	    1024: { slidesPerView: 4 },
55	    1365: { slidesPerView: 5 } 
56	  },
57	});
58	

59	// Swiper 초기화 후 강제로 resize 이벤트 트리거
60	//window.dispatchEvent(new Event('resize'));
61  
62	// 윈도우 너비에 따른 스와이퍼 재설정
63	$(window).on('resize', function () {
64			ww = $(window).width();
65			initSwiper();
66	});
67
68  
69  //heart-btn
70  $(".heart-btn i").click(function(){
71    var currentClass = $(this).attr("class");
72    if (currentClass.includes("line")) {
73      var newClass = currentClass.replace("line", "fill");
74    } else if (currentClass.includes("fill")) {
75      var newClass = currentClass.replace("fill", "line");
76    }
77    $(this).attr("class", newClass);
78  });
79  
80  $(".only-btn").click(function() {
81    var $icon = $(this).find("i");  // 버튼 안의 i 태그를 찾음
82    var currentClass = $icon.attr("class");
83    
84    if (currentClass.includes("line")) {
85      $icon.attr("class", currentClass.replace("line", "fill"));
86    } else if (currentClass.includes("fill")) {
87      $icon.attr("class", currentClass.replace("fill", "line"));
88    }
89  });
90  
91  //
92  fadeEvent();
93  //
94  setFavoriteBtn();
95  //
96  showPopup();
97  
98  initSwiper();
99
100
101  $(".heart-btn").on('click', function(event) {
102    const isActivated = $(event.target).hasClass('ri-heart-2-fill');
103
104    if (isActivated) {
105      addFavoriteChallenge(event.currentTarget.getAttribute("id"));
106    } else {
107      removeFavoriteChallenge(event.currentTarget.getAttribute("id"));
108    }
109  })
110
111  $(".interest-button i").on('click', function(event) {
112    event.preventDefault();
113    var item = $(event.target);
114    if ($(item).hasClass("ri-heart-2-line")) {
115      $(item).addClass("ri-heart-2-fill");
116      $(item).removeClass("ri-heart-2-line");
117    } else if ($(item).hasClass("ri-heart-2-fill")) {
118      $(item).addClass("ri-heart-2-line");
119      $(item).removeClass("ri-heart-2-fill");
120    }
121  })
122
123});
124
125function addFavoriteChallenge(challengeIdx) {
126  $.ajax({
127    url: `/api/front/favorite/add-challenge/${challengeIdx}`,
128    type: 'GET',
129    success: function (response) {
130      console.log(response);
131    },
132    error: function (xhr, status, error) {
133      console.log(error);
134    },
135  })
136}
137
138function removeFavoriteChallenge(challengeIdx) {
139  $.ajax({
140    url: `/api/front/favorite/remove-challenge/${challengeIdx}`,
141    type: 'GET',
142    success: function (response) {
143      console.log(response);
144    },
145    error: function (xhr, status, error) {
146      console.log(error);
147    },
148  })
149}
150
151function updateSpanClass() {
152	if (!$('#inno-header').hasClass('black')) {
153			$('.inno-mb-bar > span').addClass("black");
154	} else {
155			$('.inno-mb-bar > span').removeClass("black");
156	}
157}
158
159var ww = $(window).width();
160var mySwiper = undefined;
161var partnerSwiper = undefined;
162function initSwiper() {
163	  // Partnerships swiper
164	if(partnerSwiper) {
165		partnerSwiper.forEach((element) => element.destroy());
166		partnerSwiper = null;
167	}
168	partnerSwiper = new Swiper(".partner-swiper", {
169		loop : true,
170		loopAdditionalSlides: 1,
171		allowTouchMove: false,
172		speed : 8500,
173		autoplay: {
174					  delay: 0,
175					  disableOnInteraction: false,
176					},
177		freeMode: true,
178		observer: true,
179		observeParents: true,
180		slidesPerView : 'auto',
181		spaceBetween : 55,
182	});
183  // 767 이하일 때 슬라이드 1개 표시
184  if (ww <= 767) {
185      if (mySwiper != undefined) {
186          mySwiper.destroy();
187          mySwiper = undefined;
188      }
189      mySwiper = new Swiper(".st-card-swiper", {
190          slidesPerView: 1,
191          spaceBetween: 24, 
192					pagination: {
193     				 el: ".swiper-pagination",
194						clickable: true,
195    			},
196      });
197  } 
198  // 768 이상 1366 미만일 때 슬라이드 2개 표시
199  else if (ww < 1366) {
200      if (mySwiper != undefined) {
201          mySwiper.destroy();
202          mySwiper = undefined;
203      }
204      mySwiper = new Swiper(".st-card-swiper", {
205          slidesPerView: 2,
206          spaceBetween: 24, 
207					pagination: {
208     				 el: ".swiper-pagination",
209						clickable: true,
210    			},
211      });
212  } 
213  // 1366 이상일 때 스와이퍼 비활성화
214  else if (ww >= 1366 && mySwiper != undefined) {
215      mySwiper.destroy();
216      mySwiper = undefined;
217  }
218}
219
220
221
222function setFavoriteBtn(){
223  $('button[name=favorite-switch-btn]').on('click',function() {
224    const targetIdx = $(this).data('targetidx');
225    const isActivated = $(this).children('i').first().hasClass('ri-heart-2-fill');
226
227    // 이 함수보다 하트가 채워지는 로직이 먼저 실행됩니다.
228    if(isActivated){
229      addFavorite(targetIdx);
230    } else {
231      removeFavorite(targetIdx);
232    }
233  });
234}
235
236function addFavorite(targetIdx){
237  $.ajax({

238    url: `/api/front/favorite/add/${targetIdx}`,
239    type: 'GET',
240    success: function (response) {
241      console.log(response);
242    },
243    error: function (xhr, status, error) {
244      console.log(error);
245    },
246  })
247};
248
249function removeFavorite(targetIdx){
250  $.ajax({
251    url: `/api/front/favorite/remove/${targetIdx}`,
252    type: 'GET',
253    success: function (response) {
254      console.log(response);
255    },
256    error: function (xhr, status, error) {
257      console.log(error);
258    },
259  })
260};
261
262function updateCounter($el, start, end) {
263  let startTime;
264  function animateCounter(timestamp) {
265      if (!startTime) startTime = timestamp;
266      const progress = (timestamp - startTime) / duration;
267      const current = Math.round(start + progress * (end - start));
268      const formattedNumber = addCommas ? current.toLocaleString() : current;
269      $el.text(formattedNumber);
270      
271      if (progress < 1) {
272          requestAnimationFrame(animateCounter);
273      } else {
274          $el.text(addCommas ? end.toLocaleString() : end);
275      }
276  }
277  requestAnimationFrame(animateCounter);
278}
279
280function fadeEvent(){
281  const itemArr = $(".fade-item");
282  let count = 0;
283  setInterval(() => {
284	  $(itemArr[count]).css('z-index', 0);
285    $(itemArr[count]).animate({
286      opacity: 0
287    });
288
289    count += 1
290
291    if(count > itemArr.length - 1){
292      count = 0;
293    }
294    
295		$(itemArr[count]).css('z-index', 100)
296    $(itemArr[count]).animate({
297      opacity: 1
298    }, 2000, 'swing');
299
300  }, 4000);
301};
302
303//메인 팝업 (원본코드)
304/*function showPopup() {
305  $.rest("user-common/api/popup", (list) => {
306    popupList = list;
307    
308    for (let i in list) {
309      if (!isPopupPrevented(list[i].popupIdx)) {
310        openPopup(list[i]);
311      }
312    }
313  });
314};*/
315
316// 언어 전환 버튼 클릭 시 저장
317$(document).on('click', '.change-btn-k', function () {
318  localStorage.setItem('lang', 'ko');
319  location.reload();
320});
321
322$(document).on('click', '.change-btn-e', function () {
323  localStorage.setItem('lang', 'en');
324  location.reload();
325});
326
327$(document).ready(function () {
328  showPopup();
329});
330
331//메인 팝업 다국어 선택 시 각각 팝업 띄우기
332function showPopup() {
333  let pageLang = document.documentElement.lang || 'en';
334  let lang = localStorage.getItem('lang');
335
336  if (lang !== pageLang) {
337    lang = pageLang;
338    localStorage.setItem('lang', lang);
339  }
340
341  const popupIdxMap = { ko: 30, en: 31 };
342
343  $.rest("user-common/api/popup", function(res) {
344    const list = Array.isArray(res) ? res : [res];
345    const popupIdx = popupIdxMap[lang];
346    const filtered = list.filter(p => Number(p.popupIdx) === Number(popupIdx));
347
348    console.log('>>> lang:', lang, 'popupIdx:', popupIdx);
349    console.log('>>> html.lang:', document.documentElement.lang);
350
351    filtered.forEach(p => {
352      if (!isPopupPrevented(p.popupIdx)) openPopup(p);
353    });
354  });
355}
356
357function openPopup(data) {
358  let layer = $("#popup_template").tmpl(data);
359  $(".inno-layout").append(layer);
360  layerPopup.open('#mainPop');
361  
362  $("#btn_popup_stop").one("click", () => {
363    let idx = $("#mainPop").data("popup-idx");
364    savePopupPreventIdx(idx);
365  });
366};
367
368function savePopupPreventIdx(idx) {
369  let popupPrevent = {};
370  let popupPreventStr = localStorage.getItem("popup_prevent");
371  if (popupPreventStr) {
372    popupPrevent = JSON.parse(popupPreventStr);
373  }
374
375  popupPrevent[idx] = new Date().getTime() + (24 * 60 * 60 * 1000);
376
377  localStorage.setItem("popup_prevent", JSON.stringify(popupPrevent));
378  layerPopup.actionClose("#mainPop");
379};
380
381function isPopupPrevented(idx) {
382  let popupPrevent;
383  let popupPreventStr = localStorage.getItem("popup_prevent");
384  if (popupPreventStr) {
385    popupPrevent = JSON.parse(popupPreventStr);
386  }
387
388  if (popupPrevent) {
389    let time = popupPrevent[idx];
390    
391    if (time && (time > new Date().getTime())) {
392      return true;
393    }
394  }
395
396  return false;
397};
398
399function formatPopupImage(image, imageLink) {
400  let result = "";
401  
402  if (image) {
403    let imageTag = "<img src='" + $.imageUrl(image.fileIdx) + "' />";
404    
405    if (imageLink) {
406      result = "<a href='" + imageLink + "' target='_blank'>" + imageTag + "</a>";
407    } else {
408      result = imageTag;
409    }
410  }
411  
412  return result;
413}