|
|
| 1번째 줄: |
1번째 줄: |
| /* 이 자바스크립트 설정은 모든 문서, 모든 사용자에게 적용됩니다. */
| |
| /* 간단한 페이드/슬라이드 쇼 (DHTML) */
| |
| mw.loader.using('jquery').then(function () {
| |
| function initSlideshow($root) {
| |
| var interval = Number($root.data('interval')) || 4000;
| |
| var mode = String($root.data('transition') || 'fade').toLowerCase();
| |
| var $rawSlides = $root.find('.slide');
| |
|
| |
|
| if (!$rawSlides.length) return;
| |
|
| |
| // 버튼 & 도트 UI
| |
| var $prev = $('<button class="km-nav km-prev" type="button" aria-label="Previous">‹</button>');
| |
| var $next = $('<button class="km-nav km-next" type="button" aria-label="Next">›</button>');
| |
| var $dots = $('<div class="km-dots" role="tablist"></div>');
| |
|
| |
| var current = 0, timer = null;
| |
|
| |
| if (mode === 'slide') {
| |
| // 슬라이드 모드: 트랙을 만들어 좌우로 이동
| |
| var $track = $('<div class="km-track"></div>');
| |
| $root.append($track);
| |
|
| |
| $rawSlides.each(function () {
| |
| var $wrap = $('<div class="km-slide-item"></div>');
| |
| $(this).appendTo($wrap);
| |
| $track.append($wrap);
| |
| });
| |
|
| |
| var $items = $track.find('.km-slide-item');
| |
|
| |
| function go(i) {
| |
| current = (i + $items.length) % $items.length;
| |
| var x = -current * 100;
| |
| $track.css('transform', 'translateX(' + x + '%)');
| |
| updateDots();
| |
| }
| |
|
| |
| function next() { go(current + 1); }
| |
| function prev() { go(current - 1); }
| |
|
| |
| // 도트 생성
| |
| $items.each(function (idx) {
| |
| var $d = $('<button class="km-dot" type="button" aria-label="Go to slide '+(idx+1)+'"></button>');
| |
| $d.on('click', function () { go(idx); restart(); });
| |
| $dots.append($d);
| |
| });
| |
|
| |
| // 오토플레이
| |
| function start() { timer = setInterval(next, interval); }
| |
| function stop() { if (timer) { clearInterval(timer); timer = null; } }
| |
| function restart() { stop(); start(); }
| |
| function updateDots() {
| |
| $dots.children().removeClass('active').eq(current).addClass('active');
| |
| }
| |
|
| |
| $prev.on('click', function(){ prev(); restart(); });
| |
| $next.on('click', function(){ next(); restart(); });
| |
|
| |
| $root.append($prev, $next, $dots);
| |
| $root.on('mouseenter', stop).on('mouseleave', start);
| |
|
| |
| // 초기화
| |
| go(0); start();
| |
|
| |
| } else {
| |
| // 페이드 모드: 겹쳐놓고 opacity 전환
| |
| var $items = $();
| |
| $rawSlides.each(function () {
| |
| var $wrap = $('<div class="km-slide-item"></div>');
| |
| $(this).appendTo($wrap);
| |
| $root.append($wrap);
| |
| $items = $items.add($wrap);
| |
| });
| |
|
| |
| function show(i) {
| |
| current = (i + $items.length) % $items.length;
| |
| $items.removeClass('active').eq(current).addClass('active');
| |
| updateDots();
| |
| }
| |
| function next() { show(current + 1); }
| |
| function prev() { show(current - 1); }
| |
|
| |
| // 도트 생성
| |
| $items.each(function (idx) {
| |
| var $d = $('<button class="km-dot" type="button" aria-label="Go to slide '+(idx+1)+'"></button>');
| |
| $d.on('click', function () { show(idx); restart(); });
| |
| $dots.append($d);
| |
| });
| |
|
| |
| function start() { timer = setInterval(next, interval); }
| |
| function stop() { if (timer) { clearInterval(timer); timer = null; } }
| |
| function restart() { stop(); start(); }
| |
| function updateDots() {
| |
| $dots.children().removeClass('active').eq(current).addClass('active');
| |
| }
| |
|
| |
| $prev.on('click', function(){ prev(); restart(); });
| |
| $next.on('click', function(){ next(); restart(); });
| |
|
| |
| $root.append($prev, $next, $dots);
| |
| $root.on('mouseenter', stop).on('mouseleave', start);
| |
|
| |
| // 초기화
| |
| show(0); start();
| |
| }
| |
| }
| |
|
| |
| // 페이지 로드 시 실행 (미리보기/비주얼에디터 적용 포함)
| |
| function boot() {
| |
| $('.km-slideshow').each(function () {
| |
| var $root = $(this);
| |
| if (!$root.data('km-inited')) {
| |
| $root.data('km-inited', true);
| |
| initSlideshow($root);
| |
| }
| |
| });
| |
| }
| |
| mw.hook('wikipage.content').add(boot);
| |
| $(boot);
| |
| });
| |
|
| |
|
| |
|
| |
|
| |
| /* ====== 간단 필터링 & 탭 ====== */
| |
| (function(){
| |
| function qs(a,b=document){return b.querySelector(a)}
| |
| function qsa(a,b=document){return Array.from(b.querySelectorAll(a))}
| |
|
| |
| // 태그/전공 필터
| |
| qsa('.kdmw-dept-toolbar').forEach(bar=>{
| |
| const chips = qsa('.kdmw-chip', bar);
| |
| const grid = bar.nextElementSibling?.classList.contains('kdmw-grid')
| |
| ? bar.nextElementSibling : null;
| |
| const searchBox = qs('.kdmw-search input', bar.closest('.kdmw-section')||document);
| |
|
| |
| function apply(){
| |
| if(!grid) return;
| |
| const active = chips.filter(c=>c.classList.contains('is-active')).map(c=>c.dataset.filter);
| |
| const q = (searchBox?.value||'').trim().toLowerCase();
| |
| let shown = 0;
| |
| qsa('.kdmw-card', grid).forEach(card=>{
| |
| const tags = (card.dataset.tags||'').split('|');
| |
| const dept = (card.dataset.dept||'').toLowerCase();
| |
| const text = (card.innerText||'').toLowerCase();
| |
| const tagHit = active.length===0 || active.some(a=>tags.includes(a));
| |
| const searchHit = q==='' || text.includes(q) || dept.includes(q);
| |
| const show = tagHit && searchHit;
| |
| card.style.display = show ? '' : 'none';
| |
| if(show) shown++;
| |
| });
| |
| const empty = qs('.kdmw-empty', grid.parentElement);
| |
| if(empty) empty.style.display = shown===0 ? '' : 'none';
| |
| }
| |
|
| |
| chips.forEach(c=>{
| |
| c.addEventListener('click', ()=>{
| |
| c.classList.toggle('is-active');
| |
| apply();
| |
| });
| |
| });
| |
| if(searchBox) searchBox.addEventListener('input', apply);
| |
| apply();
| |
| });
| |
|
| |
| // 탭 스위치
| |
| qsa('.kdmw-tabs').forEach(tabs=>{
| |
| const tabBtns = qsa('.kdmw-tab', tabs);
| |
| const panels = qsa('.kdmw-panel', tabs.parentElement);
| |
| function show(name){
| |
| tabBtns.forEach(b=>b.classList.toggle('is-active', b.dataset.tab===name));
| |
| panels.forEach(p=>p.style.display = (p.dataset.tab===name)?'':'none');
| |
| }
| |
| const first = tabBtns[0]?.dataset.tab;
| |
| tabBtns.forEach(b=>b.addEventListener('click', ()=>show(b.dataset.tab)));
| |
| if(first) show(first);
| |
| });
| |
| })();
| |
