模块:收纳表:修订间差异
跳到导航
跳到搜索
小无编辑摘要 |
无编辑摘要 |
||
第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