モジュール:Flexbox

{{Flexbox}}や{{Flexbox start}}で使用するモジュール。
この解説は、モジュール:Flexbox/docから呼び出されています。
編集者は、このモジュールをサンドボックスとテストケースで試すことができます。（解説）
このモジュールのサブページ一覧。
local p = {}
local args = mw.getCurrentFrame():getParent().args

function p.get_orient()
	-- Android < 4.44, Firefox 27用の関数
	if
		(args["direction"] == "column") or
		(args["direction"] == "column-reverse")
	then
		return "vertical"
	end

	return "horizontal"
end

local orient = p.get_orient()
local is_webkit_prefix_needed =
	orient == "vertical" or args["force-row-legacy"] == "1"

function p.main()
	local container = p.createContainer(false)

	local content = args["content"] or args["1"]
	container:wikitext(content)

	return tostring(container)
end

function p.opening()
	local openingTag = tostring(p.createContainer(true)):gsub("/>$", ">")
	return openingTag
end

function p.closing()
	return "</div>"
end

function p.createContainer(selfClosing)
	local html_create_args = {}
	if (selfClosing) then
		html_create_args = { selfClosing = true }
	end

	local container = mw.html.create('div', html_create_args)

	container:addClass("tpl-flexbox")
	container = p.set_style_display(container)
	container = p.set_style_direction(container)
	container = p.set_style_flow(container)
	container = p.set_style_justify_content(container)
	container = p.set_style_align_items(container)
	container = p.set_style_align_content(container)
	container = p.set_style_gap(container)
	container:cssText("-webkit-box-sizing: border-box") --Android 4.3用
	container:cssText("-moz-box-sizing: border-box") --Firefox =< 28用
	container:cssText("box-sizing: border-box")
	container = p.set_style_others(container)

	return container
end

function p.set_style_display(elm)
	if is_webkit_prefix_needed then
		-- Android < 4.44 は、この場合以外は display: block; のままとする。
		elm:cssText("display: -webkit-box")
	end
	elm:cssText("display: -ms-flexbox; display: flex")
	return elm;
end

function p.set_style_direction(elm)
	-- Android < 4.44 と Firefox 27 のみの設定。他は flex-flow が優先される
	if orient == "vertical" then
		elm:cssText("-webkit-box-orient: vertical")

		if args["direction"] == "column" then
			elm:cssText("flex-direction: column")
		else
			elm:cssText("-webkit-box-direction: reverse")
			elm:cssText("flex-direction: reverse")
		end
	else
		if args["force-row-legacy"] == "1" then
			elm:cssText("-webkit-box-orient: horizontal")

			if args["direction"] == "row" then
				elm:cssText("flex-direction: row")
			else
				elm:cssText("-webkit-box-direction: reverse")
				elm:cssText("flex-direction: row-reverse")
			end
		else
			-- 上記以外の場合は、Firefox 27の表示不具合を避けるために column とする。
			elm:cssText("flex-direction: column")
		end
	end

	return elm
end

function p.set_style_flow(elm)
	local direction = args["direction"]
	local wrap = args["wrap"]

	if not(
		direction == "column" or direction == "column-reverse" or
		direction == "row-reverse"
	)  then
		direction = "row"
	end

	if not(wrap == "wrap-reverse" or wrap == "nowrap") then
		wrap = "wrap"
	end

	elm:cssText("-ms-flex-flow: " .. direction .. " " .. wrap .. "") --IE10用
	elm:cssText("flex-flow: " .. direction .. " " .. wrap .. "")

	return elm
end

function p.set_style_justify_content(elm)
	local justify_content = args["justify-content"]

	if p.contains({
		"flex-start", "flex-end", "start", "end", "center",
		"space-between", "space-around", "space-evenly"
	}, justify_content) then

		local webkit_ms_value --IE10, Android4.3用
		if string.find(justify_content, "space") then
			webkit_ms_value = "justify"
		else
			webkit_ms_value = justify_content:gsub("flex-", "")
		end

		if is_webkit_prefix_needed then --Android 4.3用
			elm:cssText("-webkit-box-align: " .. webkit_ms_value .. "")
		end
		elm:cssText("-ms-flex-align: ".. webkit_ms_value .. "") --IE10用
		if p.contains({"start", "end"}, justify_content) then
			-- IE11, Edge < 92, Firefox < 44, Chrome < 92, Opera, Android < 4.4.4用
			elm:cssText("justify-content: flex-" .. justify_content .. "")
		end
		if justify_content == "space-evenly" then
			-- IE11, Edge < 18, Firefox < 51, Chrome < 59, Safari < 10.1, Opera < 46,
			-- Android < 4.4.4用
			elm:cssText("justify-content: space-around")
		end
		elm:cssText("justify-content: " .. justify_content .. "")
	end

	return elm
end

function p.set_style_align_items(elm)
	local align_items = args["align-items"]

	if p.contains({
		"stretch", "flex-start", "flex-end", "start", "end", "center", "baseline"
	}, align_items) then
		local webkit_ms_value = align_items:gsub("flex-", "")
		if is_webkit_prefix_needed then --Android 4.3用
			elm:cssText("-webkit-box-align: " .. webkit_ms_value .. "")
		end

		elm:cssText("-ms-flex-align: " .. webkit_ms_value .. "") --IE10用
		if p.contains({"start", "end"}, align_items) then
			-- IE11, Edge < 92, Firefox < 44, Chrome < 92, Safari, Opera < 43,
			-- Android < 4.4.4用
			elm:cssText("align-items: flex-" .. align_items .. "")
		end
		elm:cssText("align-items: " .. align_items .. "")
	end

	return elm
end

function p.set_style_align_content(elm)
	local align_content = args["align-content"]

	if p.contains({
		"stretch", "flex-start", "flex-end", "start", "end", "center",
		"space-between", "space-around", "space-evenly"
	}, align_content) then
		local ms_value --IE10用
		if align_content == "space-between" then
			ms_value = "justify"
		elseif align_content == "space-around" then
			ms_value = "distribute"
		else
			ms_value= align_content:gsub("flex-", "")
		end
		elm:cssText("-ms-flex-line-pack: " .. ms_value .. "")

		if p.contains({"start", "end"}, align_content) then
			-- IE11, Edge < 92, Firefox < 44, Chrome < 92, Safari, Opera,
			-- Android < 4.4.4用
			elm:cssText("align-content: flex-" .. align_content .. "")
		end
		if align_content == "space-evenly" then
			-- IE11, Edge < 18, Firefox < 51, Chrome < 59, Safari < 10.1, Opera < 46,
			-- Android < 4.4.4用
			elm:cssText("align-content: space-around")
		end
		elm:cssText("align-content: " .. align_content .. "")
	end

	return elm
end

function p.set_style_gap(elm)
	local gap = args["gap"]
	elm:cssText("gap: " .. (args["gap"] or "0 1em") .. "")
	return elm
end

function p.set_style_others(elm)
	local style = args["style"]
	if style then
		style = style:gsub("\"", "")
		elm:cssText(style)
	end
	return elm
end

function p.contains(list, str)
	for i, elm in pairs(list) do
		if elm == str then
			return true
		end
	end
	return false
end

return p