mirror of
https://github.com/zombieFox/nightTab.git
synced 2025-01-23 22:39:19 +01:00
[refactor] switch to improved colour conversion helper
This commit is contained in:
zombieFox
parent
7ee92ce725
commit
be465238bf
@ -127,10 +127,10 @@ var background = (function() {
|
||||
helper.e(".control-background-image-file").value = "";
|
||||
},
|
||||
picker: function() {
|
||||
helper.e(".control-background-color-by-picker").value = helper.rgbToHex(state.get.current().background.color.custom);
|
||||
helper.e(".control-background-color-by-picker").value = helper.convertColor.rgb.hex(state.get.current().background.color.custom);
|
||||
},
|
||||
hex: function() {
|
||||
helper.e(".control-background-color-by-hex").value = helper.rgbToHex(state.get.current().background.color.custom);
|
||||
helper.e(".control-background-color-by-hex").value = helper.convertColor.rgb.hex(state.get.current().background.color.custom);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -2594,8 +2594,8 @@ var control = (function() {
|
||||
func: function() {
|
||||
theme.mod.color.hsl();
|
||||
theme.render.color.shade();
|
||||
theme.render.color.range.hsl();
|
||||
theme.render.color.range.rgb();
|
||||
theme.render.color.input.range.hsl();
|
||||
theme.render.color.input.range.rgb();
|
||||
theme.render.color.input.hex();
|
||||
theme.render.color.input.picker();
|
||||
}
|
||||
@ -2606,8 +2606,8 @@ var control = (function() {
|
||||
func: function() {
|
||||
theme.mod.color.hsl();
|
||||
theme.render.color.shade();
|
||||
theme.render.color.range.hsl();
|
||||
theme.render.color.range.rgb();
|
||||
theme.render.color.input.range.hsl();
|
||||
theme.render.color.input.range.rgb();
|
||||
theme.render.color.input.hex();
|
||||
theme.render.color.input.quick();
|
||||
}
|
||||
@ -2619,8 +2619,8 @@ var control = (function() {
|
||||
func: function() {
|
||||
theme.mod.color.hsl();
|
||||
theme.render.color.shade();
|
||||
theme.render.color.range.hsl();
|
||||
theme.render.color.range.rgb();
|
||||
theme.render.color.input.range.hsl();
|
||||
theme.render.color.input.range.rgb();
|
||||
theme.render.color.input.picker();
|
||||
theme.render.color.input.quick();
|
||||
}
|
||||
@ -2951,7 +2951,7 @@ var control = (function() {
|
||||
return parseInt(object.element.value, 10);
|
||||
},
|
||||
color: function(object) {
|
||||
return helper.hexToRgb(object.element.value);
|
||||
return helper.convertColor.hex.rgb(object.element.value);
|
||||
}
|
||||
};
|
||||
var valueMod = {
|
||||
@ -2962,7 +2962,7 @@ var control = (function() {
|
||||
return value / 100;
|
||||
},
|
||||
hexTextString: function(value, object) {
|
||||
return helper.hexToRgb(value);
|
||||
return helper.convertColor.hex.rgb(value);
|
||||
}
|
||||
};
|
||||
var changeValue = function(object) {
|
||||
@ -2978,10 +2978,10 @@ var control = (function() {
|
||||
path: object.path,
|
||||
newValue: newValue
|
||||
});
|
||||
// console.log("state set", object.path, helper.getObject({
|
||||
// object: state.get.current(),
|
||||
// path: object.path
|
||||
// }));
|
||||
console.log("state set", object.path, helper.getObject({
|
||||
object: state.get.current(),
|
||||
path: object.path
|
||||
}));
|
||||
};
|
||||
};
|
||||
var bindControl = function(object) {
|
||||
@ -3947,7 +3947,7 @@ var control = (function() {
|
||||
return value * 100;
|
||||
},
|
||||
hexTextString: function(value, element) {
|
||||
return helper.rgbToHex(value);
|
||||
return helper.convertColor.rgb.hex(value);
|
||||
}
|
||||
};
|
||||
var setValue = {
|
||||
@ -4006,7 +4006,7 @@ var control = (function() {
|
||||
object.element.value = newValue;
|
||||
},
|
||||
color: function(object) {
|
||||
object.element.value = helper.rgbToHex(helper.getObject({
|
||||
object.element.value = helper.convertColor.rgb.hex(helper.getObject({
|
||||
object: state.get.current(),
|
||||
path: object.path
|
||||
}));
|
||||
|
||||
155
src/js/helper.js
155
src/js/helper.js
@ -195,90 +195,6 @@ var helper = (function() {
|
||||
};
|
||||
};
|
||||
|
||||
var hslToRgb = function(hslObject) {
|
||||
if (hslObject == undefined) {
|
||||
return null;
|
||||
};
|
||||
|
||||
var chroma = (1 - Math.abs((2 * hslObject.l) - 1)) * hslObject.s;
|
||||
var huePrime = hslObject.h / 60;
|
||||
var secondComponent = chroma * (1 - Math.abs((huePrime % 2) - 1));
|
||||
|
||||
huePrime = Math.floor(huePrime);
|
||||
var red;
|
||||
var green;
|
||||
var blue;
|
||||
|
||||
if (huePrime === 0 || huePrime === 6) {
|
||||
red = chroma;
|
||||
green = secondComponent;
|
||||
blue = 0;
|
||||
} else if (huePrime === 1) {
|
||||
red = secondComponent;
|
||||
green = chroma;
|
||||
blue = 0;
|
||||
} else if (huePrime === 2) {
|
||||
red = 0;
|
||||
green = chroma;
|
||||
blue = secondComponent;
|
||||
} else if (huePrime === 3) {
|
||||
red = 0;
|
||||
green = secondComponent;
|
||||
blue = chroma;
|
||||
} else if (huePrime === 4) {
|
||||
red = secondComponent;
|
||||
green = 0;
|
||||
blue = chroma;
|
||||
} else if (huePrime === 5) {
|
||||
red = chroma;
|
||||
green = 0;
|
||||
blue = secondComponent;
|
||||
};
|
||||
|
||||
var lightnessAdjustment = hslObject.l - (chroma / 2);
|
||||
red += lightnessAdjustment;
|
||||
green += lightnessAdjustment;
|
||||
blue += lightnessAdjustment;
|
||||
|
||||
var result = {
|
||||
r: Math.round(red * 255),
|
||||
g: Math.round(green * 255),
|
||||
b: Math.round(blue * 255)
|
||||
};
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
var hexToRgb = function(hex) {
|
||||
if (hex == undefined) {
|
||||
return null;
|
||||
};
|
||||
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
if (result) {
|
||||
result = {
|
||||
r: parseInt(result[1], 16),
|
||||
g: parseInt(result[2], 16),
|
||||
b: parseInt(result[3], 16)
|
||||
};
|
||||
};
|
||||
return result;
|
||||
};
|
||||
|
||||
var rgbToHex = function(rgbObject) {
|
||||
if (rgbObject == undefined) {
|
||||
return null;
|
||||
};
|
||||
var componentToHex = function(hexPart) {
|
||||
hexPart = hexPart.toString(16);
|
||||
if (hexPart.length == 1) {
|
||||
hexPart = "0" + hexPart
|
||||
};
|
||||
return hexPart;
|
||||
};
|
||||
var result = "#" + componentToHex(rgbObject.r) + componentToHex(rgbObject.g) + componentToHex(rgbObject.b);
|
||||
return result;
|
||||
};
|
||||
|
||||
var makeNode = function(override) {
|
||||
var options = {
|
||||
tag: null,
|
||||
@ -666,9 +582,9 @@ var helper = (function() {
|
||||
};
|
||||
|
||||
convertColor.rgb.hsl = function(rgb) {
|
||||
var r = rgb[0] / 255;
|
||||
var g = rgb[1] / 255;
|
||||
var b = rgb[2] / 255;
|
||||
var r = rgb.r / 255;
|
||||
var g = rgb.g / 255;
|
||||
var b = rgb.b / 255;
|
||||
var min = Math.min(r, g, b);
|
||||
var max = Math.max(r, g, b);
|
||||
var delta = max - min;
|
||||
@ -701,36 +617,44 @@ var helper = (function() {
|
||||
s = delta / (2 - max - min);
|
||||
};
|
||||
|
||||
return [h, s * 100, l * 100];
|
||||
return {
|
||||
h: h,
|
||||
s: s * 100,
|
||||
l: l * 100
|
||||
};
|
||||
};
|
||||
|
||||
convertColor.rgb.hex = function(args) {
|
||||
var integer = ((Math.round(args[0]) & 0xFF) << 16) +
|
||||
((Math.round(args[1]) & 0xFF) << 8) +
|
||||
(Math.round(args[2]) & 0xFF);
|
||||
var integer = ((Math.round(args.r) & 0xFF) << 16) +
|
||||
((Math.round(args.g) & 0xFF) << 8) +
|
||||
(Math.round(args.b) & 0xFF);
|
||||
|
||||
var string = integer.toString(16).toUpperCase();
|
||||
return "000000".substring(string.length) + string;
|
||||
var string = integer.toString(16);
|
||||
return "#" + "000000".substring(string.length) + string;
|
||||
};
|
||||
|
||||
convertColor.hsl.rgb = function(hsl) {
|
||||
var h = hsl[0] / 360;
|
||||
var s = hsl[1] / 100;
|
||||
var l = hsl[2] / 100;
|
||||
var h = hsl.h / 360;
|
||||
var s = hsl.s / 100;
|
||||
var l = hsl.l / 100;
|
||||
var t2;
|
||||
var t3;
|
||||
var val;
|
||||
|
||||
if (s === 0) {
|
||||
val = l * 255;
|
||||
return [val, val, val];
|
||||
}
|
||||
return {
|
||||
r: val,
|
||||
g: val,
|
||||
b: val
|
||||
};
|
||||
};
|
||||
|
||||
if (l < 0.5) {
|
||||
t2 = l * (1 + s);
|
||||
} else {
|
||||
t2 = l + s - l * s;
|
||||
}
|
||||
};
|
||||
|
||||
var t1 = 2 * l - t2;
|
||||
|
||||
@ -739,11 +663,11 @@ var helper = (function() {
|
||||
t3 = h + 1 / 3 * -(i - 1);
|
||||
if (t3 < 0) {
|
||||
t3++;
|
||||
}
|
||||
};
|
||||
|
||||
if (t3 > 1) {
|
||||
t3--;
|
||||
}
|
||||
};
|
||||
|
||||
if (6 * t3 < 1) {
|
||||
val = t1 + (t2 - t1) * 6 * t3;
|
||||
@ -753,19 +677,27 @@ var helper = (function() {
|
||||
val = t1 + (t2 - t1) * (2 / 3 - t3) * 6;
|
||||
} else {
|
||||
val = t1;
|
||||
}
|
||||
};
|
||||
|
||||
rgb[i] = val * 255;
|
||||
}
|
||||
};
|
||||
|
||||
return rgb;
|
||||
return {
|
||||
r: rgb[0],
|
||||
g: rgb[1],
|
||||
b: rgb[2]
|
||||
};
|
||||
};
|
||||
|
||||
convertColor.hex.rgb = function(args) {
|
||||
var match = args.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i);
|
||||
if (!match) {
|
||||
return [0, 0, 0];
|
||||
}
|
||||
return {
|
||||
r: 0,
|
||||
g: 0,
|
||||
b: 0
|
||||
};
|
||||
};
|
||||
|
||||
var colorString = match[0];
|
||||
|
||||
@ -773,14 +705,18 @@ var helper = (function() {
|
||||
colorString = colorString.split("").map(function(char) {
|
||||
return char + char;
|
||||
}).join("");
|
||||
}
|
||||
};
|
||||
|
||||
var integer = parseInt(colorString, 16);
|
||||
var r = (integer >> 16) & 0xFF;
|
||||
var g = (integer >> 8) & 0xFF;
|
||||
var b = integer & 0xFF;
|
||||
|
||||
return [r, g, b];
|
||||
return {
|
||||
r: r,
|
||||
g: g,
|
||||
b: b
|
||||
};
|
||||
};
|
||||
|
||||
// exposed methods
|
||||
@ -796,9 +732,6 @@ var helper = (function() {
|
||||
getDateTime: getDateTime,
|
||||
sortObject: sortObject,
|
||||
applyOptions: applyOptions,
|
||||
hexToRgb: hexToRgb,
|
||||
rgbToHex: rgbToHex,
|
||||
hslToRgb: hslToRgb,
|
||||
makeNode: makeNode,
|
||||
node: node,
|
||||
setObject: setObject,
|
||||
|
||||
@ -113,11 +113,16 @@ var link = (function() {
|
||||
bookmarks.get().forEach(function(arrayItem, index) {
|
||||
arrayItem.items.forEach(function(arrayItem, index) {
|
||||
arrayItem.accent.override = true;
|
||||
arrayItem.accent.color = helper.hslToRgb({
|
||||
var rgb = helper.convertColor.hsl.rgb({
|
||||
h: degree,
|
||||
s: 1,
|
||||
l: 0.5
|
||||
s: 100,
|
||||
l: 50
|
||||
});
|
||||
arrayItem.accent.color = {
|
||||
r: parseInt(rgb.r, 10),
|
||||
g: parseInt(rgb.g, 10),
|
||||
b: parseInt(rgb.b, 10)
|
||||
};
|
||||
degree = degree + units;
|
||||
});
|
||||
});
|
||||
@ -930,8 +935,8 @@ var link = (function() {
|
||||
helper.addClass(form.querySelector(".link-form-input-accent-helper"), "disabled");
|
||||
};
|
||||
if (stagedLink.link.accent.color.r != null && stagedLink.link.accent.color.g != null && stagedLink.link.accent.color.b != null) {
|
||||
accentColorPicker.value = helper.rgbToHex(stagedLink.link.accent.color);
|
||||
accentColorHex.value = helper.rgbToHex(stagedLink.link.accent.color);
|
||||
accentColorPicker.value = helper.convertColor.rgb.hex(stagedLink.link.accent.color);
|
||||
accentColorHex.value = helper.convertColor.rgb.hex(stagedLink.link.accent.color);
|
||||
};
|
||||
};
|
||||
|
||||
@ -1006,20 +1011,20 @@ var link = (function() {
|
||||
}, false);
|
||||
accentCustomRadio.addEventListener("change", function() {
|
||||
stagedLink.link.accent.override = true;
|
||||
stagedLink.link.accent.color = helper.hexToRgb(accentColorPicker.value);
|
||||
stagedLink.link.accent.color = helper.convertColor.hex.rgb(accentColorPicker.value);
|
||||
accentColorPicker.removeAttribute("disabled");
|
||||
accentColorHex.removeAttribute("disabled");
|
||||
helper.removeClass(accentColorInputHelper, "disabled");
|
||||
}, false);
|
||||
accentColorPicker.addEventListener("change", function() {
|
||||
if (helper.isHexNumber(this.value)) {
|
||||
stagedLink.link.accent.color = helper.hexToRgb(this.value);
|
||||
stagedLink.link.accent.color = helper.convertColor.hex.rgb(this.value);
|
||||
accentColorHex.value = this.value;
|
||||
};
|
||||
}, false);
|
||||
accentColorHex.addEventListener("input", function() {
|
||||
if (helper.isHexNumber(this.value)) {
|
||||
stagedLink.link.accent.color = helper.hexToRgb(this.value);
|
||||
stagedLink.link.accent.color = helper.convertColor.hex.rgb(this.value);
|
||||
accentColorPicker.value = this.value;
|
||||
};
|
||||
}, false);
|
||||
@ -1668,10 +1673,10 @@ var link = (function() {
|
||||
|
||||
render.input = {
|
||||
picker: function() {
|
||||
helper.e(".control-link-item-color-by-picker").value = helper.rgbToHex(state.get.current().link.item.color.custom);
|
||||
helper.e(".control-link-item-color-by-picker").value = helper.convertColor.rgb.hex(state.get.current().link.item.color.custom);
|
||||
},
|
||||
hex: function() {
|
||||
helper.e(".control-link-item-color-by-hex").value = helper.rgbToHex(state.get.current().link.item.color.custom);
|
||||
helper.e(".control-link-item-color-by-hex").value = helper.convertColor.rgb.hex(state.get.current().link.item.color.custom);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
153
src/js/theme.js
153
src/js/theme.js
@ -21,16 +21,28 @@ var theme = (function() {
|
||||
|
||||
mod.color = {
|
||||
hsl: function() {
|
||||
var hsl = helper.convertColor.rgb.hsl([state.get.current().theme.color.rgb.r, state.get.current().theme.color.rgb.g, state.get.current().theme.color.rgb.b]);
|
||||
state.get.current().theme.color.hsl.h = parseInt(hsl[0], 10);
|
||||
state.get.current().theme.color.hsl.s = parseInt(hsl[1], 10);
|
||||
state.get.current().theme.color.hsl.l = parseInt(hsl[2], 10);
|
||||
var hsl = helper.convertColor.rgb.hsl(state.get.current().theme.color.rgb);
|
||||
helper.setObject({
|
||||
object: state.get.current(),
|
||||
path: "theme.color.hsl",
|
||||
newValue: {
|
||||
h: parseInt(hsl.h, 10),
|
||||
s: parseInt(hsl.s, 10),
|
||||
l: parseInt(hsl.l, 10)
|
||||
}
|
||||
});
|
||||
},
|
||||
rgb: function() {
|
||||
var rgb = helper.convertColor.hsl.rgb([state.get.current().theme.color.hsl.h, state.get.current().theme.color.hsl.s, state.get.current().theme.color.hsl.l]);
|
||||
state.get.current().theme.color.rgb.r = parseInt(rgb[0], 10);
|
||||
state.get.current().theme.color.rgb.g = parseInt(rgb[1], 10);
|
||||
state.get.current().theme.color.rgb.b = parseInt(rgb[2], 10);
|
||||
var rgb = helper.convertColor.hsl.rgb(state.get.current().theme.color.hsl);
|
||||
helper.setObject({
|
||||
object: state.get.current(),
|
||||
path: "theme.color.rgb",
|
||||
newValue: {
|
||||
r: parseInt(rgb.r, 10),
|
||||
g: parseInt(rgb.g, 10),
|
||||
b: parseInt(rgb.b, 10)
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
@ -96,104 +108,103 @@ var theme = (function() {
|
||||
};
|
||||
}
|
||||
};
|
||||
var hsl = color[state.get.current().theme.accent.random.style]();
|
||||
var randomColor = helper.hslToRgb({
|
||||
h: hsl.h,
|
||||
s: (hsl.s / 100),
|
||||
l: (hsl.l / 100)
|
||||
});
|
||||
var rgb = helper.convertColor.hsl.rgb(color[state.get.current().theme.accent.random.style]());
|
||||
var hex = helper.convertColor.rgb.hex(rgb);
|
||||
helper.setObject({
|
||||
object: state.get.current(),
|
||||
path: "theme.accent.current",
|
||||
newValue: randomColor
|
||||
newValue: {
|
||||
r: parseInt(rgb.r, 10),
|
||||
g: parseInt(rgb.g, 10),
|
||||
b: parseInt(rgb.b, 10)
|
||||
}
|
||||
});
|
||||
helper.e(".control-theme-accent-current-quick").value = helper.rgbToHex(randomColor);
|
||||
helper.e(".control-theme-accent-current-picker").value = helper.rgbToHex(randomColor);
|
||||
helper.e(".control-theme-accent-current-hex").value = helper.rgbToHex(randomColor);
|
||||
helper.e(".control-theme-accent-current-quick").value = hex;
|
||||
helper.e(".control-theme-accent-current-picker").value = hex;
|
||||
helper.e(".control-theme-accent-current-hex").value = hex;
|
||||
};
|
||||
},
|
||||
input: {
|
||||
quick: function() {
|
||||
helper.e(".control-theme-accent-current-quick").value = helper.rgbToHex(state.get.current().theme.accent.current);
|
||||
helper.e(".control-theme-accent-current-quick").value = helper.convertColor.rgb.hex(state.get.current().theme.accent.current);
|
||||
},
|
||||
picker: function() {
|
||||
helper.e(".control-theme-accent-current-picker").value = helper.rgbToHex(state.get.current().theme.accent.current);
|
||||
helper.e(".control-theme-accent-current-picker").value = helper.convertColor.rgb.hex(state.get.current().theme.accent.current);
|
||||
},
|
||||
hex: function() {
|
||||
helper.e(".control-theme-accent-current-hex").value = helper.rgbToHex(state.get.current().theme.accent.current);
|
||||
helper.e(".control-theme-accent-current-hex").value = helper.convertColor.rgb.hex(state.get.current().theme.accent.current);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
render.color = {
|
||||
shade: function() {
|
||||
|
||||
var shadeSteps = 10;
|
||||
var saturationShift = 0;
|
||||
var lightShift = 4;
|
||||
var html = helper.e("html");
|
||||
|
||||
var hsl = helper.convertColor.rgb.hsl([state.get.current().theme.color.rgb.r, state.get.current().theme.color.rgb.g, state.get.current().theme.color.rgb.b]);
|
||||
|
||||
// base color
|
||||
var hsl = helper.convertColor.rgb.hsl(state.get.current().theme.color.rgb);
|
||||
html.style.setProperty("--theme-shade", state.get.current().theme.color.rgb.r + ", " + state.get.current().theme.color.rgb.g + ", " + state.get.current().theme.color.rgb.b);
|
||||
|
||||
for (var i = 1; i <= shadeSteps; i++) {
|
||||
var h = hsl[0];
|
||||
var s = (hsl[1] - (saturationShift * i));
|
||||
var l = (hsl[2] - (lightShift * i));
|
||||
var rgb = helper.convertColor.hsl.rgb([h, s, l]);
|
||||
var number;
|
||||
if (i < 10) {
|
||||
number = "0" + i;
|
||||
} else {
|
||||
number = i
|
||||
var renderShade = function(name, index, rgb) {
|
||||
for (var key in rgb) {
|
||||
if (rgb[key] < 0) {
|
||||
rgb[key] = 0;
|
||||
} else if (rgb[key] > 255) {
|
||||
rgb[key] = 255;
|
||||
};
|
||||
rgb[key] = parseInt(rgb[key], 10);
|
||||
};
|
||||
html.style.setProperty("--theme-shade-neg-" + number, parseInt(rgb[0], 10) + ", " + parseInt(rgb[1], 10) + ", " + parseInt(rgb[2], 10));
|
||||
};
|
||||
|
||||
for (var i = 1; i <= shadeSteps; i++) {
|
||||
var h = hsl[0];
|
||||
var s = (hsl[1] + (saturationShift * i));
|
||||
var l = (hsl[2] + (lightShift * i));
|
||||
var rgb = helper.convertColor.hsl.rgb([h, s, l]);
|
||||
var number;
|
||||
if (i < 10) {
|
||||
number = "0" + i;
|
||||
if (index < 10) {
|
||||
index = "0" + index;
|
||||
} else {
|
||||
number = i
|
||||
index = index;
|
||||
};
|
||||
html.style.setProperty("--theme-shade-pos-" + number, parseInt(rgb[0], 10) + ", " + parseInt(rgb[1], 10) + ", " + parseInt(rgb[2], 10));
|
||||
html.style.setProperty(name + index, rgb.r + ", " + rgb.g + ", " + rgb.b);
|
||||
};
|
||||
for (var i = 1; i <= shadeSteps; i++) {
|
||||
var rgb = helper.convertColor.hsl.rgb({
|
||||
h: hsl.h,
|
||||
s: hsl.s - (saturationShift * i),
|
||||
l: hsl.l - (lightShift * i)
|
||||
});
|
||||
renderShade("--theme-shade-neg-", i, rgb);
|
||||
};
|
||||
for (var i = 1; i <= shadeSteps; i++) {
|
||||
var rgb = helper.convertColor.hsl.rgb({
|
||||
h: hsl.h,
|
||||
s: hsl.s + (saturationShift * i),
|
||||
l: hsl.l + (lightShift * i)
|
||||
});
|
||||
renderShade("--theme-shade-pos-", i, rgb);
|
||||
};
|
||||
|
||||
},
|
||||
input: {
|
||||
quick: function() {
|
||||
helper.e(".control-theme-color-rgb-quick").value = helper.rgbToHex(state.get.current().theme.color.rgb);
|
||||
helper.e(".control-theme-color-rgb-quick").value = helper.convertColor.rgb.hex(state.get.current().theme.color.rgb);
|
||||
},
|
||||
picker: function() {
|
||||
helper.e(".control-theme-color-rgb-picker").value = helper.rgbToHex(state.get.current().theme.color.rgb);
|
||||
helper.e(".control-theme-color-rgb-picker").value = helper.convertColor.rgb.hex(state.get.current().theme.color.rgb);
|
||||
},
|
||||
hex: function() {
|
||||
helper.e(".control-theme-color-rgb-hex").value = helper.rgbToHex(state.get.current().theme.color.rgb);
|
||||
}
|
||||
},
|
||||
range: {
|
||||
hsl: function() {
|
||||
helper.e(".control-theme-color-hsl-h").value = state.get.current().theme.color.hsl.h;
|
||||
helper.e(".control-theme-color-hsl-s").value = state.get.current().theme.color.hsl.s;
|
||||
helper.e(".control-theme-color-hsl-l").value = state.get.current().theme.color.hsl.l;
|
||||
helper.e(".control-theme-color-hsl-h-count").textContent = state.get.current().theme.color.hsl.h;
|
||||
helper.e(".control-theme-color-hsl-s-count").textContent = state.get.current().theme.color.hsl.s;
|
||||
helper.e(".control-theme-color-hsl-l-count").textContent = state.get.current().theme.color.hsl.l;
|
||||
helper.e(".control-theme-color-rgb-hex").value = helper.convertColor.rgb.hex(state.get.current().theme.color.rgb);
|
||||
},
|
||||
rgb: function() {
|
||||
helper.e(".control-theme-color-rgb-r").value = state.get.current().theme.color.rgb.r;
|
||||
helper.e(".control-theme-color-rgb-g").value = state.get.current().theme.color.rgb.g;
|
||||
helper.e(".control-theme-color-rgb-b").value = state.get.current().theme.color.rgb.b;
|
||||
helper.e(".control-theme-color-rgb-r-count").textContent = state.get.current().theme.color.rgb.r;
|
||||
helper.e(".control-theme-color-rgb-g-count").textContent = state.get.current().theme.color.rgb.g;
|
||||
helper.e(".control-theme-color-rgb-b-count").textContent = state.get.current().theme.color.rgb.b;
|
||||
range: {
|
||||
hsl: function() {
|
||||
helper.e(".control-theme-color-hsl-h").value = state.get.current().theme.color.hsl.h;
|
||||
helper.e(".control-theme-color-hsl-s").value = state.get.current().theme.color.hsl.s;
|
||||
helper.e(".control-theme-color-hsl-l").value = state.get.current().theme.color.hsl.l;
|
||||
helper.e(".control-theme-color-hsl-h-count").textContent = state.get.current().theme.color.hsl.h;
|
||||
helper.e(".control-theme-color-hsl-s-count").textContent = state.get.current().theme.color.hsl.s;
|
||||
helper.e(".control-theme-color-hsl-l-count").textContent = state.get.current().theme.color.hsl.l;
|
||||
},
|
||||
rgb: function() {
|
||||
helper.e(".control-theme-color-rgb-r").value = state.get.current().theme.color.rgb.r;
|
||||
helper.e(".control-theme-color-rgb-g").value = state.get.current().theme.color.rgb.g;
|
||||
helper.e(".control-theme-color-rgb-b").value = state.get.current().theme.color.rgb.b;
|
||||
helper.e(".control-theme-color-rgb-r-count").textContent = state.get.current().theme.color.rgb.r;
|
||||
helper.e(".control-theme-color-rgb-g-count").textContent = state.get.current().theme.color.rgb.g;
|
||||
helper.e(".control-theme-color-rgb-b-count").textContent = state.get.current().theme.color.rgb.b;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user