Skip to main content

Color Lib

buildfire.colorLib#

Color library is used to generate Gradient/Solid Colors.

Methods#

showDialog()
#

buildfire.colorLib.showDialog(data, options, onChange, callback)

Dialog with color pickers used to generate solid color or color gradient

buildfire.colorLib.showDialog(null, null, null, (err, result) => {
if (result.colorType === "solid") {
console.log("Selected color is", result.solid.color);
} else {
console.log("Background gradient is", result.gradient.backgroundCSS);
}
});

data#

Object used to preload data into dialog.

NameTypeRequiredDescriptionDefault
colorTypestringnoSpecifies color type. Can be "solid" or "gradient""gradient"
gradientobjectnoObject specifying gradient
solidobjectnoObject specifying solid color
data.gradient#

Object specifying gradient color

NameTypeRequiredDescriptionDefault
colors[object]noArray of color objects explaining the gradient
gradientTypestringnoGradient direction "to bottom","to right","to top left","to top right","to top","to left","to bottom left","to bottom right""to bottom"
backgroundCSSstringnoCSS to be used as backgroundColor css property
data.gradient.colors[]#

Object specifying color in gradient

NameTypeRequiredDescriptionDefault
colorstringnoColor css propertyrgba(255,255,255,1)
percentagenumbernoPercentage this color will take on gradient0
opacitynumbernoOpacity, 0-100100
data.solid#

Object specifying solid color

NameTypeRequiredDescriptionDefault
colorstringnoRGBA value of selected colorrgba(255,255,255,1)
colorHexstringnoHEX value of selected color
opacitynumbernoOpacity, 0-100100
backgroundCSSstringnoCSS to be used as backgroundColor css propertybackground: rgba(255,255,255,1)
css propertystringnoCSS to be used as color css propertycolor: rgba(255,255,255,1)

options#

Object used to preload data into dialog.

NameTypeRequiredDescriptionDefault
backdropbooleannoSpecifies if you want to show the backdrop for the dialogtrue
positionstringnoSpecifies the dialog position. "left" or "right" or "center"center
hideGradientbooleannoSpecifies if you want to hide the Gradient UIfalse
hideSolidbooleannoSpecifies if you want to hide the Solid UIfalse

onChange(err, result)#

Function called every time a color is changed inside the picker

NameTypeDescription
errstringerror string, null when operation is successfull
resultobjectColor object, see data

callback(err, result)#

Function called after closing the dialog. If a save is clicked the result will be the new value, but if the cancel is clicked the result will be the old value.

NameTypeDescription
errstringerror string, null when operation is successfull
resultobjectColor object, see data

More examples#

buildfire.colorLib.showDialog(
{ colorType: "solid" },
{ hideGradient: true },
console.log,
(err, result) => {
console.log("Selected color is", result.solid.color);
}
);

Example data object#

{
"gradient": {
"colors": [
{
"color": "rgba(47,211,211,1)",
"percentage": 0,
"opacity": 100,
"colorHex": "#2fd3d3"
},
{
"color": "rgba(2,9,9,1)",
"percentage": 100,
"opacity": 100,
"colorHex": "#020909"
}
],
"gradientType": "to bottom",
"backgroundCSS": "background: linear-gradient(to bottom, rgba(47,211,211,1) 0%, rgba(2,9,9,1) 100%)"
},
"solid": {
"color": "rgba(255,255,255,1)",
"opacity": 100,
"backgroundCSS": "background: rgba(255,255,255,1)",
"colorCSS": "color: rgba(255,255,255,1)"
},
"colorType": "gradient"
}