Module:ColorSwatch - Revision history

Quantum: Draw blinking-color symbol with triangular borders; vary drop shadow for contrast

2021-01-15T07:50:46Z

Draw blinking-color symbol with triangular borders; vary drop shadow for contrast

← Older revision		Revision as of 07:50, 15 January 2021
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

Quantum: Show correct hex representation when blinking = true

2021-01-14T09:38:25Z

Show correct hex representation when blinking = true

← Older revision		Revision as of 09:38, 14 January 2021
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 61:		Line 61:
	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

Quantum: Remove bg check for blinking because it was interfering with creating blinking colors

2021-01-14T09:23:08Z

Remove bg check for blinking because it was interfering with creating blinking colors

← Older revision		Revision as of 09:23, 14 January 2021
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

Quantum: Initial implementation: Port swatch code from Module:Color and set it up to use the EGAColor library

2021-01-14T09:07:56Z

Initial implementation: Port swatch code from Module:Color and set it up to use the EGAColor library

New page

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)
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 and bg >= 8 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)

local outer = mw.html.create("span")
outer:css({
width = "1.25em",
height = "1em",
["background-color"] = bg,
["box-shadow"] = "0 0 1px #808080",
display = "inline-flex",
["align-items"] = "center",
["justify-content"] = "center"
})
local inner = outer:tag("span")
inner:css({
display = "inline-block",
width = "0.5em",
height = "0.5em"
})
if blinking then
local gradient = "linear-gradient(135deg, {h} 0% 50%, {h}0 50% 100%)"
gradient = string.gsub(gradient, "{h}", fg)
inner:css({
background = gradient,
["box-shadow"] = "inset 0 0 0 1px " .. fg
})
else
inner:css("background-color", fg)
end
return outer
end

function get_hex(bg, fg)
return string.format("0x%02X", bg*16 + fg)
end

return p