Module:UtilsLayout/Tabs: Difference between revisions

Jump to navigation Jump to search

Module:UtilsLayout/Tabs (view source)

Revision as of 23:37, 25 November 2023

6,177 bytes added ,  25 November 2023
Add ARIA roles so that tabs can at least be manipulated via keyboard when using screen readers. MediaWiki limitations prevent me from adding proper accessibility features, unfortunately.
mNo edit summary
(Add ARIA roles so that tabs can at least be manipulated via keyboard when using screen readers. MediaWiki limitations prevent me from adding proper accessibility features, unfortunately.)
 
(33 intermediate revisions by 3 users not shown)
Line 2: Line 2:
local h = {}
local h = {}


local utilsArg = require("Module:UtilsArg")
local CLASS_TOOLTIP = require("Module:Constants/class/tooltip")


function p.tabs(data, options)
function p.tabs(data, options)
local options = options or {}
local options = options or {}
local format = options.format or "top"
local tabOptions = options.tabOptions or {}
local labelOptions = options.labelOptions or {}
local contentOptions = options.contentOptions or {}
local defaultTab = options.default or 1
local align = options.align or "left"
local align = options.align or "left"
local collapse = options.collapse
local defaultTab = options.default or 1
local fixedWidth = options.fixedWidth
if #data == 1 and collapse then
if #data == 1 and tabOptions.collapse then
return data[1].content
return data[1].content
end
end
local tabContainer = h.tabContainer(data, defaultTab, format)
local tabContainer = h.tabContainer(data, defaultTab, align, tabOptions, labelOptions)
local tabContents = h.tabContents(data, defaultTab, fixedWidth)
local tabContents = h.tabContents(data, defaultTab, align, contentOptions)
local html = mw.html.create("div")
local html = mw.html.create("div")
:css("text-align", align)
:addClass("zw-tabs")
:addClass(tabOptions.stretch and "zw-tabs--stretch" or nil)
if format == "top" then
:addClass(tabOptions.columns and "zw-tabs--columns" or nil)
if tabOptions.position == "bottom" then
html:node(tabContents)
:node(tabContainer)
else
html:node(tabContainer)
html:node(tabContainer)
:node(tabContents)
:node(tabContents)
else
html:node(tabContents)
:node(tabContainer)
end
end
return tostring(html)
return tostring(html)
end
end


function h.tabContainer(data, defaultTab, format)
function h.tabContainer(data, defaultTab, align, tabOptions, labelOptions)
local position = tabOptions.position or "top"
local stretch = tabOptions.stretch
local columns = tabOptions.columns
local labelAlignVertical = labelOptions.alignVertical or "center"
local tabContainer = mw.html.create("div")
local tabContainer = mw.html.create("div")
:addClass("tabcontainer tabcontainer-" .. format)
:addClass("tabcontainer tabcontainer-"..position)
:addClass("tabcontainer--align-x-"..align)
:attr("role", "tablist")
for i, tabData in ipairs(data) do
for i, tabData in ipairs(data) do
local tab = mw.html.create("span")
local tab = mw.html.create("span")
:addClass("tab explain")
:addClass("tab")
:addClass(CLASS_TOOLTIP)
:addClass("tab--label-align-y-"..labelAlignVertical)
:attr("title", tabData.tooltip)
:attr("title", tabData.tooltip)
:attr("role", "tab")
:attr("tabindex", "0")
:wikitext(tabData.label)
:wikitext(tabData.label)
if i == defaultTab then
if i == defaultTab then
tab:addClass("active")
tab:addClass("active")
end
if columns then
tab:css({
["max-width"] = "calc(100%/"..columns.." - 2*"..(columns-1).."px)" -- the subtraction is to account for tab margins
})
end
end
tabContainer:node(tab)
tabContainer:node(tab)
Line 48: Line 67:
end
end


function h.tabContents(data, defaultTab, fixedWidth)
function h.tabContents(data, defaultTab, align, contentOptions)
local alignVertical = contentOptions.alignVertical or "top"
local fixedWidth = contentOptions.fixedWidth
local fixedHeight = contentOptions.fixedHeight
local tabContents = mw.html.create("div")
local tabContents = mw.html.create("div")
:addClass("tabcontents")
:addClass("tabcontents")
:addClass("tabcontents--align-x-"..align)
:addClass("tabcontents--align-y-"..alignVertical)
 
if fixedWidth then
if fixedWidth then
tabContents:addClass("tabcontents--fixed-width")
tabContents:addClass("tabcontents--fixed-width")
if type(fixedWidth) == "number" then
tabContents:css("width", fixedWidth .. "px")
end
end
if fixedHeight then
tabContents:addClass("tabcontents--fixed-height")
if type(fixedHeight) == "number" then
tabContents:css("height", fixedHeight .. "px")
end
end
end
Line 59: Line 93:
local content = mw.html.create("div")
local content = mw.html.create("div")
:addClass("content")
:addClass("content")
:wikitext(tabData.content)
:attr("role", "tabpanel")
:wikitext("\n", tabData.content)
if i == defaultTab then
if i == defaultTab then
content:addClass("content--active")
content:addClass("content--active")
Line 68: Line 103:
end
end


p.Schemas = {
function p.Schemas()
tabs = {
return {
data = {
tabs = {
type = "array",
data = {
required = true,
type = "array",
items = {
required = true,
items = {
type = "record",
properties = {
{
name = "label",
type = "string",
required = true,
desc = "Button text for the tab."
},
{
name = "tooltip",
type = "string",
desc = "Tooltip for the tab button",
},
{
name = "content",
type = "string",
required = true,
desc = "Content for the tab.",
},
}
}
},
options = {
type = "record",
type = "record",
properties = {
properties = {
{
{
name = "label",
name = "default",
type = "number",
default = 1,
desc = "Index of default tab.",
},
{
name = "align",
type = "string",
type = "string",
required = true,
enum = {"left", "center", "right"},
desc = "Button text for the tab."
default = mw.dumpObject("left"),
desc = "Horizontal alignment for tabs and their content.",
},
},
{
{
name = "tooltip",
name = "tabOptions",
type = "string",
type = "record",
desc = "Tooltip for the tab button",
desc = "Display options for the tabs themselves.",
properties = {
{
name = "position",
type = "string",
enum = {"top", "bottom"},
default = mw.dumpObject("top"),
desc = "If <code>top</code> (default), the tabs are placed above their content. If <code>bottom</code>, then the opposite."
},
{
name = "collapse",
type = "boolean",
desc = "If truthy, tabs will not be rendered if there is only one tab. The content of that tab will simply be rendered instead."
},
{
name = "stretch",
type = "boolean",
desc = "If true, then tabs will stretch to fill the available space in their container.",
},
{
name = "columns",
type = "number",
desc = "If specified, the tabs will attempt to arrange themselves in N columns of equal width. This option is not compatible with <code>stretch</code>."
},
},
},
{
name = "labelOptions",
type = "record",
desc = "Display options for the tab labels.",
properties = {
{
name = "alignVertical",
type = "string",
enum = {"center", "bottom"},
default = mw.dumpObject("center"),
desc = "Vertical alignment of the label with respect to its tab. Options are: <code>center</code> (default) and <code>bottom</code>.",
},
},
},
},
{
{
name = "content",
name = "contentOptions",
type = "string",
type = "record",
required = true,
desc = "Display options for the tab contents.",
desc = "Content for the tab.",
properties = {
{
name = "fixedWidth",
oneOf = {
{ type = "boolean" },
{ type = "number" },
},
desc = "Width for the tab container in <code>px</code>. Or, if set to <code>true</code>, the tab container will  assume the width of the largest tab. By default, the tab container assumes the width of the current tab."
},
{
name = "fixedHeight",
oneOf = {
{ type = "boolean" },
{ type = "number" },
},
desc = "Height for the tab container in <code>px</code>. Or, if set to <code>true</code>, the tab container will  assume the height of the largest tab. By default, the tab container assumes the height of the current tab.",
},
{
name = "alignVertical",
type = "string",
enum = {"top", "center", "bottom"},
default = mw.dumpObject("top"),
desc = "Vertical alignment of tab contents with respect to the tab container. Useful only alonside <code>fixedHeight</code>."
},
},
},
},
},
}
}
end
 
function p.Documentation()
return {
tabs = {
params = {"data", "options"},
returns = "HTML markup rendering tabs.",
cases = {
resultOnly = true,
{
args = {
{
{
label = "Tab1",
content = "Content1",
},
{
label = "Tab2",
content = "Content2"
},
},
}
},
{
args = {
{
{
label = "Tab1",
content = "Content1",
},
{
label = "Tab2",
content = "Content2"
},
},
{
tabOptions = {
stretch = true,
}
},
},
},
}
},
}
},
options = {
type = "record",
properties = {
{
{
name = "format",
args = {
type = "string",
{
enum = {"top", "bottom"},
{
default = mw.dumpObject("top"),
label = "Tab1",
desc = "If <code>top</code>, the tabs are placed above their content. If <code>bottom</code>, then the opposite."
tooltip = "This is the first tab.",
content = "Content1"
},
{
label = "Tab2",
tooltip = "This is the second tab.",
content = "Content2"
},
{
label = "Tab3",
tooltip = "This is the third tab.",
content = "Content3"
}
},
{
default = 2,
align = "center",
tabOptions = {
position = "bottom",
},
}
}
},
},
{
{
name = "align",
desc = "Tabs display even for a single tab unless <code>collapse</code> is set to true.",
type = "string",
args = {
enum = {"left", "center", "right"},
{{ label = "Single Tab", content = "Content" }}
default = mw.dumpObject("left"),
}
desc = "Horizontal alignment for tabs and their content.",
},
},
{
{
name = "default",
args = {
type = "number",
{{ label = "Single Tab", content = "Content" }},
default = 1,
{
desc = "Index of default tab.",
tabOptions = {
collapse = true
}
},
}
},
},
{
{
name = "collapse",
desc = "<code>fixedtWidth</code> and <code>fixedHeight</code> determine how the overall tab container is sized.",
type = "boolean",
args = {
desc = "If truthy, tabs will not be rendered if there is only one tab. The content of that tab will simply be rendered instead."
{
{ label = "Small Tab", content = "meep" },
{ label = "Wide Tab", content = "meeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeep" },
{ label = "Tall tab", content = "m\ne\ne\ne\ne\np" },
},
},
},
},
{
{
name = "fixedWidth",
args = {
type = "boolean",
{
desc = "If truthy, the tab container will always assume the width of the largest tab (as opposed to the width of the current tab)."
{ label = "Small Tab", content = "meep" },
{ label = "Wide Tab", content = "meeeeeeeeeeeeeeeeeeeeeeeeeeep" },
{ label = "Tall tab", content = "m\ne\ne\ne\ne\np" },
},
{
contentOptions = {
fixedWidth = true,
},
},
},
},
},
}
{
},
args = {
}
{
}
{ label = "Small Tab", content = "meep" },
 
{ label = "Wide Tab", content = "meeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeep" },
p.Documentation = {
{ label = "Tall tab", content = "m\ne\ne\ne\ne\np" },
tabs = {
},
params = {"data", "options"},
returns = "HTML markup rendering tabs.",
cases = {
resultOnly = true,
{
args = {
{
{
{
label = "Tab1",
contentOptions = {
content = "Content1",
fixedHeight = true,
},
},
},
},
},
{
args = {
{
{
label = "Tab2",
{ label = "Small Tab", content = "meep" },
content = "Content2"
{ label = "Wide Tab", content = "meeeeeeeeeeeeeeeeeeeeeeeeeeep" },
{ label = "Tall tab", content = "m\ne\ne\ne\ne\np" },
},
},
},
{
}
contentOptions = {
},
fixedWidth = true,
{
fixedHeight = true,
args = {
alignVertical = "center",
{
},
},
},
},
{
args = {
{
{
label = "Tab1",
{ label = "Small Tab", content = "meep" },
tooltip = "This is the first tab.",
{ label = "Wide Tab", content = "meeeeeeeeeeeeeeeeeeeeeeeeeeep" },
content = "Content1"
{ label = "Tall tab", content = "m\ne\ne\ne\ne\np" },
},
{
contentOptions = {
fixedWidth = 80,
fixedHeight = 80,
alignVertical = "center",
},
},
},
},
},
{
desc = "When images are used as tab labels, the label alignment options can be useful.",
args = {
{
{
label = "Tab2",
{ label = "[[File:ST Engine Icon.png|link=]]", content = "Engines" },
tooltip = "This is the second tab.",
{ label = "[[File:ST Passenger Car Icon.png|link=]]", content = "Passenger Cars" },
content = "Content2"
},
},
{
{
label = "Tab3",
labelOptions = {
tooltip = "This is the third tab.",
alignVertical = "bottom",
content = "Content3"
},
}
},
},
},
{
},
format = "bottom",
align = "center",
default = 2,
}
}
},
},
{
},
args = {
{{ label = "Single Tab", content = "Content" }}
}
},
{
args = {
{{ label = "Single Tab", content = "Content" }},
{ collapse = true }
}
},
}
}
}
}
end


return p
return p
Retrieved from "https://zeldawiki.wiki/wiki/Special:MobileDiff/800858...1110963"

Navigation menu