プレゼン中にプログレスバーを表示する

プログレスバーを表示してるスライド、言われてみればちょくちょく見るな～と思ったので作ったよ！

https://gyazo.com/2b161a73850b0abf671922a28fe0d546

プログレスバーは印刷には出ません

プレゼンモード中に別のページにジャンプした場合、何かキーが押されるまでプログレスバーが更新されません

誰か直して😄

カスタマイズできる箇所にメモのマーク📝を置いたので、色々試してみてね！

code:script.js

document.querySelector('.app')

.insertAdjacentHTML('beforeend', '<div id="presentation-progress" style="display:none"></div>')

document.querySelector('.app')

.insertAdjacentHTML('beforeend', `<style media="screen">

display: block !important;

z-index: 100; position: fixed; bottom: 0; left: 0; width: 100vw;

text-align: center; line-height: 1;

font-size: x-small; /* 📝バーの高さを変えたいときはフォントサイズを変えてね */

--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 + '%')

}

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 })

})()