157 lines
4.5 KiB
JavaScript
157 lines
4.5 KiB
JavaScript
|
|
/* ========================== Head & Footer */
|
|
$.get("/include/header").done(function (html) {
|
|
$("#hd").html(html);
|
|
$("#top_nav_wrap").removeClass("main").addClass("sub");
|
|
});
|
|
$.get("/include/footer").done(function (html) {
|
|
$("#ft").html(html);
|
|
});
|
|
|
|
|
|
/* ========================== SUB BREADCRUMB */
|
|
$(document).ready(function () {
|
|
|
|
/* ---- 서브 비주얼 로드 애니메이션 ---- */
|
|
setTimeout(function () {
|
|
$('#sub_visual').addClass('loaded');
|
|
}, 50);
|
|
|
|
|
|
/* ---- 브레드크럼 드롭다운 ---- */
|
|
const $bcItems = $('.bc-item');
|
|
|
|
$bcItems.each(function () {
|
|
const $item = $(this);
|
|
const $btn = $item.find('.bc-btn');
|
|
const $drop = $item.find('.bc-dropdown');
|
|
|
|
$btn.on('click', function (e) {
|
|
e.stopPropagation();
|
|
const isOpen = $item.hasClass('open');
|
|
|
|
// 모든 드롭다운 닫기
|
|
closeAll();
|
|
|
|
if (!isOpen) {
|
|
$item.addClass('open');
|
|
$btn.attr('aria-expanded', 'true');
|
|
// show 클래스를 requestAnimationFrame으로 추가해 transition 작동
|
|
$drop.css('display', 'block');
|
|
requestAnimationFrame(function () {
|
|
$drop.addClass('show');
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
// 외부 클릭 시 닫기
|
|
$(document).on('click', function () {
|
|
closeAll();
|
|
});
|
|
|
|
// 드롭다운 내부 클릭은 전파 막기
|
|
$('.bc-dropdown').on('click', function (e) {
|
|
e.stopPropagation();
|
|
});
|
|
|
|
function closeAll() {
|
|
$bcItems.each(function () {
|
|
const $item = $(this);
|
|
const $btn = $item.find('.bc-btn');
|
|
const $drop = $item.find('.bc-dropdown');
|
|
|
|
$item.removeClass('open');
|
|
$btn.attr('aria-expanded', 'false');
|
|
$drop.removeClass('show');
|
|
|
|
// transition 끝나면 display:none
|
|
$drop.one('transitionend', function () {
|
|
if (!$item.hasClass('open')) {
|
|
$drop.css('display', 'none');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// 키보드 ESC 닫기
|
|
$(document).on('keydown', function (e) {
|
|
if (e.key === 'Escape') closeAll();
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
/* ========================== AOS & feather icon */
|
|
AOS.init();
|
|
feather.replace();
|
|
|
|
|
|
/* ========================== Quick Banner */
|
|
function updateQuickPos() {
|
|
const quick = document.querySelector('.quick_wrap');
|
|
const footer = document.getElementById('ft');
|
|
if (!quick || !footer) return;
|
|
|
|
const defaultBottom = window.innerWidth <= 1400 ? 10 : 40; // px
|
|
const footerTop = footer.getBoundingClientRect().top;
|
|
const windowH = window.innerHeight;
|
|
|
|
if (footerTop < windowH) {
|
|
// 푸터가 화면에 진입했을 때
|
|
const offset = windowH - footerTop + defaultBottom;
|
|
quick.style.bottom = offset + 'px';
|
|
} else {
|
|
quick.style.bottom = defaultBottom + 'px';
|
|
}
|
|
}
|
|
|
|
window.addEventListener('scroll', updateQuickPos);
|
|
window.addEventListener('resize', updateQuickPos);
|
|
updateQuickPos();
|
|
|
|
// TOP 버튼 클릭 시 최상단 이동
|
|
document.querySelector('.top_btn').addEventListener('click', function () {
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
});
|
|
|
|
|
|
|
|
/* ========================== Tab js */
|
|
|
|
document.querySelectorAll('.sub-tab').forEach(function(tabWrap) {
|
|
var btns = tabWrap.querySelectorAll('.sub-tab__btn');
|
|
var panels = tabWrap.querySelectorAll('.sub-tab__panel');
|
|
|
|
btns.forEach(function(btn) {
|
|
btn.addEventListener('click', function() {
|
|
var targetId = this.getAttribute('aria-controls');
|
|
|
|
// 탭 버튼 초기화
|
|
btns.forEach(function(b) {
|
|
b.classList.remove('is-active');
|
|
b.setAttribute('aria-selected', 'false');
|
|
});
|
|
|
|
// 패널 초기화
|
|
panels.forEach(function(p) {
|
|
p.classList.remove('is-active');
|
|
});
|
|
|
|
// 활성화
|
|
this.classList.add('is-active');
|
|
this.setAttribute('aria-selected', 'true');
|
|
|
|
var target = document.getElementById(targetId);
|
|
if (target) target.classList.add('is-active');
|
|
});
|
|
|
|
// 키보드 접근성 (좌/우 화살표)
|
|
btn.addEventListener('keydown', function(e) {
|
|
var idx = Array.from(btns).indexOf(this);
|
|
if (e.key === 'ArrowRight') btns[(idx + 1) % btns.length].focus();
|
|
if (e.key === 'ArrowLeft') btns[(idx - 1 + btns.length) % btns.length].focus();
|
|
});
|
|
});
|
|
}); |