MediaWiki:Common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

mw.loader.using('mediawiki.util').then(function () {
    $(function () {

        // Rename Discussion → Discord
        const talkTab = document.querySelector('#ca-talk a');
        const talkItem = document.querySelector('#ca-talk');

        if (talkTab) {
            talkTab.textContent = 'Discord';
            talkTab.href = 'https://discord.gg/FZtkXeGeUA';
            talkTab.target = '_blank';
            talkTab.rel = 'noopener noreferrer';

            talkTab.addEventListener('click', function (e) {
                e.preventDefault();
                window.open('https://discord.gg/FZtkXeGeUA', '_blank');
            });
        }

        // Add Road Map BEFORE Discord
        const tabList = document.querySelector('#p-associated-pages .vector-menu-content-list, #p-namespaces .vector-menu-content-list');

        if (tabList && !document.getElementById('ca-roadmap')) {
            const li = document.createElement('li');
            li.id = 'ca-roadmap';
            li.className = talkItem ? talkItem.className.replace(/\bselected\b|\bactive\b/g, '').trim() : 'mw-list-item';

            const a = document.createElement('a');
            a.href = 'https://ohwikiguide.com/index.php/Road_Map';

            const span = document.createElement('span');
            span.textContent = 'Road Map';

            a.appendChild(span);
            li.appendChild(a);

            if (talkItem) {
                tabList.insertBefore(li, talkItem);
            } else {
                tabList.appendChild(li);
            }
        }

    });
});
mw.loader.using('mediawiki.util').then(function () {
  $(function () {

    document.querySelectorAll('.mw-dropdown-ui').forEach(container => {

      let raw = container.getAttribute('data-options');
      if (!raw) return;

      let data;

      try {
        data = JSON.parse(raw);
      } catch (e) {
        console.error('Dropdown JSON error:', e);
        container.innerHTML = '<span style="color:red;">Invalid dropdown data</span>';
        return;
      }

      // Create dropdown
      const select = document.createElement('select');
      select.style.padding = '6px';

      const defaultOption = document.createElement('option');
      defaultOption.value = '';
      defaultOption.textContent = 'Select one';
      select.appendChild(defaultOption);

      Object.keys(data).forEach(key => {
        const opt = document.createElement('option');
        opt.value = key;
        opt.textContent = data[key].label;
        select.appendChild(opt);
      });

      // Create output panel
      const output = document.createElement('div');
      output.style.marginLeft = '20px';
      output.style.padding = '12px';
      output.style.border = '1px solid #444';
      output.style.background = '#111';
      output.style.minWidth = '250px';
      output.innerHTML = 'Pick something';

      // Layout wrapper
     const wrapper = document.createElement('div');
wrapper.style.display = 'flex';
wrapper.style.gap = '20px';
wrapper.style.alignItems = 'flex-start';

// LEFT SIDE (Dropdown + Label)
const left = document.createElement('div');

const leftLabel = document.createElement('div');
leftLabel.textContent = 'Hide';
leftLabel.style.marginBottom = '6px';
leftLabel.style.fontWeight = 'bold';

left.appendChild(leftLabel);
left.appendChild(select);

// RIGHT SIDE (Output + Label)
const right = document.createElement('div');

const rightLabel = document.createElement('div');
rightLabel.textContent = 'Perks';
rightLabel.style.marginBottom = '6px';
rightLabel.style.fontWeight = 'bold';

right.appendChild(rightLabel);
right.appendChild(output);

// Add both sides
wrapper.appendChild(left);
wrapper.appendChild(right); container.appendChild(wrapper);

      // Change handler
      select.addEventListener('change', function () {
        const val = this.value;

        if (!val || !data[val]) {
          output.innerHTML = 'Pick something';
          return;
        }

        output.innerHTML =
          '<b>' + data[val].label + '</b><br><br>' +
          data[val].content;
      });

    });

  });
});


console.log("COMMON JS LOADED");