Module:Sandbox/DrMeepster/flexuserbox

Documentation for this module may be created at Module:Sandbox/DrMeepster/flexuserbox/doc

local p = {}

local cyy = require("Module:Sandbox/DrMeepster/C_yes_yes")

local userboxCss = {
	["box"] = {
		["display"] = "flex",
		["float"] = "left",
		["width"] = "238px",
		["height"] = "45px",
		["border"] = "1px solid #999",
		["margin"] = "1px"
	},
	
	["id"] = {
		["box"] = {
			["display"] = "flex",
			["border"] = "0",
			["width"] = "45px",
			["height"] = "45px",
			["background"] = "#ddd",
			["font-size"] = "14pt",
			["font-weight"] = "bold",
			["color"] = "black",
			["padding"] = "0 1px 0 0",
			["flex-shrink"] = "0"
		},
	
		["content"] = {
			["margin"] = "auto"
		}
	
	},
	
	["info"] = {
		["box"] = {
			["display"] = "flex",
			["border"] = "0",
			["padding"] = "0 4px 0 4px",
			["background"] = "#eee",
			["flex-grow"] = "1",
		},
	
		["content"] = {
			["margin-top"] = "auto",
			["margin-bottom"] = "auto",
			["text-align"] = "left",
			["font-size"] = "8pt",
			["color"] = "black"
		}
	}
}

local cyyCss = {
	{
		selectors = {cyy.Selector.new{class="fub"}},
		properties = {
			{"display", "flex"},
			{"float", "left"},
			{"width", "238px"},
			{"height", "45px"},
			{"border", "1px solid #999"},
			{"margin", "1px"}
		}
	},
	
	{
		selectors = {cyy.Selector.new{class="fub-id"}},
		properties = {
			{"display", "flex"},
			{"border", "0"},
			{"width", "45px"},
			{"height", "45px"},
			{"background", "#ddd"},
			{"font-size", "14pt"},
			{"font-weight", "bold"},
			{"color", "black"},
			{"padding", "0 1px 0 0"},
			{"flex-shrink", "0"}
		}
	},

	{
		selectors = {cyy.Selector.new{class="fub-id-content"}},
		properties = {
			{"margin", "auto"}
		}
	},

	{
		selectors = {cyy.Selector.new{class="fub-info"}},
		properties = {
			{"display", "flex"},
			{"border", "0"},
			{"padding", "0 4px 0 4px"},
			{"background", "#eee"},
			{"flex-grow", "1"}
		}
	},

	{
		selectors = {cyy.Selector.new{class="fub-info-content"}},
		properties = {
			{"margin-top", "auto"},
			{"margin-bottom", "auto"},
			{"text-align", "left"},
			{"font-size", "8pt"},
			{"color", "black"}
		}
	}
}



function p.test()
	return p.boxFactory(cyyCss, 
		p.idFactory(cyyCss, "id"),
		p.infoFactory(cyyCss, "Lorem ipsum dolor sit amet")
	)
end

function p.userboxFactory(css, ...)
	local nodes = {}
	
	for _,v in ipairs(arg) do
		table.insert(nodes, arg(css))
	end
end

function p.boxFactory(css, ...)
	local box = cyy.Element.new("div")
		:class("fub")
	
	for _,v in ipairs(arg) do
		box:add(v)
	end
	
	return box--[[:stylesheet(css)]]:bake()
end

function p.idFactory(css, text)
	return cyy.Element.new("div")
		:class("fub-id")
		:tag("div")
			:class("fub-id-content")
			:wikitext(text)
		:done()
end

function p.infoFactory(css, text)
	return cyy.Element.new("div")
		:class("fub-info")
		:tag("p")
			:class("fub-info-content")
			:wikitext(text)
		:done()
end

return p