スライド自動めくりスクリプト
code:script.js
// スライド自動めくり
const isPagingEnabled = () => document.querySelector('#paging-checkbox').checked;
const makePageStyle = page => .lines .line:not(.section-${page}) { display: none; };
const updatePage = pager => {
const innerText = pager.innerText.trim();
console.log("${innerText}");
const page = innerText.length;
document.querySelector('#paging-number').innerText = page;
if (isPagingEnabled()) {
const style = document.querySelector('.presentation style');
if (style) {
style.innerText = makePageStyle(page);
}
}
};
const getPager = () => {
const pagerTitle = Array.from(document.querySelectorAll('.code-start'))
.reverse().find(codeStart => codeStart.innerText === 'このcodeを消さない');
if (!pagerTitle) {
return null;
}
const pagerLine = pagerTitle.parentElement.parentElement.parentElement.nextElementSibling;
return pagerLine.querySelector('.code-body');
};
if (getPager()) {
const pagingCheckbox = [
'<div class="paging-container">',
' <span id="paging-number">N</span>',
' <input id="paging-checkbox" type="checkbox" name="pagingEnabled" checked>',
' <label for="pagingEnabled">自動でページめくる</label>',
'</div>'
].join('');
document.querySelector('.app').insertAdjacentHTML('beforeend', pagingCheckbox);
document.querySelector('#paging-checkbox').addEventListener('change', () => updatePage(getPager()));
const observer = new MutationObserver(mutation => {
console.log(mutation);
updatePage(getPager());
});
const option = {
attribute: true,
childList: true,
characterData: true,
subtree: true,
};
const lines = document.querySelector('.lines');
observer.observe(lines, option);
}
else {
console.log('pager title not found');
}