From 05338bb63ff20d03b992713a0765944ea9cdef13 Mon Sep 17 00:00:00 2001 From: Toinane Date: Thu, 3 Aug 2017 15:01:30 +0200 Subject: [PATCH] refacto(colorpicker.class): refactoring renderer js --- src/events.js | 8 +- src/views/colorpicker.html | 19 +- src/views/css/colorpicker.css | 51 +--- src/views/js/color.class.js | 4 + src/views/js/colorpicker.class.js | 408 ++++++----------------------- src/views/js/colorpicker.events.js | 117 +++++++++ src/views/js/util.js | 2 - 7 files changed, 218 insertions(+), 391 deletions(-) diff --git a/src/events.js b/src/events.js index 01c3c33..b80c540 100644 --- a/src/events.js +++ b/src/events.js @@ -15,6 +15,12 @@ module.exports = storage => { ipcMain.on('changeLastColor', (event, color) => { storage.add({'lastColor': color}); - }) + }); + + ipcMain.on('setOnTop', (event, bool) => { + console.log(event.sender); + //event.getCurrentWindow() + //event.sender.setAlwaysOnTop(bool); + }); }; diff --git a/src/views/colorpicker.html b/src/views/colorpicker.html index 0228d29..481d4d9 100644 --- a/src/views/colorpicker.html +++ b/src/views/colorpicker.html @@ -15,7 +15,7 @@
    • -

    CP

    +

    CP

    Shading

    Random

    @@ -50,28 +50,27 @@
    diff --git a/src/views/css/colorpicker.css b/src/views/css/colorpicker.css index 07cbcbb..27905de 100644 --- a/src/views/css/colorpicker.css +++ b/src/views/css/colorpicker.css @@ -99,7 +99,7 @@ header{ width: 100%; } header .nu, header .ni{ - display: flex; + display: none; } header .nu aside{ background: rgb(40, 40, 40); @@ -152,7 +152,7 @@ header .ni aside{ } -.redBar, .greenBar, .blueBar{ +.red_bar, .green_bar, .blue_bar{ position: relative; width: 220px; height: 20px; @@ -190,17 +190,17 @@ progress[value]::-webkit-progress-bar { border-radius: 6px; height: 10px; } -.redBar progress[value]::-webkit-progress-value { +.red_bar progress[value]::-webkit-progress-value { background: rgb(255, 87, 57); border-radius: 6px; height: 10px; } -.greenBar progress[value]::-webkit-progress-value { +.green_bar progress[value]::-webkit-progress-value { background: rgb(105, 195, 59); border-radius: 6px; height: 10px; } -.blueBar progress[value]::-webkit-progress-value { +.blue_bar progress[value]::-webkit-progress-value { background: rgb(65, 165, 225); border-radius: 6px; height: 10px; @@ -264,47 +264,6 @@ progress{ transition: 0.3s; } -#newBox{ - position: absolute; - bottom: 15px; right: 30px; - border: 3px solid rgba(0, 0, 0, 0.15); - width: 12px; height: 12px; - cursor: pointer; - z-index: 999; - transition: 0.3s; -} -#newBox:hover{ - border: 3px solid rgba(0, 0, 0, 0.25); -} -.whited #newBox{ - border: 3px solid rgba(255, 255, 255, 0.15); -} -.whited #newBox:hover{ - border: 3px solid rgba(255, 255, 255, 0.25); -} -#newBox.active{ - border: 3px solid rgba(0, 0, 0, 0.3); -} -.whited #newBox.active{ - border: 3px solid rgba(255, 255, 255, 0.3); -} - -.box{ - position: absolute; - top: 0; right: -200px; - height: 100%; - width: 200px; - transition: right 0.5s; -} - -#numberBoxHex{ - cursor: default; - visibility: hidden; - opacity: 0; - transition: 0.4s; -} - - /** * RESPONSIVE CSS diff --git a/src/views/js/color.class.js b/src/views/js/color.class.js index 96d1486..b0b05a2 100644 --- a/src/views/js/color.class.js +++ b/src/views/js/color.class.js @@ -36,6 +36,10 @@ class Color { return true; } + getCSSFromRGB(rgb) { + return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`; + } + getRGBFromIndividual(r, g, b) { return [r, g, b]; } diff --git a/src/views/js/colorpicker.class.js b/src/views/js/colorpicker.class.js index 7ba7716..f5c7f3b 100644 --- a/src/views/js/colorpicker.class.js +++ b/src/views/js/colorpicker.class.js @@ -6,339 +6,83 @@ class Colorpicker extends Color{ constructor(hex) { super(); - this.shading = false; - this.maximize = false; + this.body = document.querySelector('body'); + this.hex_value = document.querySelector('#hex_value'); + this.rgb_value = document.querySelector('#rgb_value'); + this.rgbhtml = { + red_progress: document.querySelector('.red_bar progress'), + red_input: document.querySelector('.red_bar input'), + red_range: document.querySelector('#red_value'), + green_progress: document.querySelector('.green_bar progress'), + green_input: document.querySelector('.green_bar input'), + green_range: document.querySelector('#green_value'), + blue_progress: document.querySelector('.blue_bar progress'), + blue_input: document.querySelector('.blue_bar input'), + blue_range: document.querySelector('#blue_value') + }; + + this.setNewColor(hex); + } + + setNewColor(hex) { this.setColorFromHex(hex); + const darknessColor = this.isDarkColor(this.rgb); + + for(let i = 0; i < Object.keys(this.rgbhtml).length; i++){ + this.rgbhtml[Object.keys(this.rgbhtml)[i]].value = this.rgb[Math.floor(i/3)]; + } + this.hex_value.value = this.hex; + this.rgb_value.innerHTML = this.getCSSFromRGB(this.rgb); + this.body.style.background = this.hex; + //this.changeShade(); + } + + changeShade(){ + 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 = this.hex; + document.querySelector('#nu6').attributes['data-color'].value = this.hex; + 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)); } } - - -// -// /** -// * 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); diff --git a/src/views/js/colorpicker.events.js b/src/views/js/colorpicker.events.js index 67e2aaa..f649a3d 100644 --- a/src/views/js/colorpicker.events.js +++ b/src/views/js/colorpicker.events.js @@ -27,3 +27,120 @@ function changebuttonsPosition(pos) { function changebuttonsType(type) { ipcRenderer.send('buttonsType', type); } + + +document.querySelector('#top_button').onclick = function(){ + this.classList.toggle('active'); + ipcRenderer.send('setOnTop', this.classList.contains('active')); +} + +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('.red_bar input').oninput = () =>{ + this.r = document.querySelector('.red_bar input').value + this.changeColor(this.r, this.g, this.b); +} +document.querySelector('.green_bar input').oninput = () =>{ + this.g = document.querySelector('.green_bar input').value; + this.changeColor(this.r, this.g, this.b); +} +document.querySelector('.blue_bar input').oninput = () =>{ + this.b = document.querySelector('.blue_bar input').value; + this.changeColor(this.r, this.g, this.b); +} + +document.querySelector('#red_value').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('#green_value').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('#blue_value').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('#hex_value').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); + } + } +} + + +var els = document.querySelectorAll('#red_value, #green_value, #blue_value, #hex_value'); +for(let 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(let el of els){ + el.onclick = function(){ + var color = self.hexToRGB(this.attributes['data-color'].value); + self.changeColor(color.r, color.g, color.b); + } +} diff --git a/src/views/js/util.js b/src/views/js/util.js index ab58424..3e9ee8b 100644 --- a/src/views/js/util.js +++ b/src/views/js/util.js @@ -11,5 +11,3 @@ let toggleFlexbox = el => { el.style.display = 'none'; } }; - -let getCSSFromRGB = rgb => `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;