Module:Tabs: Difference between revisions

From Zelda Dungeon Wiki
Jump to navigation Jump to search
Want an adless experience? Log in or Create an account.
(WIP - converting T2D)
 
(implement the other classes)
Line 3: Line 3:


function TabContainer.new( args )
function TabContainer.new( args )
   local obj = {
   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 )
 
  return setmetatable( obj, 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', (self.args.vtabwidth or '60') .. 'px' )
     container:addClass( 'zdw-tabcontainer--hastabsleft' )
    container:wikitext( self.tabsLeft )
     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 )
   local obj = {
   return setmetatable( {
     args = args
     target = assert( args.target, 'missing required arg: target' ),
  }
    selector = args.selector or args.target,
 
    activation = args.activation or 'click',
   return setmetatable( obj, TabSet )
    tabs = assert( args.tabs, 'missing required arg: tabs' )
   }, TabSet )
end
end


function TabSet:render()
function TabSet:render()
   local container = mw.html.create( 'div' )
   local tabSet = mw.html.create( 'ul' )
  -- TODO
    :addClass( 'zdw-tabset' )
   return tostring( container )
    :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( obj, Tab )
   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 container = mw.html.create( 'div' )
   local tab = mw.html.create( 'li' )
  -- TODO
    :addClass( 'zdw-tab' )
   return tostring( container )
    :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 )
   local obj = {
   return setmetatable( {
    contentId = assert( args.id, 'missing required arg: id' ),
    content = args.content or args.id,
     args = args
     args = args
   }
   }, TabContent )
 
  return setmetatable( obj, TabContent )
end
end


function TabContent:render()
function TabContent:render()
   local container = mw.html.create( 'div' )
   local content = mw.html.create( 'div' )
  -- TODO
    :addClass( 'zdw-tabcontent' )
   return tostring( container )
    :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



Revision as of 21:28, June 22, 2020

Documentation for this module may be created at Module:Tabs/doc

local TabContainer = {}
TabContainer.__index = TabContainer

function TabContainer.new( args )
  return setmetatable( {
    id = assert( args.id, 'missing required arg: id' ),
    content = args[1],
    tabsTop = args.top,
    tabsLeft = args.left,
    args = args
  }, TabContainer )
end

function TabContainer:render()
  local container = mw.html.create( 'div' )
    :attr( 'id', self.id )
    :addClass( 'zdw-tabcontainer zdw-box tabtarget box tabs2d' )
  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.tabsLeft then
    local width = tonumber( self.args.vtabwidth ) or 60
    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
  if self.tabsTop then
    container:tag( 'div' )
      :addClass( 'zdw-tabcontainer__tabset--top' )
      :wikitext( self.tabsTop )
  end
  container:wikitext( self.content )
  container:tag( 'div' )
    :css( 'clear', 'both' )

  return tostring( container )
end

local TabSet = {}
TabSet.__index = TabSet

function TabSet.new( args )
  return setmetatable( {
    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

function TabSet:render()
  local tabSet = mw.html.create( 'ul' )
    :addClass( 'zdw-tabset' )
    :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

local Tab = {}
Tab.__index = Tab

function Tab.new( args )
  local obj = {
    args = args
  }

  return setmetatable( {
    selection = assert( args.selection, 'missing required arg: selection' ),
    label = args.label or args.selection
  }, Tab )
end

function Tab:render()
  local tab = mw.html.create( 'li' )
    :addClass( 'zdw-tab' )
    :attr( 'data-tab-selection', self.selection:gsub( "%s", "" ) )
    :wikitext( self.label )

  return tostring( tab )
end

local TabContent = {}
TabContent.__index = TabContent

function TabContent.new( args )
  return setmetatable( {
    contentId = assert( args.id, 'missing required arg: id' ),
    content = args.content or args.id,
    args = args
  }, TabContent )
end

function TabContent:render()
  local content = mw.html.create( 'div' )
    :addClass( 'zdw-tabcontent' )
    :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

local p = {}

p.TabContainer = TabContainer
p.TabSet = TabSet
p.Tab = Tab
p.TabContent = TabContent

function p.tabs( frame )
  local tabs = TabContainer.new( frame.args )
  return tabs:render()
end

function p.tabset( frame )
  local tabset = TabSet.new( frame.args )
  return tabset:render()
end

function p.tab( frame )
  local tab = Tab.new( frame.args )
  return tab:render()
end

function p.content( frame )
  local content = TabContent.new( frame.args )
  return content:render()
end

return p