編集練習ページ

提供：ゼノブレイドクロス(XenobladeX) 攻略Wiki
移動先:案内、検索

編集練習用のページです。
既存のページや「Wiki編集マニュアル」も参考にしてみてください。

/** * 既存テーブルを使用するMediaWiki用タブ付きテーブルフィルターウィジェット * 宝箱、採取素材、資材、出現モンスターの4つのタブを表示 * ページ内の既存のテーブルを指定IDで参照します */ // ウィジェットの実行関数 function createTabbedTableFilter() { // タブとテーブルIDの定義 var tabsConfig = [ { id: 'chest', label: '宝箱', tableId: 'chestTable', active: true }, { id: 'materials', label: '採取素材', tableId: 'materialsTable', active: false }, { id: 'resources', label: '資材', tableId: 'resourcesTable', active: false }, { id: 'monsters', label: '出現モンスター', tableId: 'monstersTable', active: false } ]; // コンテナ要素の作成 var container = document.createElement('div'); container.className = 'tabbed-filter-container'; container.style.fontFamily = '"Helvetica Neue", Arial, sans-serif'; container.style.maxWidth = '1000px'; container.style.margin = '0 auto'; container.style.padding = '20px'; // タイトルの追加 var title = document.createElement('h2'); title.textContent = 'アイテムデータベース'; container.appendChild(title); // タブコンテナの作成 var tabContainer = document.createElement('div'); tabContainer.className = 'tab-container'; tabContainer.style.display = 'flex'; tabContainer.style.borderBottom = '1px solid #ccc'; tabContainer.style.marginBottom = '20px'; // タブの作成と追加 tabsConfig.forEach(function(tabInfo) { var tab = document.createElement('div'); tab.className = 'tab' + (tabInfo.active ? ' active' : ''); tab.setAttribute('data-tab', tabInfo.id); tab.setAttribute('data-table', tabInfo.tableId); tab.textContent = tabInfo.label; tab.style.padding = '10px 20px'; tab.style.cursor = 'pointer'; tab.style.backgroundColor = tabInfo.active ? '#fff' : '#f1f1f1'; tab.style.border = '1px solid #ccc'; tab.style.borderBottom = tabInfo.active ? '1px solid white' : 'none'; tab.style.borderRadius = '5px 5px 0 0'; tab.style.marginRight = '5px'; if (tabInfo.active) { tab.style.fontWeight = 'bold'; tab.style.marginBottom = '-1px'; } tabContainer.appendChild(tab); }); container.appendChild(tabContainer); // 検索ボックスの作成 var searchContainer = document.createElement('div'); searchContainer.className = 'search-container'; searchContainer.style.marginBottom = '20px'; var searchInput = document.createElement('input'); searchInput.type = 'text'; searchInput.id = 'filterSearchInput'; searchInput.placeholder = '検索...'; searchInput.style.width = '100%'; searchInput.style.padding = '10px'; searchInput.style.fontSize = '16px'; searchInput.style.border = '1px solid #ddd'; searchInput.style.borderRadius = '4px'; searchInput.style.boxSizing = 'border-box'; searchContainer.appendChild(searchInput); container.appendChild(searchContainer); // タブコンテンツのコンテナを作成 var tabContentsContainer = document.createElement('div'); tabContentsContainer.className = 'tab-contents-container'; container.appendChild(tabContentsContainer); // ウィジェットのコンテナを本文に追加 document.currentScript.parentNode.appendChild(container); // 既存のテーブルを探し、タブコンテンツとして表示する initializeTabs(container, tabsConfig, tabContentsContainer); // タブ切り替え機能の実装 var tabElements = container.querySelectorAll('.tab'); tabElements.forEach(function(tab) { tab.addEventListener('click', function() { // アクティブなタブとコンテンツを非アクティブにする var activeTab = container.querySelector('.tab.active'); var activeContent = container.querySelector('.tab-content.active'); activeTab.classList.remove('active'); activeTab.style.backgroundColor = '#f1f1f1'; activeTab.style.borderBottom = 'none'; activeTab.style.fontWeight = 'normal'; activeTab.style.marginBottom = '0'; if (activeContent) { activeContent.classList.remove('active'); activeContent.style.display = 'none'; } // クリックされたタブとそれに対応するコンテンツをアクティブにする this.classList.add('active'); this.style.backgroundColor = '#fff'; this.style.borderBottom = '1px solid white'; this.style.fontWeight = 'bold'; this.style.marginBottom = '-1px'; var tabId = this.getAttribute('data-tab'); var newActiveContent = container.querySelector('#' + tabId + 'Content'); if (newActiveContent) { newActiveContent.classList.add('active'); newActiveContent.style.display = 'block'; } // 検索ボックスをクリアする container.querySelector('#filterSearchInput').value = ''; // すべての行を表示する showAllRows(container); }); }); // 検索機能の実装 var searchInputElement = container.querySelector('#filterSearchInput'); searchInputElement.addEventListener('keyup', function() { var searchValue = this.value.toLowerCase(); // アクティブなタブのテーブルを取得 var activeTab = container.querySelector('.tab.active'); var tableId = activeTab.getAttribute('data-table'); var tableElement = document.getElementById(tableId); if (tableElement) { var tableRows = tableElement.getElementsByTagName('tr'); for (var i = 1; i < tableRows.length; i++) { var rowText = tableRows[i].textContent.toLowerCase(); if (rowText.indexOf(searchValue) > -1) { tableRows[i].style.display = ''; } else { tableRows[i].style.display = 'none'; } } } }); // スタイルをテーブルに適用する applyStylesToTables(tabsConfig); // テーブルソート機能の実装 setupTableSorting(tabsConfig); } // 既存のテーブルを見つけてタブコンテンツとして初期化する関数 function initializeTabs(container, tabsConfig, tabContentsContainer) { tabsConfig.forEach(function(tabInfo) { var sourceTable = document.getElementById(tabInfo.tableId); if (sourceTable) { // テーブルを見つけた場合、タブコンテンツを作成 var tabContent = document.createElement('div'); tabContent.className = 'tab-content' + (tabInfo.active ? ' active' : ''); tabContent.id = tabInfo.id + 'Content'; tabContent.style.display = tabInfo.active ? 'block' : 'none'; // テーブルのコピーを作成するのではなく、元のテーブルを移動 tabContent.appendChild(sourceTable); // 元のテーブルにスタイルを適用 sourceTable.style.width = '100%'; sourceTable.style.borderCollapse = 'collapse'; // タブコンテンツを追加 tabContentsContainer.appendChild(tabContent); } else { console.warn('テーブル ID "' + tabInfo.tableId + '" が見つかりません。'); // テーブルが見つからない場合のプレースホルダーを作成 var tabContent = document.createElement('div'); tabContent.className = 'tab-content' + (tabInfo.active ? ' active' : ''); tabContent.id = tabInfo.id + 'Content'; tabContent.style.display = tabInfo.active ? 'block' : 'none'; var placeholderMessage = document.createElement('p'); placeholderMessage.textContent = 'テーブル ID "' + tabInfo.tableId + '" が見つかりませんでした。'; tabContent.appendChild(placeholderMessage); tabContentsContainer.appendChild(tabContent); } }); } // すべての行を表示する関数 function showAllRows(container) { var activeTab = container.querySelector('.tab.active'); var tableId = activeTab.getAttribute('data-table'); var tableElement = document.getElementById(tableId); if (tableElement) { var tableRows = tableElement.getElementsByTagName('tr'); for (var i = 1; i < tableRows.length; i++) { tableRows[i].style.display = ''; } } } // テーブルにスタイルを適用する関数 function applyStylesToTables(tabsConfig) { tabsConfig.forEach(function(tabInfo) { var table = document.getElementById(tabInfo.tableId); if (table) { // テーブルのスタイル table.style.width = '100%'; table.style.borderCollapse = 'collapse'; // ヘッダー行のスタイル var headers = table.querySelectorAll('th'); headers.forEach(function(th, index) { th.style.border = '1px solid #ddd'; th.style.padding = '10px'; th.style.textAlign = 'left'; th.style.backgroundColor = '#f2f2f2'; th.style.cursor = 'pointer'; th.setAttribute('data-column', index); }); // データ行のスタイル var rows = table.querySelectorAll('tbody tr'); rows.forEach(function(tr, rowIndex) { tr.style.backgroundColor = rowIndex % 2 === 0 ? 'white' : '#f9f9f9'; var cells = tr.querySelectorAll('td'); cells.forEach(function(td) { td.style.border = '1px solid #ddd'; td.style.padding = '10px'; }); // ホバー効果 tr.addEventListener('mouseover', function() { this.style.backgroundColor = '#f1f1f1'; }); tr.addEventListener('mouseout', function() { this.style.backgroundColor = rowIndex % 2 === 0 ? 'white' : '#f9f9f9'; }); }); } }); } // テーブルソート機能のセットアップ function setupTableSorting(tabsConfig) { tabsConfig.forEach(function(tabInfo) { var table = document.getElementById(tabInfo.tableId); if (table) { var headers = table.querySelectorAll('th'); headers.forEach(function(th, index) { th.addEventListener('click', function() { sortTable(table, index); }); }); } }); } // テーブルソート関数 function sortTable(table, column) { var rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0; switching = true; dir = "asc"; while (switching) { switching = false; rows = table.rows; for (i = 1; i < (rows.length - 1); i++) { shouldSwitch = false; x = rows[i].getElementsByTagName("td")[column]; y = rows[i + 1].getElementsByTagName("td")[column]; // 要素が存在するか確認 if (!x || !y) continue; var xText = x.textContent || x.innerText; var yText = y.textContent || y.innerText; if (dir == "asc") { if (xText.toLowerCase() > yText.toLowerCase()) { shouldSwitch = true; break; } } else if (dir == "desc") { if (xText.toLowerCase() < yText.toLowerCase()) { shouldSwitch = true; break; } } } if (shouldSwitch) { rows[i].parentNode.insertBefore(rows[i + 1], rows[i]); switching = true; switchcount++; } else { if (switchcount == 0 && dir == "asc") { dir = "desc"; switching = true; } } } } // ウィジェットの初期化は、ページの読み込みが完了した後に行う if (document.readyState === 'complete') { createTabbedTableFilter(); } else { window.addEventListener('load', createTabbedTableFilter); }

「https://h1g.jp/xenoblade_x/index.php?title=編集練習ページ&oldid=282」から取得