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