プレゼン中にプログレスバーを表示する
Google Slides のアドオン作成サンプルからネタを拝借しました😌
プログレスバーを表示してるスライド、言われてみればちょくちょく見るな～と思ったので作ったよ！
プレゼンモードを開始すると、下の端っこにプログレスバーが出ます。
プログレスバーは印刷には出ません
プレゼンモード中に別のページにジャンプした場合、何かキーが押されるまでプログレスバーが更新されません
誰か直して😄
カスタマイズできる箇所にメモのマーク📝を置いたので、色々試してみてね！
script.jsdocument.querySelector('.app')
.insertAdjacentHTML('beforeend', '<div id="presentation-progress" style="display:none"></div>')
document.querySelector('.app')
.insertAdjacentHTML('beforeend', `<style media="screen">
.app.presentation #presentation-progress {
display: block !important;
z-index: 100; position: fixed; bottom: 0; left: 0; width: 100vw;
text-align: center; line-height: 1;
font-size: x-small; /* 📝バーの高さを変えたいときはフォントサイズを変えてね */
--bar-color: #fc0; /* 📝プログレスバーの色 */
--bar-bgcolor: #eee; /* 📝プログレスバーの背景色 */
--complete: 0;
background: linear-gradient(to right,
var(--bar-color) var(--complete), var(--bar-bgcolor) var(--complete), var(--bar-bgcolor))
}
</style>`);
(() => {
const updateProgress = () => {
const sections = Array.from(document.querySelectorAll('.section-title'))
const currentPos = sections.findIndex(e => {
return window.getComputedStyle(e, null).getPropertyValue('display') != 'none'
}) + 1
const complete = currentPos / sections.length * 100
const progressBarElem = document.getElementById('presentation-progress')
progressBarElem.style.setProperty('--complete', complete + '%')
progressBarElem.innerText = `${currentPos} / ${sections.length}`
}
const appObserver = new MutationObserver(mutations => {
mutations.forEach(mutation => {
const addedStyles = Array.from(mutation.addedNodes).filter(node => node.tagName == 'STYLE')
if (addedStyles.length) {
// プレゼンモード開始？
// STYLEタグも MutationObserver で監視したかったけど無理ぽいのでキーイベント拾います
window.addEventListener('keydown', updateProgress)
updateProgress()
}
const removedStyles = Array.from(mutation.removedNodes).filter(node => node.tagName == 'STYLE')
if (removedStyles.length) {
// プレゼンモード終了？
window.removeEventListener('keydown', updateProgress)
}
})
})
appObserver.observe(document.querySelector('.app'), { childList: true })
})()初出 2018-06-05