2,720
回編集
編集の要約なし
(ページの作成:「→ここにある全てのJavaScriptはモバイル版サイトの利用者に影響します: →========================================================= * 外部画像ギャラリー * =========================================================: mw.hook('wikipage.content').add(function ($content) { $content.find('.ts-gallery').each(function () { var gallery = this; →二重初期化防止: if (gallery.dataset.galleryReady === '1') { return;…」) |
編集の要約なし |
||
| 120行目: | 120行目: | ||
updateButtons(); | updateButtons(); | ||
}); | }); | ||
}); | |||
/* ========================================================= | |||
* Infobox 画像スライダー | |||
* ========================================================= */ | |||
mw.hook('wikipage.content').add(function ($content) { | |||
$content.find('.ts-infobox-slider').each(function () { | |||
var slider = this; | |||
/* 二重初期化を防止 */ | |||
if (slider.dataset.infoboxSliderReady === '1') { | |||
return; | |||
} | |||
slider.dataset.infoboxSliderReady = '1'; | |||
var track = | |||
slider.querySelector('.ts-infobox-slider__track'); | |||
if (!track) { | |||
return; | |||
} | |||
var slides = | |||
track.querySelectorAll('.ts-infobox-slider__slide'); | |||
if (!slides.length) { | |||
return; | |||
} | |||
/* | |||
* 1枚だけなら矢印を作らない | |||
*/ | |||
if (slides.length === 1) { | |||
slider.classList.add( | |||
'ts-infobox-slider--single' | |||
); | |||
return; | |||
} | |||
/* ----------------------------------------- | |||
戻るボタン | |||
----------------------------------------- */ | |||
var prev = | |||
document.createElement('button'); | |||
prev.type = 'button'; | |||
prev.className = | |||
'ts-infobox-slider__nav ' + | |||
'ts-infobox-slider__prev'; | |||
prev.innerHTML = '‹'; | |||
prev.setAttribute( | |||
'aria-label', | |||
'前の画像' | |||
); | |||
/* ----------------------------------------- | |||
次へボタン | |||
----------------------------------------- */ | |||
var next = | |||
document.createElement('button'); | |||
next.type = 'button'; | |||
next.className = | |||
'ts-infobox-slider__nav ' + | |||
'ts-infobox-slider__next'; | |||
next.innerHTML = '›'; | |||
next.setAttribute( | |||
'aria-label', | |||
'次の画像' | |||
); | |||
slider.appendChild(prev); | |||
slider.appendChild(next); | |||
/* ----------------------------------------- | |||
ボタン状態 | |||
----------------------------------------- */ | |||
function updateButtons() { | |||
var max = | |||
track.scrollWidth - | |||
track.clientWidth; | |||
prev.disabled = | |||
track.scrollLeft <= 3; | |||
next.disabled = | |||
track.scrollLeft >= max - 3; | |||
} | |||
/* ----------------------------------------- | |||
1枚分移動 | |||
----------------------------------------- */ | |||
function move(direction) { | |||
track.scrollBy({ | |||
left: | |||
direction * | |||
track.clientWidth, | |||
behavior: 'smooth' | |||
}); | |||
} | |||
prev.addEventListener( | |||
'click', | |||
function () { | |||
move(-1); | |||
} | |||
); | |||
next.addEventListener( | |||
'click', | |||
function () { | |||
move(1); | |||
} | |||
); | |||
track.addEventListener( | |||
'scroll', | |||
function () { | |||
window.requestAnimationFrame( | |||
updateButtons | |||
); | |||
}, | |||
{ | |||
passive: true | |||
} | |||
); | |||
window.addEventListener( | |||
'resize', | |||
updateButtons | |||
); | |||
updateButtons(); | |||
}); | |||
}); | }); | ||