mirror of
https://github.com/Toinane/colorpicker.git
synced 2026-09-26 17:20:29 -04:00
feat(toolbar): add new icons and add colorpicker events
This commit is contained in:
Toinane
@@ -30,7 +30,7 @@ module.exports = (dirname, storage) => {
|
||||
frame:false,
|
||||
'auto-hide-menu-bar': true,
|
||||
width: width, height: height,
|
||||
minWidth: 438, minHeight: 139,
|
||||
minWidth: 440, minHeight: 150,
|
||||
icon: `${dirname}/build/logo.png`
|
||||
}
|
||||
if (x && y) { options.x = x; options.y = y; }
|
||||
|
||||
+13
-10
@@ -4,21 +4,25 @@
|
||||
<title>ColorPicker</title>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="css/colorpicker.css" />
|
||||
<link rel="stylesheet" href="css/font-awesome.min.css" />
|
||||
<script defer src="js/color.class.js"></script>
|
||||
<script defer src="js/colorpicker.class.js"></script>
|
||||
<script defer src="js/colorpicker.events.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="toolbar">
|
||||
<ul>
|
||||
<li id="close"><div class="close"></div></li>
|
||||
<li id="minimize"><div class="minimize"></div></li>
|
||||
<li id="square"><div class="square"></div></li>
|
||||
<ul id="app_buttons">
|
||||
<li id="close"><i class="fa fa-circle"></i></li>
|
||||
<li id="minimize"><i class="fa fa-circle"></i></li>
|
||||
<li id="maximize"><i class="fa fa-circle"></i></li>
|
||||
</ul>
|
||||
<ul id="tools">
|
||||
<p id="top_button"><i class="fa fa-map-pin"></i></p>
|
||||
<p id="picker_button"><i class="fa fa-eyedropper"></i></p>
|
||||
<p id="tags_button"><i class="fa fa-bookmark"></i></p>
|
||||
<p id="shade_button"><i class="fa fa-tint"></i></p>
|
||||
<p id="random_button"><i class="fa fa-random"></i></p>
|
||||
</ul>
|
||||
<p id="top_button">CP</p>
|
||||
<!--<p id="picker">{P}</p>-->
|
||||
<p id="nuances">Shading</p>
|
||||
<p id="random">Random</p>
|
||||
</div>
|
||||
<header>
|
||||
<div class="ni">
|
||||
@@ -72,8 +76,7 @@
|
||||
<input type="text" id="hex_value" maxlength="7"/>
|
||||
<p id="rgb_value"></p>
|
||||
</aside>
|
||||
<div id="newBox"></div>
|
||||
<div id="settings"><i class="fas fa-cog"></i></div>
|
||||
</section>
|
||||
<section class="box"></section>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -13,11 +13,15 @@ a{color: inherit;text-decoration: none;}
|
||||
*/
|
||||
.toolbar{
|
||||
margin: 3px;
|
||||
padding: 10px;
|
||||
padding: 5px 5px 7px 5px;
|
||||
position: relative;
|
||||
z-index: 10000;
|
||||
box-sizing: border-box;
|
||||
-webkit-app-region: drag;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.toolbar p{
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
@@ -35,28 +39,14 @@ a{color: inherit;text-decoration: none;}
|
||||
.toolbar .active{
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.whited p{
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
.whited p:hover{
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
.whited .active{
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.toolbar p::selection, .toolbar li::selection, .toolbar div::selection{
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
.toolbar ul{
|
||||
-webkit-app-region: no-drag;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
bottom: 3px; right: 3px;
|
||||
margin: 0;
|
||||
margin-right: 10px;;
|
||||
padding: 0;
|
||||
margin: 0; padding: 0;
|
||||
}
|
||||
.toolbar li{
|
||||
-webkit-app-region: no-drag;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
@@ -68,23 +58,23 @@ a{color: inherit;text-decoration: none;}
|
||||
margin-left: 4px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
.toolbar .minimize{
|
||||
background: #FEBF3C;
|
||||
.toolbar #minimize{
|
||||
color: #FEBF3C;
|
||||
}
|
||||
.toolbar li:hover .minimize{
|
||||
background: #FEB219;
|
||||
.toolbar li:hover #minimize{
|
||||
color: #FEB219;
|
||||
}
|
||||
.toolbar .square{
|
||||
background: #35CC48;
|
||||
.toolbar #maximize{
|
||||
color: #35CC48;
|
||||
}
|
||||
.toolbar li:hover .square{
|
||||
background: #32C544;
|
||||
.toolbar li:hover #maximize{
|
||||
color: #32C544;
|
||||
}
|
||||
.toolbar .close{
|
||||
background: #FC635C;
|
||||
.toolbar #close{
|
||||
color: #FC635C;
|
||||
}
|
||||
.toolbar li:hover .close{
|
||||
background: #FC4B43;
|
||||
.toolbar li:hover #close{
|
||||
color: #FC4B43;
|
||||
}
|
||||
|
||||
|
||||
|
||||
Vendored
+4
File diff suppressed because one or more lines are too long
Binary file not shown.
@@ -1,352 +0,0 @@
|
||||
body, p, h1, h2{
|
||||
margin: 0;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
body{
|
||||
overflow: hidden;
|
||||
}
|
||||
a{color: inherit;text-decoration: none;}
|
||||
|
||||
|
||||
/**
|
||||
* TOOLBAR
|
||||
*/
|
||||
.toolbar{
|
||||
margin: 3px;
|
||||
padding: 10px;
|
||||
position: relative;
|
||||
z-index: 10000;
|
||||
box-sizing: border-box;
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
.toolbar p{
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
font-weight: bold;
|
||||
cursor: default;
|
||||
display: inline-block;
|
||||
margin-right: 20px;
|
||||
-webkit-app-region: no-drag;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.toolbar p:hover{
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.toolbar .active{
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.whited p{
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
.whited p:hover{
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
.whited .active{
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.toolbar p::selection, .toolbar li::selection, .toolbar div::selection{
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
.toolbar ul{
|
||||
-webkit-app-region: no-drag;
|
||||
position: absolute;
|
||||
z-index: 15;
|
||||
top: 0px; right: 10px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.toolbar li{
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
cursor: pointer;
|
||||
padding: 10px 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.toolbar #close{
|
||||
padding: 10px;
|
||||
}
|
||||
.toolbar li div{
|
||||
transition: 0.2s;
|
||||
}
|
||||
.toolbar .minimize{
|
||||
width: 15px; height: 12px;
|
||||
position: relative;
|
||||
bottom: 1px;
|
||||
border-bottom: 3px solid rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.whited .minimize{
|
||||
border-bottom: 3px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
.toolbar li:hover .minimize{
|
||||
border-bottom: 3px solid rgb(255, 255, 255);
|
||||
}
|
||||
.toolbar .square{
|
||||
width: 12px; height: 9px;
|
||||
border: 2px solid rgba(0, 0, 0, 0.3);
|
||||
border-top: 3px solid rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.whited .square{
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
border-top: 3px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
.toolbar li:hover .square{
|
||||
border: 2px solid rgb(255, 255, 255);
|
||||
border-top: 3px solid rgb(255, 255, 255);
|
||||
}
|
||||
.toolbar .close{
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
transform: scale(1.5,1);
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.whited .close{
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
.toolbar li:hover .close{
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* HEADER CSS
|
||||
*/
|
||||
header{
|
||||
position: relative;
|
||||
z-index: 900;
|
||||
width: 100%;
|
||||
}
|
||||
header .nu, header .ni{
|
||||
display: flex;
|
||||
}
|
||||
header .nu aside{
|
||||
background: rgb(40, 40, 40);
|
||||
flex: 1 100%;
|
||||
height: 65px;
|
||||
cursor: pointer;
|
||||
}
|
||||
header .ni aside{
|
||||
background: rgb(70, 70, 70);
|
||||
flex: 1 100%;
|
||||
height: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/**
|
||||
* HEADER BOX CSS
|
||||
*/
|
||||
.nuance, .alea, .mode{
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
padding: 5px 0;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-weight: 300;
|
||||
}
|
||||
.alea{ left: 200px;}
|
||||
.mode{ left: 110px;}
|
||||
|
||||
|
||||
/**
|
||||
* BOX COLORPICKER CSS
|
||||
*/
|
||||
.edit-box{
|
||||
background: rgba(0, 0, 0, 0);
|
||||
position: absolute;
|
||||
z-index: 200;
|
||||
bottom: 0; left: 0;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 3px;
|
||||
padding-left: 10px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.sliders{
|
||||
|
||||
}
|
||||
|
||||
.redBar, .greenBar, .blueBar{
|
||||
position: relative;
|
||||
width: 220px;
|
||||
height: 20px;
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
/* STYLING SLIDER */
|
||||
input[type=range]{
|
||||
margin: 0;
|
||||
padding: 3px 0;
|
||||
-webkit-appearance: none;
|
||||
outline: none;
|
||||
background: none;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
input[type=range]::-webkit-slider-thumb {
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
-webkit-appearance: none;
|
||||
border: none;
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
margin-top: -10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
progress[value]::-webkit-progress-bar {
|
||||
position: absolute;
|
||||
width: 99%;
|
||||
top: 5px; left: 1px;
|
||||
background-color: white;
|
||||
border-radius: 6px;
|
||||
height: 10px;
|
||||
}
|
||||
.redBar progress[value]::-webkit-progress-value {
|
||||
background: rgb(255, 87, 57);
|
||||
border-radius: 6px;
|
||||
height: 10px;
|
||||
}
|
||||
.greenBar progress[value]::-webkit-progress-value {
|
||||
background: rgb(105, 195, 59);
|
||||
border-radius: 6px;
|
||||
height: 10px;
|
||||
}
|
||||
.blueBar progress[value]::-webkit-progress-value {
|
||||
background: rgb(65, 165, 225);
|
||||
border-radius: 6px;
|
||||
height: 10px;
|
||||
}
|
||||
progress{
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
/* INPUTS STYLE */
|
||||
.inputs{
|
||||
|
||||
}
|
||||
.inputs input{
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.inputs input[type=number]::-webkit-inner-spin-button,
|
||||
.inputs input[type=number]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.inputs input[type="number"], input[type="text"]{
|
||||
width: 30px;
|
||||
text-align: center;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
border: none;
|
||||
padding: 2px;
|
||||
font-family: "Source Sans Pro", sans-serif;
|
||||
font-size: 1.1em;
|
||||
font-weight: bold;
|
||||
outline: none;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.whited .inputs input[type="number"], .whited input[type="text"], .whited .value p{
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.value{
|
||||
margin-bottom: 8px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.value input{
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
width: 105px;
|
||||
}
|
||||
.value p{
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
font-weight: bold;
|
||||
padding: 4px 2px;
|
||||
width: 105px;
|
||||
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
|
||||
*/
|
||||
@media screen and (max-width: 500px){
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-height: 200px){
|
||||
.edit-box{
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* VIEWPORT CSS
|
||||
*/
|
||||
@viewport{
|
||||
zoom: 1.0;
|
||||
width: extend-to-zoom;
|
||||
}
|
||||
@-ms-viewport{
|
||||
zoom: 1.0;
|
||||
width: extend-to-zoom;
|
||||
}
|
||||
@@ -6,7 +6,6 @@ class Color {
|
||||
this.setColorFromIndividual(r, g, b);
|
||||
}
|
||||
|
||||
// this.setrgb
|
||||
setColorFromIndividual(r, g, b) {
|
||||
this.red = parseInt(r);
|
||||
this.green = parseInt(g);
|
||||
@@ -17,13 +16,11 @@ class Color {
|
||||
return true;
|
||||
}
|
||||
|
||||
// this.rgbarray
|
||||
setColorFromArray(rgb) {
|
||||
this.setColorFromIndividual(rgb[0], rgb[1], rgb[2]);
|
||||
return true;
|
||||
}
|
||||
|
||||
// this.hex
|
||||
setColorFromHex(hex) {
|
||||
const rgb = this.getRGBFromHex(hex);
|
||||
this.setColorFromArray(rgb);
|
||||
@@ -59,7 +56,6 @@ class Color {
|
||||
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);
|
||||
@@ -78,7 +74,6 @@ class Color {
|
||||
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
|
||||
@@ -110,7 +105,6 @@ class Color {
|
||||
return this.getHexFromRGB(rgb);
|
||||
}
|
||||
|
||||
// this.isDarkColor
|
||||
isDarkColor(rgb) {
|
||||
if (rgb) return Math.round((
|
||||
parseInt(rgb[0]) * 299 +
|
||||
@@ -130,7 +124,6 @@ class Color {
|
||||
return negative;
|
||||
}
|
||||
|
||||
// this.negate
|
||||
getNegativeColor(rgb) {
|
||||
var negative = [];
|
||||
for(let i = 0; i < 3; i++){
|
||||
@@ -145,7 +138,6 @@ class Color {
|
||||
return gray;
|
||||
}
|
||||
|
||||
// this.grayscale
|
||||
getGrayscale(setColor) {
|
||||
var gray = parseInt(this.red * 0.3 + this.green * 0.59 + this.blue * 0.11);
|
||||
if(gray < 0){gray = 0;}
|
||||
@@ -159,7 +151,6 @@ class Color {
|
||||
return rgb;
|
||||
}
|
||||
|
||||
// this.lightness
|
||||
getLightness(light, hsl) {
|
||||
hsl = [hsl[0], hsl[1], (hsl[2]+light)];
|
||||
const lightness = this.getRGBFromHSL(hsl);
|
||||
@@ -176,7 +167,6 @@ class Color {
|
||||
return rgb;
|
||||
}
|
||||
|
||||
// this.rotate
|
||||
getRotatedColor(degrees, hsl){
|
||||
let hue = hsl[0];
|
||||
hue = (hue + degrees) % 360;
|
||||
|
||||
@@ -24,6 +24,10 @@ class Colorpicker extends Color{
|
||||
this.setNewColor(hex);
|
||||
}
|
||||
|
||||
setNewRGBColor(rgb) {
|
||||
this.setNewColor(this.getHexFromRGB(rgb));
|
||||
}
|
||||
|
||||
setNewColor(hex) {
|
||||
this.setColorFromHex(hex);
|
||||
const darknessColor = this.isDarkColor(this.rgb);
|
||||
|
||||
@@ -28,119 +28,101 @@ function changebuttonsType(type) {
|
||||
ipcRenderer.send('buttonsType', type);
|
||||
}
|
||||
|
||||
document.querySelector('#close').onclick = function() {
|
||||
ipcRenderer.send('close');
|
||||
}
|
||||
|
||||
document.querySelector('#top_button').onclick = function(){
|
||||
document.querySelector('#minimize').onclick = function() {
|
||||
ipcRenderer.send('minimize');
|
||||
}
|
||||
|
||||
document.querySelector('#maximize').onclick = function() {
|
||||
this.classList.toggle('active');
|
||||
ipcRenderer.send('maximize', this.classList.contains('active'));
|
||||
}
|
||||
|
||||
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('#shade_button').onclick = function() {
|
||||
this.classList.toggle('active');
|
||||
toggleFlexbox('header .nu');
|
||||
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('#random_button').onclick = function() {
|
||||
const r = Math.floor(Math.random() * 255) + 0;
|
||||
const g = Math.floor(Math.random() * 255) + 0;
|
||||
const b = Math.floor(Math.random() * 255) + 0;
|
||||
cp.setNewRGBColor([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 = function() {
|
||||
const red = this.value;
|
||||
cp.setNewRGBColor([red, cp.green, cp.blue]);
|
||||
}
|
||||
|
||||
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('.green_bar input').oninput = function() {
|
||||
const green = this.value;
|
||||
cp.setNewRGBColor([cp.red, green, cp.blue]);
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
document.querySelector('.blue_bar input').oninput = function() {
|
||||
const blue = this.value;
|
||||
cp.setNewRGBColor([cp.red, cp.green, blue]);
|
||||
}
|
||||
|
||||
document.querySelector('#red_value').oninput = function() {
|
||||
let red = this.value;
|
||||
if (red > 255) red = 255;
|
||||
if (red < 0) red = 0;
|
||||
cp.setNewRGBColor([red, cp.green, cp.blue]);
|
||||
}
|
||||
|
||||
var els = document.querySelectorAll('#red_value, #green_value, #blue_value, #hex_value');
|
||||
// document.querySelector('#green_value').oninput = function() {
|
||||
// let green = this.value;
|
||||
// if (green > 255) green = 255;
|
||||
// if (green < 0) green = 0;
|
||||
// //cp.setNewRGBColor([cp.red, green, cp.blue]);
|
||||
// }
|
||||
|
||||
document.querySelector('#blue_value').oninput = function() {
|
||||
let blue = this.value;
|
||||
if (blue > 255) blue = 255;
|
||||
if (blue < 0) blue = 0;
|
||||
cp.setNewRGBColor([cp.red, cp.green, blue]);
|
||||
}
|
||||
|
||||
document.querySelector('#hex_value').oninput = function() {
|
||||
let hex = this.value.replace('#', '');
|
||||
if (hex.length !== 6) return;
|
||||
cp.setNewColor(hex);
|
||||
}
|
||||
|
||||
let 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);
|
||||
this.onkeydown = e => changeHex(e);
|
||||
this.onwheel = e => changeHex(e);
|
||||
|
||||
function changeHex(e){
|
||||
if (e.keyCode === 38 || e.deltaY < 0) {
|
||||
let red = (cp.red >= 255) ? 255 : cp.red + 1;
|
||||
let green = (cp.green >= 255) ? 255 : cp.green + 1;
|
||||
let blue = (cp.blue >= 255) ? 255 : cp.blue + 1;
|
||||
return cp.setNewRGBColor([red, green, blue]);
|
||||
}
|
||||
else if (e.keyCode === 40 || e.deltaY > 0) {
|
||||
let red = (cp.red <= 0) ? 0 : cp.red - 1;
|
||||
let green = (cp.green <= 0) ? 0 : cp.green - 1;
|
||||
let blue = (cp.blue <= 0) ? 0 : cp.blue - 1;
|
||||
return cp.setNewRGBColor([red, green, blue]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let shades = document.querySelectorAll('header .ni aside, header .nu aside');
|
||||
for (let shade of shades) shade.onclick = () => cp.setNewColor(this.attributes['data-color'].value);
|
||||
|
||||
@@ -1,13 +1 @@
|
||||
'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';
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user