モジュール:サンドボックス/JuthaDDA/LuaTest2

モジュールの解説[表示] [編集] [履歴] [キャッシュを破棄]

モジュール:Flexboxのテスト中。

• {{Flexbox/sandbox}}
• {{Flexbox/testcases}}
• {{Flexbox start/sandbox}}
• {{Flexbox start/testcases}}

この解説は、モジュール:サンドボックス/JuthaDDA/LuaTest2/docから呼び出されています。 (編集 | 履歴)
編集者は、このモジュールをサンドボックス (作成 | 複製)とテストケース (作成)で試すことができます。（解説）
このモジュールのサブページ一覧。

-- template_args {
--   direction: "row", "row-reverse, "column", "column-reverse", nil;
--   wrap: "wrap", "wrap-reverse", "nowrap", nil;
--   justify-content: "flex-start", "flex-end", "start", "end", "center",
--     "space-between", "space-around", "space-evenly", nil;
--   align-items: "stretch", "flex-start", "flex-end", "start", "end", "center",
--     "baseline", nil;
--   align-content: 	"stretch", "flex-start", "flex-end", "start", "end",
--     "center", "space-between", "space-around", "space-evenly", nil;
--   gap: "<length>", "<length> <length>", nil;
--   style: CSS properties, nil;
--   force-row-legacy: "1", nil;
--   is-webkit-prefix-needed: boolean, nil;
-- }

local p = {}

function p.main()
	local args = mw.getCurrentFrame():getParent().args
	local container = p.createContainer(args)

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

	return tostring(container)
end

function p.opening()
	local args = mw.getCurrentFrame():getParent().args

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

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

function p.createContainer(template_args, self_closing)
	template_args["is_webkit_prefix_needed"] =
		template_args["is_webkit_prefix_needed"] or
		p.get_orient(template_args) == "vertical" or
		template_args["force-row-legacy"] == "1"
	local html_create_args = {}

	if (self_closing) 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, template_args)
	container = p.set_style_direction(container, template_args)
	container = p.set_style_flow(container, template_args)
	container = p.set_style_justify_content(container, template_args)
	container = p.set_style_align_items(container, template_args)
	container = p.set_style_align_content(container, template_args)
	container = p.set_style_gap(container, template_args)
	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, template_args)

	return container
end

function p.set_style_display(elm, args)
	if args["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, args)
	-- Android < 4.44 と Firefox 27 のみの設定。他は flex-flow が優先される
	if p.get_orient(args) == "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

-- 既定は flex-flow: row wrap;
function p.set_style_flow(elm, args)
	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, args)
	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 args["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, args)
	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 args["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, args)
	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

-- 既定は gap: 0 1em;
function p.set_style_gap(elm, args)
	local gap = args["gap"]
	elm:cssText("gap: " .. (args["gap"] or "0 1em") .. "")
	return elm
end

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

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

	return "horizontal"
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