Rhythm Heaven Wiki

User:HyperNervie/sandbox: Difference between revisions

User page Discussion

User:HyperNervie/sandbox (view source)

Revision as of 19:49, 29 August 2025

2,078 bytes removed ,  29 August
no edit summary
(Created page with "Input these in your browser console: <pre> mw.loader.using("oojs-ui-widgets").then(function () { function convertToOOUITabber(_, tabberDiv) { const $tabberDiv = $(tabberDiv); const $labels = $tabberDiv.find( "> .rhwiki-tabberneue-menu" + "> .rhwiki-tabberneue-option" + "> .rhwiki-tabberneue-label" ); const $panels = $tabberDiv.find( "> .rhwiki-tabberneue-content" + "> .rhwiki-...")
 
No edit summary
Line 1: Line 1:
Input these in your browser console:
Input these in your browser console:
<pre>
<pre>
mw.loader.using("oojs-ui-widgets").then(function () {
mw.hook("wikipage.content").add(function ($content) {
    function convertToOOUITabber(_, tabberDiv) {
$content.find(".rhwiki-tabberneue").each(function (_, tabberDiv) {
        const $tabberDiv = $(tabberDiv);
$(tabberDiv)
        const $labels = $tabberDiv.find(
.children(".rhwiki-tabberneue-menu")
            "> .rhwiki-tabberneue-menu" +
.children(".rhwiki-tabberneue-label")
            "> .rhwiki-tabberneue-option" +
.each(function (_, labelDiv) {
            "> .rhwiki-tabberneue-label"
$(labelDiv).on("click", clickOnLabel);
        );
});
        const $panels = $tabberDiv.find(
});
            "> .rhwiki-tabberneue-content" +
function clickOnLabel() {
            "> .rhwiki-tabberneue-panel"
const $this = $(this);
        );
if ($this.hasClass("selected")) return;
        const tabPanelLayouts = [];


        $labels.each(function (i, labelDiv) {
const $tabber = $this.closest(".rhwiki-tabberneue");
            tabPanelLayouts.push(new OO.ui.TabPanelLayout({
if ($tabber.length === 0) return;
                name: i,
                expanded: false,
                label: $(labelDiv).contents(),
                $content: $($panels[i]).contents()
            }));
        });


        const classList = tabberDiv.classList;
const $labels = $tabber
        const indexLayout = new OO.ui.IndexLayout({
.children(".rhwiki-tabberneue-menu")
            expanded: false,
.children(".rhwiki-tabberneue-label");
            autoFocus: false
const selected = $labels.index($this);
        });
if (selected < 0) return;
        let shownIndex = parseInt($tabberDiv.attr("data-shown-index"));
        if (isNaN(shownIndex) || shownIndex < 0 || shownIndex >= $panels.length)
            shownIndex = 0;
        indexLayout.addTabPanels(tabPanelLayouts).setTabPanel(shownIndex);


        $tabberDiv.replaceWith(indexLayout.$element);
const $panels = $tabber
    }
.children(".rhwiki-tabberneue-content")
 
.children(".rhwiki-tabberneue-panel");
    mw.hook("wikipage.content").add(function ($content) {
for (let i = 0; i < $labels.length && i < $panels.length; i++)
        while (true) {
if (i === selected) {
            let $tabbers = $content.find(".rhwiki-tabberneue");
$($labels[i]).addClass("selected");
            if ($tabbers.length === 0) break;
$($panels[i]).removeClass("hidden");
            $tabbers.each(convertToOOUITabber);
} else {
        }
$($labels[i]).removeClass("selected");
    });
$($panels[i]).addClass("hidden");
}
}
});
});
</pre>
</pre>
Line 51: Line 42:
<hr style="margin:1em 0">
<hr style="margin:1em 0">
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.
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.
<div style="text-align:center"><!--
{{tabber
--><div class="rhwiki-tabberneue" data-shown-index="2"><!--
|shown=3
  --><div class="rhwiki-tabberneue-menu oo-ui-tabSelectWidget-framed"><!--
|tab-centered=yes
      --><div class="rhwiki-tabberneue-option oo-ui-optionWidget oo-ui-tabOptionWidget oo-ui-labelElement"><!--
|content-centered=yes
        --><span class="rhwiki-tabberneue-label oo-ui-labelElement-label"><!--
|tab-1=<span title="Rhythm Tengoku">[[File:ConsoleGBA Icon.png|32px|link=]]</span>
            --><span title="Rhythm Tengoku">[[File:ConsoleGBA Icon.png|32px|link=]]</span><!--
|content-1=[[File:Prologue GBA The Clappy Trio 2.png|240px]]
        --></span><!--
|tab-2=<span title="Rhythm Tengoku (Arcade)">[[File:ConsoleArcade Icon.png|32px|link=]]</span>
      --></div><!--
|content-2=[[File:Prologue Arcade The Clappy Trio 2.png|240px]]
      --><div class="rhwiki-tabberneue-option oo-ui-optionWidget oo-ui-tabOptionWidget oo-ui-labelElement"><!--
|tab-3=<span title="Rhythm Heaven Fever">[[File:ConsoleWii Icon.png|32px|link=]]</span>
        --><span class="rhwiki-tabberneue-label oo-ui-labelElement-label"><!--
|content-3=[[File:Prologue Wii The Clappy Trio 2.png|240px]]
            --><span title="Rhythm Tengoku (Arcade)">[[File:ConsoleArcade Icon.png|32px|link=]]</span><!--
|tab-4=<span title="Rhythm Heaven Megamix">[[File:Console3DS Icon.png|32px|link=]]</span>
        --></span><!--
|content-4=[[File:Prologue 3DS The Clappy Trio 2.png|240px]]
      --></div><!--
}}
      --><div class="rhwiki-tabberneue-option oo-ui-optionWidget oo-ui-tabOptionWidget oo-ui-labelElement oo-ui-optionWidget-selected"><!--
        --><span class="rhwiki-tabberneue-label oo-ui-labelElement-label"><!--
            --><span title="Rhythm Heaven Fever">[[File:ConsoleWii Icon.png|32px|link=]]</span><!--
        --></span><!--
      --></div><!--
      --><div class="rhwiki-tabberneue-option oo-ui-optionWidget oo-ui-tabOptionWidget oo-ui-labelElement"><!--
        --><span class="rhwiki-tabberneue-label oo-ui-labelElement-label"><!--
            --><span title="Rhythm Heaven Megamix">[[File:Console3DS Icon.png|32px|link=]]</span><!--
        --></span><!--
      --></div><!--
  --></div><!--
  --><div class="rhwiki-tabberneue-content"><!--
      --><div class="rhwiki-tabberneue-panel oo-ui-element-hidden"><!--
        -->[[File:Prologue GBA The Clappy Trio 2.png|240px]]<!--
      --></div><!--
      --><div class="rhwiki-tabberneue-panel oo-ui-element-hidden"><!--
        -->[[File:Prologue Arcade The Clappy Trio 2.png|240px]]<!--
      --></div><!--
      --><div class="rhwiki-tabberneue-panel"><!--
        -->[[File:Prologue Wii The Clappy Trio 2.png|240px]]<!--
      --></div><!--
      --><div class="rhwiki-tabberneue-panel oo-ui-element-hidden"><!--
        -->[[File:Prologue 3DS The Clappy Trio 2.png|240px]]<!--
      --></div><!--
  --></div><!--
--></div>
</div>
HyperNervie
420

edits

Retrieved from "https://rhwiki.net/wiki/Special:MobileDiff/98487"