模块:收纳表:修订间差异
外观
小无编辑摘要 |
无编辑摘要 |
||
第1行: | 第1行: | ||
-- | --理论上能调整所有的style,并可新增class | ||
--( | --|stab(css) 选择栏的css。曾经为select(css) | ||
-- | --|sitem(css) 选择栏中每个物件的css | ||
-- | --|ctab(css) 内容栏的css。曾经为text(css) | ||
--|citem(css) 内容栏中每个物件的css | |||
--[[ 非css的参数设定 | |||
splitCount = 5: 决定每行有几个物件 | splitCount = 5: 决定每行有几个物件 | ||
textDisplay = down: 内容相对于选择栏的位置,可输入 | textDisplay = down: 内容相对于选择栏的位置,可输入 | ||
第16行: | 第15行: | ||
--]] | --]] | ||
local p = {} | |||
local tabIndices = {} --用于处理编号非连续的情况 | |||
local divCSS = {} | |||
local selectTabCSS = { | |||
class = '', | |||
splitCount = '5', | |||
display = 'grid', | |||
margin = '2.5%', | |||
gap = '6px', | |||
} | |||
local selectItemCSS = { | |||
class = '', | |||
margin = '0', | |||
padding = '0', | |||
['font-weight'] = '700', | |||
} | |||
local contentTabCSS = { | |||
class = '', | |||
display = 'inline', | |||
margin = '2.5%', | |||
['margin-left'] = '0', | |||
height = '400px', | |||
['overflow-y'] = 'auto', | |||
width = '60%', | |||
} | |||
local contentItemCSS = {} | |||
local | local function firstToLower(str) | ||
return str:gsub("^%u", string.lower) | |||
end | |||
--处理旧参数名与别名 | |||
local function replaceArgsName(str) | |||
str = str:gsub('^select', 'stab') | |||
str = str:gsub('^text', 'ctab') | |||
--[[str = str:gsub('^selecttab', 'st') | |||
str = str:gsub('^selectitem', 'si') | |||
str = str:gsub('^contenttab', 'ct') | |||
str = str:gsub('^contentitem', 'ci')]]-- | |||
return str | |||
end | |||
-- | --处理选择栏 | ||
local function renderSelect( | local function renderSelect(contents, vertical) | ||
local tabs_pages = mw.html.create('div') | local tabs_pages = mw.html.create('div') | ||
:addClass('tabs_pages' | :addClass('tabs_pages ' .. selectTabCSS['class']) | ||
:css('grid-template-columns', | |||
string.rep('1fr ', tonumber(selectTabCSS['splitCount']))) | |||
:css('grid-template-columns', string.rep('1fr ', splitCount)) | if vertical then | ||
if | |||
tabs_pages | tabs_pages | ||
:css('display', 'inline-grid') | :css('display', 'inline-grid') | ||
第38行: | 第73行: | ||
:css('width', '20%') | :css('width', '20%') | ||
end | end | ||
if | if selectTabCSS['height'] ~= nil then | ||
tabs_pages | tabs_pages:css('overflow-y', 'auto') | ||
end | end | ||
if | if selectTabCSS['width'] ~= nil then | ||
tabs_pages | tabs_pages:css('overflow-x', 'auto') | ||
end | end | ||
selectTabCSS['class'] = nil | |||
selectTabCSS['splitCount'] = nil | |||
tabs_pages:css(selectTabCSS) | |||
local itemClass = selectItemCSS['class'] | |||
selectItemCSS['class'] = nil | |||
for _, tabIndex in ipairs(tabIndices) do | for _, tabIndex in ipairs(tabIndices) do | ||
tabs_pages:tag('div') | tabs_pages:tag('div') | ||
:addClass('tab') | :addClass('tab ' .. itemClass) | ||
:css( | :css(selectItemCSS) | ||
:wikitext(contents['tab' .. tabIndex]) | |||
:wikitext( | |||
end | end | ||
第63行: | 第98行: | ||
-- | --处理内容栏 | ||
local function renderContent( | local function renderContent(contents, vertical) | ||
local tabs_contents = mw.html.create('div') | local tabs_contents = mw.html.create('div') | ||
:addClass('tabs-contents') | :addClass('tabs-contents ' .. contentTabCSS['class']) | ||
if | if vertical then | ||
tabs_contents | tabs_contents | ||
:css('display', 'inline') | :css('display', 'inline') | ||
第77行: | 第112行: | ||
:css('width', '60%') | :css('width', '60%') | ||
end | end | ||
if | if contentTabCSS['textHeight'] ~= nil then | ||
tabs_contents | tabs_contents:css('overflow-y', 'auto') | ||
end | end | ||
if | if contentTabCSS['textWidth'] ~= nil then | ||
tabs_contents | tabs_contents:css('overflow-x', 'auto') | ||
end | end | ||
contentTabCSS['class'] = nil | |||
tabs_contents:css(contentTabCSS) | |||
local itemClass = contentItemCSS['class'] | |||
contentItemCSS['class'] = nil | |||
for _, tabIndex in ipairs(tabIndices) do | for _, tabIndex in ipairs(tabIndices) do | ||
tabs_contents:tag('div') | tabs_contents:tag('div') | ||
:addClass('tab-c') | :addClass('tab-c ' .. itemClass) | ||
:wikitext( | :css(contentItemCSS) | ||
:wikitext(contents['content' .. tabIndex]) | |||
end | end | ||
第100行: | 第137行: | ||
function p.selectTable(frame) | function p.selectTable(frame) | ||
local args | local args = {} | ||
-- | --获取页面传来的参数,而非模板#invoke時的参数 | ||
local | local page_args = frame:getParent().args; | ||
--将获取的参数传给args | --将获取的参数传给args | ||
for k, v in pairs( | for k, v in pairs(page_args) do | ||
if v ~= 'nil' then args[k] = v end --避免空的参数 | if v ~= 'nil' then args[replaceArgsName(k)] = v end --避免空的参数 | ||
end | end | ||
for k, v in pairs(args) do | |||
k = '' .. k | |||
for k, | if not k:match('^content%d+') then | ||
if k:match('^tab%d+$') then | |||
table.insert(tabIndices, tonumber(k:sub(4))) | |||
elseif k:match('^stab') then | |||
selectTabCSS[firstToLower(k:sub(5))] = v | |||
elseif k:match('^sitem') then | |||
selectItemCSS[firstToLower(k:sub(6))] = v | |||
elseif k:match('^ctab') then | |||
contentTabCSS[firstToLower(k:sub(5))] = v | |||
elseif k:match('^citem') then | |||
contentItemCSS[firstToLower(k:sub(6))] = v | |||
else | |||
divCSS[firstToLower(k)] = v | |||
end | |||
end | |||
end | end | ||
table.sort(tabIndices) | table.sort(tabIndices) | ||
local mainDiv = mw.html.create('div') | |||
local vertical = args['textDisplay'] == 'left' or args['textDisplay'] == 'right' | |||
if vertical then mainDiv:css('display', 'flex') end | |||
local | local divClass = divCSS['class'] | ||
:addClass('tabs-container') | divCSS['class'] = nil | ||
mainDiv | |||
:addClass('tabs-container ' .. divClass) | |||
:css(divCSS) | |||
if args['textDisplay'] == 'top' or args['textDisplay'] == 'left' then | if args['textDisplay'] == 'top' or args['textDisplay'] == 'left' then | ||
mainDiv:node(renderContent( | mainDiv:node(renderContent(args, vertical)) | ||
mainDiv:node(renderSelect( | mainDiv:node(renderSelect(args, vertical)) | ||
else | else | ||
mainDiv:node(renderSelect( | mainDiv:node(renderSelect(args, vertical)) | ||
mainDiv:node(renderContent( | mainDiv:node(renderContent(args, vertical)) | ||
end | end | ||
2022年6月30日 (四) 09:10的版本
此模块的文档可以在模块:收纳表/doc创建
--理论上能调整所有的style,并可新增class
--|stab(css) 选择栏的css。曾经为select(css)
--|sitem(css) 选择栏中每个物件的css
--|ctab(css) 内容栏的css。曾经为text(css)
--|citem(css) 内容栏中每个物件的css
--[[ 非css的参数设定
splitCount = 5: 决定每行有几个物件
textDisplay = down: 内容相对于选择栏的位置,可输入
top(内容在选择栏上)
down(内容在选择栏下)
left(内容在选择栏左,此时若用户无指定,则selectWidth会被预设成20%、textWidth被设成60%、textHeight, selectHeight皆被设成400px)
right(内容在选择栏右,同上)
--]]
local p = {}
local tabIndices = {} --用于处理编号非连续的情况
local divCSS = {}
local selectTabCSS = {
class = '',
splitCount = '5',
display = 'grid',
margin = '2.5%',
gap = '6px',
}
local selectItemCSS = {
class = '',
margin = '0',
padding = '0',
['font-weight'] = '700',
}
local contentTabCSS = {
class = '',
display = 'inline',
margin = '2.5%',
['margin-left'] = '0',
height = '400px',
['overflow-y'] = 'auto',
width = '60%',
}
local contentItemCSS = {}
local function firstToLower(str)
return str:gsub("^%u", string.lower)
end
--处理旧参数名与别名
local function replaceArgsName(str)
str = str:gsub('^select', 'stab')
str = str:gsub('^text', 'ctab')
--[[str = str:gsub('^selecttab', 'st')
str = str:gsub('^selectitem', 'si')
str = str:gsub('^contenttab', 'ct')
str = str:gsub('^contentitem', 'ci')]]--
return str
end
--处理选择栏
local function renderSelect(contents, vertical)
local tabs_pages = mw.html.create('div')
:addClass('tabs_pages ' .. selectTabCSS['class'])
:css('grid-template-columns',
string.rep('1fr ', tonumber(selectTabCSS['splitCount'])))
if vertical then
tabs_pages
:css('display', 'inline-grid')
:css('height', '400px')
:css('overflow-y', 'auto')
:css('width', '20%')
end
if selectTabCSS['height'] ~= nil then
tabs_pages:css('overflow-y', 'auto')
end
if selectTabCSS['width'] ~= nil then
tabs_pages:css('overflow-x', 'auto')
end
selectTabCSS['class'] = nil
selectTabCSS['splitCount'] = nil
tabs_pages:css(selectTabCSS)
local itemClass = selectItemCSS['class']
selectItemCSS['class'] = nil
for _, tabIndex in ipairs(tabIndices) do
tabs_pages:tag('div')
:addClass('tab ' .. itemClass)
:css(selectItemCSS)
:wikitext(contents['tab' .. tabIndex])
end
return tostring(tabs_pages)
end
--处理内容栏
local function renderContent(contents, vertical)
local tabs_contents = mw.html.create('div')
:addClass('tabs-contents ' .. contentTabCSS['class'])
if vertical then
tabs_contents
:css('display', 'inline')
:css('margin', '2.5%')
:css('margin-left', '0')
:css('height', '400px')
:css('overflow-y', 'auto')
:css('width', '60%')
end
if contentTabCSS['textHeight'] ~= nil then
tabs_contents:css('overflow-y', 'auto')
end
if contentTabCSS['textWidth'] ~= nil then
tabs_contents:css('overflow-x', 'auto')
end
contentTabCSS['class'] = nil
tabs_contents:css(contentTabCSS)
local itemClass = contentItemCSS['class']
contentItemCSS['class'] = nil
for _, tabIndex in ipairs(tabIndices) do
tabs_contents:tag('div')
:addClass('tab-c ' .. itemClass)
:css(contentItemCSS)
:wikitext(contents['content' .. tabIndex])
end
return tostring(tabs_contents)
end
function p.selectTable(frame)
local args = {}
--获取页面传来的参数,而非模板#invoke時的参数
local page_args = frame:getParent().args;
--将获取的参数传给args
for k, v in pairs(page_args) do
if v ~= 'nil' then args[replaceArgsName(k)] = v end --避免空的参数
end
for k, v in pairs(args) do
k = '' .. k
if not k:match('^content%d+') then
if k:match('^tab%d+$') then
table.insert(tabIndices, tonumber(k:sub(4)))
elseif k:match('^stab') then
selectTabCSS[firstToLower(k:sub(5))] = v
elseif k:match('^sitem') then
selectItemCSS[firstToLower(k:sub(6))] = v
elseif k:match('^ctab') then
contentTabCSS[firstToLower(k:sub(5))] = v
elseif k:match('^citem') then
contentItemCSS[firstToLower(k:sub(6))] = v
else
divCSS[firstToLower(k)] = v
end
end
end
table.sort(tabIndices)
local mainDiv = mw.html.create('div')
local vertical = args['textDisplay'] == 'left' or args['textDisplay'] == 'right'
if vertical then mainDiv:css('display', 'flex') end
local divClass = divCSS['class']
divCSS['class'] = nil
mainDiv
:addClass('tabs-container ' .. divClass)
:css(divCSS)
if args['textDisplay'] == 'top' or args['textDisplay'] == 'left' then
mainDiv:node(renderContent(args, vertical))
mainDiv:node(renderSelect(args, vertical))
else
mainDiv:node(renderSelect(args, vertical))
mainDiv:node(renderContent(args, vertical))
end
return tostring(mainDiv)
end
return p