import '/api/code/customize/インデント毎に可視／不可視を切り替える/script.js';

import '/api/code/customize/インデント毎に可視／不可視を切り替える/button.js'; // 行用styleを入れる document.body.insertAdjacentHTML('beforeend', `<style id="indent-level-style"> @import '/api/code/customize/インデント毎に可視／不可視を切り替える/style.css'; </style>`); // checkboxを1から MAX_LEVELS まで作成する const MAX_LEVELS = 10; // 1から10までを設定。 11以上はスタイルを用意していない const createCheckboxes = () => { const root = document.getElementsByClassName('page-menu')?.[0]; for (let i = 1; i <= MAX_LEVELS; i++) { const toggleButton = document.createElement('outline-toggle-button'); toggleButton.setAttribute('target-indent-level', i); toggleButton.setAttribute( 'on-label', i); // toggleButton.setAttribute( 'on-label', i+' on'); toggleButton.setAttribute('off-label', i); // toggleButton.setAttribute('off-label', i+' off'); root.appendChild(toggleButton); } }; createCheckboxes();

const linesDOM = document.getElementsByClassName('lines')?.[0];

function addIndentLevels() { linesDOM.children.forEach(line => { // indent levelを計算する const indentLevel = line .querySelectorAll('.indent-mark span[class^="c-"]').length; const newIndentClass = `indent-level-${indentLevel}`; // すでにindent levelが付与されていたら消す if (/indent-level-\d+/.test(line.className)) { const indentClass = line.className.match(/indent-level-\d+/)?.[0]; if (indentClass === newIndentClass) return; line.classList.replace(indentClass, newIndentClass); } else { line.classList.add(newIndentClass); } }); }

function addIndentLevels() { linesDOM.children.forEach(line => { // indent levelを計算する let indentLevel = 0; const indentMarkNode = line.querySelector('.indent-mark'); const isCodeStart = line.querySelector('.code-start'); // const isCodeBlock = line.querySelector('.code-block'); if (indentMarkNode) { const result = /width: ([0-9\.]+)em;/.exec(indentMarkNode.getAttribute('style')); indentLevel = Math.ceil(parseFloat(result[1])/1.5); if (isCodeStart) { indentLevel += 1; } } // indentLevel が取得できたら，後は上と同じ const newIndentClass = `indent-level-${indentLevel}`; // すでにindent levelが付与されていたら消す if (/indent-level-\d+/.test(line.className)) { const indentClass = line.className.match(/indent-level-\d+/)?.[0]; if (indentClass === newIndentClass) return; line.classList.replace(indentClass, newIndentClass); } else { line.classList.add(newIndentClass); } }); }

// DOM読み込み後の処理 addIndentLevels(); // DOM監視 (function () { const observer = new MutationObserver(() => addIndentLevels() ) observer.observe(linesDOM, { childList: true, subtree: true }) })()

.indent-level-0 { } .indent-level-1 { background-color: hsla( 30,100%,90%,0.6); } .indent-level-2 { background-color: hsla( 60,100%,90%,0.6); } .indent-level-3 { background-color: hsla( 90,100%,90%,0.6); } .indent-level-4 { background-color: hsla(120,100%,90%,0.6); } .indent-level-5 { background-color: hsla(150,100%,90%,0.6); } .indent-level-6 { background-color: hsla(180,100%,90%,0.6); } .indent-level-7 { background-color: hsla(210,100%,90%,0.6); } .indent-level-8 { background-color: hsla(240,100%,90%,0.6); } .indent-level-9 { background-color: hsla(270,100%,90%,0.6); } .indent-level-10 { background-color: hsla(300,100%,90%,0.6); }

customElements.define('outline-toggle-button', class extends HTMLElement { connectedCallback() { if (this.rendered) return; this.render(); this.rendered = true; } render() { const shadow = this.attachShadow({mode: 'open'}); const number = this.getAttribute('target-indent-level'); const onLabel = this.getAttribute('on-label'); const offLabel = this.getAttribute('off-label'); // DOMを作る shadow.innerHTML = ` <style> @import '/api/code/customize/インデント毎に可視／不可視を切り替える/button.css'; </style> <input class="level-${number}" type="checkbox" data-off-label="${offLabel}" data-on-label="${onLabel}"></input>`; this._createLineStyle(number); // event listenerの登録 const input = this.shadowRoot.lastElementChild; input.checked = true; input.addEventListener('change', () => { // スタイルを入れる要素 const level = this.getAttribute('target-indent-level'); const style = document.getElementById(`indent-level-styles-${level}`) ?? this._createLineStyle(level); // なければ作る style.textContent = `.indent-level-${level} { display: ${input.checked ? 'block' : 'none'}; }`; return false; }); } // DOMの更新処理 update() { if (!this.rendered) { this.render(); this.rendered = true; return; } const input = this.shadowRoot.lastElementChild; const number = this.getAttribute('target-indent-level'); input.className = `level-${number}`; input.dataset.onLabel = this.getAttribute('on-label'); input.dataset.offLabel = this.getAttribute('off-label'); } static get observedAttributes() { return [ 'target-indent-level', 'on-label', 'off-label' ]; } attributeChangedCallback(name, oldValue, newValue) { this.update(); } // 対応する行のstyleを生成する _createLineStyle(number) { const id = `indent-level-styles-${number}`; if (document.getElementById(id)) return; // すでにあるなら何もしない const style = document.createElement('style'); style.id = id; style.textContent = `.indent-level-${number} { display: block; }`; document.head.appendChild(style); return style; } });

.level-0:checked { } .level-1:checked { background-color: hsla( 30,100%,90%,0.6); } .level-2:checked { background-color: hsla( 60,100%,90%,0.6); } .level-3:checked { background-color: hsla( 90,100%,90%,0.6); } .level-4:checked { background-color: hsla(120,100%,90%,0.6); } .level-5:checked { background-color: hsla(150,100%,90%,0.6); } .level-6:checked { background-color: hsla(180,100%,90%,0.6); } .level-7:checked { background-color: hsla(210,100%,90%,0.6); } .level-8:checked { background-color: hsla(240,100%,90%,0.6); } .level-9:checked { background-color: hsla(270,100%,90%,0.6); } .level-10:checked { background-color: hsla(300,100%,90%,0.6); } input { appearance: none; -webkit-appearance: none; -ms-appearance: none; -moz-appearance: none; display: inline-block; vertical-align: top; width: 48px; height: 48px; margin: 0; border-radius: 8px; border: 1px solid #aaa; text-align: center; line-height: 44px; font-size: 18px; cursor: pointer; transition: 50ms; } input:active{ height: 48px; margin-top: 2px; transition: none; } input:not(:checked)::after{ display: inline; content: attr(data-off-label); transition: none; } input:checked::after{ display: inline; content: attr(data-on-label); transition: 50ms; } input:active::after{ transition: none; }