|
|
| Line 1: |
Line 1: |
| mw.loader.using(['mediawiki.util']).then(function () { | | mw.loader.using('mediawiki.util').then(function () { |
| $(function () { | | $(function () { |
|
| |
|
| /* ================= ORIGINAL DROPDOWN SYSTEM (RESTORED) ================= */ | | // === ORIGINAL WORKING DROPDOWN SYSTEM === |
| | |
| document.querySelectorAll('.mw-dropdown-ui').forEach(container => { | | document.querySelectorAll('.mw-dropdown-ui').forEach(container => { |
| const select = container.querySelector('select'); | | const select = container.querySelector('select'); |
| Line 16: |
Line 15: |
| if (target) target.style.display = 'block'; | | if (target) target.style.display = 'block'; |
| }); | | }); |
| });
| |
|
| |
|
| |
| /* ================= TAB SYSTEM (SAFE VERSION) ================= */
| |
|
| |
| document.querySelectorAll('.mw-tab-buttons').forEach(group => {
| |
|
| |
| const buttons = group.querySelectorAll('.mw-tab-btn');
| |
|
| |
| buttons.forEach(btn => {
| |
| btn.addEventListener('click', function () {
| |
|
| |
| const tabId = this.getAttribute('data-tab');
| |
|
| |
| // deactivate ONLY this group
| |
| buttons.forEach(b => b.classList.remove('active'));
| |
| this.classList.add('active');
| |
|
| |
| const container = group.parentElement;
| |
|
| |
| // hide ONLY direct tab contents
| |
| container.querySelectorAll(':scope > .mw-tab-content').forEach(c => {
| |
| c.classList.remove('active');
| |
| });
| |
|
| |
| const target = container.querySelector('#' + tabId);
| |
| if (target) {
| |
| target.classList.add('active');
| |
|
| |
| // 🔥 init mod system safely
| |
| initModSystems(target);
| |
| }
| |
|
| |
| });
| |
| });
| |
|
| |
| });
| |
|
| |
|
| |
| /* ================= MOD SYSTEM (ADDED SAFELY) ================= */
| |
|
| |
| function initModSystems(scope) {
| |
|
| |
| scope.querySelectorAll('.mod-system').forEach(container => {
| |
|
| |
| if (container.dataset.loaded) return;
| |
| container.dataset.loaded = "true";
| |
|
| |
| const modType = container.dataset.mod;
| |
| const db = document.querySelector(`#mod-database [data-mod="${modType}"]`);
| |
| if (!db) return;
| |
|
| |
| const left = db.querySelector('[data-left]');
| |
| const right = db.querySelector('[data-right]');
| |
| if (!left || !right) return;
| |
|
| |
| const leftData = JSON.parse(left.dataset.left);
| |
| const rightData = JSON.parse(right.dataset.right);
| |
|
| |
| const wrapper = document.createElement('div');
| |
| wrapper.className = 'mw-dropdown-ui';
| |
| wrapper.setAttribute('data-label', 'Select Mod');
| |
|
| |
| const output = document.createElement('div');
| |
| output.className = 'mw-dropdown-output';
| |
| output.textContent = 'Select options to see details';
| |
|
| |
| let selectedLeft = null;
| |
| let selectedRight = null;
| |
|
| |
| function updateOutput() {
| |
| if (!selectedLeft || !selectedRight) return;
| |
|
| |
| const key = `${selectedLeft}__${selectedRight}`;
| |
| const content = db.querySelector(`[data-key="${key}"]`);
| |
| output.innerHTML = content ? content.innerHTML : "No data found";
| |
| }
| |
|
| |
| function createDropdown(data, label, isLeft) {
| |
| const div = document.createElement('div');
| |
| div.className = 'mod-dropdown';
| |
|
| |
| const btn = document.createElement('div');
| |
| btn.className = 'mod-dropdown-btn';
| |
| btn.textContent = label;
| |
|
| |
| const list = document.createElement('div');
| |
| list.className = 'mod-dropdown-list';
| |
|
| |
| Object.entries(data).forEach(([key, val]) => {
| |
| const item = document.createElement('div');
| |
| item.className = 'mod-dropdown-item';
| |
| item.textContent = val;
| |
|
| |
| item.onclick = () => {
| |
| btn.textContent = val;
| |
| list.style.display = 'none';
| |
|
| |
| if (isLeft) selectedLeft = key;
| |
| else selectedRight = key;
| |
|
| |
| updateOutput();
| |
| };
| |
|
| |
| list.appendChild(item);
| |
| });
| |
|
| |
| btn.onclick = () => {
| |
| list.style.display = list.style.display === 'block' ? 'none' : 'block';
| |
| };
| |
|
| |
| div.appendChild(btn);
| |
| div.appendChild(list);
| |
|
| |
| return div;
| |
| }
| |
|
| |
| wrapper.appendChild(createDropdown(leftData, 'Select Mod', true));
| |
| wrapper.appendChild(createDropdown(rightData, 'Select Type', false));
| |
| wrapper.appendChild(output);
| |
|
| |
| container.appendChild(wrapper);
| |
|
| |
| });
| |
|
| |
| }
| |
|
| |
|
| |
| /* ================= INITIAL LOAD ================= */
| |
|
| |
| document.querySelectorAll('.mw-tab-buttons').forEach(group => {
| |
| const first = group.querySelector('.mw-tab-btn');
| |
| if (first) first.click();
| |
| }); | | }); |
|
| |
|
| }); | | }); |
| }); | | }); |