BachelorDragon.png

The bachelor programme Celtic Languages and Culture at Utrecht University is under threat.


arraysize: 0


Surviving Parsoid: Bootstrap Nav Tabs with a simple parser function

Most of the navigation tabs you'll meet on this site use the NavTabs component of the Bootstrap 4 library. To continue supporting dynamic applications of this component, we need to stop using the Variables/Arrays-based approach and find an alternative. That alternative is a flexible and easy to use parser function which I created that can generate the required HTML and makes for cleaner code, generally speaking.
Sometimes when the content of a page needs to be broken up into different sections, tab-based navigation can be a good way to create visual distinction and ease of use. When the appearance of a page is variable, typically because it allows for user interaction, not all sections may necessarily have content. After all, a semantic query may not return relevant results if the argument changes.

What to do?

  • If there is nothing to show, both the navigation header and the content pane should be suppressed.
  • By default, it is the first relevant section that should be visible/active, but sections that get suppressed should be ignored.
  • Sometimes we want to show the number of results as part of each tab heading.

The parser function

The parser function is currently part of the CODECS Resources extension. You can have any number of sections as long as you use the sets of header/show/pane parameters as explained below. If usefilter is set to true (default), the show parameter determines whether or not a section is suppressed.

{{#cr-nav-tabs:
|uniquename= // Name element to be used for HTML ids. Default: cr. Always provide a different name if you use the parser function again on the same page.
|headerclass= // Optional. Defaults to nav nav-tabs
|showresultcount=false/true // Whether to show 'show1', etc., as a result count in the navigation headers. Default: false.
|usefilter=true/false. // Default: true. If the filter is used, any section with a 'show' parameter that equals 0 will be suppressed. If the filter is disabled, all sections will be shown regardless. 

//Section 1:
|header1=Content of the tab header.
|show1= // If show1 is 0 (and usefilter=true), this section will be suppressed. This means we can use a semantic query with format=count. 
|pane1=Content of the tab pane. 

//Section 2:
|header2=
|show2=
|pane2=

//Section 3:
|header3=
|show3=
|pane3=

//etc.
}}

Sample output

Results for "Publications" go here...

Texts attributed to person X go here...