MediaWiki:Common.js: Difference between revisions

Revision as of 22:01, 21 April 2026

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

    console.log("FINAL SYSTEM LOADED");

    /* ================= 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 (DATA-OPTIONS ONLY) ================= */

    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;
        }

        // CLEAR ONLY ONCE (safe)
        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.textContent = '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';
              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();
    });

  });
});