Module:Tabs: Difference between revisions

Want an adless experience? Log in or Create an account.
allow nil id; it will be generated by js
(update Guid usage)
(allow nil id; it will be generated by js)
Line 1: Line 1:
local Args = require( 'Module:Args' )
local Args = require( 'Module:Args' )
local Guid = require( 'Module:Guid' )


function getRequiredArg( args, argName, fnName )
function getRequiredArg( args, argName, fnName )
Line 20: Line 19:
function TabContainer.new( args )
function TabContainer.new( args )
   return setmetatable( {
   return setmetatable( {
    id = args.id or Guid.new(),
     contents = {},
     contents = {},
     args = args
     args = args
Line 28: Line 26:
function TabContainer:leftTabs( args )
function TabContainer:leftTabs( args )
   if not self.tabsLeft then
   if not self.tabsLeft then
     args.target = args.target or self.id
     args.target = args.target or self.args.id
     args.activation = args.activation or self.args.activation
     args.activation = args.activation or self.args.activation
     self.tabsLeft = TabSet.new( args )
     self.tabsLeft = TabSet.new( args )
Line 38: Line 36:
function TabContainer:topTabs( args )
function TabContainer:topTabs( args )
   if not self.tabsTop then
   if not self.tabsTop then
     args.target = args.target or self.id
     args.target = args.target or self.args.id
     args.activation = args.activation or self.args.activation
     args.activation = args.activation or self.args.activation
     self.tabsTop = TabSet.new( args )
     self.tabsTop = TabSet.new( args )
Line 52: Line 50:
function TabContainer:render()
function TabContainer:render()
   local container = mw.html.create( 'div' )
   local container = mw.html.create( 'div' )
    :attr( 'id', self.id )
     :addClass( 'zdw-tabcontainer zdw-box' )
     :addClass( 'zdw-tabcontainer zdw-box' )
  if self.args.id then container:attr( 'id', self.args.id ) end
   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
Line 87: Line 85:
function TabSet.new( args )
function TabSet.new( args )
   return setmetatable( {
   return setmetatable( {
     target = getRequiredArg( args, 'target', 'TabSet.new' ),
     target = args.target,
     selector = args.selector and (tonumber(args.selector) or error('invalid arg: selector must be a number')) or 0,
     selector = args.selector and (tonumber(args.selector) or error('invalid arg: selector must be a number')) or 0,
     activation = args.activation or 'click',
     activation = args.activation or 'click',
Line 104: Line 102:
   local tabSet = mw.html.create( 'ul' )
   local tabSet = mw.html.create( 'ul' )
     :addClass( 'zdw-tabset' )
     :addClass( 'zdw-tabset' )
    :attr( 'data-tab-target', self.target )
     :attr( 'data-tab-selector', self.selector )
     :attr( 'data-tab-selector', self.selector )
     :attr( 'data-tab-type', self.activation )
     :attr( 'data-tab-type', self.activation )
  if self.target then tabSet:attr( 'data-tab-target', self.target ) end


   for _, tab in ipairs( self.tabs ) do
   for _, tab in ipairs( self.tabs ) do