#Linking to Portable Infobox Tabs with Hash

1 messages · Page 1 of 1 (latest)

modern juniper
#

Quick question - I'm trying to "deep link" to portable infobox tabs. That is, given a link like /wiki/Cairn#Displeased, it will navigate to the page Cairn and land on the infobox tab labeled Displeased. There was an extension we used on Fandom to do this (TabberLinks), but it doesn't seem to be on https://dev.miraheze.org (and it has some Fandom-specific dependencies anyway).

I was at one point, however, provided a code snippet that might work. Looking at this code snippet, would it do what I want it to accomplish? It doesn't seem to work right now, but I'm unsure if that's the cache or if the code is incorrect.

document.querySelectorAll('.portable-infobox .pi-tab-link, .portable-infobox .pi-section-tab').forEach(function(tab) {
    var tabName = tab.textContent.trim();
    infoboxTabs['#' + tabName] = tab;
});
if(typeof infoboxTabs[window.location.hash] !== 'undefined') {
    setTimeout(function() {
        infoboxTabs[window.location.hash].click();
    }, 1);
}```

Links: [Common.js page](<https://dappervolk.miraheze.org/wiki/MediaWiki:Common.js>), [Example Page 1](<https://dappervolk.miraheze.org/wiki/Colorful_Stones#Jadeite>), [Example Page 2](<https://dappervolk.miraheze.org/wiki/Cairn#Pleased>).
teal cobalt
hybrid junco
#

it can be temporarily quick test it by ?debug=2 afaik

modern juniper
#

Oooh okay! Very nice. I changed the original snippet that I had in Common.js to loading it separately via mw.loader.load("//dappervolk.miraheze.org/wiki/MediaWiki:TabLinks.js?action=raw&ctype=text/javascript");. It does work now whereas it wasn't before I changed it this morning - so now I'm wondering whether it's looking at the cached version of Common.js (with the snippet) or if I should keep using the new one. 😂 augh

Thank you both for your testing and input!!

#

Not sure whether the direct snippet or the .mw.loader.load method is better, resource-wise, but also not sure if the difference is big enough to matter

steady jasper
#

For information, loading via mw.loader.load is a little slower than loading via Common.js (or a gadget). The JS code that is downloaded onto the users' end is also not minified (I.e. it's larger than it could have been, the script isn't cached which might impede performance, the user is potentially able to see all the comments that you wrote on the script)

#

If performance is important to you then definitely consider trying to make the code work via Common.js or a Gadget

modern juniper
#

Thank you for the information, I will try! There was no difference in the code itself from just being in Common.js vs the script that I'm loading with mw.loader.load, so hopefully it will work without it 😭 Gadgets are only for logged-in users iirc (?), and most of our users don't log in, so I don't think a gadget would be the best way to go

steady jasper
#

You can set gadgets to be on by default

#

Using the syntax:

* gadget-name[ResourceLoader|default]code.js|styles.css
#

Setting them on by default will turn them on for all users, including those not logged in

modern juniper
modern juniper
#

Okay so just putting the script in Common.js for some reason doesn't work, so I'll try a gadget

steady jasper
#

Hmm, I wonder if the solution is actually as simple as wrapping everything in mw.hook('wikipage.content').add(function () { ... }) ;

#

Try putting the entirety of your Common.js code inside the braces (basically replacing ...)

modern juniper
#

Okay, I'll give it a shot!

steady jasper
#

ah i see what the problem was now, it was because one of the code lines got misplaced

image.png
modern juniper
steady jasper
#

I think you accidentally deleted var infoboxTabs = [];

modern juniper
#

oh good grief 😂 Okay! Added back, let me bully the cache and see what's what