starcitizentools / mediawiki-extensions-tabberneue

A MediaWiki extension that allows wiki to create tabs.

TabberNeue

The TabberNeue extension allows wikis to create tabs within a page. It is a forked and rewritten version of Extension:Tabber. It includes multiple improvements such as page transclusion, responsive layout support, ARIA support, and conform to Wikimedia UI. TabberNeue is a complete replacement of Tabber, please disable or remove Tabber before enabling TabberNeue.

Extension:TabberNeue on MediaWiki.

Requirements

• MediaWiki 1.39 or later

Installation

You can get the extension via Git (specifying TabberNeue as the destination directory):

git clone https://github.com/StarCitizenTools/mediawiki-extensions-TabberNeue.git TabberNeue

Or download it as zip archive.

In either case, the "TabberNeue" extension should end up in the "extensions" directory of your MediaWiki installation. If you got the zip archive, you will need to put it into a directory called TabberNeue.

Usage

TabberNeue uses the exact same syntax as Tabber.

Simple tabbers

Tabs are created with tabName=tabBody, and separated by |-|. You can use any wikitext within your tabs, including templates and images.

<tabber>
|-|First Tab Title=
First tab content goes here.
|-|Second Tab Title=
Second tab content goes here.
|-|Third Tab Title=
Third tab content goes here.
</tabber>

Nested tabbers

Nested tabbers need to be written as parser functions. Instead of the <tabber/> tags, they are wrapped with {{#tag:tabber|}} and separated by {{!}}-{{!}}. It is useful when creating nested tabber.

<tabber>
|-|First Tab Title=
{{#tag:tabber|
Tab Title A=
Tab content A goes here.
{{!}}-{{!}}
Tab Title B=
Tab content B goes here.
{{!}}-{{!}}
Tab Title C=
Tab content C goes here.
}}
|-|Second Tab Title=
{{#tag:tabber|
Tab Title D=
Tab content D goes here.
{{!}}-{{!}}
Tab Title E=
Tab content E goes here.
{{!}}-{{!}}
Tab Title F=
Tab content F goes here.
}}
|-|Third Tab Title=
{{#tag:tabber|
Tab Title G=
Tab content G goes here.
{{!}}-{{!}}
Tab Title H=
Tab content H goes here.
{{!}}-{{!}}
Tab Title I=
Tab content I goes here.
}}
</tabber>

Transclusion

With the transclusion mode, the syntax is different, and it's more similar to <gallery> syntax.

The contents of the page of the first tab will be transcluded. Other tabs will be transcluded on-demand with AJAX, performing a request to the MediaWiki api. Once requested, they won't be fetched again until the page is reloaded. Note that Tabbers on the transcluded page will not be rendered.

Tabs are created with pageName|tabName, and separated by a new line.

<tabbertransclude>
First Page Name|First Tab Title
Second Page Name|Second Tab Title
Third Page Name|Third Tab Title
</tabbertransclude>

Configurations

Name	Description	Values	Default
$wgTabberNeueParseTabName	Parse tab name as wikitext. This can have a performance impact and cause unexpected behaviors.	true - enable; false - disable	false
$wgTabberNeueUseCodex	Use Codex to render Tabber. It is experimental and many features might not work as expected	true - enable; false - disable	false
$wgTabberNeueEnableAnimation	Enable or disable smooth scroll animation	true - enable; false - disable	true
$wgTabberNeueUpdateLocationOnTabChange	If enabled, when a tab is selected, the URL displayed on the browser changes. Opening this URL makes that tab initially selected	true - enable; false - disable	true

mediawiki-extensions-tabberneue's Issues

Can't scroll when cursor is over tab content

Hello, I'm an admin on the Rain World Wiki and we are interested in using this extension. Everything worked as it should in our tests, however, when on PC Chromium browsers (Chrome and Opera are the ones which had this issue out of the ones we've tested - Internet Explorer and Mozilla Firefox were both fine.) we're unable to scroll when the cursor is placed over any content contained in the tab. Scrolling outside of the tab content still works, as does pressing + dragging the scroll wheel.
https://user-images.githubusercontent.com/104025579/164063667-ec4c3e00-f65e-4d40-8933-2dedc5d03dd3.mp4

MD5 hash key appending to ID attribute makes maintaining anchor links difficult.

I would like to ask that this MD5 key be an optional setting. On the wiki I am working on we have links to specific tabs, and having to change any links to include the random hash substring anytime we change the content or just making a link to a new set is an unneccesary frustration.

Tabber categories

Any way to disable the Pages using Tabber parser tag and Pages using TabberTransclude parser tag categories?

Problem with table parsing in tabs

If a tab's contents begin with a table, the table doesn't get parsed as expected. I believe this is because __NOEDITSECTION__ gets prepended, but tables must begin on their own line. As a user, this can be worked around by inserting markup that doesn't render to anything, but just inserting newlines doesn't help because they get trimmed. I don't know if there's other markup that requires being on its own line, but if there is, it probably also doesn't work.

Example markup to reproduce the issue:

<tabber>
tab1 = {|
test1
|}
|-|
tab2 =

{|
test2
|}
|-|
tab3 = <nowiki></nowiki>
{|
test3
|}
</tabber>

magic words from outside the tabber have no effect inside tabber

Magic word behaviour switches currently have no effect on content inside a tabber. As an example, on a wiki page like this (here tested on a live environment):

__NOEDITSECTION__
<tabber>
Tab1=
===Heading===
Content
</tabber>

the __NOEDITSECTION__ will have no effect on the heading in the tab and will display the edit button. It will only work if the magic word is inside the tabber tag. My guess is that this needs to be changed to recursiveTagParse, which according to this help page is the one suitable for tags and function hooks:

• recursiveTagParse(): This returns "half-parsed" HTML, with strip markers still included, suitable for return from a tag or function hook.
• recursiveTagParseFully(): This returns fully parsed HTML, suitable for direct output to the user, for example via ParserOutput::setExtensionData().

Sadly i don't have a test environmentto actually test if it has the desired effect.

Tabbers in floating containers get sized as if to contain all tabs at once

Hello! We've recently (April 27th) switched on the ARK Survival Evolved Wiki (which I'm an administrator of) hosted on wiki.gg from the old Gamepedia-developed Tabber extension to TabberNeue. Vector skin is used, with modifications via on-site CSS and some provided by the platform. The issue is present with site CSS disabled, and on a clean MediaWiki install with completely unmodified Vector.

We noticed an issue with tabbers inside float containers in some articles, for example: https://ark.wiki.gg/wiki/Obelisk?oldid=466169#Location. Initially, this was going to be about the tabs going off-screen, but that has been addressed (we're using 1.6.1 at the moment) in 8ab7b83 which is now backported via site CSS. I'm guessing the original issue is related though.

With the patch float does not have any visible effects if the cumulative width of all tabs is higher than parent's. Even in a scenario where all tabs are sized uniformly, a single tab's content width seems to be the total width of all tabs in the tabber i.e. more than enough to house any tab's content.

Screenshot showing the issue:

Sandbox on live wiki: https://ark.wiki.gg/wiki/User:Alex4401/test?oldid=473015#constant_size_image,_single
Sandbox on a test wiki (with no wiki.gg modifications): https://ark-wcmove-sandbox.mglolenstine.xyz/wiki/Tabber_issue_test_02#Extinction-0

Duplicate images on mobile view

On the mobile view, any image within a tab that's under a section will get duplicated.

A test page can be found here: https://hololive.wiki/wiki/User:AnatoleSerial/GalleryTest

Cargo Dynamic Table Styling Broken Within Tabber

On this page, dynamic table formatted queries are being used within tabbers.

The first set of tabbers containing tables works as expected. The second set of tabbers, the one labeled "Ranged Weapon Stats", causes the styling and controls of the table to break when accessing the "Level 2" and "Level 3" tabs.

External Gifs Bug Inside Tabber

When I'm using external Gifs on the tabber, on both 1st and 2ns gif of the tabber, whenever the page loads, the tabber loads cropped, it only recovers to it's normal state if I switch tabs. But everytime you open the page it loads bugged...
Tested on Chrome, Edge, Firefox, same result on everyone.

After page loaded:

When changed to 2nd tab and back to the 1st tab:

CSS Tooltips within Tabber

The wiki I contribute to uses CSS tooltips to remind users of common information using hover text. Because tabber uses overflow: hidden, these tooltips get clipped when they appear near to any edge of a tabber section.

Is it at all possible to work around this and allow the tooltips to display properly? Pictured below are 2 images; one without and one with Tabber.

Failure in detecting end of scroll involving fractional element size

Currently

mediawiki-extensions-TabberNeue/modules/ext.tabberNeue.legacy/ext.tabberNeue.legacy.js

Line 183 in cfe539d

if ( scrollLeft + tabList.offsetWidth >= tabList.scrollWidth ) {

checks whether the navigation tab has been scrolled to the right end by comparing tabList.scrollLeft + tabList.offsetWidth and tabList.scrollWidth. This is straightforward and appears to be a common practice.

However the logic fails for me (Chrome 124.0.6367.60) due to some rounding issue. The respective values when I have scrolled to the right end are 20.571428298950195, 984 and 1005. It leads to a small cosmetic issue (the next arrow never disappears).

MDN says that scrollWidth will be rounded to integer, which is probably the cause. The document says getBoundingClientRect() can be used to obtain accurate values, however I'm not able to figure out how to get scrollWidth from it. It indeed shows a fractional width of this element (984.071533203125).

Missing Table of Contents for tabs

Is there a way to enable the TOC for the selected tab?
Maybe, it's a layer 8 problem, but I'm not able to display a TOC on any tab on pages where I use TabberNeue.

Tabbers within collapsible tables do not display their contents when the table is expanded

If a tabber is within a collapsible table, and the table starts out collapsed, then the contents within the tabs will not display when the table is expanded. The tab contents only show up after one clicks on a tab header.

A test page demonstrating this behavior has been set up here: https://hololive.wiki/wiki/User:Aesulus/TabberNeue_issue_with_collapsible_tables

Fractional pixel issue

Hello there. I believe that was an issue some time ago and was fixed, but seems like it's back again.
There are some slightly pixel movements when you switch thru tabs.

Issue tested on Google Chrome browser. On Firefox browser there is no pixel movement and it works normally.

Example: https://wiki.chromerivals.net/index.php?title=War_Point_Shop

Feature request: Wikitext for tab name for parameters input

Would it be possible to have simple parameters as tab name?

I.e. right now using

|-|{{Skill_Name|123}}=

results in

Is it possible for name to become 123 (since 123 is default for parameter Skill_Name) instead of {{Skill_Name|123}}?

PHP Deprecated Warning Spam with MediaWiki 1.41

AH01071: Got error 'PHP message: PHP Deprecated: Use of Modules must target desktop and mobile. Module name:ext.tabberNeue.mobile.styles was deprecated in MediaWiki 1.41. [Called from MediaWiki\\ResourceLoader\\StartUpModule::getScript in /var/www/vhosts/domain.com/httpdocs/includes/ResourceLoader/StartUpModule.php at line 436] in /var/www/vhosts/domain.com/httpdocs/includes/debug/MWDebug.php on line 386',

Default selected tab is transcluded into the page, which results in some issues

Default selected tab is transcluded into the page (this line).

As a result, in the mobile view, sections in the default selected tab cannot be collapsed. For example, this page.

And the contents in the default selected tab are searchable during searching, which is inconsistent with unselected tabs. Which is annoying for wiki maintainer.

The expected behavior is that all tabs are loaded using JavaScript, and the default selected tab loads when loading page, while other tabs load when clicking their tab label.

No tab text displayed

When using <tabbertransclude> tag, the output tab buttons don't have any texts inside.

After examing the code, I found that the JS side tries to get button text from data-title property of generated <article>s, but on PHP side there are no property named data-title added, only the old title property.

So this should be a bug? Modifying PHP side is sufficient.

Anchor conflicts after JS rewrite

The JS rewrite changed the anchors to just use the tab name:

mediawiki-extensions-TabberNeue/modules/ext.tabberNeue/ext.tabberNeue.js

Line 480 in d4fd1d2

href: '#' + tabId,

Before it used to append a count:

mediawiki-extensions-TabberNeue/modules/ext.tabberNeue.legacy/ext.tabberNeue.legacy.js

Line 137 in 9f44a90

let hash = mw.util.escapeIdForAttribute( title ) + '-' + count;

The old behavior meant it (accidentally?) made the anchor likely to be unique on the page. Now, if a tab name matches another tab name or a section name on a page, links to that anchor might go awry.

ID Anchor Link Issues

When linking to an ID anchor link of a div that is inside a tab, it removes everything else from the tab.

Here's an example. It removed the "Crazy Diamond" box above "Crazy Diamond Second", and only shows the latter one while leaving a large gap underneath it.

Feature request: Wikitext for tab name or otherwise style the tab name text?

A wiki I contribute to color codes a lot of text using a template that wraps text in a span and uses the article path to pick between different colors. Specifically, if it helps explain, doing something like {{color|1|some text}} where the 1 is a color code will maybe color the given text red for the article Foo/1 or Foo/2 but blue for Bar/3 or Bar/4. A user wanted to use our template as part of a tab name, but TabberNeue doesn't pass the given value to be parsed and uses it as plain text.

Is parsing the tab name as wikitext reasonable? I guess this would also allow things like putting images in the tab header, but I wouldn't be surprised if there'd be output that doesn't make sense to stick inside the HTML TabberNeue generates for the tabs.

Is there any other reasonable way to style portions of the text?

Sliver of tabber__section visible on unselected tab

3 of our users reported an issue on firefox where a thin slice of the top of a tabber section is visible when a different tab is selected. I suspect it might not be properly scrolling the content of the non-selected tab out of the viewing area.
The first image attached is the incorrect behavior described.

The 2nd image is the behavior on chrome, which is working correctly:

and finally, the incorrect behavior on firefox

Height of tabber body is wrong when used with Navbox state=collapsed

A wiki I use put <tabber> inside {{navbox}}. One of the navbox that has state=collapsed slightly breaks after the rewrite in bb110c6 (v2.1.0): Only the header of tabber (<header class="tabber__header">) appear after clicking the "[show]" link of navbox. The body part (<section class="tabber__section">) is not visible because it gets style="height: 0px;". The body shows up after clicking any tab link in the header.

The direct cause is the container of navbox content bears display: none when it's collapsed. Therefore its children do not have layout info when TabberNeue initialized at:

mediawiki-extensions-TabberNeue/modules/ext.tabberNeue/ext.tabberNeue.js

Line 136 in 82328db

section.style.height = activeTabpanelHeight + 'px';

I'm not sure if it's a use case that should be supported. Nevertheless it should count as a regression.

In nested tabbers, indentation before {{!}}-{{!}} inserts unwanted <pre></pre> node.

Observed in TabberNeue v1.7.2.

With nested tabbers, we indent to increase readability. However, adding whitespace before lines that begin with {{!}}-{{!}} causes TabberNeue to insert an unwanted <pre></pre> node in the max(n - 1, 1) subtab, where n is the first subtab that contains leading indentation before {{!}}-{{!}}.

For example,

<div style="float:right;width:290px;border:1px solid black;padding:5px;text-align:center">
<tabber>
|-|First =
 {{#tag:tabber|
 {{!}}-{{!}} 1 = A content
 {{!}}-{{!}} 2 = B content
 {{!}}-{{!}} 3 = C content
 }}
|-|Second =
 {{#tag:tabber|
 {{!}}-{{!}} 1 = D content
 {{!}}-{{!}} 2 = E content
 {{!}}-{{!}} 3 = F content
 }}
</tabber>
</div>

results in this:

Browser search finds text from all tabs instead of only active one

When searching on your browser with Ctrl F, it shows results from all tabs instead of only the currently active one. As a result, it highlights hidden content from the other tabs. Since the tab doesn't change, you can't see what was found unless you manually switch the tabs. Users reported that the older Tabber extension did not do this and only showed results from the current tab.

Ideally I think it should either show only the current tab's results, or if possible, automatically switch the tab if it highlights text from a different tab.

Example of where you can see this happening (try searching for any month like January, and you'll see there's 100 results instead of only 12 for the first tab).

Contents of nested tabs are truncated by the height of one tab header

Hi, it's me again. I just wanted to start this off by saying many of the editors at Hololive Fan Wiki love TabberNeue. Keep up the good work!

Anyways, nested tabs work well except for the fact that they are truncated by the height of one tab header. The tabs only display properly after one clicks on a top-level tab header.

A test page demonstrating this behavior has been set up here: https://hololive.wiki/wiki/User:Aesulus/TabberNeue_issue_with_nested_tabs

Tabbers not displaying correctly on some pages

TabberNeue is displaying incorrectly on some pages of my wiki. Sometimes they show up correctly, but other times they only show up as an unclickable gray bar. Our SREs have confirmed that it's an upstream issue.

Example URLs:
https://www.avid.wiki/AVID:Community_Portal
https://www.avid.wiki/AVID:Site_Staff

Example Images:

Contents of hidden tabs are sometimes visisble

Sometimes, the contents of inactive tabs are visible bleeding over into the right side of the active tab. A screenshot of the behavior is included showing a tabber containing multiple "Pros and Cons" tables, where the green "pros" of a hidden tab is encroaching on the right side of the active tab.

Currently, this behavior can be worked around by adding custom CSS to one's tabber with the following properties

• tabber__panel { display: none; }
• tabber__panel--active { display: block !important; }

Deprecated php function alert

Hello,

This is not a bug report but rather a feedback on mediawiki 1.38 and 1.39 (WMF version):

642806#0: *1362193 FastCGI sent in stderr: "PHP message: PHP Deprecated: Use of ParserOutput::addModules with non-array argument was deprecated in MediaWiki 1.38. [Called from TabberNeue\TabberNeueHooks::renderTabber in [/extensions/TabberNeue/includes/TabberNeueHooks.php](https://XXX.XXX.XXX.XXX:8443/smb/file-manager/code-editor?currentDir=%2Fhttpdocs%2Fextensions%2FTabberNeue%2Fincludes&subscriptionId=1&file=TabberNeueHooks.php&redirect=%2Fsmb%2Flog-file%2Fbrowser%2Fid%2F1) at line 40] in [/includes/debug/MWDebug.php](https://XXX.XXX.XXX.XXX:8443/smb/file-manager/code-editor?currentDir=%2Fhttpdocs%2Fincludes%2Fdebug&subscriptionId=1&file=MWDebug.php&redirect=%2Fsmb%2Flog-file%2Fbrowser%2Fid%2F1) on line 377" while reading response header from upstream

Sincerely,

Kims

ParserOutput::preventClickjacking when using TabberNeue with PageForms

I opened a bug report at https://phabricator.wikimedia.org/T324728 because I got error "Deprecated: Use of ParserOutput::preventClickjacking was deprecated in MediaWiki 1.38. [Called from PFAutoEdit::run in /home//extensions/PageForms/includes/parserfunctions/PF_AutoEdit.php at line 27] in /home//includes/debug/MWDebug.php on line 381", but then the actual dump also points to TabberNeue. I tried using an PageForms autoedit on a page by itself and did not get the error. Here is the dump:
GlobalFunctions.php line 769 calls MWDebug::deprecated()
ParserOutput.php line 2004 calls wfDeprecated()
PF_AutoEdit.php line 27 calls ParserOutput->preventClickjacking()
Parser.php line 3442 calls PFAutoEdit::run()
Parser.php line 3125 calls Parser->callParserFunction()
PPFrame_Hash.php line 276 calls Parser->braceSubstitution()
Parser.php line 1606 calls PPFrame_Hash->expand()
Parser.php line 881 calls Parser->internalParse()
Tabber.php line 91 calls Parser->recursiveTagParse()
Tabber.php line 62 calls MediaWiki\Extension\TabberNeue\Tabber::buildTab()
Tabber.php line 33 calls MediaWiki\Extension\TabberNeue\Tabber::render()
Parser.php line 4022 calls MediaWiki\Extension\TabberNeue\Tabber::parserHook()
PPFrame_Hash.php line 354 calls Parser->extensionSubstitution()
PPTemplateFrame_Hash.php line 97 calls PPFrame_Hash->expand()
Parser.php line 3313 calls PPTemplateFrame_Hash->cachedExpand()
PPFrame_Hash.php line 276 calls Parser->braceSubstitution()
Parser.php line 2954 calls PPFrame_Hash->expand()
Parser.php line 1609 calls Parser->replaceVariables()
Parser.php line 723 calls Parser->internalParse()
WikitextContentHandler.php line 301 calls Parser->parse()
ContentHandler.php line 1721 calls WikitextContentHandler->fillParserOutput()
ContentRenderer.php line 47 calls ContentHandler->getParserOutput()
RenderedRevision.php line 266 calls MediaWiki\Content\Renderer\ContentRenderer->getParserOutput()
RenderedRevision.php line 237 calls MediaWiki\Revision\RenderedRevision->getSlotParserOutputUncached()
RevisionRenderer.php line 221 calls MediaWiki\Revision\RenderedRevision->getSlotParserOutput()
RevisionRenderer.php line 158 calls MediaWiki\Revision\RevisionRenderer->combineSlotOutput()

• line - calls MediaWiki\Revision\RevisionRenderer->MediaWiki\Revision{closure}()
  RenderedRevision.php line 199 calls call_user_func()
  PoolWorkArticleView.php line 91 calls MediaWiki\Revision\RenderedRevision->getRevisionParserOutput()
  PoolWorkArticleViewCurrent.php line 97 calls PoolWorkArticleView->renderRevision()
  PoolCounterWork.php line 162 calls PoolWorkArticleViewCurrent->doWork()
  ParserOutputAccess.php line 299 calls PoolCounterWork->execute()
  Article.php line 714 calls MediaWiki\Page\ParserOutputAccess->getParserOutput()
  Article.php line 528 calls Article->generateContentOutput()
  ViewAction.php line 78 calls Article->view()
  MediaWiki.php line 542 calls ViewAction->show()
  MediaWiki.php line 322 calls MediaWiki->performAction()
  MediaWiki.php line 904 calls MediaWiki->performRequest()
  MediaWiki.php line 562 calls MediaWiki->main()
  index.php line 50 calls MediaWiki->run()
  index.php line 46 calls wfIndexMain()

Removing unwanted space under each tab.

Hello there I have some issue with unwanted space under the tab with the tabber.

Whole tabber is limited in height so you can scroll it and not see the items on the whole page (and more) is used.
I understand that you can remove that height limitation, but that will show it on whole page and I don't really want that.
The most big (in height) table will be seen as "max-height" and rest of the tables in the tabber will be big accordingly.

According to my little knowledge it's not possible to remove those spaces left under smaller tables on media wiki (or css). I might be wrong tho.
Do You have some solution to this? To remove them, or to make tabber stop scrolling when selected that tab?

Example page with that issue:
https://wiki.chromerivals.net/index.php?title=Test_Page

Attached Example Image:

Bulleted and numbered lists do not display properly if they are not on the first tab

If a bulleted or numbered list is not on the first tab, then the bullets / numbers themselves do not display properly.

Here's a test page demonstrating this behavior: https://hololive.wiki/wiki/User:Aesulus/TabberNeue_issue_with_lists

For example, if the expected result is:

1. Alice
2. Bob
3. Carol

On Firefox, the actual result is:

Alice
Bob
Carol

On Chromium-based browsers, the actual result is:

• Alice
• Bob
• Carol

AJAX issue with TabberNeue

My wiki is using <tabbertransclude> tags to show different tabs of different pages on the wiki. As long as users use the www. domain, tabs render as expected, but if the url doesn't use the www. domain, transcluded tabs will either turn into just a link, or return Error: HTTP 0 in their contents.

Hash navigation causes visual display issues in nested tabbers

Hello again from the ARK Survival Evolved Wiki. We unfortunately have to use tabbers nested three levels deep total to display creature spawning maps for a recent DLC map. Switching a tab in one of the depth-3 tabbers and refreshing the page causes depth-2 layout to be miscalculated, obscuring a number of tabs in the depth-2 tabber. The depth-3 tab also becomes visible, but depth-2 header is not updated - guessing state goes rogue.

Using Firefox 102 on Linux. Not seeing this problem on Edge - it switches only the relevant tabber, and no mangling happens.

Repro URL: https://ark.wiki.gg/wiki/Raptor#Asgard-2

Screencast showing the problem:

Peek.2022-07-22.21-31.webm

Tabbers with max depth of 2 work just fine: https://ark.wiki.gg/wiki/Seeker#Asgard-1

TabberNeue Changes Page URL

Whenever a tab element is clicked, the URL updates to include an anchor for the tab—such as BASEPAGENAME/PAGE#TAB NAME. This is undesirable behavior because it breaks the ability to use the browser's "back" functionality to return to the previous page after interacting with Tabber.