Module:Sandbox/SD0001/Tabbed window: Difference between revisions

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

Experimental port of mw:MediaWiki:Gadget-tabbedwindow.js which uses {{Calculator}}. No-JS behaviour is quite broken.

Demo: User:SD0001/Tabbed window.

Usage

{{#invoke:Sandbox/SD0001/Tabbed window|main|tab1=tab1|content1=content1|tab2=tab2|content2=content2}}

More than 2 tabs are supported as well.

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

local Arguments = require('Module:Arguments')
local Calculator = require('Module:Sandbox/SD0001/Calculator')

local p = {}

p.main = function(frame)
	local args = Arguments.getArgs(frame)
	local tabs = getTabs(args)

	local calc = Calculator:new({ class='tpl-tabbed-window', refreshOnLoad = true })
	calc:hidden({ id = 'header', default = 1})

	for idx, tab in ipairs(tabs) do
		calc:hidden({ id = 'h'..idx, formula = 'ifequal(header,'..idx..')', default = (idx == 1 and 1 or 0) })
	end
	
	local panelHeader = calc:subContainer({ 
		style = 'background-color: var(--background-color-interactive, #eaecf0)' 
	})

	for idx, tab in ipairs(tabs) do
		panelHeader:button({ contents = tab.header, type = 'default', weight = 'quiet', formula = idx,  ['for'] = 'header',
			role = 'tab', style = 'background-color:rgba(255,255,255,var(--calculator-h'..idx..'))' })
	end
	
	for idx, tab in ipairs(tabs) do
		calc:hideIfZero({ class = 'panel', role = 'tabpanel', formula = 'h'..idx, text = tab.content })
	end

	return frame:extensionTag('templatestyles', '', {src = 'User:SD0001/Tabbed window/styles.css'})
		.. tostring(calc)
end

function getTabs(args)
	local tabs = {}
	for param, value in pairs(args) do
		if string.match(param, "^tab%d+") ~= nil then
			local num = tonumber(string.match(param, '%d+'))
			if num ~= nil and args['content'..num] ~= nil then
				tabs[num] = {header = value, content = args['content'..num]}
			end
		end
	end
	return tabs
end


return p