Module:Layout

Mobile-first generic layout

Functions

Horizontal Box

{{#invoke:Layout|hboxOpen}}
Body
{{#invoke:Layout|hboxClose}}

Creates a horizontal layout.

Horizontal Box Item

{{#invoke:Layout|hboxItemOpen|width=}}
Body
{{#invoke:Layout|hboxItemClose}}

Creates individual item in horizontal layout.

hcenter (default: false)

Horizontally align items in the layout.

textCenter (default: false)

Align text in the layout.

vcenter (default: false)

Vertically align items in the layout.

width (default: "")

Sets the width of the box in fractions. From 1/2, 1/3, 2/3, 1/4, 2/4, 3/4, 1/5, 2/5, 3/5, and 4/5. Note that fractions must add to 1. For example, 1/2 + 1/4 + 1/4 can be used, while 1/2 + 1/3 + 1/5 would exceed 1.

Vertical Box

{{#invoke:Layout|vboxOpen}}
Body
{{#invoke:Layout|vboxClose}}

Creates a vertical layout.

Vertical Box Item

{{#invoke:Layout|vboxItemOpen|width=}}
Body
{{#invoke:Layout|vboxItemClose}}

Creates individual item in vertical layout.

hcenter (default: false)

Horizontally align items in the layout.

textCenter (default: false)

Align text in the layout.

vcenter (default: false)

Vertically align items in the layout.

width (default: "")

Sets the width of the box in fractions. From 1/2, 1/3, 2/3, 1/4, 2/4, 3/4, 1/5, 2/5, 3/5, and 4/5. Note that fractions must add to 1. For example, 1/2 + 1/4 + 1/4 can be used, while 1/2 + 1/3 + 1/5 would exceed 1.

Examples

HBox

{{#invoke:Layout|hboxOpen}}
{{#invoke:Layout|hboxItemOpen|width=1/5}}1{{#invoke:Layout|hboxItemClose}}
{{#invoke:Layout|hboxItemOpen|width=1/5}}2{{#invoke:Layout|hboxItemClose}}
{{#invoke:Layout|hboxItemOpen|width=1/5}}3{{#invoke:Layout|hboxItemClose}}
{{#invoke:Layout|hboxItemOpen|width=1/5}}4{{#invoke:Layout|hboxItemClose}}
{{#invoke:Layout|hboxItemOpen|width=1/5}}5{{#invoke:Layout|hboxItemClose}}
{{#invoke:Layout|hboxClose}}

1

2

3

4

5

VBox

{{#invoke:Layout|vboxOpen}}
{{#invoke:Layout|vboxItemOpen|width=1/5}}1{{#invoke:Layout|vboxItemClose}}
{{#invoke:Layout|vboxItemOpen|width=1/5}}2{{#invoke:Layout|vboxItemClose}}
{{#invoke:Layout|vboxItemOpen|width=1/5}}3{{#invoke:Layout|vboxItemClose}}
{{#invoke:Layout|vboxItemOpen|width=1/5}}4{{#invoke:Layout|vboxItemClose}}
{{#invoke:Layout|vboxItemOpen|width=1/5}}5{{#invoke:Layout|vboxItemClose}}
{{#invoke:Layout|vboxClose}}

1

2

3

4

5

---

local getArgs = require('Module:Arguments').getArgs
local toBoolean = require('Module:Boolean').toBoolean
local p = {}

--------------------------------------------------------------------------------
-- PRIVATE HELPER FUNCTIONS
--------------------------------------------------------------------------------

-- Opens a container div (for Hbox or Vbox) using string formatting.
local function openContainer(frame, config)
	local args = getArgs(frame)

	local htmlParts = {}
	table.insert(htmlParts, tostring(
		frame:extensionTag{
			name = 'templatestyles',
			args = { src = config.stylesheet }
		}
	))

	local classes = {config.containerClass}
	if args.class and args.class ~= '' then
		table.insert(classes, args.class)
	end

	table.insert(htmlParts, string.format(
		'<div class="%s">',
		table.concat(classes, ' ')
	))

	return table.concat(htmlParts, '')
end

-- Opens an item div (for an item within Hbox or Vbox) using string formatting.
local function openItem(frame, config)
	local args = getArgs(frame)

	local classes = {config.boxClass}
	if args.class and args.class ~= '' then
		table.insert(classes, args.class)
	end

	local width = args.width
	if width and type(width) == 'string' and width ~= '' then
		table.insert(classes, config.boxClass .. '--' .. width)
	end
	
	if toBoolean(args.textCenter) then
		table.insert(classes, config.boxClass .. '--centered');
	end

	if toBoolean(args.hcenter) then
		table.insert(classes, config.boxClass .. '--hcenter')
	end

	if toBoolean(args.vcenter) then
		table.insert(classes, config.boxClass .. '--vcenter')
	end

	return string.format(
		'<div class="%s">',
		table.concat(classes, ' ')
	)
end

-- Generic closing function, just returns a closing div tag.
local function closeTag()
	return '</div>'
end

--------------------------------------------------------------------------------
-- HBox Functions
--------------------------------------------------------------------------------

function p.hboxOpen(frame)
	return openContainer(frame, {
		containerClass = 'pm-hbox',
		stylesheet = 'Module:Layout/hbox.css'
	})
end

function p.hboxItemOpen(frame)
	return openItem(frame, {
		boxClass = 'pm-hbox__box'
	})
end

p.hboxItemClose = closeTag
p.hboxClose = closeTag

--------------------------------------------------------------------------------
-- VBox Functions
--------------------------------------------------------------------------------

function p.vboxOpen(frame)
	return openContainer(frame, {
		containerClass = 'pm-vbox',
		stylesheet = 'Module:Layout/vbox.css'
	})
end

function p.vboxItemOpen(frame)
	return openItem(frame, {
		boxClass = 'pm-vbox__box'
	})
end

p.vboxItemClose = closeTag
p.vboxClose = closeTag

return p