Jump to content

MediaWiki:Common.js: Difference between revisions

From Once Human Guide
No edit summary
No edit summary
Line 45: Line 45:
});
});
document.addEventListener("DOMContentLoaded", function () {
document.addEventListener("DOMContentLoaded", function () {
   const container = document.getElementById("dropdown-container");
   document.querySelectorAll(".mw-dropdown-ui").forEach(container => {
  if (!container) return;
    const data = JSON.parse(container.dataset.options || "{}");


  container.innerHTML = `
     // Build dropdown
     <select id="myDropdown">
    let select = document.createElement("select");
      <option value="">Select one</option>
     select.style.padding = "6px";
      <option value="one">Raw Hide</option>
      <option value="two">Option 2</option>
      <option value="three">Option 3</option>
     </select>
    <div id="output" style="margin-top:10px;">Pick something above</div>
  `;


  document.getElementById("myDropdown").addEventListener("change", function () {
    let defaultOption = document.createElement("option");
     const value = this.value;
    defaultOption.value = "";
     const output = document.getElementById("output");
     defaultOption.textContent = "Select one";
     select.appendChild(defaultOption);


     if (value === "one") {
     Object.keys(data).forEach(key => {
      output.innerHTML = "Nothing";
      let opt = document.createElement("option");
     } else if (value === "two") {
      opt.value = key;
      output.innerHTML = "This is content for Option 2";
      opt.textContent = data[key].label;
     } else if (value === "three") {
      select.appendChild(opt);
       output.innerHTML = "This is content for Option 3";
    });
    } else {
 
       output.innerHTML = "Pick something above";
    // Output panel
     }
    let 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
    let wrapper = document.createElement("div");
    wrapper.style.display = "flex";
    wrapper.style.gap = "20px";
 
    wrapper.appendChild(select);
    wrapper.appendChild(output);
    container.appendChild(wrapper);
 
    // Change event
    select.addEventListener("change", function () {
       let val = this.value;
 
      if (!val || !data[val]) {
        output.innerHTML = "Pick something";
        return;
      }
 
       output.innerHTML = `
        <b>${data[val].label}</b><br><br>
        ${data[val].content}
      `;
     });
   });
   });
});
});

Revision as of 13:55, 21 April 2026

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

    });
});
document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll(".mw-dropdown-ui").forEach(container => {
    const data = JSON.parse(container.dataset.options || "{}");

    // Build dropdown
    let select = document.createElement("select");
    select.style.padding = "6px";

    let defaultOption = document.createElement("option");
    defaultOption.value = "";
    defaultOption.textContent = "Select one";
    select.appendChild(defaultOption);

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

    // Output panel
    let 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
    let wrapper = document.createElement("div");
    wrapper.style.display = "flex";
    wrapper.style.gap = "20px";

    wrapper.appendChild(select);
    wrapper.appendChild(output);
    container.appendChild(wrapper);

    // Change event
    select.addEventListener("change", function () {
      let val = this.value;

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

      output.innerHTML = `
        <b>${data[val].label}</b><br><br>
        ${data[val].content}
      `;
    });
  });
});