モジュール:Flexbox

local p = {}
local args = mw.getCurrentFrame():getParent().args
function p.get_orient()
	-- Android $", ">")
	return openingTag
end
function p.closing()
	return ""
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