mirror of
https://github.com/Toinane/colorpicker.git
synced 2026-09-27 01:30:23 -04:00
refacto(Color.class): refacto all Color Class
This commit is contained in:
Toinane
+2
-2
@@ -13,8 +13,8 @@ module.exports = storage => {
|
||||
event.sender.send('buttonsType', typeButton);
|
||||
});
|
||||
|
||||
ipcMain.on('changeLastColor', event => {
|
||||
console.log(event);
|
||||
ipcMain.on('changeLastColor', (event, color) => {
|
||||
storage.add({'lastColor': color});
|
||||
})
|
||||
|
||||
};
|
||||
|
||||
+1
-1
@@ -131,7 +131,7 @@ defaultStorage = {
|
||||
size: { width: 484, height: 190 },
|
||||
buttonsPosition: template[platform()]['buttonsPosition'],
|
||||
buttonsType: template[platform()]['buttonsType'],
|
||||
lastColor: '00AEEF'
|
||||
lastColor: '#00AEEF'
|
||||
},
|
||||
hexacolor: {},
|
||||
picker: {}
|
||||
|
||||
+166
-132
@@ -1,150 +1,184 @@
|
||||
function Color(){
|
||||
this.red;
|
||||
this.green;
|
||||
this.blue;
|
||||
this.rgb;
|
||||
this.hsl;
|
||||
'use strict';
|
||||
|
||||
this.setrgb = function(r, g, b){
|
||||
this.red = parseInt(r);
|
||||
this.green = parseInt(g);
|
||||
this.blue = parseInt(b);
|
||||
this.rgb = [this.red, this.green, this.blue];
|
||||
this.sethsl();
|
||||
}
|
||||
class Color {
|
||||
|
||||
this.rgbarray = function(rgb){
|
||||
this.red = parseInt(rgb[0]);
|
||||
this.green = parseInt(rgb[1]);
|
||||
this.blue = parseInt(rgb[2]);
|
||||
this.rgb = [this.red, this.green, this.blue];
|
||||
this.sethsl();
|
||||
}
|
||||
constructor(r, g, b) {
|
||||
this.setColorFromIndividual(r, g, b);
|
||||
}
|
||||
|
||||
this.hex = function(hex){
|
||||
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
this.red = parseInt(result[1], 16);
|
||||
this.green = parseInt(result[2], 16);
|
||||
this.blue= parseInt(result[3], 16);
|
||||
this.rgb = [this.red, this.green, this.blue];
|
||||
this.sethsl();
|
||||
}
|
||||
// this.setrgb
|
||||
setColorFromIndividual(r, g, b) {
|
||||
this.red = parseInt(r);
|
||||
this.green = parseInt(g);
|
||||
this.blue = parseInt(b);
|
||||
this.rgb = [r, g, b];
|
||||
this.hex = this.getHexFromRGB(this.rgb);
|
||||
this.hsl = this.getHSLFromRGB(this.rgb);
|
||||
return true;
|
||||
}
|
||||
|
||||
this.red = function(){
|
||||
return this.red;
|
||||
}
|
||||
this.green = function(){
|
||||
return this.green;
|
||||
}
|
||||
this.blue = function(){
|
||||
return this.blue;
|
||||
}
|
||||
// this.rgbarray
|
||||
setColorFromArray(rgb) {
|
||||
this.setColorFromIndividual(rgb[0], rgb[1], rgb[2]);
|
||||
return true;
|
||||
}
|
||||
|
||||
this.getrgb = function(r, g, b){
|
||||
if(isNaN(r)){
|
||||
return 'rgb('+this.red+', '+this.green+', '+this.blue+')';
|
||||
// this.hex
|
||||
setColorFromHex(hex) {
|
||||
const rgb = this.getRGBFromHex(hex);
|
||||
this.setColorFromArray(rgb);
|
||||
return true;
|
||||
}
|
||||
|
||||
setColorFromHSL(hsl) {
|
||||
const rgb = this.getRGBFromHSL(hsl);
|
||||
this.setColorFromArray(rgb);
|
||||
return true;
|
||||
}
|
||||
|
||||
getRGBFromIndividual(r, g, b) {
|
||||
return [r, g, b];
|
||||
}
|
||||
|
||||
getHexFromRGB(rgb) {
|
||||
let hex = [Number(rgb[0]).toString(16), Number(rgb[1]).toString(16), Number(rgb[2]).toString(16)];
|
||||
for(let i = 0; i<3; i++){
|
||||
if(hex[i] < 10 || hex[i].length === 1){ hex[i] = '0'+hex[i]; }
|
||||
}
|
||||
return '#'+hex.join('').toUpperCase();
|
||||
}
|
||||
|
||||
getRGBFromHex(hex) {
|
||||
hex = hex.replace(/^#/, '');
|
||||
if (hex.length === 3) hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
|
||||
let num = parseInt(hex, 16);
|
||||
return [num >> 16, num >> 8 & 255, num & 255];
|
||||
}
|
||||
|
||||
// this.sethsl
|
||||
getHSLFromRGB(rgb) {
|
||||
let r = rgb[0]/255, g = rgb[1]/255, b = rgb[2]/255;
|
||||
let max = Math.max(r, g, b), min = Math.min(r, g, b);
|
||||
let h, s, l = (max + min) / 2;
|
||||
if (max === min) { h = s = 0; }
|
||||
else {
|
||||
let d = max - min;
|
||||
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
|
||||
switch (max) {
|
||||
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
|
||||
case g: h = (b - r) / d + 2; break;
|
||||
case b: h = (r - g) / d + 4; break;
|
||||
}
|
||||
else{
|
||||
return 'rgb('+r+', '+g+', '+b+')';
|
||||
h /= 6;
|
||||
}
|
||||
return [h, s, l];
|
||||
}
|
||||
|
||||
// this.hsltorgb
|
||||
getRGBFromHSL(hsl) {
|
||||
let r, g, b, h = hsl[0], s = hsl[1], l = hsl[2];
|
||||
if (s === 0) { r = g = b = l; } // achromatic
|
||||
else {
|
||||
let hue2rgb = (p, q, t) => {
|
||||
if(t < 0) t += 1;
|
||||
if(t > 1) t -= 1;
|
||||
if(t < 1/6) return p + (q - p) * 6 * t;
|
||||
if(t < 1/2) return q;
|
||||
if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
|
||||
return p;
|
||||
}
|
||||
}
|
||||
let q = l < 0.5 ? l * (1 + s) : l + s - l * s;
|
||||
let p = 2 * l - q;
|
||||
r = hue2rgb(p, q, h + 1/3);
|
||||
g = hue2rgb(p, q, h);
|
||||
b = hue2rgb(p, q, h - 1/3);
|
||||
}
|
||||
return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
|
||||
}
|
||||
|
||||
this.negate = function(isRGB){
|
||||
var rgb = [];
|
||||
for(var i = 0; i < 3; i++){
|
||||
rgb[i] = 255 - this.rgb[i];
|
||||
}
|
||||
if(isRGB){
|
||||
return this.getrgb(rgb[0], rgb[1], rgb[2]);
|
||||
}
|
||||
else{
|
||||
return [rgb[0], rgb[1], rgb[2]];
|
||||
}
|
||||
getHSLFromHex(hex) {
|
||||
const rgb = this.getRGBFromHex(hex);
|
||||
return this.getRGBFromHSL(rgb);
|
||||
}
|
||||
|
||||
}
|
||||
getHexFromHSL(hsl) {
|
||||
const rgb = this.getRGBFromHSL(hsl);
|
||||
return this.getHexFromRGB(rgb);
|
||||
}
|
||||
|
||||
this.isDarkColor = function(){
|
||||
return Math.round((
|
||||
parseInt(this.red) * 299 +
|
||||
parseInt(this.green) * 587 +
|
||||
parseInt(this.blue) * 114) / 1000
|
||||
) <= 140;
|
||||
}
|
||||
// this.isDarkColor
|
||||
isDarkColor(rgb) {
|
||||
if (rgb) return Math.round((
|
||||
parseInt(rgb[0]) * 299 +
|
||||
parseInt(rgb[1]) * 587 +
|
||||
parseInt(rgb[2]) * 114) / 1000
|
||||
) <= 140;
|
||||
return Math.round((
|
||||
parseInt(this.red) * 299 +
|
||||
parseInt(this.green) * 587 +
|
||||
parseInt(this.blue) * 114) / 1000
|
||||
) <= 140;
|
||||
}
|
||||
|
||||
this.grayscale = function(){
|
||||
var gray = parseInt(this.red * 0.3 + this.green * 0.59 + this.blue * 0.11);
|
||||
if(gray < 0){gray = 0;}
|
||||
if(gray > 255){gray = 255;}
|
||||
return this.getrgb(gray, gray, gray);
|
||||
}
|
||||
setNegativeColor(rgb) {
|
||||
const negative = this.getNegativeColor(rgb);
|
||||
this.setColorFromArray(negative);
|
||||
return negative;
|
||||
}
|
||||
|
||||
this.lightness = function(l, isRGB){
|
||||
var lightness = this.hsltorgb(this.hsl[0], this.hsl[1], (this.hsl[2]+l));
|
||||
for(var i = 0; i < lightness.length; i++){
|
||||
if(lightness[i] < 0){lightness[i] = 0;}
|
||||
if(lightness[i] > 255){lightness[i] = 255;}
|
||||
}
|
||||
if(isRGB){
|
||||
return this.getrgb(lightness[0], lightness[1], lightness[2]);
|
||||
}
|
||||
else{
|
||||
return [lightness[0], lightness[1], lightness[2]];
|
||||
}
|
||||
// this.negate
|
||||
getNegativeColor(rgb) {
|
||||
var negative = [];
|
||||
for(let i = 0; i < 3; i++){
|
||||
negative[i] = 255 - rgb[i];
|
||||
}
|
||||
return negative;
|
||||
}
|
||||
|
||||
}
|
||||
setGrayscale(rgb) {
|
||||
const gray = this.getGrayscale(rgb);
|
||||
this.setColorFromArray(gray);
|
||||
return gray;
|
||||
}
|
||||
|
||||
this.rotate = function(degrees, isRGB){
|
||||
var hue = this.hsl[0];
|
||||
hue = (hue + degrees) % 360;
|
||||
hue = hue < 0 ? 360 + hue : hue;
|
||||
hue = hue * 0.01;
|
||||
var rgb = this.hsltorgb(hue, this.hsl[1], this.hsl[2]);
|
||||
if(isRGB){
|
||||
return this.getrgb(rgb[0], rgb[1], rgb[2]);
|
||||
}
|
||||
else{
|
||||
return [rgb[0], rgb[1], rgb[2]];
|
||||
}
|
||||
}
|
||||
// this.grayscale
|
||||
getGrayscale(setColor) {
|
||||
var gray = parseInt(this.red * 0.3 + this.green * 0.59 + this.blue * 0.11);
|
||||
if(gray < 0){gray = 0;}
|
||||
if(gray > 255){gray = 255;}
|
||||
return [gray, gray, gray];
|
||||
}
|
||||
|
||||
this.sethsl = function(){
|
||||
r = this.red/255, g = this.green/255, b = this.blue/255;
|
||||
var max = Math.max(r, g, b), min = Math.min(r, g, b);
|
||||
var h, s, l = (max + min) / 2;
|
||||
if(max == min){
|
||||
h = s = 0;
|
||||
}else{
|
||||
var d = max - min;
|
||||
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
|
||||
switch(max){
|
||||
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
|
||||
case g: h = (b - r) / d + 2; break;
|
||||
case b: h = (r - g) / d + 4; break;
|
||||
}
|
||||
h /= 6;
|
||||
}
|
||||
return this.hsl = [h, s, l];
|
||||
}
|
||||
setLightness(light, hsl) {
|
||||
const rgb = this.getLightness(light, hsl);
|
||||
this.setColorFromArray(rgb);
|
||||
return rgb;
|
||||
}
|
||||
|
||||
this.hsltorgb = function(h, s, l){
|
||||
var r, g, b;
|
||||
if(s == 0){ r = g = b = l; // achromatic
|
||||
}else{
|
||||
var hue2rgb = function hue2rgb(p, q, t){
|
||||
if(t < 0) t += 1;
|
||||
if(t > 1) t -= 1;
|
||||
if(t < 1/6) return p + (q - p) * 6 * t;
|
||||
if(t < 1/2) return q;
|
||||
if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
|
||||
return p;
|
||||
}
|
||||
var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
|
||||
var p = 2 * l - q;
|
||||
r = hue2rgb(p, q, h + 1/3);
|
||||
g = hue2rgb(p, q, h);
|
||||
b = hue2rgb(p, q, h - 1/3);
|
||||
}
|
||||
// this.lightness
|
||||
getLightness(light, hsl) {
|
||||
hsl = [hsl[0], hsl[1], (hsl[2]+light)];
|
||||
const lightness = this.getRGBFromHSL(hsl);
|
||||
for(let i = 0; i < lightness.length; i++){
|
||||
if(lightness[i] < 0){lightness[i] = 0;}
|
||||
if(lightness[i] > 255){lightness[i] = 255;}
|
||||
}
|
||||
return lightness;
|
||||
}
|
||||
|
||||
setRotatedColor(degrees, hsl) {
|
||||
const rgb = this.getRotatedColor(degrees, hsl);
|
||||
this.setColorFromArray(rgb);
|
||||
return rgb;
|
||||
}
|
||||
|
||||
// this.rotate
|
||||
getRotatedColor(degrees, hsl){
|
||||
let hue = hsl[0];
|
||||
hue = (hue + degrees) % 360;
|
||||
hue = hue < 0 ? 360 + hue : hue;
|
||||
hue = hue * 0.01;
|
||||
return this.getRGBFromHSL([hue, hsl[1], hsl[2]]);
|
||||
}
|
||||
|
||||
return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
|
||||
}
|
||||
}
|
||||
|
||||
+338
-349
@@ -1,355 +1,344 @@
|
||||
/**
|
||||
* ColorPicker Class.
|
||||
* @constructor
|
||||
* @param {int} r - The Red color value between 0 and 255.
|
||||
* @param {int} g - The Green color value between 0 and 255.
|
||||
* @param {int} b - The Blue color value between 0 and 255.
|
||||
*/
|
||||
function Colorpicker(r, g, b){
|
||||
this.r = r;
|
||||
this.g = g;
|
||||
this.b = b;
|
||||
this.nuance = false;
|
||||
this.color = new Color();
|
||||
this.maximize = false;
|
||||
'use strict';
|
||||
|
||||
let remote = require('electron').remote, self = this;
|
||||
let cp;
|
||||
|
||||
/**
|
||||
* hexFromRGB function.
|
||||
* @function
|
||||
* @param {int} r - The Red color value between 0 and 255.
|
||||
* @param {int} g - The Green color value between 0 and 255.
|
||||
* @param {int} b - The Blue color value between 0 and 255.
|
||||
* @return {string} - Hexadecimal string.
|
||||
*/
|
||||
this.hexFromRGB = function(r, g, b){
|
||||
var hex = [Number(r).toString(16), Number(g).toString(16), Number(b).toString(16)];
|
||||
for(var i = 0; i<3; i++){
|
||||
if(hex[i] < 10 || hex[i].length === 1){ hex[i] = '0'+hex[i]; }
|
||||
}
|
||||
return hex.join("").toUpperCase();
|
||||
}
|
||||
class Colorpicker extends Color{
|
||||
|
||||
constructor(hex) {
|
||||
super();
|
||||
this.shading = false;
|
||||
this.maximize = false;
|
||||
this.setColorFromHex(hex);
|
||||
}
|
||||
|
||||
/**
|
||||
* hexFromArray function.
|
||||
* @function
|
||||
* @param {array} rgb - The Red, Green and Blue color value between 0 and 255.
|
||||
* @return {string} - Hexadecimal string.
|
||||
*/
|
||||
this.hexFromArray = function(array){
|
||||
var hex = [Number(array[0]).toString(16), Number(array[1]).toString(16), Number(array[2]).toString(16)];
|
||||
for(var i = 0; i<3; i++){
|
||||
if(hex[i] < 10 || hex[i].length === 1){ hex[i] = '0'+hex[i]; }
|
||||
}
|
||||
return hex.join("").toUpperCase();
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* hexToRGB function.
|
||||
* @function
|
||||
* @param {string} hex - The Hexadecimal value.
|
||||
* @return {array} - {r: {int}, g: {int}, b: {int}}).
|
||||
*/
|
||||
this.hexToRGB = function(hex){
|
||||
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
return result ? {
|
||||
r: parseInt(result[1], 16),
|
||||
g: parseInt(result[2], 16),
|
||||
b: parseInt(result[3], 16)
|
||||
} : null;
|
||||
}
|
||||
|
||||
|
||||
this.toggleFlexbox = function(el){
|
||||
var el = document.querySelector(el);
|
||||
if(el.style.display === "none"){
|
||||
el.style.display = 'flex';
|
||||
}else{
|
||||
el.style.display = 'none';
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
this.changeColor = function(r, g, b){
|
||||
if((r <= 255 && g <= 126 && b <= 255) || (r <= 70 && g <= 55 && b <= 255))
|
||||
{ document.querySelector('body').classList.add('whited'); }
|
||||
else{ document.querySelector('body').classList.remove('whited'); }
|
||||
document.querySelector('.redBar progress').value = r;
|
||||
document.querySelector('.redBar input').value = r;
|
||||
document.querySelector('#rangeRed').value = r;
|
||||
document.querySelector('#r').innerHTML = r;
|
||||
document.querySelector('.greenBar progress').value = g;
|
||||
document.querySelector('.greenBar input').value = g;
|
||||
document.querySelector('#rangeGreen').value = g;
|
||||
document.querySelector('#g').innerHTML = g;
|
||||
document.querySelector('.blueBar progress').value = b;
|
||||
document.querySelector('.blueBar input').value = b;
|
||||
document.querySelector('#rangeBlue').value = b;
|
||||
document.querySelector('#b').innerHTML = b;
|
||||
document.querySelector("#numberHex").value = '#'+this.hexFromRGB(r, g, b);
|
||||
this.changeShade(r, g, b);
|
||||
document.querySelector("body").style.background = "#"+this.hexFromRGB(r, g, b);
|
||||
this.r = r;
|
||||
this.g = g;
|
||||
this.b = b;
|
||||
}
|
||||
|
||||
|
||||
/*var value = document.getElementById('text-rgb'), range = document.createRange();
|
||||
range.selectNode(value);
|
||||
window.getSelection().addRange(range);
|
||||
document.execCommand('copy');
|
||||
window.getSelection().removeAllRanges();*/
|
||||
|
||||
|
||||
this.changeShade = function(r, g, b){
|
||||
this.color.setrgb(r, g, b);
|
||||
document.querySelector('#nu1').style.background = this.color.lightness(0.16, true);
|
||||
document.querySelector('#nu1').attributes['data-color'].value = this.hexFromArray(this.color.lightness(0.16));
|
||||
document.querySelector('#nu2').style.background = this.color.lightness(0.08, true);
|
||||
document.querySelector('#nu2').attributes['data-color'].value = this.hexFromArray(this.color.lightness(0.08));
|
||||
document.querySelector('#nu3').style.background = this.color.lightness(0.04, true);
|
||||
document.querySelector('#nu3').attributes['data-color'].value = this.hexFromArray(this.color.lightness(0.04));
|
||||
document.querySelector('#nu4').style.background = this.color.lightness(0.02, true);
|
||||
document.querySelector('#nu4').attributes['data-color'].value = this.hexFromArray(this.color.lightness(0.02));
|
||||
document.querySelector('#nu5').style.background = this.color.lightness(0.01, true);
|
||||
document.querySelector('#nu5').attributes['data-color'].value = this.hexFromArray(this.color.lightness(0.01));
|
||||
document.querySelector('#nu6').style.background = 'rgb('+r+', '+g+', '+b+')';
|
||||
document.querySelector('#nu6').attributes['data-color'].value = this.hexFromRGB(r, g, b);
|
||||
document.querySelector('#nu7').style.background = this.color.lightness(-0.01, true);
|
||||
document.querySelector('#nu7').attributes['data-color'].value = this.hexFromArray(this.color.lightness(-0.01));
|
||||
document.querySelector('#nu8').style.background = this.color.lightness(-0.02, true);
|
||||
document.querySelector('#nu8').attributes['data-color'].value = this.hexFromArray(this.color.lightness(-0.02));
|
||||
document.querySelector('#nu9').style.background = this.color.lightness(-0.04, true);
|
||||
document.querySelector('#nu9').attributes['data-color'].value = this.hexFromArray(this.color.lightness(-0.04));
|
||||
document.querySelector('#nu10').style.background = this.color.lightness(-0.08, true);
|
||||
document.querySelector('#nu10').attributes['data-color'].value = this.hexFromArray(this.color.lightness(-0.08));
|
||||
document.querySelector('#nu11').style.background = this.color.lightness(-0.16, true);
|
||||
document.querySelector('#nu11').attributes['data-color'].value = this.hexFromArray(this.color.lightness(-0.16));
|
||||
|
||||
document.querySelector('#ni1').style.background = this.color.negate(true);
|
||||
document.querySelector('#ni1').attributes['data-color'].value = this.hexFromArray(this.color.negate());
|
||||
document.querySelector('#ni2').style.background = this.color.rotate(10, true);
|
||||
document.querySelector('#ni2').attributes['data-color'].value = this.hexFromArray(this.color.rotate(10));
|
||||
document.querySelector('#ni3').style.background = this.color.rotate(15, true);
|
||||
document.querySelector('#ni3').attributes['data-color'].value = this.hexFromArray(this.color.rotate(15));
|
||||
document.querySelector('#ni4').style.background = this.color.rotate(20, true);
|
||||
document.querySelector('#ni4').attributes['data-color'].value = this.hexFromArray(this.color.rotate(20));
|
||||
document.querySelector('#ni5').style.background = this.color.rotate(30, true);
|
||||
document.querySelector('#ni5').attributes['data-color'].value = this.hexFromArray(this.color.rotate(30));
|
||||
document.querySelector('#ni6').style.background = this.color.rotate(40, true);
|
||||
document.querySelector('#ni6').attributes['data-color'].value = this.hexFromArray(this.color.rotate(40));
|
||||
document.querySelector('#ni7').style.background = this.color.rotate(50, true);
|
||||
document.querySelector('#ni7').attributes['data-color'].value = this.hexFromArray(this.color.rotate(50));
|
||||
document.querySelector('#ni8').style.background = this.color.rotate(55, true);
|
||||
document.querySelector('#ni8').attributes['data-color'].value = this.hexFromArray(this.color.rotate(55));
|
||||
document.querySelector('#ni9').style.background = this.color.rotate(60, true);
|
||||
document.querySelector('#ni9').attributes['data-color'].value = this.hexFromArray(this.color.rotate(60));
|
||||
document.querySelector('#ni10').style.background = this.color.rotate(75, true);
|
||||
document.querySelector('#ni10').attributes['data-color'].value = this.hexFromArray(this.color.rotate(75));
|
||||
document.querySelector('#ni11').style.background = this.color.rotate(79, true);
|
||||
document.querySelector('#ni11').attributes['data-color'].value = this.hexFromArray(this.color.rotate(79));
|
||||
}
|
||||
|
||||
this.picker = function(){
|
||||
// For future update.
|
||||
//document.querySelector('*').style.cursor = "crosshair";
|
||||
}
|
||||
|
||||
|
||||
this.construct = function(){
|
||||
this.initListener();
|
||||
this.color.setrgb(this.r, this.g, this.b);
|
||||
document.querySelector('.box').style.background = '#'+this.hexFromArray(this.color.negate());
|
||||
document.querySelector('#numberBoxHex').value = '#'+this.hexFromArray(this.color.negate());
|
||||
document.querySelector('header .ni').style.display = 'none';
|
||||
document.querySelector('header .nu').style.display = 'none';
|
||||
|
||||
this.changeColor(this.r, this.g, this.b);
|
||||
}
|
||||
|
||||
|
||||
this.initListener = ()=>{
|
||||
|
||||
document.querySelector('#onTop').onclick = function(){
|
||||
this.classList.toggle('active');
|
||||
if(this.classList.contains('active')){
|
||||
remote.getCurrentWindow().setAlwaysOnTop(true);
|
||||
}
|
||||
else{
|
||||
remote.getCurrentWindow().setAlwaysOnTop(false);
|
||||
}
|
||||
}
|
||||
/*document.querySelector('#picker').onclick = () => {
|
||||
this.picker();
|
||||
}*/
|
||||
document.querySelector('#nuances').onclick = () => {
|
||||
document.querySelector('#nuances').classList.toggle('active');
|
||||
this.toggleFlexbox('header .nu');
|
||||
this.toggleFlexbox('header .ni');
|
||||
}
|
||||
document.querySelector('#random').onclick = ()=>{
|
||||
var r = Math.floor(Math.random() * 255) + 0,
|
||||
g = Math.floor(Math.random() * 255) + 0,
|
||||
b = Math.floor(Math.random() * 255) + 0;
|
||||
this.changeColor(r, g, b);
|
||||
}
|
||||
|
||||
document.querySelector('#minimize').onclick = function(){
|
||||
remote.getCurrentWindow().minimize();
|
||||
}
|
||||
document.querySelector('#square').onclick = function(){
|
||||
var window = remote.getCurrentWindow();
|
||||
if(this.maximize){
|
||||
window.unmaximize();
|
||||
this.maximize = false;
|
||||
}
|
||||
else{
|
||||
window.maximize();
|
||||
this.maximize = true;
|
||||
}
|
||||
}
|
||||
document.querySelector('#close').onclick = function(){
|
||||
remote.getCurrentWindow().close();
|
||||
}
|
||||
|
||||
document.querySelector('.redBar input').oninput = () =>{
|
||||
this.r = document.querySelector('.redBar input').value
|
||||
this.changeColor(this.r, this.g, this.b);
|
||||
}
|
||||
document.querySelector('.greenBar input').oninput = () =>{
|
||||
this.g = document.querySelector('.greenBar input').value;
|
||||
this.changeColor(this.r, this.g, this.b);
|
||||
}
|
||||
document.querySelector('.blueBar input').oninput = () =>{
|
||||
this.b = document.querySelector('.blueBar input').value;
|
||||
this.changeColor(this.r, this.g, this.b);
|
||||
}
|
||||
|
||||
document.querySelector('#rangeRed').oninput = function(e){
|
||||
var red = this.value;
|
||||
if(red > 255){this.value = 255; red = 255;}
|
||||
if(red < 0){this.value = 0; red = 0;}
|
||||
self.changeColor(red, self.g, self.b);
|
||||
}
|
||||
document.querySelector('#rangeGreen').oninput = function(e){
|
||||
var green = this.value;
|
||||
if(green > 255){this.value = 255; green = 255;}
|
||||
if(green < 0){this.value = 0; green = 0;}
|
||||
self.changeColor(self.r, green, self.b);
|
||||
}
|
||||
document.querySelector('#rangeBlue').oninput = function(e){
|
||||
var blue = this.value;
|
||||
if(blue > 255){this.value = 255; blue = 255;}
|
||||
if(blue < 0){this.value = 0; blue = 0;}
|
||||
self.changeColor(self.r, self.g, blue);
|
||||
}
|
||||
document.querySelector('#numberHex').oninput = function(e){
|
||||
var hex = this.value.replace('#', '');
|
||||
if(hex.length == 6){
|
||||
var color = self.hexToRGB('#'+hex);
|
||||
if(color.r && color.g && color.b){
|
||||
self.changeColor(color.r, color.g, color.b);
|
||||
}
|
||||
}
|
||||
}
|
||||
document.querySelector('#numberBoxHex').oninput = function(e){
|
||||
var hex = this.value.replace('#', '');
|
||||
if(hex.length == 6){
|
||||
document.querySelector('.box').style.background = '#'+hex;
|
||||
}
|
||||
}
|
||||
document.querySelector('#numberBoxHex').onfocus = function(e){
|
||||
this.onkeydown = function(e){ changeHex(e, this.value); }
|
||||
this.onwheel = function(e){ changeHex(e, this.value); }
|
||||
function changeHex(e, hex){
|
||||
console.log('okokok');
|
||||
var color = self.hexToRGB(hex);
|
||||
if(hex.length >= 6){
|
||||
if(e.keyCode == 38 || e.deltaY < 0){
|
||||
if(color.r >= 255){color.r = 254;}
|
||||
if(color.g >= 255){color.g = 254;}
|
||||
if(color.b >= 255){color.b = 254;}
|
||||
document.querySelector('#numberBoxHex').value = '#'+self.hexFromRGB(color.r+1, color.g+1, color.b+1);
|
||||
document.querySelector('.box').style.background = '#'+self.hexFromRGB(color.r+1, color.g+1, color.b+1);
|
||||
}
|
||||
else if(e.keyCode == 40 || e.deltaY > 0){
|
||||
if(color.r <= 0){color.r = 1;}
|
||||
if(color.g <= 0){color.g = 1;}
|
||||
if(color.b <= 0){color.b = 1;}
|
||||
document.querySelector('#numberBoxHex').value = '#'+self.hexFromRGB(color.r-1, color.g-1, color.b-1);
|
||||
document.querySelector('.box').style.background = '#'+self.hexFromRGB(color.r-1, color.g-1, color.b-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var els = document.querySelectorAll('#rangeRed, #rangeGreen, #rangeBlue, #numberHex');
|
||||
for(el of els){
|
||||
el.onfocus = function(){
|
||||
this.onkeydown = function(e){
|
||||
var val = this.value.replace('#', '');
|
||||
changeHex(e, val);
|
||||
}
|
||||
this.onwheel = function(e){
|
||||
var val = this.value.replace('#', '');
|
||||
changeHex(e, val);
|
||||
}
|
||||
function changeHex(e, hex){
|
||||
var color = self.hexToRGB('#'+hex);
|
||||
if(hex.length == 6){
|
||||
if(e.keyCode == 38 || e.deltaY < 0){
|
||||
if(color.r >= 255){color.r = 254;}
|
||||
if(color.g >= 255){color.g = 254;}
|
||||
if(color.b >= 255){color.b = 254;}
|
||||
self.changeColor(color.r+1, color.g+1, color.b+1);
|
||||
}
|
||||
else if(e.keyCode == 40 || e.deltaY > 0){
|
||||
if(color.r <= 0){color.r = 1;}
|
||||
if(color.g <= 0){color.g = 1;}
|
||||
if(color.b <= 0){color.b = 1;}
|
||||
self.changeColor(color.r-1, color.g-1, color.b-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
var els = document.querySelectorAll('header .ni aside, header .nu aside');
|
||||
for(el of els){
|
||||
el.onclick = function(){
|
||||
var color = self.hexToRGB(this.attributes['data-color'].value);
|
||||
self.changeColor(color.r, color.g, color.b);
|
||||
}
|
||||
}
|
||||
|
||||
document.querySelector('#newBox').onclick = function(){
|
||||
this.classList.toggle('active');
|
||||
if(document.querySelector('body').classList.contains('boxed')){
|
||||
document.querySelector('body').classList.remove('boxed');
|
||||
document.querySelector('.box').style.right = '-200px';
|
||||
document.querySelector('#numberBoxHex').style.cursor = 'default';
|
||||
document.querySelector('#numberBoxHex').style.visibility = 'none';
|
||||
document.querySelector('#numberBoxHex').style.opacity = '0';
|
||||
}
|
||||
else{
|
||||
document.querySelector('body').classList.add('boxed');
|
||||
document.querySelector('.box').style.right = '0';
|
||||
document.querySelector('#numberBoxHex').style.cursor = 'text';
|
||||
document.querySelector('#numberBoxHex').style.visibility = 'visible';
|
||||
document.querySelector('#numberBoxHex').style.opacity = '1';
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
this.construct();
|
||||
}
|
||||
|
||||
var Colorpicker = new Colorpicker(0, 174, 239);
|
||||
|
||||
//
|
||||
// /**
|
||||
// * ColorPicker Class.
|
||||
// * @constructor
|
||||
// * @param {int} r - The Red color value between 0 and 255.
|
||||
// * @param {int} g - The Green color value between 0 and 255.
|
||||
// * @param {int} b - The Blue color value between 0 and 255.
|
||||
// */
|
||||
// function Colorpicker(r, g, b){
|
||||
// this.r = r;
|
||||
// this.g = g;
|
||||
// this.b = b;
|
||||
// this.nuance = false;
|
||||
// this.color = new Color();
|
||||
// this.maximize = false;
|
||||
//
|
||||
// let remote = require('electron').remote, self = this;
|
||||
//
|
||||
// /**
|
||||
// * hexFromRGB function.
|
||||
// * @function
|
||||
// * @param {int} r - The Red color value between 0 and 255.
|
||||
// * @param {int} g - The Green color value between 0 and 255.
|
||||
// * @param {int} b - The Blue color value between 0 and 255.
|
||||
// * @return {string} - Hexadecimal string.
|
||||
// */
|
||||
// this.hexFromRGB = function(r, g, b){
|
||||
// var hex = [Number(r).toString(16), Number(g).toString(16), Number(b).toString(16)];
|
||||
// for(var i = 0; i<3; i++){
|
||||
// if(hex[i] < 10 || hex[i].length === 1){ hex[i] = '0'+hex[i]; }
|
||||
// }
|
||||
// return hex.join("").toUpperCase();
|
||||
// }
|
||||
//
|
||||
//
|
||||
// /**
|
||||
// * hexFromArray function.
|
||||
// * @function
|
||||
// * @param {array} rgb - The Red, Green and Blue color value between 0 and 255.
|
||||
// * @return {string} - Hexadecimal string.
|
||||
// */
|
||||
// this.hexFromArray = function(array){
|
||||
// var hex = [Number(array[0]).toString(16), Number(array[1]).toString(16), Number(array[2]).toString(16)];
|
||||
// for(var i = 0; i<3; i++){
|
||||
// if(hex[i] < 10 || hex[i].length === 1){ hex[i] = '0'+hex[i]; }
|
||||
// }
|
||||
// return hex.join("").toUpperCase();
|
||||
// }
|
||||
//
|
||||
//
|
||||
// /**
|
||||
// * hexToRGB function.
|
||||
// * @function
|
||||
// * @param {string} hex - The Hexadecimal value.
|
||||
// * @return {array} - {r: {int}, g: {int}, b: {int}}).
|
||||
// */
|
||||
// this.hexToRGB = function(hex){
|
||||
// var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
// return result ? {
|
||||
// r: parseInt(result[1], 16),
|
||||
// g: parseInt(result[2], 16),
|
||||
// b: parseInt(result[3], 16)
|
||||
// } : null;
|
||||
// }
|
||||
//
|
||||
//
|
||||
// this.changeColor = function(r, g, b){
|
||||
// if((r <= 255 && g <= 126 && b <= 255) || (r <= 70 && g <= 55 && b <= 255))
|
||||
// { document.querySelector('body').classList.add('whited'); }
|
||||
// else{ document.querySelector('body').classList.remove('whited'); }
|
||||
// document.querySelector('.redBar progress').value = r;
|
||||
// document.querySelector('.redBar input').value = r;
|
||||
// document.querySelector('#rangeRed').value = r;
|
||||
// document.querySelector('#r').innerHTML = r;
|
||||
// document.querySelector('.greenBar progress').value = g;
|
||||
// document.querySelector('.greenBar input').value = g;
|
||||
// document.querySelector('#rangeGreen').value = g;
|
||||
// document.querySelector('#g').innerHTML = g;
|
||||
// document.querySelector('.blueBar progress').value = b;
|
||||
// document.querySelector('.blueBar input').value = b;
|
||||
// document.querySelector('#rangeBlue').value = b;
|
||||
// document.querySelector('#b').innerHTML = b;
|
||||
// document.querySelector("#numberHex").value = '#'+this.hexFromRGB(r, g, b);
|
||||
// this.changeShade(r, g, b);
|
||||
// document.querySelector("body").style.background = "#"+this.hexFromRGB(r, g, b);
|
||||
// this.r = r;
|
||||
// this.g = g;
|
||||
// this.b = b;
|
||||
// }
|
||||
//
|
||||
// this.changeShade = function(r, g, b){
|
||||
// this.color.setrgb(r, g, b);
|
||||
// document.querySelector('#nu1').style.background = this.color.lightness(0.16, true);
|
||||
// document.querySelector('#nu1').attributes['data-color'].value = this.hexFromArray(this.color.lightness(0.16));
|
||||
// document.querySelector('#nu2').style.background = this.color.lightness(0.08, true);
|
||||
// document.querySelector('#nu2').attributes['data-color'].value = this.hexFromArray(this.color.lightness(0.08));
|
||||
// document.querySelector('#nu3').style.background = this.color.lightness(0.04, true);
|
||||
// document.querySelector('#nu3').attributes['data-color'].value = this.hexFromArray(this.color.lightness(0.04));
|
||||
// document.querySelector('#nu4').style.background = this.color.lightness(0.02, true);
|
||||
// document.querySelector('#nu4').attributes['data-color'].value = this.hexFromArray(this.color.lightness(0.02));
|
||||
// document.querySelector('#nu5').style.background = this.color.lightness(0.01, true);
|
||||
// document.querySelector('#nu5').attributes['data-color'].value = this.hexFromArray(this.color.lightness(0.01));
|
||||
// document.querySelector('#nu6').style.background = 'rgb('+r+', '+g+', '+b+')';
|
||||
// document.querySelector('#nu6').attributes['data-color'].value = this.hexFromRGB(r, g, b);
|
||||
// document.querySelector('#nu7').style.background = this.color.lightness(-0.01, true);
|
||||
// document.querySelector('#nu7').attributes['data-color'].value = this.hexFromArray(this.color.lightness(-0.01));
|
||||
// document.querySelector('#nu8').style.background = this.color.lightness(-0.02, true);
|
||||
// document.querySelector('#nu8').attributes['data-color'].value = this.hexFromArray(this.color.lightness(-0.02));
|
||||
// document.querySelector('#nu9').style.background = this.color.lightness(-0.04, true);
|
||||
// document.querySelector('#nu9').attributes['data-color'].value = this.hexFromArray(this.color.lightness(-0.04));
|
||||
// document.querySelector('#nu10').style.background = this.color.lightness(-0.08, true);
|
||||
// document.querySelector('#nu10').attributes['data-color'].value = this.hexFromArray(this.color.lightness(-0.08));
|
||||
// document.querySelector('#nu11').style.background = this.color.lightness(-0.16, true);
|
||||
// document.querySelector('#nu11').attributes['data-color'].value = this.hexFromArray(this.color.lightness(-0.16));
|
||||
//
|
||||
// document.querySelector('#ni1').style.background = this.color.negate(true);
|
||||
// document.querySelector('#ni1').attributes['data-color'].value = this.hexFromArray(this.color.negate());
|
||||
// document.querySelector('#ni2').style.background = this.color.rotate(10, true);
|
||||
// document.querySelector('#ni2').attributes['data-color'].value = this.hexFromArray(this.color.rotate(10));
|
||||
// document.querySelector('#ni3').style.background = this.color.rotate(15, true);
|
||||
// document.querySelector('#ni3').attributes['data-color'].value = this.hexFromArray(this.color.rotate(15));
|
||||
// document.querySelector('#ni4').style.background = this.color.rotate(20, true);
|
||||
// document.querySelector('#ni4').attributes['data-color'].value = this.hexFromArray(this.color.rotate(20));
|
||||
// document.querySelector('#ni5').style.background = this.color.rotate(30, true);
|
||||
// document.querySelector('#ni5').attributes['data-color'].value = this.hexFromArray(this.color.rotate(30));
|
||||
// document.querySelector('#ni6').style.background = this.color.rotate(40, true);
|
||||
// document.querySelector('#ni6').attributes['data-color'].value = this.hexFromArray(this.color.rotate(40));
|
||||
// document.querySelector('#ni7').style.background = this.color.rotate(50, true);
|
||||
// document.querySelector('#ni7').attributes['data-color'].value = this.hexFromArray(this.color.rotate(50));
|
||||
// document.querySelector('#ni8').style.background = this.color.rotate(55, true);
|
||||
// document.querySelector('#ni8').attributes['data-color'].value = this.hexFromArray(this.color.rotate(55));
|
||||
// document.querySelector('#ni9').style.background = this.color.rotate(60, true);
|
||||
// document.querySelector('#ni9').attributes['data-color'].value = this.hexFromArray(this.color.rotate(60));
|
||||
// document.querySelector('#ni10').style.background = this.color.rotate(75, true);
|
||||
// document.querySelector('#ni10').attributes['data-color'].value = this.hexFromArray(this.color.rotate(75));
|
||||
// document.querySelector('#ni11').style.background = this.color.rotate(79, true);
|
||||
// document.querySelector('#ni11').attributes['data-color'].value = this.hexFromArray(this.color.rotate(79));
|
||||
// }
|
||||
//
|
||||
// this.construct = function(){
|
||||
// this.initListener();
|
||||
// this.color.setrgb(this.r, this.g, this.b);
|
||||
// document.querySelector('.box').style.background = '#'+this.hexFromArray(this.color.negate());
|
||||
// document.querySelector('#numberBoxHex').value = '#'+this.hexFromArray(this.color.negate());
|
||||
// document.querySelector('header .ni').style.display = 'none';
|
||||
// document.querySelector('header .nu').style.display = 'none';
|
||||
//
|
||||
// this.changeColor(this.r, this.g, this.b);
|
||||
// }
|
||||
//
|
||||
//
|
||||
// this.initListener = ()=>{
|
||||
//
|
||||
// document.querySelector('#onTop').onclick = function(){
|
||||
// this.classList.toggle('active');
|
||||
// if(this.classList.contains('active')){
|
||||
// remote.getCurrentWindow().setAlwaysOnTop(true);
|
||||
// }
|
||||
// else{
|
||||
// remote.getCurrentWindow().setAlwaysOnTop(false);
|
||||
// }
|
||||
// }
|
||||
// document.querySelector('#nuances').onclick = () => {
|
||||
// document.querySelector('#nuances').classList.toggle('active');
|
||||
// this.toggleFlexbox('header .nu');
|
||||
// this.toggleFlexbox('header .ni');
|
||||
// }
|
||||
// document.querySelector('#random').onclick = ()=>{
|
||||
// var r = Math.floor(Math.random() * 255) + 0,
|
||||
// g = Math.floor(Math.random() * 255) + 0,
|
||||
// b = Math.floor(Math.random() * 255) + 0;
|
||||
// this.changeColor(r, g, b);
|
||||
// }
|
||||
//
|
||||
// document.querySelector('#minimize').onclick = function(){
|
||||
// remote.getCurrentWindow().minimize();
|
||||
// }
|
||||
// document.querySelector('#square').onclick = function(){
|
||||
// var window = remote.getCurrentWindow();
|
||||
// if(this.maximize){
|
||||
// window.unmaximize();
|
||||
// this.maximize = false;
|
||||
// }
|
||||
// else{
|
||||
// window.maximize();
|
||||
// this.maximize = true;
|
||||
// }
|
||||
// }
|
||||
// document.querySelector('#close').onclick = function(){
|
||||
// remote.getCurrentWindow().close();
|
||||
// }
|
||||
//
|
||||
// document.querySelector('.redBar input').oninput = () =>{
|
||||
// this.r = document.querySelector('.redBar input').value
|
||||
// this.changeColor(this.r, this.g, this.b);
|
||||
// }
|
||||
// document.querySelector('.greenBar input').oninput = () =>{
|
||||
// this.g = document.querySelector('.greenBar input').value;
|
||||
// this.changeColor(this.r, this.g, this.b);
|
||||
// }
|
||||
// document.querySelector('.blueBar input').oninput = () =>{
|
||||
// this.b = document.querySelector('.blueBar input').value;
|
||||
// this.changeColor(this.r, this.g, this.b);
|
||||
// }
|
||||
//
|
||||
// document.querySelector('#rangeRed').oninput = function(e){
|
||||
// var red = this.value;
|
||||
// if(red > 255){this.value = 255; red = 255;}
|
||||
// if(red < 0){this.value = 0; red = 0;}
|
||||
// self.changeColor(red, self.g, self.b);
|
||||
// }
|
||||
// document.querySelector('#rangeGreen').oninput = function(e){
|
||||
// var green = this.value;
|
||||
// if(green > 255){this.value = 255; green = 255;}
|
||||
// if(green < 0){this.value = 0; green = 0;}
|
||||
// self.changeColor(self.r, green, self.b);
|
||||
// }
|
||||
// document.querySelector('#rangeBlue').oninput = function(e){
|
||||
// var blue = this.value;
|
||||
// if(blue > 255){this.value = 255; blue = 255;}
|
||||
// if(blue < 0){this.value = 0; blue = 0;}
|
||||
// self.changeColor(self.r, self.g, blue);
|
||||
// }
|
||||
// document.querySelector('#numberHex').oninput = function(e){
|
||||
// var hex = this.value.replace('#', '');
|
||||
// if(hex.length == 6){
|
||||
// var color = self.hexToRGB('#'+hex);
|
||||
// if(color.r && color.g && color.b){
|
||||
// self.changeColor(color.r, color.g, color.b);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// document.querySelector('#numberBoxHex').oninput = function(e){
|
||||
// var hex = this.value.replace('#', '');
|
||||
// if(hex.length == 6){
|
||||
// document.querySelector('.box').style.background = '#'+hex;
|
||||
// }
|
||||
// }
|
||||
// document.querySelector('#numberBoxHex').onfocus = function(e){
|
||||
// this.onkeydown = function(e){ changeHex(e, this.value); }
|
||||
// this.onwheel = function(e){ changeHex(e, this.value); }
|
||||
// function changeHex(e, hex){
|
||||
// var color = self.hexToRGB(hex);
|
||||
// if(hex.length >= 6){
|
||||
// if(e.keyCode == 38 || e.deltaY < 0){
|
||||
// if(color.r >= 255){color.r = 254;}
|
||||
// if(color.g >= 255){color.g = 254;}
|
||||
// if(color.b >= 255){color.b = 254;}
|
||||
// document.querySelector('#numberBoxHex').value = '#'+self.hexFromRGB(color.r+1, color.g+1, color.b+1);
|
||||
// document.querySelector('.box').style.background = '#'+self.hexFromRGB(color.r+1, color.g+1, color.b+1);
|
||||
// }
|
||||
// else if(e.keyCode == 40 || e.deltaY > 0){
|
||||
// if(color.r <= 0){color.r = 1;}
|
||||
// if(color.g <= 0){color.g = 1;}
|
||||
// if(color.b <= 0){color.b = 1;}
|
||||
// document.querySelector('#numberBoxHex').value = '#'+self.hexFromRGB(color.r-1, color.g-1, color.b-1);
|
||||
// document.querySelector('.box').style.background = '#'+self.hexFromRGB(color.r-1, color.g-1, color.b-1);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// var els = document.querySelectorAll('#rangeRed, #rangeGreen, #rangeBlue, #numberHex');
|
||||
// for(el of els){
|
||||
// el.onfocus = function(){
|
||||
// this.onkeydown = function(e){
|
||||
// var val = this.value.replace('#', '');
|
||||
// changeHex(e, val);
|
||||
// }
|
||||
// this.onwheel = function(e){
|
||||
// var val = this.value.replace('#', '');
|
||||
// changeHex(e, val);
|
||||
// }
|
||||
// function changeHex(e, hex){
|
||||
// var color = self.hexToRGB('#'+hex);
|
||||
// if(hex.length == 6){
|
||||
// if(e.keyCode == 38 || e.deltaY < 0){
|
||||
// if(color.r >= 255){color.r = 254;}
|
||||
// if(color.g >= 255){color.g = 254;}
|
||||
// if(color.b >= 255){color.b = 254;}
|
||||
// self.changeColor(color.r+1, color.g+1, color.b+1);
|
||||
// }
|
||||
// else if(e.keyCode == 40 || e.deltaY > 0){
|
||||
// if(color.r <= 0){color.r = 1;}
|
||||
// if(color.g <= 0){color.g = 1;}
|
||||
// if(color.b <= 0){color.b = 1;}
|
||||
// self.changeColor(color.r-1, color.g-1, color.b-1);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//
|
||||
//
|
||||
// var els = document.querySelectorAll('header .ni aside, header .nu aside');
|
||||
// for(el of els){
|
||||
// el.onclick = function(){
|
||||
// var color = self.hexToRGB(this.attributes['data-color'].value);
|
||||
// self.changeColor(color.r, color.g, color.b);
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// document.querySelector('#newBox').onclick = function(){
|
||||
// this.classList.toggle('active');
|
||||
// if(document.querySelector('body').classList.contains('boxed')){
|
||||
// document.querySelector('body').classList.remove('boxed');
|
||||
// document.querySelector('.box').style.right = '-200px';
|
||||
// document.querySelector('#numberBoxHex').style.cursor = 'default';
|
||||
// document.querySelector('#numberBoxHex').style.visibility = 'none';
|
||||
// document.querySelector('#numberBoxHex').style.opacity = '0';
|
||||
// }
|
||||
// else{
|
||||
// document.querySelector('body').classList.add('boxed');
|
||||
// document.querySelector('.box').style.right = '0';
|
||||
// document.querySelector('#numberBoxHex').style.cursor = 'text';
|
||||
// document.querySelector('#numberBoxHex').style.visibility = 'visible';
|
||||
// document.querySelector('#numberBoxHex').style.opacity = '1';
|
||||
// }
|
||||
//
|
||||
// }
|
||||
//
|
||||
// }
|
||||
//
|
||||
//
|
||||
// this.construct();
|
||||
// }
|
||||
//
|
||||
// var Colorpicker = new Colorpicker(0, 174, 239);
|
||||
|
||||
@@ -5,7 +5,7 @@ const {ipcRenderer} = require('electron');
|
||||
document.addEventListener('DOMContentLoaded', () => ipcRenderer.send('init-colorpicker'), false);
|
||||
|
||||
ipcRenderer.on('lastColor', (event, color) => {
|
||||
console.log(color);
|
||||
cp = new Colorpicker(color);
|
||||
});
|
||||
|
||||
ipcRenderer.on('buttonsPosition', (event, pos) => {
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
'use strict';
|
||||
|
||||
const {remote} = require('electron');
|
||||
|
||||
|
||||
let toggleFlexbox = el => {
|
||||
let el = document.querySelector(el);
|
||||
if(el.style.display === "none"){
|
||||
el.style.display = 'flex';
|
||||
}else{
|
||||
el.style.display = 'none';
|
||||
}
|
||||
};
|
||||
|
||||
let getCSSFromRGB = rgb => `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
|
||||
Reference in New Issue
Block a user