Module:Better tabber

Documentation for this module may be created at Module:Better tabber/doc

local p = {}

function p.generate( frame )
	local contents = ''
	local header = ''
	local css = ''
	local args = frame:getParent().args
	
	for i = tonumber(args['nt']),1,-1 do
		local tid -- tab id
		if args['id' .. i] == nil then tid = 'tab' .. i
		else tid = args['id' .. i] end
		
		contents = contents .. '<div id="' .. tid .. '">' .. args['c' .. i] .. '</div>'
		header = '<span id="' .. tid .. '">[[#' .. tid .. '|' ..  args['h' .. i] .. ']]</span>' .. header
	end
	return '<div class="b-tabber">' .. contents .. '<div class="b-tabber-header">' .. header .. '</div></div>'
end

function p.generate_css( frame )
	local css = ''
	local args = frame:getParent().args
	
	local t1id
	if args['id1'] == nil then t1id = 'tab1'
	else t1id = args['id1'] end
	css = [[
.b-tabber > div:not(.b-tabber-header), .b-tabber > div:not(#]] .. t1id .. '):target ~ #' .. t1id .. [[{display: none;}
.b-tabber > div:target, .b-tabber > div#]] .. t1id .. '{display: block;}'

	if args['customcss'] ~= 'true' then
		css = css .. ':is(.b-tabber > :is(div#' .. t1id .. ':target,div#' .. t1id .. ':not(.b-tabber > div:not(#' .. t1id .. '):target ~ #' .. t1id .. ')) ~ .b-tabber-header #' .. t1id
	end
	
	for i = tonumber(args['nt']),1,-1 do
		local tid -- tab id
		if args['id' .. i] == nil then tid = 'tab' .. i
		else tid = args['id' .. i] end
		
		if i > 1 and args['customcss'] ~= 'true' then
			css = css .. ',\n.b-tabber > div#' .. tid ..':target ~ .b-tabber-header #' .. tid
		end
	end
	
	if args['customcss'] ~= 'true' then
		css = css .. [[) :is(a,a:visited) {
box-shadow: inset 0 -2px 0 0 #3366cc;
color: #36c;
}
.b-tabber {
display: flex;
flex-direction: column-reverse;
}
.b-tabber-header {
display: flex;
overflow: auto hidden;
scrollbar-width: none;
box-shadow: inset 0 -1px 0 0 #a2a9b1;
}
.b-tabber-header a {
display: inline-flex;
align-items: center;
padding: 0.5em 0.75em;
color: #54595d;
font-weight: bold;
text-decoration: none;
white-space: nowrap;
}
.b-tabber-header :is(a,a:visited) {
color: #54595d;
}
.b-tabber-header a:hover {
box-shadow: inset 0 -2px 0 0 #447ff5;
color: #447ff5;
}
.b-tabber-header a:active {
box-shadow: inset 0 -2px 0 0 #2a4b8d;
color: #2a4b8d;
}
.b-tabber-header p {
margin: 0;
}
]]
	end
	return css
end

return p