MediaWiki:Common.js: Difference between revisions

Revision as of 13:08, 24 April 2026

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

    console.log("FINAL SYSTEM LOADED (FULL REWRITE)");

    /* ================= TAB SYSTEM (SCOPED + SAFE) ================= */

    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 children tabs
          container.querySelectorAll(':scope > .mw-tab-content').forEach(c => {
            c.classList.remove('active');
          });

          const target = container.querySelector('#' + tabId);
          if (target) {
            target.classList.add('active');

            // initialize dropdowns inside this tab
            initDropdowns(target);
          }

        });
      });

    });


    /* ================= DROPDOWN SYSTEM (FULL UPGRADE) ================= */

    function initDropdowns(scope) {

      scope.querySelectorAll('.mw-dropdown-ui[data-options]').forEach(container => {

        if (container.dataset.rendered === "true") return;

        let data;
        try {
          data = JSON.parse(container.dataset.options);
        } catch (e) {
          console.error("Bad dropdown JSON:", e);
          return;
        }

        container.innerHTML = '';

        // ===== BUTTON =====
        const btn = document.createElement('div');
        btn.className = 'mod-dropdown-btn';
        btn.textContent = container.dataset.label || 'Select One';

        // ===== LIST =====
        const list = document.createElement('div');
        list.className = 'mod-dropdown-list';

        // ===== OUTPUT =====
        const output = document.createElement('div');
        output.className = 'mw-dropdown-output';
        output.innerHTML = '<div class="mw-ui-placeholder">Select something to see details</div>';

        // ===== SORT + BUILD =====
        Object.values(data)
          .sort((a, b) => a.label.localeCompare(b.label))
          .forEach(item => {

            const option = document.createElement('div');
            option.className = 'mod-dropdown-item';
            option.textContent = item.label;

            option.onclick = () => {

              btn.textContent = item.label;
              list.style.display = 'none';

              let lines = [];

              // ===== NEW FORMAT =====
              if (item.lines && Array.isArray(item.lines)) {
                lines = item.lines;
              }

              // ===== OLD FORMAT AUTO-CONVERT =====
              else if (item.content) {
                lines = item.content
                  .split(';')
                  .map(s => s.trim())
                  .filter(Boolean);
              }

              // ===== RENDER =====
              output.innerHTML =
                `<div class="mw-ui-title">${item.label}</div>` +
                lines.map(line =>
                  `<div class="mw-ui-line">${line}</div>`
                ).join('');
            };

            list.appendChild(option);
          });

        // ===== TOGGLE DROPDOWN =====
        btn.onclick = (e) => {
          e.stopPropagation();
          list.style.display = list.style.display === 'block' ? 'none' : 'block';
        };

        // ===== CLOSE WHEN CLICK OUTSIDE =====
        document.addEventListener('click', () => {
          list.style.display = 'none';
        });

        // ===== BUILD =====
        container.appendChild(btn);
        container.appendChild(list);
        container.appendChild(output);

        container.dataset.rendered = "true";

      });

    }


    /* ================= INITIAL LOAD ================= */

    document.querySelectorAll('.mw-tab-buttons').forEach(group => {
      const first = group.querySelector('.mw-tab-btn');
      if (first) first.click();
    });

  });
});


/* ================= DISCORD TAB ================= */

$(function () {
  const discussionTab = document.querySelector('#ca-talk a');

  if (discussionTab) {
    discussionTab.href = "https://discord.com/invite/FZtkXeGeUA";
    discussionTab.target = "_blank";
    discussionTab.textContent = "Discord";
  }
});