17,230
edits
Want an adless experience? Log in or Create an account.
implement the other classes
(WIP - converting T2D) |
(implement the other classes) |
||
| Line 3: | Line 3: | ||
function TabContainer.new( args ) | function TabContainer.new( args ) | ||
return setmetatable( { | |||
id = args.id, | id = assert( args.id, 'missing required arg: id' ), | ||
content = args[1], | content = args[1], | ||
tabsTop = args.top, | tabsTop = args.top, | ||
tabsLeft = args.left, | tabsLeft = args.left, | ||
args = args | args = args | ||
} | }, TabContainer ) | ||
end | end | ||
| Line 17: | Line 15: | ||
local container = mw.html.create( 'div' ) | local container = mw.html.create( 'div' ) | ||
:attr( 'id', self.id ) | :attr( 'id', self.id ) | ||
:addClass( 'tabtarget box tabs2d' ) | :addClass( 'zdw-tabcontainer zdw-box tabtarget box tabs2d' ) | ||
if self.args.width then container:css( 'width', self.args.width .. 'px' ) end | if self.args.width then container:css( 'width', self.args.width .. 'px' ) end | ||
if self.args.height then container:css( 'height', self.args.height .. 'px' ) end | if self.args.height then container:css( 'height', self.args.height .. 'px' ) end | ||
if self.tabsLeft then | if self.tabsLeft then | ||
container:addClass( 'hastabsleft' ) | local width = tonumber( self.args.vtabwidth ) or 60 | ||
container:css( 'margin-left', ( | container:addClass( 'zdw-tabcontainer--hastabsleft' ) | ||
container:css( 'margin-left', tostring( width ) .. 'px' ) | |||
container:tag( 'div' ) | |||
:addClass( 'zdw-tabcontainer__tabset--left' ) | |||
:css( 'width', tostring( width ) .. 'px' ) | |||
:css( 'margin-left', '-' .. tostring( width + 10 ) .. 'px' ) | |||
:wikitext( self.tabsLeft ) | |||
end | end | ||
if self.tabsTop then | if self.tabsTop then | ||
container:wikitext( self.tabsTop ) | container:tag( 'div' ) | ||
:addClass( 'zdw-tabcontainer__tabset--top' ) | |||
:wikitext( self.tabsTop ) | |||
end | end | ||
container:wikitext( self.content ) | container:wikitext( self.content ) | ||
| Line 39: | Line 44: | ||
function TabSet.new( args ) | function TabSet.new( args ) | ||
return setmetatable( { | |||
args = args | target = assert( args.target, 'missing required arg: target' ), | ||
selector = args.selector or args.target, | |||
activation = args.activation or 'click', | |||
tabs = assert( args.tabs, 'missing required arg: tabs' ) | |||
}, TabSet ) | |||
end | end | ||
function TabSet:render() | function TabSet:render() | ||
local | local tabSet = mw.html.create( 'ul' ) | ||
:addClass( 'zdw-tabset' ) | |||
return tostring( | :attr( 'data-tab-target', self.target ) | ||
:attr( 'data-tab-selector', self.selector ) | |||
:attr( 'data-tab-type', self.activation ) | |||
:wikitext( self.tabs ) | |||
return tostring( tabSet ) | |||
end | end | ||
| Line 60: | Line 71: | ||
} | } | ||
return setmetatable( | return setmetatable( { | ||
selection = assert( args.selection, 'missing required arg: selection' ), | |||
label = args.label or args.selection | |||
}, Tab ) | |||
end | end | ||
function Tab:render() | function Tab:render() | ||
local | local tab = mw.html.create( 'li' ) | ||
:addClass( 'zdw-tab' ) | |||
return tostring( | :attr( 'data-tab-selection', self.selection:gsub( "%s", "" ) ) | ||
:wikitext( self.label ) | |||
return tostring( tab ) | |||
end | end | ||
| Line 73: | Line 90: | ||
function TabContent.new( args ) | function TabContent.new( args ) | ||
return setmetatable( { | |||
contentId = assert( args.id, 'missing required arg: id' ), | |||
content = args.content or args.id, | |||
args = args | args = args | ||
} | }, TabContent ) | ||
end | end | ||
function TabContent:render() | function TabContent:render() | ||
local | local content = mw.html.create( 'div' ) | ||
:addClass( 'zdw-tabcontent' ) | |||
return tostring( | :attr( 'data-tab-content', self.contentId ) | ||
:wikitext( self.content ) | |||
if self.args.width then | |||
content:css( 'width', self.args.width .. 'px' ) | |||
end | |||
return tostring( content ) | |||
end | end | ||