/* ================================================
Auto width for each LI based on its text content
- 긴 텍스트는 넓게, 짧은 텍스트는 작게
- 루프/리사이즈에도 안정적으로 재계산
================================================ */
(function(){
const PADDING_X = 36; // 좌우 패딩 합(12px 18px 등과 일치하게)
const tracks = [document.getElementById('tb-track-a'), document.getElementById('tb-track-b')];
function measureAndSetWidths(){
tracks.forEach(track => {
if(!track) return;
const items = Array.from(track.children);
items.forEach(li => {
// 초기화 후 실제 콘텐츠 폭 측정
li.style.width = 'auto';
// 강제 리플로우로 scrollWidth 정확히 읽기
const contentWidth = li.scrollWidth;
li.style.width = (contentWidth + PADDING_X) + 'px';
});
});
}
// 초기 실행
if(document.readyState === 'loading'){
document.addEventListener('DOMContentLoaded', measureAndSetWidths);
} else {
measureAndSetWidths();
}
// 리사이즈 시 재계산 (디바운스)
let t;
window.addEventListener('resize', () => {
clearTimeout(t);
t = setTimeout(measureAndSetWidths, 120);
});
// 내용 변경 대비(선택): MutationObserver
tracks.forEach(track=>{
if(!track) return;
const mo = new MutationObserver(measureAndSetWidths);
mo.observe(track, { childList: true, subtree: true, characterData: true });
});
})();
