「MediaWiki:Common.js」の版間の差分

編集の要約なし
編集の要約なし
285行目: 285行目:


/* 折り畳みボックス用のJS */
/* 折り畳みボックス用のJS */
(function() {
function expandableBoxFunc() {
     // ページが完全に読み込まれた後に実行されるようにする
     // 'custom-template-expandable-box' クラスを持つ要素をすべて取得
    document.addEventListener('DOMContentLoaded', function() {
    var expandableBoxes = document.querySelectorAll('.custom-template-expandable-box');
        // 'custom-template-expandable-box' クラスを持つ要素をすべて取得
    console.log("あああああああ: " + expandableBoxes);
        var expandableBoxes = document.querySelectorAll('.custom-template-expandable-box');
        console.log("あああああああ: " + expandableBoxes);


        expandableBoxes.forEach(function(box) {
    expandableBoxes.forEach(function(box) {
            var header = box.querySelector('.custom-template-expandable-box-header');
        var header = box.querySelector('.custom-template-expandable-box-header');
            var contents = box.querySelector('.custom-template-expandable-box-contents');
        var contents = box.querySelector('.custom-template-expandable-box-contents');
            var toggleLabel = box.querySelector('.custom-template-expandable-box-toggle-label');
        var toggleLabel = box.querySelector('.custom-template-expandable-box-toggle-label');


            // contents と toggleLabel が存在するか確認
        // contents と toggleLabel が存在するか確認
            if (!contents || !toggleLabel) {
        if (!contents || !toggleLabel) {
                return; // 必要な要素がなければスキップ
            return; // 必要な要素がなければスキップ
            }
        }


            // `opened` パラメータの状態を読み取る
        // `opened` パラメータの状態を読み取る
            var isOpenedInitially = box.getAttribute('data-opened') === 'True';
        var isOpenedInitially = box.getAttribute('data-opened') === 'True';


            // 初期状態の設定
        // 初期状態の設定
            if (isOpenedInitially) {
        if (isOpenedInitially) {
                contents.style.display = 'block';
            contents.style.display = 'block';
                toggleLabel.textContent = '[非表示]';
            toggleLabel.textContent = '[非表示]';
            } else {
        } else {
                contents.style.display = 'none';
            contents.style.display = 'none';
                toggleLabel.textContent = '[表示]';
            toggleLabel.textContent = '[表示]';
            }
        }


            // ヘッダーがクリックされたときのイベントリスナーを設定
        // ヘッダーがクリックされたときのイベントリスナーを設定
            if (header) {
        if (header) {
                header.addEventListener('click', function() {
            header.addEventListener('click', function() {
                    if (contents.style.display === 'none') {
                if (contents.style.display === 'none') {
                        // 非表示なら表示にする
                    // 非表示なら表示にする
                        contents.style.display = 'block'; // または 'initial'
                    contents.style.display = 'block'; // または 'initial'
                        toggleLabel.textContent = '[非表示]';
                    toggleLabel.textContent = '[非表示]';
                    } else {
                } else {
                        // 表示なら非表示にする
                    // 表示なら非表示にする
                        contents.style.display = 'none';
                    contents.style.display = 'none';
                        toggleLabel.textContent = '[表示]';
                    toggleLabel.textContent = '[表示]';
                    }
                }
                });
            });
            }
         }
         });
     });
     });
})();
}
 
expandableBoxFunc();