Module:Sandbox/Harej/TabNav

Module documentation

[view] [edit] [history] [purge]

The TabNav module lets you build tab navigation systems via the module's "build" method. It is recommended that you use this module via the template User:Harej/Sandbox/JamesHareTask2/template. (In real-world usage, the template would have a less hideous name.) The module documentation will assume that you are using the template, rather than the module directly.

Usage

Basic usage

You may use this module with the default design. The first header block on User:Harej/Sandbox/JamesHareTask2 shows off the default design.

You could think of TabNav as having three parts: the header, the table of contents, and the body (optional). The header identifiers the page, the table of contents links to other pages, and the body section allows you to have a body of content visually connected to the header block (though this is optional).

Header

| headertext = The headline for the page. Required.
| headercolor = The color. Default value is #ddd – a shade of gray
| width = The width of the entire block, including the body if you are using the body parameter. Default width is 65em.

Table of contents

Each tab in the table of contents is numbered. There are no limits on how many tabs you can have, though if there are more tabs than there is room in the header then it may appear broken.

For each tab there must be an entrylabel followed by a number, indicating which order the tab comes in. For example, the first tab would have entrylabel1 = NAME.

The other per-tab parameters are optional. To link to another page, you would use entrylinkN = PAGENAME. Right now you can only use internal links; external links are not supported. To specify an icon, use entryiconN = FILENAME (without the "File:" prefix). To change the color so that it is not black, use entrycolorN = COLOR.

If you want to shade the "selected" tab (i.e. the tab representing the current page), use selectedtab = N, where N is the number of the tab to be shaded.

As an example for a selected tab called "Introduction" with File:OOjs UI icon flag-ltr.svg as the icon, with a red color, linking to Main Page:

| entrylabel1 = Introduction
| entrycolor1 = red
| entryicon1 = OOjs UI icon flag-ltr.svg
| entrylink1 = Main Page
| selectedtab = 1

Body

The body parameter is optional.

| body = Whatever content you want to use.

Advanced usage

TabNav gives you near-total control over the styling of the header block.

Customize the header

The headerstyle parameter lets you change the CSS styling for the header. However, to change the background color, it is still recommended that you use headercolor.

The default headerstyle is as follows:

| headerstyle = color:#fff; width:100%; text-align:right; padding-right:0.5em; font-weight:bold; font-size:250%;

If you just want to make small adjustments, it is recommended you copy that line and make your changes there. Otherwise, you will completely overwrite the style settings.

It is important that you end your line with a semicolon, as above.

Customize the tabs

The tabstyle parameter lets you change the CSS styling for the tabs as a whole. Changes you make here affect all the tabs. However, you should continue to define tab colors on an individual basis via tabcolorN.

The default tabstyle is as follows:

| tabstyle = font-weight:bold; padding:1.1em; margin-right:0.3em; min-width:50px; text-align:center; font-size:110%; border-top:6px solid;

If you just want to make small adjustments, it is recommended you copy that line and make your changes there. Otherwise, you will completely overwrite the style settings.

It is important that you end your line with a semicolon, as above.

The above documentation is transcluded from Module:Sandbox/Harej/TabNav/doc. (edit | history)
Editors can experiment in this module’s sandbox (create | mirror) and testcases (create) pages.
Please add categories to the /doc subpage. Subpages of this module.

local p = {}

function topbar(headertext, headercolor, headerstyle)
	res = '<div id="tabnav-topbar" style="' .. headerstyle .. ' background:' .. headercolor .. ';">'
	res = res .. headertext
	res = res .. '</div>'
	return res
end

function tableofcontents(tabstyle, selectedtab, entrylabel, entrylink, entryicon, entrycolor)
	res = '<div id="tabnav-toc" style="margin-left:0.7em; margin-bottom:1em; padding-top:2em;">'
	
	for num, entry in pairs(entrylabel) do
		tab = '<span id="tabnav-toc-item-' .. num .. '" style="' .. tabstyle
		if entrycolor[num] == nil then
			entrycolor[num] = '#000'
		end
		tab = tab .. ' border-top-color:' .. entrycolor[num] .. '; color: ' .. entrycolor[num] .. ';'
		if num == tonumber(selectedtab) then
			tab = tab .. ' background:#efefef;'
		end
		tab = tab .. '">'
		if entrylink[num] ~= nil then
			entry = '[[' .. entrylink[num] .. '|<span style="color:' .. entrycolor[num] .. '">' .. entry .. '</span>]]'
		end
		if entryicon[num] ~= nil then
			entry = '[[File:' .. entryicon[num] .. '|25px|link=]]' .. entry
		end
		tab = tab .. entry
		tab = tab .. '</span>'
		res = res .. tab
	end

	res = res .. '</div>'
	return res
end

function pagebody(body)
	res = '<div id="tabnav-body-container" style="margin-top:0; margin-left:0.7em; background:#efefef; width:100%;">'
	res = res .. '<div id="edu-body" style="padding:1em;">'
	res = res .. body .. '</div></div>'
	return res
end

function p.build(frame)
	-- Defaults
	width = '65em'
	headertext = ''
	headercolor = '#ddd'
	headerstyle = 'color:#fff; width:100%; text-align:right; padding-right:0.5em; font-weight:bold; font-size:250%;'
	tabstyle = 'font-weight:bold; padding:1.1em; margin-right:0.3em; min-width:50px; text-align:center; font-size:110%; border-top:6px solid;'
	selectedtab = ''
	entrylabel = {}
	entrylink = {}
	entryicon = {}
	entrycolor = {}
	body = ''
	
	-- Work through template parameters and populate variables/tables
	for key, value in pairs(frame:getParent().args) do
		if key == 'width' then
			width = value
		elseif key == 'headertext' then
			headertext = value
		elseif key == 'headercolor' then
			headercolor = value
		elseif key == 'headerstyle' then
			headerstyle = value
		elseif key == 'tabstyle' then
			tabstyle = value
		elseif key == 'selectedtab' then
			selectedtab = value
		elseif key == 'body' then
			body = value
		elseif string.find(key, 'entrylabel') ~= nil then
			id = string.gsub(key, 'entrylabel', '')
			id = tonumber(id)
			entrylabel[id] = value
		elseif string.find(key, 'entrylink') ~= nil then
			id = string.gsub(key, 'entrylink', '')
			id = tonumber(id)
			entrylink[id] = value
		elseif string.find(key, 'entryicon') ~= nil then
			id = string.gsub(key, 'entryicon', '')
			id = tonumber(id)
			entryicon[id] = value
		elseif string.find(key, 'entrycolor') ~= nil then
			id = string.gsub(key, 'entrycolor', '')
			id = tonumber(id)
			entrycolor[id] = value
		end
	end

	-- Construct HTML code
	contents = '<div id="tabnav-container" style="width:' .. width .. ';">'
	contents = contents .. topbar(headertext, headercolor, headerstyle)
	contents = contents .. tableofcontents(tabstyle, selectedtab, entrylabel, entrylink, entryicon, entrycolor)
	if body ~= '' then
		contents = contents .. pagebody(body)
	end
	contents = contents .. '</div>'
	return contents
end

return p