Module:ColorSwatch: Difference between revisions

From Wiki of ZZT
Jump to navigation Jump to search
(Initial implementation: Port swatch code from Module:Color and set it up to use the EGAColor library)
 
(Draw blinking-color symbol with triangular borders; vary drop shadow for contrast)
 
(2 intermediate revisions by the same user not shown)
Line 16: Line 16:
local name = get_name(bg, fg, blinking)
local name = get_name(bg, fg, blinking)
local swatch = get_swatch(bg, fg, blinking)
local swatch = get_swatch(bg, fg, blinking)
local hex = get_hex(bg, fg)
local hex = get_hex(bg, fg, blinking)
return string.format("%s %s (%s)", name, tostring(swatch), hex)
return string.format("%s %s (%s)", name, tostring(swatch), hex)
end
end
Line 22: Line 22:
function get_name(bg, fg, blinking)
function get_name(bg, fg, blinking)
local result = color.to_name(fg) .. " on " .. color.to_name(bg)
local result = color.to_name(fg) .. " on " .. color.to_name(bg)
if blinking and bg >= 8 then
if blinking then
result = "blinking " .. result
result = "blinking " .. result
end
end
Line 31: Line 31:
local bg = color.to_hex_color(bg)
local bg = color.to_hex_color(bg)
local fg = color.to_hex_color(fg)
local fg = color.to_hex_color(fg)
-- Use a drop shadow that contrasts with bg
local shadow_color = "#808080"
if bg == 7 then
shadow_color = "#000"
end


local outer = mw.html.create("span")
local outer = mw.html.create("span")
Line 37: Line 43:
height = "1em",
height = "1em",
["background-color"] = bg,
["background-color"] = bg,
["box-shadow"] = "0 0 1px #808080",
["box-shadow"] = "0 0 1px " .. shadow_color,
display = "inline-flex",
display = "inline-flex",
["align-items"] = "center",
["align-items"] = "center",
Line 45: Line 51:
inner:css({
inner:css({
display = "inline-block",
display = "inline-block",
width = "0.5em",
width = "0",
height = "0.5em"
height = "0",
border = "0.25em solid",
})
})
if blinking then
if blinking then
local gradient = "linear-gradient(135deg, {h} 0% 50%, {h}0 50% 100%)"
gradient = string.gsub(gradient, "{h}", fg)
inner:css({
inner:css({
background = gradient,
["border-color"] = string.format("%s %s0 %s0 %s", fg, fg, fg, fg),
["box-shadow"] = "inset 0 0 0 1px " .. fg
["box-shadow"] = "0 0 0 1px " .. fg
})
})
else
else
inner:css("background-color", fg)
inner:css("border-color", fg)
end
end
return outer
return outer
end
end


function get_hex(bg, fg)
function get_hex(bg, fg, blinking)
if bg < 8 and blinking then
bg = bg + 8
end
return string.format("0x%02X", bg*16 + fg)
return string.format("0x%02X", bg*16 + fg)
end
end


return p
return p

Latest revision as of 07:50, 15 January 2021

Documentation for this module may be created at Module:ColorSwatch/doc

local p = {}

local color = require("Module:EGAColor")

function p.swatch(frame)
	local bg = color.to_index(frame.args.bg)
	local fg = color.to_index(frame.args.fg)
	local blinking = false
	for _, arg in ipairs(frame.args) do
		if string.lower(arg) == "blinking" then
			blinking = true
			break
		end
	end

	local name = get_name(bg, fg, blinking)
	local swatch = get_swatch(bg, fg, blinking)
	local hex = get_hex(bg, fg, blinking)
	return string.format("%s %s (%s)", name, tostring(swatch), hex)
end

function get_name(bg, fg, blinking)
	local result = color.to_name(fg) .. " on " .. color.to_name(bg)
	if blinking then
		result = "blinking " .. result
	end
	return result
end

function get_swatch(bg, fg, blinking)
	local bg = color.to_hex_color(bg)
	local fg = color.to_hex_color(fg)

	-- Use a drop shadow that contrasts with bg
	local shadow_color = "#808080"
	if bg == 7 then
		shadow_color = "#000"
	end

	local outer = mw.html.create("span")
	outer:css({
		width = "1.25em",
		height = "1em",
		["background-color"] = bg,
		["box-shadow"] = "0 0 1px " .. shadow_color,
		display = "inline-flex",
		["align-items"] = "center",
		["justify-content"] = "center"
	})
	local inner = outer:tag("span")
	inner:css({
		display = "inline-block",
		width = "0",
		height = "0",
		border = "0.25em solid",
	})
	if blinking then
		inner:css({
			["border-color"] = string.format("%s %s0 %s0 %s", fg, fg, fg, fg),
			["box-shadow"] = "0 0 0 1px " .. fg
		})
	else
		inner:css("border-color", fg)
	end
	return outer
end

function get_hex(bg, fg, blinking)
	if bg < 8 and blinking then
		bg = bg + 8
	end
	return string.format("0x%02X", bg*16 + fg)
end

return p