starred/colorpicker
1
0
Fork 0
mirror of https://github.com/Toinane/colorpicker.git synced 2026-09-27 09:36:03 -04:00
Code Issues Packages Projects Releases Wiki Activity

refacto(colorpicker.class): refactoring renderer js

Browse Source
This commit is contained in:
Toinane
2017-08-03 15:01:30 +02:00
parent f2fe709612
commit 05338bb63f
7 changed files with 218 additions and 391 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/events.js
+7 -1
View File
@@ -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);
});
};
src/views/colorpicker.html
+9 -10
View File
@@ -15,7 +15,7 @@
<li id="minimize"><div class="minimize"></div></li>
<li id="square"><div class="square"></div></li>
</ul>
<p id="onTop">CP</p>
<p id="top_button">CP</p>
<!--<p id="picker">{P}</p>-->
<p id="nuances">Shading</p>
<p id="random">Random</p>
@@ -50,28 +50,27 @@
</header>
<section class="edit-box">
<aside class="sliders">
<div class="redBar">
<div class="red_bar">
<input type="range" min="0" max="255" value="0" />
<progress min="0" max="255" value="0" />
</div>
<div class="greenBar">
<div class="green_bar">
<input type="range" min="0" max="255" value="0" />
<progress min="0" max="255" value="0" />
</div>
<div class="blueBar">
<div class="blue_bar">
<input type="range" min="0" max="255" value="0" />
<progress min="0" max="255" value="0" />
</div>
</aside>
<aside class="inputs">
<input type="number" id="rangeRed" maxlength="3" />
<input type="number" id="rangeGreen" maxlength="3" />
<input type="number" id="rangeBlue" maxlength="3" />
<input type="number" id="red_value" maxlength="3" />
<input type="number" id="green_value" maxlength="3" />
<input type="number" id="blue_value" maxlength="3" />
</aside>
<aside class="value">
<input type="text" id="numberBoxHex" maxlength="7"/>
<input type="text" id="numberHex" maxlength="7"/>
<p id="numberRGB">(<span id="r">0</span>,<span id="g">0</span>,<span id="b">0</span>)</p>
<input type="text" id="hex_value" maxlength="7"/>
<p id="rgb_value"></p>
</aside>
<div id="newBox"></div>
</section>
src/views/css/colorpicker.css
+5 -46
View File
@@ -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
src/views/js/color.class.js
+4
View File
@@ -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];
}
src/views/js/colorpicker.class.js
+76 -332
View File
@@ -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);
src/views/js/colorpicker.events.js
+117
View File
@@ -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);
}
}
src/views/js/util.js
-2
View File
@@ -11,5 +11,3 @@ let toggleFlexbox = el => {
el.style.display = 'none';
}
};
let getCSSFromRGB = rgb => `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;