User:HyperNervie/sandbox: Difference between revisions
Jump to navigation
Jump to search
HyperNervie (talk | contribs) No edit summary |
HyperNervie (talk | contribs) No edit summary |
||
| Line 46: | Line 46: | ||
|tab-centered=yes | |tab-centered=yes | ||
|content-centered=yes | |content-centered=yes | ||
|tab-1= | |tab-1=[[File:ConsoleGBA Icon.png|32px|link=]] | ||
|content-1=[[File:Prologue GBA The Clappy Trio 2.png|240px]] | |content-1=[[File:Prologue GBA The Clappy Trio 2.png|240px]] | ||
|tab-2= | |tab-2=[[File:ConsoleArcade Icon.png|32px|link=]] | ||
|content-2=[[File:Prologue Arcade The Clappy Trio 2.png|240px]] | |content-2=[[File:Prologue Arcade The Clappy Trio 2.png|240px]] | ||
|tab-3= | |tab-3=[[File:ConsoleWii Icon.png|32px|link=]] | ||
|content-3=[[File:Prologue Wii The Clappy Trio 2.png|240px]] | |content-3=[[File:Prologue Wii The Clappy Trio 2.png|240px]] | ||
|tab-4= | |tab-4=[[File:Console3DS Icon.png|32px|link=]] | ||
|content-4=[[File:Prologue 3DS The Clappy Trio 2.png|240px]] | |content-4=[[File:Prologue 3DS The Clappy Trio 2.png|240px]] | ||
}} | }} | ||
Latest revision as of 20:10, 29 August 2025
Input these in your browser console:
mw.hook("wikipage.content").add(function ($content) {
$content.find(".rhwiki-tabberneue").each(function (_, tabberDiv) {
$(tabberDiv)
.children(".rhwiki-tabberneue-menu")
.children(".rhwiki-tabberneue-label")
.each(function (_, labelDiv) {
$(labelDiv).on("click", clickOnLabel);
});
});
function clickOnLabel() {
const $this = $(this);
if ($this.hasClass("selected")) return;
const $tabber = $this.closest(".rhwiki-tabberneue");
if ($tabber.length === 0) return;
const $labels = $tabber
.children(".rhwiki-tabberneue-menu")
.children(".rhwiki-tabberneue-label");
const selected = $labels.index($this);
if (selected < 0) return;
const $panels = $tabber
.children(".rhwiki-tabberneue-content")
.children(".rhwiki-tabberneue-panel");
for (let i = 0; i < $labels.length && i < $panels.length; i++)
if (i === selected) {
$($labels[i]).addClass("selected");
$($panels[i]).removeClass("hidden");
} else {
$($labels[i]).removeClass("selected");
$($panels[i]).addClass("hidden");
}
}
});
Current "TabStart-content-TabEnd" solution renders a series of pairs of label and panel. Before MediaWiki:Gadget-Tabber.js is loaded, all panels are visible. In extreme cases where the script fails to load, the panels are left there forever.
Here we have only one visible panel at the beginning, and the labels are styled properly so that when MediaWiki:Gadget-Tabber.js loads, there won't be any change to page appearance. Even if the script doesn't load successfully, readers just can't switch panels by clicking on labels.