MediaWiki:Common.js: Difference between revisions

Revision as of 13:04, 24 April 2026

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

    console.log("FINAL SYSTEM LOADED (UPGRADED)");

    /* ================= 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');

            // render dropdowns inside visible tab
            initDropdowns(target);
          }

        });
      });

    });


    /* ================= DROPDOWN SYSTEM (UPGRADED) ================= */

    function initDropdowns(scope) {

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

        if (container.dataset.rendered) 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 = '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 = 'Select something to see details';

        // SORT ALPHABETICALLY
        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';

              // ===== NEW GAME-STYLE OUTPUT =====
              if (item.lines && Array.isArray(item.lines)) {

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

              } else {
                // fallback for old system
                output.innerHTML = item.content || '';
              }
            };

            list.appendChild(option);
          });

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

        // 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";
  }
});