Module:Tab bar
Jump to navigation
Jump to search
--[=[
Tab bars that emulates an OOUI frameless tab bar
Ideally:
* Responsive (ie. they wrap sanely and work on mobile)
* Fit in with the OOUI design paradigm
* Accessible
]=]
local p = {} --p stands for package
local getArgs = require('Module:Arguments').getArgs
--[=[
Generate a tab bar that emulates an OOUI frameless tab bar
]=]
function p.tab_bar(frame)
local args = getArgs(frame)
local outer = mw.html.create('div')
:addClass('wst-tabbar')
:attr('role', 'tablist')
:attr('aria-disabled', 'false')
if args['align'] then
outer:css('text-align', args['align'])
end
local tabIndex = 0
while true do
tabIndex = tabIndex + 1
local link = args['link-' .. tabIndex]
local text = args['tab-' .. tabIndex]
-- end of params
if link == nil and text == nil then
break
end
local wtext
if link ~= nil then
if text ~= nil then
wtext = '[[' .. link .. '|' .. text .. ']]'
else
wtext = '[[' .. link .. '|' .. link .. ']]'
end
else
wtext = text
end
local tab = outer:tag('div')
:addClass('wst-tabbar-tab')
:attr('role', 'tab')
:attr('aria-disabled', 'false')
local label = tab:tag('span')
:addClass('wst-tabbar-label')
:wikitext(wtext)
local selected = false
if args['selected'] then
-- explicitly set
selected = tonumber(args['selected']) == tabIndex
else
-- check for a link match
selected = link == mw.title.getCurrentTitle().fullText
end
if selected then
tab:addClass('wst-tabbar-selected')
:attr('aria-selected', 'true')
else
tab:attr('aria-selected', 'false')
end
outer:wikitext()
end
return outer
end
return p