Modulo:Materialize colors examples

Versione del 4 apr 2022 alle 23:20 di Valerio Bozzolan (discussione | contributi) (pubblicazione work in progress per Template:Materialize colors)
(diff) ← Versione meno recente | Versione attuale (diff) | Versione più recente → (diff)

Questo modulo ad uso interno serve semplicemente a generare la tavolozza di colori di esempio presente in questo template:

Funzioni

allPalettesHTML

Questo metodo permette di generare tutte le palette dei colori. Utilizzo di esempio nel wikitesto.

Utilizzo base:

{{Materialize colors}}
{{#invoke:Materialize colors examples|allPalettesHTML}}

Utilizzo avanzato:

{{Materialize colors}}
{{#invoke:Materialize colors examples|allPalettesHTML
|colorExtraClass = classe CSS aggiuntiva da mostrare per ogni colore
|colorPre        = wikitesto prima di ogni singolo colore
|colorPost       = wikitesto dopo ogni singolo colore
|containerPre    = wikitesto prima di ogni gruppo di colori
|containerPost   = wikitesto dopo ogni gruppo di colori
|isText          = normalmente è a 0 cioè la tavolozza è per contenuti, impostare ad 1 per colorare il testo
}}

Esempio di tavolozza per colorare un contenitore

Segue un esempio per generare una tavolozza dei nomi per colorare un contenitore, dividendo il risultato in qualche colonna (usando altri template di appoggio):

{{Materialize colors}}
{{Bootstrap}}
<div class="row">
{{#invoke:Materialize colors examples
|allPalettesHTML
|containerPre  = <div class="col-md-3 materialize-colors-palette">
|containerPost = </div>
}}
</div>

Ecco il risultato che si otterrebbe utilizzando quest'ultimo wikitesto:

Apri per visualizzare l'esempio

Errore script: la funzione "allPalettesHTML" non esiste.

Esempio di tavolozza per colorare un testo

Segue un esempio per generare una tavolozza dei nomi per colorare un testo, dividendo il risultato in qualche colonna (usando altri template di appoggio):

{{Materialize colors}}
{{Bootstrap}}
<div class="row">
{{#invoke:Materialize colors examples
|allPalettesHTML
|isText        = 1
|containerPre  = <div class="col-md-4">
|containerPost = </div>
}}
</div>

Ecco il risultato che si otterrebbe utilizzando quest'ultimo wikitesto:

Apri per visualizzare l'esempio

Errore script: la funzione "allPalettesHTML" non esiste.


--- Module created to generate the examples in this page:
-- [[Template:Materialize colors]]

--
-- CLASSES
--

---
-- Simple class describing a MaterialFlavor (e.g. "darken-2")
---
local MaterialFlavor = {}
MaterialFlavor.__index = MaterialFlavor

---
-- Simple class describing a MaterialColorFlavor (e.g. "red darken-2")
---
local MaterialColorFlavor = {}
MaterialColorFlavor.__index = MaterialColorFlavor

---
-- Simple class describing a MaterialColor (e.g. "red")
---
local MaterialColor = {}
MaterialColor.__index = MaterialColor

---
--- METHODS
---

---
-- Constructor for a MaterialFlavor
-- @param name name of the color flavor (e.g. "darken-2")
-- @param isDark whenever it's a dark flavor or not (e.g. true)
-- @return MaterialFlavor
function MaterialFlavor:new( name, isDark )
	local materialFlavor = {
		name   = name,
		isDark = isDark or false,
	}
	setmetatable( materialFlavor, MaterialFlavor )
	return materialFlavor
end

---
-- Constructor for a MaterialColorFlavor
-- @param color name of the color e.g. 'red'
-- @param flavor reference to a MaterialFlavor
-- @return MaterialColorFlavor
function MaterialColorFlavor:new( color, flavor )
	local materialColorFlavor = {
		color  = color,
		flavor = flavor,
	}
	setmetatable( materialColorFlavor, MaterialColorFlavor )
	return materialColorFlavor
end

---
-- Get the CSS class name for the text
-- @return string
function MaterialColorFlavor:getTextCSSClass()
	return self.flavor.isDark and 'white-text' or nil
end

---
-- Constructor for a MaterialColorFlavor
-- @param color name of the color e.g. 'red'
-- @param flavor reference to a MaterialFlavor
-- @return string
function MaterialColorFlavor:getContainerCSSClass()
	local s = self.color

	if self.flavor.name ~= nil then
		s = s + " " + self.flavor.name
	end
	
	return s
end

---
-- Get the container's CSS class, plus the text class (if any)
-- @param color name of the color e.g. 'red'
-- @param flavor reference to a MaterialFlavor
-- @return string
function MaterialColorFlavor:getContainerCSSClassAndTextClass()
	local s = self:getContainerCSSClassSimple()
	local extraCSSClass = self:getTextCSSClass()
	if extraCSSClass ~= nil then
		s = s + " " + extraCSSClass
	end
	return s
end

--- Constructor for a MaterialColor
-- @param color name of the color e.g. 'red'
function MaterialColor:new( color )
	local materialColor = {
		color  = color,
	}
	setmetatable( materialColor, MaterialColor )
	return materialColor
end

--- Get all the color flavors
-- @param color name of the color e.g. 'red'
function MaterialColor:getColorFlavors( )
	local flavors = {}
	for i, flavor in pairs( KNOWN_FLAVORS ) do
		flavors[ i ] = MaterialColorFlavor:new( self.color, flavor )
	end
	return flavors
end

---
--- CONSTANTS
---

--- a complete array of generic color flavors
local KNOWN_FLAVORS = {
	MaterialFlavor:new( "lighten-5" ),
	MaterialFlavor:new( "lighten-4" ),
	MaterialFlavor:new( "lighten-3" ),
	MaterialFlavor:new( "lighten-2" ),
	MaterialFlavor:new( nil         ), -- default color
	MaterialFlavor:new( "darken-1", true ),
	MaterialFlavor:new( "darken-2", true ),
	MaterialFlavor:new( "darken-3", true ),
	MaterialFlavor:new( "darken-4", true ),
	MaterialFlavor:new( "accent-1" ),
	MaterialFlavor:new( "accent-2" ),
	MaterialFlavor:new( "accent-3" ),
	MaterialFlavor:new( "accent-4" ),
}

-- create a new package
local p = {}

--- main method
function p.main( frame )

	local s = ''

	-- inherit the frame
	frame = frame or mw.getCurrentFrame()

	-- color argument
	local color = frame.color

	local materialColor = MaterialColor:new( color )

	local apix = "\""

	for i, colorFlavor in pairs( materialColor:getColorFlavors() ) do

		s = s + "<div class=" + apix
			+ flavor:getContainerCSSClassAndTextClass()
			+ apix + ">"
			+ flavor:getContainerCSSClass()
			+ "</div>"
	end

	return s
	
end

-- return the package
return p