참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.
- 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
- 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
- 인터넷 익스플로러 / 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
- 오페라: Ctrl-F5를 입력.
// 목차 닫기 버튼을 보기 좋게 화살표로 변경
function stylishToc() {
// 요소 선택
var fixedToc = document.querySelector('#fixed-toc');
var tocTitle = fixedToc.querySelector('#toctitle');
var tocHeading = tocTitle.querySelector('h2');
var oldToggle = tocTitle.querySelector('.toctoggle');
// 요소 생성
var newToggle = document.createElement('a');
newToggle.className = 'new-toctoggle';
newToggle.innerHTML = '<span class="fa-chevron-left fa"></span>';
newToggle.addEventListener('click', function () {
$(window.damezuma.doc).remove();
window.damezuma.doc = null;
});
// 스타일 설정
tocHeading.style.display = 'inline';
newToggle.style.fontSize = '1.8rem';
newToggle.style.marginRight = '0.5rem';
newToggle.style.cursor = 'pointer';
// 기존 링크 제거 및 요소 추가
tocTitle.insertBefore(newToggle, tocHeading);
oldToggle.parentNode.removeChild(oldToggle);
}
var observer = new MutationObserver(function (records) {
// 목차가 추가됬을때만 실행
var fixedToc = null;
for (var i = 0; i < records.length; i++) {
var record = records[i];
if (typeof record.addedNodes === 'undefined') continue;
for (var j = 0; j < record.addedNodes.length; j++) {
if (record.addedNodes[j].id == 'fixed-toc') stylishToc();
}
}
});
observer.observe(document.body, {
childList: true
});