https://innobranch.com/resources/front/js/layout.js

1function isMainPage() {
2  return $('#pageName').val() && $('#pageName').val() === 'main';
3}
4
5document.addEventListener('DOMContentLoaded', function(){
6  this.body.classList.add("visible")
7})
8
9$(document).ready(function () {
10  if (!isMainPage()) {
11    $("#inno-header").addClass("black");
12    $("#inno-header").addClass("fixed");
13  }
14
15  //header 스크롤 스크립트
16  let lastScrolltop = 0;
17
18  $(window).scroll(function () {
19    if (isMainPage()) {
20      hasScroll();
21    }
22  });
23
24  function hasScroll() {
25    let wScroll = $(this).scrollTop();
26    //$("#inno-header").css("top", wScroll);
27
28    if (wScroll > lastScrolltop) {
29      $("#inno-header").addClass("black");
30      $("#inno-header").addClass("fixed");
31    }
32
33    lastScrolltop = wScroll;
34
35    if (wScroll == 0) {
36      $("#inno-header").removeClass("black");
37      $("#inno-header").removeClass("fixed");
38    }
39  }
40
41  //mobile menu
42  $(".inno-mb-bar").click(function () {
43    if ($(".inno-mobile-menu").hasClass("on")) {
44        $(".inno-mobile-menu").removeClass("on");
45        $(this).removeClass("none");
46        $("body").css("overflow", "auto");
47    } else {
48        $(".inno-mobile-menu").addClass("on");
49        $(this).addClass("none");
50        $("body").css("overflow", "hidden");
51    }
52	});
53  
54
55  //메인 상단 영역 박스 나타나기
56  $('.animate-li').each(function (index) {
57    $(this).delay(index * 500).queue(function (next) {
58      $(this).addClass('visible');
59      next();
60    });
61  });
62
63    //tool-tip(tippy.js)
64    setTooltip();
65
66  // Startups 디테일 팝업
67  $(".card-normal .company-name").click(function () {
68    const obj = this;
69    $(".card-normal .company-name").each((index, item)=>{
70      if(item!=obj){
71        const temp = $(item).parent().parent().parent().find(".card-detail"); 
72        temp.stop().fadeOut(180, 'easeInOutCubic'); 
73      }
74    });
75
76    var el = $(this).parent().parent().parent().find(".card-detail");
77    if (el.css("display") == "none") {
78      el.stop().fadeIn(180, 'easeInOutCubic');
79    } else {
80      el.stop().fadeOut(180, 'easeInOutCubic');
81    }
82  });
83
84  $(".card-detail .detail-close").click(function () {
85    var el = $(this).parent().parent().parent();
86    el.find(".card-detail").stop().fadeOut(180, 'easeInOutCubic');
87  });
88
89  $(".card-detail").css("display", "none");
90
91  //global-btn 슬라이드 구현
92  $(".global-btn").click(function () {
93    $(".global-btn").toggleClass("active");
94    if ($(".global-btn").hasClass("active")) {
95      $(".arrow-btn").addClass("turn");
96    } else {
97      $(".arrow-btn").removeClass("turn");
98    }
99  });
100
101  $(".global-btn").click(function () {
102    $(".global-lang").slideToggle(200, 'easeInOutCubic');
103  });
104
105  $(".global-lang li").click(function () {
106    $(".global-lang li").toggleClass("active")
107  });
108
109  //language 버튼 클릭시 텍스트 바뀌는 스크립트
110  $(".change-btn-e").click(function () {
111    $(".change-text p").text("ENG");
112  });
113
114  $(".change-btn-k").click(function () {
115    $(".change-text p").text("한국어");
116  });
117
118  updateLetterSpacing();
119
120  // 언어 변경 버튼 클릭 시 텍스트와 letter-spacing 업데이트
121  $('.global-btn').on('click', '.change-btn-k, .change-btn-e', function() {
122    var newText = $(this).text();
123    $('.change-text p').text(newText);
124    updateLetterSpacing();
125  });
126
127  function updateLetterSpacing() {
128    var currentText = $('.change-text p').text().trim();
129    if (currentText === '한국어') {
130      $('.change-text').css('letter-spacing', '-0.25px');
131    } else if (currentText === 'ENG') {
132      $('.change-text').css('letter-spacing', '1px');
133    }
134  }
135  
136  setFileInput();
137  observer.observe(document.querySelector('.dev-contents'), {childList:true,attributes:false,subtree:true});
138});
139//document ready
140
141const observer = new MutationObserver(() => {
142	setFileInput();
143});
144
145//gnb
146$(".gnb ul li").mouseenter(function () {
147  $(this).find(".gnb-sub").stop().slideDown(200, 'easeInOutCubic');
148});
149
150$(".gnb ul li").mouseleave(function () {
151  $(this).find(".gnb-sub").stop().slideUp(200, 'easeInOutCubic');
152});
153
154
155// 모바일메뉴 클릭 액티브
156$(".mb-2way-menu ul li a").click(function(){
157  $(this).addClass("active")
158  $(this).closest("ul").find("a").not(this).removeClass("active");
159});
160
161$(".mb-lang-menu ul li a").click(function(){
162  $(this).addClass("active")
163  $(this).closest("ul").find("a").not(this).removeClass("active");
164});
165
166 
167//데이터 픽커 
168var datePickerOption = {

169  showOtherMonths: false, //빈 공간에 현재월의 앞뒤월의 날짜를 표시
170  showMonthAfterYear: true, // 월- 년 순서가아닌 년도 - 월 순서
171  changeYear: false, //option값 년 선택 가능
172  changeMonth: false, //option값 월 선택 가능
173  showOn: "both", //button:버튼을 표시하고,버튼을 눌러야만 달력 표시 ^ both:버튼을 표시하고,버튼을 누르거나 input을 클릭하면 달력 표시
174  buttonImage: "/resources/front/images/calendar-white.svg", //버튼 이미지 경로
175  buttonImageOnly: true, //버튼 이미지만 깔끔하게 보이게함 - false하면 겉에 보더 생김
176  buttonText: "", //버튼 호버 텍스트
177  onSelect: function(dateText, inst) {
178					$(inst.trigger).attr('src', '/resources/front/images/calendar-hover.svg');
179          //console.log('selectedDate : ', dateText)
180          $(this).trigger('change');
181      	},
182  yearSuffix: "년", //달력의 년도 부분 뒤 텍스트
183  monthNamesShort: ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"], //달력의 월 부분 텍스트
184  monthNames: ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"], //달력의 월 부분 Tooltip
185  dayNamesMin: ["일", "월", "화", "수", "목", "금", "토"], //달력의 요일 텍스트
186  dayNames: ["일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일"], //달력의 요일 Tooltip
187  minDate: "-5Y", //최소 선택일자(-1D:하루전, -1M:한달전, -1Y:일년전)
188  maxDate: "+5y", //최대 선택일자(+1D:하루후, -1M:한달후, -1Y:일년후)
189}
190
191$(".datePicker").datepicker(datePickerOption);
192$(".datePicker").datepicker("setDate", "today");
193$(".datePicker1, .datePicker2").datepicker(datePickerOption);
194
195//innob-editer
196$(".innoEditor").each((index, item) => {
197  $(item).innoEditor();
198});
199
200$(".interest-button i").on("click", (event) => {
201  event.preventDefault();
202  var item = $(event.target);
203  if ($(item).hasClass("ri-heart-2-line")) {
204    $(item).addClass("ri-heart-2-fill");
205    $(item).removeClass("ri-heart-2-line");
206  } else if ($(item).hasClass("ri-heart-2-fill")) {
207    $(item).addClass("ri-heart-2-line");
208    $(item).removeClass("ri-heart-2-fill");
209  }
210})
211
212  //popup
213const preventScroll = () => {
214  const currentScrollY = window.scrollY;
215  document.body.style.position = 'fixed';
216  document.body.style.width = '100%';
217  document.body.style.top = `-${currentScrollY}px`; // 현재 스크롤 위치
218  document.body.style.overflowY = 'scroll';
219  return currentScrollY;
220};
221const allowScroll = (prevScrollY) => {
222  document.body.style.position = '';
223  document.body.style.width = '';
224  document.body.style.top = '';
225  document.body.style.overflowY = '';
226  window.scrollTo(0, prevScrollY);
227};
228
229const startLoading = function(){
230	$("#loader").show();
231	$("body").css("overflow", "hidden");
232}
233
234const stopLoading = function(){
235	$("#loader").hide();
236	$("body").css("overflow", "");
237}
238
239var alertPopup = function (msg, callback) {
240  var item = $("#alert_popup_template").tmpl({msg: msg});
241  $("body").css("overflow", "hidden");
242  //var prevScrollY = preventScroll();
243
244  $(item).find(".popup-close-btn").on("click", () => {
245    $(item).remove();
246    //allowScroll(prevScrollY);
247    $("body").css("overflow", "");
248  });
249  $(item).find("#confirmBtn").on("click", () => {
250    $(item).remove();
251    //allowScroll(prevScrollY);
252    $("body").css("overflow", "");
253    if (callback && typeof callback == "function") callback();
254  });
255
256  $("body").append(item);
257};
258
259var confirmPopup = function (msg, callback) {
260  var item = $("#confirm_popup_template").tmpl({msg: msg});
261  $("body").css("overflow", "hidden");
262  //var prevScrollY = preventScroll();
263
264  $(item).find(".popup-close-btn").on("click", () => {
265    $(item).remove();
266    $("body").css("overflow", "");
267    //allowScroll(prevScrollY);
268  });
269  $(item).find("#noBtn").on("click", () => {
270    $(item).remove();
271    $("body").css("overflow", "");
272    //allowScroll(prevScrollY);
273  });
274  $(item).find("#yesBtn").on("click", () => {
275    $(item).remove();
276    $("body").css("overflow", "");
277    //allowScroll(prevScrollY);
278    if (callback && typeof callback == "function") callback();
279  });
280
281  $("body").append(item);
282};
283
284function showNoPhotoIcon(e) {
285  const image = e.target;
286  image.removeEventListener('error', showNoPhotoIcon);
287  image.src = '/resources/front/images/noData/noImgEllipse.png'
288};
289
290function showNoPhotoIcon2(e) {
291  const image = e.target;
292  image.removeEventListener('error', showNoPhotoIcon2);
293  image.src = '/resources/front/images/noData/noImgRectangle2.png'
294};
295
296function setTooltip(){
297  tippy('.cert-1', {
298    content: getGlobalMessageByString('Award for Export Performance', "수출의 탑"),
299    arrow: true,
300    placement: 'bottom',
301    trigger: 'mouseenter',  // 호버와 포커스 시 툴팁이 나타나도록 설정
302    hideOnClick: false,
303    interactive: true,  // 링크와 상호작용을 가능하게 설정
304    zIndex: 9999,  // 툴팁이 다른 요소 위에 나타나도록 설정
305  });
306  tippy('.cert-2', {

307    content: getGlobalMessageByString('KITA', "무역협회"),
308    arrow: true,
309    placement: 'bottom',
310    trigger: 'mouseenter',  // 호버와 포커스 시 툴팁이 나타나도록 설정
311    hideOnClick: false,
312    interactive: true,  // 링크와 상호작용을 가능하게 설정
313    zIndex: 9999,  // 툴팁이 다른 요소 위에 나타나도록 설정
314  });
315  tippy('.cert-3', {
316    content: getGlobalMessageByString('Venture Enterprise', "벤처기업"),
317    arrow: true,
318    placement: 'bottom',
319    trigger: 'mouseenter',  // 호버와 포커스 시 툴팁이 나타나도록 설정
320    hideOnClick: false,
321    interactive: true,  // 링크와 상호작용을 가능하게 설정
322    zIndex: 9999,  // 툴팁이 다른 요소 위에 나타나도록 설정
323  });
324  tippy('.cert-4', {
325    content: getGlobalMessageByString('Employees(National Pension Service)', "임직원수(국민연금관리공단)"),
326    arrow: true,
327    placement: 'bottom',
328    trigger: 'mouseenter',  // 호버와 포커스 시 툴팁이 나타나도록 설정
329    hideOnClick: false,
330    interactive: true,  // 링크와 상호작용을 가능하게 설정
331    zIndex: 9999,  // 툴팁이 다른 요소 위에 나타나도록 설정
332  });
333  tippy('.cert-5', {
334    content: getGlobalMessageByString('Operating Status - Active(National Tax Service)', "정상 영업중(국세청)"),
335    arrow: true,
336    placement: 'bottom',
337    trigger: 'mouseenter',  // 호버와 포커스 시 툴팁이 나타나도록 설정
338    hideOnClick: false,
339    interactive: true,  // 링크와 상호작용을 가능하게 설정
340    zIndex: 9999,  // 툴팁이 다른 요소 위에 나타나도록 설정
341  });
342  tippy('.cert-6', {
343    content: getGlobalMessageByString('Representative Account', "대표계정"),
344    arrow: true,
345    placement: 'bottom',
346    trigger: 'mouseenter',  // 호버와 포커스 시 툴팁이 나타나도록 설정
347    hideOnClick: false,
348    interactive: true,  // 링크와 상호작용을 가능하게 설정
349    zIndex: 9999,  // 툴팁이 다른 요소 위에 나타나도록 설정
350  });
351  tippy('.cert-7', {
352    content(reference){
353			const forestUrl = $(reference).data("url");
354			let title = getGlobalMessageByString('Innoforest', "혁신의숲");
355			return `<a href="${forestUrl}" target="_blank" style="text-decoration: none; color: inherit;"><span>${title}<i class="ri-arrow-right-up-line" style="font-size:20px;vertical-align:-2.5px;"></i></span></a>`
356		},
357    allowHTML: true,
358    arrow: true,
359    placement: 'bottom',
360    trigger: 'mouseenter',  // 호버와 포커스 시 툴팁이 나타나도록 설정
361    hideOnClick: false,
362    interactive: true,  // 링크와 상호작용을 가능하게 설정
363    zIndex: 9999,  // 툴팁이 다른 요소 위에 나타나도록 설정
364  });
365  tippy('.cert-8', {
366    content(reference){
367			const crunchUrl = $(reference).data("url");
368			let title = getGlobalMessageByString('Crunchbase', "크런치베이스");
369			return `<a href="${crunchUrl}" target="_blank" style="text-decoration: none; color: inherit;"><span>${title}<i class="ri-arrow-right-up-line" style="font-size:20px;vertical-align:-2.5px;"></i></span></a>`
370		},
371    allowHTML: true,
372    arrow: true,
373    placement: 'bottom',
374    trigger: 'mouseenter',  // 호버와 포커스 시 툴팁이 나타나도록 설정
375    hideOnClick: false,
376    interactive: true,  // 링크와 상호작용을 가능하게 설정
377    zIndex: 9999,  // 툴팁이 다른 요소 위에 나타나도록 설정
378  });
379  tippy('.cert-9', {
380    content: getGlobalMessageByString('Marks will be released when the meetup selected.', "밋업 선택이 되면 마크가 공개됩니다."),
381    arrow: true,
382    placement: 'bottom',
383    trigger: 'mouseenter click',  // 호버와 포커스 시 툴팁이 나타나도록 설정
384    hideOnClick: false,
385    interactive: true,  // 링크와 상호작용을 가능하게 설정
386    zIndex: 9999,  // 툴팁이 다른 요소 위에 나타나도록 설정
387  });
388  tippy('.ri-question-line', {
389    content: 
390    `
391    <div>
392      <img src="/resources/front/images/certified-icon10.svg" class="cert-10" style="width:29px; height:auto;" />

393      <span>${getGlobalMessageByString('Selected Companies for the Challenge','챌린지 최종 선정 기업')}</span>
394    </div>
395    <div>
396      <img src="/resources/front/images/certified-icon1.svg" class="cert-1" />
397      <span>${getGlobalMessageByString('Export Award','수출의 탑')}</span>
398    </div>
399    <div>
400      <img src="/resources/front/images/certified-icon2.svg" class="cert-2" />
401      <span>${getGlobalMessageByString('Kita','한국무역협회')}</span>
402    </div>
403    <div>
404      <img src="/resources/front/images/certified-icon4.svg" class="cert-4" />
405      <span>${getGlobalMessageByString('National Pension Service(NPS)','국민연금관리공단')}</span>
406    </div>
407    <div>
408      <img src="/resources/front/images/certified-icon5.svg" class="cert-5" />
409      <span>${getGlobalMessageByString('National Tax Service(NTS)','국세청')}</span>
410    </div>
411    <div>
412      <img src="/resources/front/images/certified-icon6.svg" class="cert-6" />
413      <span>${getGlobalMessageByString('Innoforest','혁신의숲')}</span>
414    </div>
415    <div>
416      <img src="/resources/front/images/certified-icon7.svg" class="cert-7" />

417      <span>${getGlobalMessageByString('Crunchbase','크런치베이스')}</span>
418    </div>
419    `,
420    allowHTML: true,
421    arrow: true,
422    placement: 'bottom',
423    trigger: 'mouseenter',  // 호버와 포커스 시 툴팁이 나타나도록 설정
424    hideOnClick: false,
425    interactive: true,  // 링크와 상호작용을 가능하게 설정
426    zIndex: 9999,  // 툴팁이 다른 요소 위에 나타나도록 설정
427  });
428
429}
430
431function setFileInput(){
432	$("input[type='file']").each(function() {
433	    const $fileInput = $(this); // 현재 file input 요소
434	    const $dropArea = $fileInput.siblings("input[type='text']"); // 해당 file input의 형제 요소인 text input
435	
436	    // 드래그 오버 시 기본 동작 방지
437	    if (!$dropArea.data('drag-and-drop-initialized')) {
438		    $dropArea.on('dragover', function(event) {
439		        event.preventDefault();
440		        $dropArea.css('border-color', '#60D1BD'); // 드래그 중 경계색 변경
441		    });
442		
443		    // 드래그가 끝날 때 경계색 복원
444		    $dropArea.on('dragleave', function() {
445		        $dropArea.css('border-color', '#ccc');
446		    });
447		
448		    // 파일 드롭 처리
449		    $dropArea.on('drop', function(event) {
450		        event.preventDefault();
451		        $dropArea.css('border-color', '#ccc');
452		        const files = event.originalEvent.dataTransfer.files; // 드롭된 파일 목록
453		        if (files.length > 0) {
454		            const dataTransfer = new DataTransfer(); // 새로운 DataTransfer 객체 생성
455		            $.each(files, function(index, file) {
456		                dataTransfer.items.add(file); // 파일 추가
457		            });
458		            $fileInput[0].files = dataTransfer.files; // input의 files에 설정
459		
460		            // change 이벤트 트리거
461		            $fileInput.trigger('change');
462		        }
463		    });
464		    $dropArea.data('drag-and-drop-initialized', true);
465	    }
466	});
467}
468
469
470
471