Deep linking directly to tabs

[mbilsky]

Setup

• Browsers and versions: Chrome (and all)
• MediaWiki version: 1.32.1
• Database version: 5.6.40
• PHP version: 7.0.33
• Pivot version: 2.1.0

Issue

I am trying to setup deep linking so I can direct users directly to a tab. The tabs are setup and working correctly but I can't seem to figure out a simple work around.

I have been trying to integrate the techniques shown here without success: https://foundation.zurb.com/sites/docs/tabs.html#panel1d

Am I doing something wrong or is this not a feature currently available in Pivot?

[mbilsky]

Actually, I just did some reverse engineering through the code and found that changing:

deep_linking : false, to deep_linking : true,

at the top of assets\scripts\foundation\foundation.tab.js seems to have enabled deep linking!

Is this bad to have done/will break anything that you can think of?

If not, a suggestion would be to consider adding a parameter to the configuration array to enable this.

Here is the page I am using it on: https://mattbilsky.com/mediawiki/index.php?title=Impossible_Incorporated_LLC#Home

... it even seems to work with the domain I have forwarding to it (i.e. if you go to https://ImpossibleIncorporated.com#Consulting it will take you directly to the consulting page even though the domain only forwards to the mediawiki page). Pretty cool.

Otherwise, Pivot has been amazing!!! Keep up the great work!

[Hutchy68]

Cool, but you are using Foundation 6 docs and Pivot is Foundation 5.

See https://stackoverflow.com/questions/20894632/deep-linking-foundation-5-tabs

and

https://foundation.zurb.com/sites/docs/v/5.5.3/components/tabs.html which contains a deep-link to a 3rd panel. Here is the code that makes it possible.

<ul class="tabs" data-tab="" role="tablist" data-options="deep_linking: true">
<li class="tab-title" role="presentational"><a href="#tabs-deeplink-1" role="tab" tabindex="0" aria-selected="false" controls="tabs-deeplink-1">Tab 1</a></li>
<li class="tab-title" role="presentational"><a href="#tabs-deeplink-2" role="tab" tabindex="0" aria-selected="false" controls="tabs-deeplink-2">Tab 2</a></li>
<li class="tab-title active" role="presentational"><a href="#tabs-deeplink-3" role="tab" tabindex="0" aria-selected="true" controls="tabs-deeplink-3">Tab 3</a></li>
</ul>

[mbilsky]

That makes sense...and works (I disabled my bodge and used that code).

Thanks for the quick reply! Hopefully this will help anyone with the same idea