Module:Sandbox/Harej/TabNav
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[edit]
Basic usage[edit]
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[edit]
| 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[edit]
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[edit]
The body parameter is optional.
| body = Whatever content you want to use.
Advanced usage[edit]
TabNav gives you near-total control over the styling of the header block.
Customize the header[edit]
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[edit]
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.
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