Module:Tab bar

Module documentation[view] [edit] [history] [purge]

Module that implements {{Tab bar}}

The above documentation is transcluded from Module:Tab bar/doc. (edit | history)
Editors can experiment in this module's sandbox (create | mirror) and testcases (create) pages.
Subpages of this module.

--[=[
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