starred/colorpicker
1
0
Fork 0
mirror of https://github.com/Toinane/colorpicker.git synced 2026-08-24 10:05:36 -05:00
Code Issues Packages Projects Releases Wiki Activity

v2.2.0

Browse Source
This commit is contained in:
Toinane
2022-11-24 12:37:15 +01:00
parent 320b2b3436
commit 551bedbe6d
25 changed files with 640 additions and 1224 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.github/CHANGELOG.md
+9
View File
@@ -1,6 +1,15 @@
# Changelog
All releases changes will be documented in this file.
# 2.2.0 - 2022-11-24
## Changed
- Updated dependencies
- Remove Opacity feature as it's really buggy sometimes
## Fixed
- Fix issues with picker on bigger resolution
---
# 2.0.0 - 2018-02-24
.npmrc
+2 -2
View File
@@ -1,6 +1,6 @@
runtime = electron
target = 7.1.7
target = 19.1.7
target_arch = x64
disturl = https://atom.io/download/atom-shell
disturl = https://electronjs.org/headers
export npm_config_runtime=electron
export npm_config_build_from_source=true
README.md
-10
View File
@@ -36,7 +36,6 @@ Colorpicker's menu come with a lot of cool features :
- [Picker](#picker): open an eyedropper who can pick a color from your desktop;
- [Colorsbook](#colorsbook): open Colorsbook, a color manager;
- [Shading](#shading): show three bar of shading — hue bar, natural bar and lightness bar;
- [Opacity](#opacity): toggle Opacity range;
- [Clean Vue](#clean-vue): unshow menu, ranges and inputs;
- [Magic color](#magic-color): show colors from the clipboard;
- [Random](#random): show a random color;
@@ -79,15 +78,6 @@ bar.
---
## Opacity [WIP]
![Opacity gif](.github/screenshots/opacity.png)
This feature is a bit special. It allows you to render the application transparent. This can be useful to see the
appearance of a transparent color.
---
## Focus Mode
![Focus screenshot](.github/screenshots/focus.png)
package-lock.json
Generated
+369 -942
View File
File diff suppressed because it is too large Load Diff
package.json
+7 -7
View File
@@ -1,7 +1,7 @@
{
"name": "colorpicker",
"productName": "colorpicker",
"version": "2.1.0",
"version": "2.2.0",
"description": "Colorpicker is a little Electron app that can show colors with hex/rgb code, and generate shading for your color.",
"main": "src/main.js",
"scripts": {
@@ -15,7 +15,7 @@
"release-window": "electron-builder --publish=never --config colorpicker-build.json --win nsis portable",
"nightly": "electron-builder --publish=never --config colorpicker-build-nightly.json",
"nightly-linux": "electron-builder --publish=never --config colorpicker-build-nightly.json --linux deb appImage",
"rebuild": "npm rebuild --runtime=electron --target=18.2.3 --disturl=https://electronjs.org/headers --abi=103"
"rebuild": "npm rebuild --runtime=electron --target=19.1.7 --disturl=https://electronjs.org/headers --abi=106"
},
"repository": "https://github.com/toinane/colorpicker",
"keywords": [
@@ -29,19 +29,19 @@
"crea-that"
],
"dependencies": {
"electron-json-storage": "^4.5.0",
"electron-json-storage": "^4.6.0",
"request": "^2.88.2",
"robotjs": "github:Toinane/robotjs",
"semver": "^7.3.7"
"semver": "^7.3.8"
},
"optionalDependencies": {
"iohook": "^0.9.3",
"osx-mouse": "git+https://github.com/Toinane/osx-mouse",
"osx-mouse": "github:Toinane/osx-mouse",
"win-mouse": "github:Toinane/win-mouse"
},
"devDependencies": {
"electron": "^18.2.3",
"electron-builder": "^23.0.3",
"electron": "^19.1.7",
"electron-builder": "^23.6.0",
"standard": "^17.0.0"
},
"author": {
snap/snapcraft.yaml
-1
View File
@@ -11,7 +11,6 @@ description: |
- Picker: open an eyedropper who can pick a color from your desktop;
- Colorsbook: open Colorsbook, a color manager;
- Shading: show three bar of shading — hue bar, natural bar and lightness bar;
- Opacity: toggle Opacity range;
- Clean Vue: unshow menu, ranges and inputs;
- Magic color: show colors from the clipboard;
- Random: show a random color;
src/browsers/colorpicker.js
+6 -6
View File
@@ -13,9 +13,10 @@ module.exports = (dirname, storage, util) => {
*/
let init = (force, color) => {
const size = storage.get("size");
if (win === null || win === undefined || force)
if (win === null || win === undefined || force) {
createWindow(size.width, size.height);
else win.show();
}
else { win.show(); }
};
/**
@@ -28,14 +29,13 @@ module.exports = (dirname, storage, util) => {
const pos = storage.get("pos");
let options = {
frame: false,
autoHideMenuBar: true,
width: width,
height: height,
minWidth: 440,
minHeight: 150,
transparent: true,
icon: nativeImage.createFromPath(`${dirname}/build/icon.png`),
webPreferences: {
devTools: true,
preload: `${dirname}/preload.js`,
},
};
@@ -47,12 +47,12 @@ module.exports = (dirname, storage, util) => {
win = new BrowserWindow(options);
win.loadURL(`file://${dirname}/views/colorpicker.html`);
if (touchbar) win.setTouchBar(touchbar);
if (touchbar) { win.setTouchBar(touchbar); }
win.on("closed", () => {
win = undefined;
let totalWin = BrowserWindow.getAllWindows();
for (let wins of totalWin) wins.close();
for (let wins of totalWin) { wins.close(); }
});
windowEvents(win);
src/browsers/colorsbook.js
+2 -2
View File
@@ -9,8 +9,8 @@ module.exports = (dirname, storage) => {
* @return {void} [new Colorsbook]
*/
let init = () => {
if (win === null || win === undefined) createWindow();
else win.show();
if (win === null || win === undefined) { createWindow(); }
else { win.show(); }
};
/**
src/browsers/preview.js
+2 -2
View File
@@ -11,8 +11,8 @@ module.exports = (dirname, storage) => {
* @return {void} [new Colorpicker]
*/
let init = () => {
if (win === null || win === undefined) createWindow();
else win.show();
if (win === null || win === undefined) { createWindow(); }
else { win.show(); }
};
/**
src/browsers/settings.js
+2 -2
View File
@@ -11,8 +11,8 @@ module.exports = (dirname, storage) => {
* @return {void} [new Colorpicker]
*/
let init = () => {
if (win === null || win === undefined) createWindow();
else win.show();
if (win === null || win === undefined) { createWindow(); }
else { win.show(); }
};
/**
src/events/colorpicker.js
+14 -29
View File
@@ -4,7 +4,8 @@ const { ipcMain, clipboard, Menu } = require("electron");
module.exports = (storage, browsers, eventEmitter) => {
const { colorpicker, settings, picker, colorsbook } = browsers;
let win, opacity, shading;
let win;
let shading;
eventEmitter.on("changeColor", (color) => {
console.log(color);
@@ -33,7 +34,7 @@ module.exports = (storage, browsers, eventEmitter) => {
let colorsbook = storage.get("colors", "colorsbook");
colorsbook[
Object.getOwnPropertyNames(colorsbook)[
Object.values(colorsbook).length - 1
Object.values(colorsbook).length - 1
]
].push(color);
storage.add({ colors: colorsbook }, "colorsbook");
@@ -51,7 +52,7 @@ module.exports = (storage, browsers, eventEmitter) => {
ipcMain.on("openMenu", (event, type) => {
let menu;
switch (type) {
case "colorpickerMenu":
case "colorpickerMenu": {
menu = Menu.buildFromTemplate([
{
label: "Pin to Foreground",
@@ -90,11 +91,6 @@ module.exports = (storage, browsers, eventEmitter) => {
accelerator: "CmdOrCtrl+T",
click: () => event.sender.send("shortShading"),
},
{
label: "Toggle Opacity",
accelerator: "CmdOrCtrl+O",
click: () => event.sender.send("shortOpacity"),
},
{ type: "separator" },
{
label: "Set Random Color",
@@ -115,47 +111,36 @@ module.exports = (storage, browsers, eventEmitter) => {
]);
menu.popup(this.window);
break;
case "colorMenu":
}
case "colorMenu": {
menu = Menu.buildFromTemplate([
{ label: "Delete", click: () => event.sender.send("deleteColor") },
]);
menu.popup(this.window);
break;
case "categoryMenu":
}
case "categoryMenu": {
menu = Menu.buildFromTemplate([
{ label: "Delete", click: () => event.sender.send("deleteCategory") },
]);
menu.popup(this.window);
break;
}
}
});
ipcMain.on("opacityActive", (event, bool) => {
opacity = bool;
let size = win.getSize();
if (!opacity && shading) return win.setMinimumSize(440, 220);
if (!opacity) return win.setMinimumSize(440, 150);
if (size[1] < 180 && !shading) win.setSize(size[0], 180, true);
if (size[1] < 255 && shading) win.setSize(size[0], 255, true);
if (!shading) win.setMinimumSize(440, 180);
else win.setMinimumSize(440, 255);
});
ipcMain.on("shadingActive", (event, bool) => {
shading = bool;
let size = win.getSize();
if (!shading && !opacity) return win.setMinimumSize(440, 150);
if (!shading && opacity) return win.setMinimumSize(440, 180);
if (size[1] < 220 && !opacity) win.setSize(size[0], 220, true);
if (size[1] < 255 && opacity) win.setSize(size[0], 255, true);
if (!opacity) win.setMinimumSize(440, 220);
else win.setMinimumSize(440, 255);
if (shading && size[1] < 220) { win.setSize(size[0], 220, true); }
if (shading) { return win.setMinimumSize(440, 220); }
if (!shading) { return win.setMinimumSize(440, 150); }
});
ipcMain.on("minimize-colorpicker", (event) => win.minimize());
ipcMain.on("maximize-colorpicker", (event) => {
if (win.isMaximized()) return win.unmaximize();
else return win.maximize();
if (win.isMaximized()) { return win.unmaximize(); }
else { return win.maximize(); }
});
ipcMain.on("close-colorpicker", (event) => win.close());
ipcMain.on("setOnTop", (event, bool) => win.setAlwaysOnTop(bool));
src/events/colorsbook.js
+2 -2
View File
@@ -1,6 +1,6 @@
"use strict";
const { ipcMain, BrowserWindow, app } = require("electron");
const { ipcMain } = require("electron");
module.exports = (storage, browsers) => {
const { colorpicker, settings, colorsbook } = browsers;
@@ -18,7 +18,7 @@ module.exports = (storage, browsers) => {
ipcMain.on("minimize-colorsbook", (event) => win.minimize());
ipcMain.on("maximize-colorsbook", (event, bool) => {
if (bool) return win.maximize();
if (bool) { return win.maximize(); }
return win.unmaximize();
});
ipcMain.on("close-colorsbook", (event) => win.close());
src/events/picker.js
+25 -19
View File
@@ -1,20 +1,21 @@
"use strict";
const { ipcMain } = require("electron");
const { ipcMain, screen } = require("electron");
const robot = require("robotjs");
let size, mouse, mouseEvent, color;
let mouseEvent;
let color;
module.exports = (storage, browsers) => {
const { picker, colorpicker } = browsers;
let closePicker = (newColor) => {
if (typeof newColor !== "string") newColor = color;
if (typeof newColor !== "string") { newColor = color; }
if (picker.getWindow()) {
colorpicker.getWindow().webContents.send("changeColor", newColor);
colorpicker.getWindow().focus();
ipcMain.removeListener("closePicker", closePicker);
ipcMain.removeListener("pickerRequested", (event) => {});
ipcMain.removeListener("pickerRequested", (event) => { });
picker.getWindow().close();
}
};
@@ -25,21 +26,22 @@ module.exports = (storage, browsers) => {
ioHook.start();
ioHook.on("mousemove", (event) => {
if (!picker.getWindow()) return;
if (!picker.getWindow()) { return; }
let realtime = storage.get("realtime", "picker");
let { x, y } = event;
let color = "#" + robot.getPixelColor(parseInt(x), parseInt(y));
let color = `#${robot.getPixelColor(parseInt(x), parseInt(y))}`;
picker.getWindow().setPosition(parseInt(x) - 50, parseInt(y) - 50);
picker.getWindow().webContents.send("updatePicker", color);
if (realtime)
if (realtime) {
colorpicker.getWindow().webContents.send("previewColor", color);
}
});
ioHook.on("mouseup", (event) => {
if (!picker.getWindow()) return;
if (event.button == 2) return closePicker();
if (!picker.getWindow()) { return; }
if (event.button === 2) { return closePicker(); }
let { x, y } = event;
closePicker("#" + robot.getPixelColor(parseInt(x), parseInt(y)));
closePicker(`#${robot.getPixelColor(parseInt(x), parseInt(y))}`);
});
let pos = robot.getMousePos();
@@ -54,28 +56,32 @@ module.exports = (storage, browsers) => {
ipcMain.on("pickerRequested", (event) => {
let realtime = storage.get("realtime", "picker");
if (process.platform !== "darwin" && process.platform !== "win32")
if (process.platform !== "darwin" && process.platform !== "win32") {
return linuxSupport();
if (process.platform === "darwin") mouseEvent = require("osx-mouse")();
if (process.platform === "win32") mouseEvent = require("win-mouse")();
}
if (process.platform === "darwin") { mouseEvent = require("osx-mouse")(); }
if (process.platform === "win32") { mouseEvent = require("win-mouse")(); }
color = storage.get("lastColor");
picker.getWindow().on("close", () => mouseEvent.destroy());
mouseEvent.on("move", (x, y) => {
let color = "#" + robot.getPixelColor(parseInt(x), parseInt(y));
picker.getWindow().setPosition(parseInt(x) - 50, parseInt(y) - 50);
let color = `#${robot.getPixelColor(parseInt(x), parseInt(y))}`;
const positionScreen = screen.getCursorScreenPoint()
picker.getWindow().setPosition(positionScreen.x - 50, positionScreen.y - 50);
picker.getWindow().webContents.send("updatePicker", color);
if (realtime)
if (realtime) {
colorpicker.getWindow().webContents.send("previewColor", color);
}
});
mouseEvent.on("left-up", (x, y) => {
closePicker("#" + robot.getPixelColor(parseInt(x), parseInt(y)));
closePicker(`#${robot.getPixelColor(parseInt(x), parseInt(y))}`);
});
let pos = robot.getMousePos();
picker.getWindow().setPosition(parseInt(pos.x) - 50, parseInt(pos.y) - 50);
const pos = screen.getCursorScreenPoint()
picker.getWindow().setPosition(pos.x - 50, pos.y - 50);
picker
.getWindow()
src/events/settings.js
+6 -4
View File
@@ -87,19 +87,21 @@ module.exports = (storage, browsers) => {
let message =
'<i class="fa fa-ban"></i> Can\'t connect to server, check manually <a href="https://github.com/Toinane/colorpicker/releases">here</a>';
request(options, (err, res, body) => {
if (err) return event.sender.send("update", message);
if (err) { return event.sender.send("update", message); }
let update = JSON.parse(body);
if (update === undefined || update === null)
if (update === undefined || update === null) {
return event.sender.send("update", message);
if (semver.lt(update.release, app.getVersion()))
}
if (semver.lt(update.release, app.getVersion())) {
return event.sender.send(
"update",
'<i class="fa fa-check"></i> You\'re up to date!'
);
}
else {
let notification = new Notification({
title: "New update available",
subtitle: update.release + " release is available!",
subtitle: `${update.release} release is available!`,
});
notification.show();
notification.on("click", () => {
src/main.js
+9 -11
View File
@@ -19,22 +19,25 @@ app.allowRendererProcessReuse = true;
require("./events")(storage, browsers, eventEmitter);
if (process.platform === "linux") {
app.commandLine.appendSwitch("enable-transparent-visuals");
app.disableHardwareAcceleration();
}
let tray;
let createTray = () => {
if (tray) return;
if (process.platform === "darwin")
if (tray) { return; }
if (process.platform === "darwin") {
tray = new Tray(`${__dirname}/ressources/tray-black@3x.png`);
if (process.platform === "win32")
}
if (process.platform === "win32") {
tray = new Tray(`${__dirname}/ressources/tray-black@3x.png`); // color here
if (process.platform === "linux")
}
if (process.platform === "linux") {
tray = new Tray(`${__dirname}/ressources/tray-white@3x.png`);
if (process.platform === "darwin")
}
if (process.platform === "darwin") {
tray.setPressedImage(`${__dirname}/ressources/tray-white@3x.png`);
}
tray.on("click", (event) => colorpicker.init());
};
@@ -155,11 +158,6 @@ let setMenu = () => {
accelerator: "CmdOrCtrl+T",
click: () => colorpicker.getWindow().webContents.send("shortShading"),
},
{
label: "Toggle Opacity",
accelerator: "CmdOrCtrl+O",
click: () => colorpicker.getWindow().webContents.send("shortOpacity"),
},
{
label: "Set Random Color",
accelerator: "CmdOrCtrl+M",
src/storage.js
+18 -13
View File
@@ -3,7 +3,9 @@
const electronStorage = require("electron-json-storage");
const { dialog } = require("electron");
let storage, template, defaultStorage;
let storage;
let template;
let defaultStorage;
/**
* [init - init storage]
@@ -12,8 +14,8 @@ let storage, template, defaultStorage;
let init = () =>
new Promise((resolve, reject) =>
electronStorage.has("colorpicker", (err, exist) => {
if (err) throw err;
if (exist) resolve(fetch());
if (err) { throw err; }
if (exist) { resolve(fetch()); }
else {
storage = defaultStorage;
resolve(save());
@@ -35,19 +37,22 @@ let fetch = () =>
}
storage = defaultStorage;
for (let key in defaultStorage.colorpicker) {
if (!data.colorpicker) return;
if (!data.colorpicker.hasOwnProperty(key))
if (!data.colorpicker) { return; }
if (!data.colorpicker.hasOwnProperty(key)) {
data.colorpicker[key] = defaultStorage.colorpicker[key];
}
}
for (let key in defaultStorage.picker) {
if (!data.picker) return;
if (!data.picker.hasOwnProperty(key))
if (!data.picker) { return; }
if (!data.picker.hasOwnProperty(key)) {
data.picker[key] = defaultStorage.picker[key];
}
}
for (let key in defaultStorage.colorsbook) {
if (!data.colorsbook) return;
if (!data.colorsbook.hasOwnProperty(key))
if (!data.colorsbook) { return; }
if (!data.colorsbook.hasOwnProperty(key)) {
data.colorsbook[key] = defaultStorage.colorsbook[key];
}
}
storage = data;
resolve(true);
@@ -61,7 +66,7 @@ let fetch = () =>
* @return {string|Object} [settings string or object]
*/
let get = (el, name) => {
if (!name) name = "colorpicker";
if (!name) { name = "colorpicker"; }
return storage[name][el] !== null || storage[name][el] !== undefined
? storage[name][el]
: {};
@@ -74,7 +79,7 @@ let get = (el, name) => {
*/
let add = (payload, name) =>
new Promise((resolve, reject) => {
if (!name) name = "colorpicker";
if (!name) { name = "colorpicker"; }
Object.assign(storage[name], payload);
resolve(save());
});
@@ -86,7 +91,7 @@ let add = (payload, name) =>
let save = () =>
new Promise((resolve, reject) => {
electronStorage.set("colorpicker", storage, (err, data) => {
if (err) throw err;
if (err) { throw err; }
resolve(true);
});
});
@@ -146,7 +151,7 @@ template = {
*/
defaultStorage = {
colorpicker: {
tools: ["top", "picker", "tags", "shade", "opacity", "settings"],
tools: ["top", "picker", "tags", "shade", "settings"],
size: { width: 440, height: 150 },
buttonsPosition: template[platform()].buttonsPosition,
buttonsType: template[platform()].buttonsType,
src/views/css/app-buttons.css
+4 -4
View File
@@ -253,7 +253,7 @@ a {
top: 50%;
left: 38%;
width: 10px;
border-bottom: 1px solid var(--window-icon-main-color);
border-bottom: 1.2px solid var(--window-icon-main-color);
}
.windows #maximize:not(.active)::before {
@@ -261,9 +261,9 @@ a {
position: absolute;
top: 37%;
left: 37%;
width: 10px;
height: 10px;
border: 1px solid var(--window-icon-main-color);
width: 9px;
height: 9px;
border: 1.2px solid var(--window-icon-main-color);
border-radius: 2px;
}
src/views/css/colorpicker.css
-6
View File
@@ -146,12 +146,6 @@ header .naturals aside {
transition: 0.5s;
bottom: -10px;
}
.opacity .sliders,
.opacity .alpha_bar,
.opacity .inputs,
.opacity #alpha_value {
bottom: 0.5px;
}
.red_bar,
.green_bar,
src/views/js/color.class.js
+73 -66
View File
@@ -62,15 +62,16 @@ class Color {
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];
if (hex[i] < 10 || hex[i].length === 1) { hex[i] = `0${hex[i]}`; }
}
return "#" + hex.join("").toUpperCase();
return `#${hex.join("").toUpperCase()}`;
}
getRGBFromHex(hex) {
hex = hex.replace(/^#/, "");
if (hex.length === 3)
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];
}
@@ -86,20 +87,22 @@ class Color {
let min = Math.min(r, g, b);
let max = Math.max(r, g, b);
let delta = max - min;
let h, s, l;
let h;
let s;
let l;
if (max === min) h = 0;
else if (r === max) h = (g - b) / delta;
else if (g === max) h = 2 + (b - r) / delta;
else if (b === max) h = 4 + (r - g) / delta;
if (max === min) { h = 0; }
else if (r === max) { h = (g - b) / delta; }
else if (g === max) { h = 2 + (b - r) / delta; }
else if (b === max) { h = 4 + (r - g) / delta; }
h = Math.min(h * 60, 360);
if (h < 0) h += 360;
if (h < 0) { h += 360; }
l = (min + max) / 2;
if (max === min) s = 0;
else if (l <= 0.5) s = delta / (max + min);
else s = delta / (2 - max - min);
if (max === min) { s = 0; }
else if (l <= 0.5) { s = delta / (max + min); }
else { s = delta / (2 - max - min); }
return [Math.round(h), Math.round(s * 100), Math.round(l * 100)];
}
@@ -108,26 +111,30 @@ class Color {
let h = hsl[0] / 360;
let s = hsl[1] / 100;
let l = hsl[2] / 100;
let t1, t2, t3, rgb, val;
let t1;
let t2;
let t3;
let rgb;
let val;
if (s === 0) {
val = l * 255;
return [val, val, val];
}
if (l < 0.5) t2 = l * (1 + s);
else t2 = l + s - l * s;
if (l < 0.5) { t2 = l * (1 + s); }
else { t2 = l + s - l * s; }
t1 = 2 * l - t2;
rgb = [0, 0, 0];
for (let i = 0; i < 3; i++) {
t3 = h + (1 / 3) * -(i - 1);
if (t3 < 0) t3++;
if (t3 > 1) t3--;
if (6 * t3 < 1) val = t1 + (t2 - t1) * 6 * t3;
else if (2 * t3 < 1) val = t2;
else if (3 * t3 < 2) val = t1 + (t2 - t1) * (2 / 3 - t3) * 6;
else val = t1;
if (t3 < 0) { t3++; }
if (t3 > 1) { t3--; }
if (6 * t3 < 1) { val = t1 + (t2 - t1) * 6 * t3; }
else if (2 * t3 < 1) { val = t2; }
else if (3 * t3 < 2) { val = t1 + (t2 - t1) * (2 / 3 - t3) * 6; }
else { val = t1; }
rgb[i] = Math.round(val * 255);
}
@@ -161,12 +168,12 @@ class Color {
p = Math.round(p);
q = Math.round(q);
if (hi === 0) return [v, t, p];
else if (hi === 1) return [q, v, p];
else if (hi === 2) return [p, v, t];
else if (hi === 3) return [p, q, v];
else if (hi === 4) return [t, p, v];
else if (hi === 5) return [v, p, q];
if (hi === 0) { return [v, t, p]; }
else if (hi === 1) { return [q, v, p]; }
else if (hi === 2) { return [p, v, t]; }
else if (hi === 3) { return [p, q, v]; }
else if (hi === 4) { return [t, p, v]; }
else if (hi === 5) { return [v, p, q]; }
}
getHSVFromRGB(rgb) {
@@ -180,12 +187,12 @@ class Color {
const s = max === 0 ? 0 : ((delta / max) * 1000) / 10;
const v = ((max / 255) * 1000) / 10;
if (max === min) h = 0;
else if (r === max) h = (g - b) / delta;
else if (g === max) h = 2 + (b - r) / delta;
else if (b === max) h = 4 + (r - g) / delta;
if (max === min) { h = 0; }
else if (r === max) { h = (g - b) / delta; }
else if (g === max) { h = 2 + (b - r) / delta; }
else if (b === max) { h = 4 + (r - g) / delta; }
h = Math.min(h * 60, 360);
if (h < 0) h += 360;
if (h < 0) { h += 360; }
return [Math.round(h), Math.round(s), Math.round(v)];
}
@@ -197,7 +204,7 @@ class Color {
(parseInt(rgb[0], 10) * 299 +
parseInt(rgb[1], 10) * 587 +
parseInt(rgb[2], 10) * 114) /
1000
1000
) <= 140
);
}
@@ -206,13 +213,13 @@ class Color {
(parseInt(this.red, 10) * 299 +
parseInt(this.green, 10) * 587 +
parseInt(this.blue, 10) * 114) /
1000
1000
) <= 140
);
}
setNegativeColor(rgb) {
if (!rgb) rgb = this.rgb;
if (!rgb) { rgb = this.rgb; }
const negative = this.getNegativeColor(rgb);
this.setColorFromRGB(negative);
return negative;
@@ -231,7 +238,7 @@ class Color {
}
getRedComplementary(rgb) {
if (!rgb) rgb = this.rgb;
if (!rgb) { rgb = this.rgb; }
return [rgb[0], rgb[2], rgb[1]];
}
@@ -240,7 +247,7 @@ class Color {
}
getGreenComplementary(rgb) {
if (!rgb) rgb = this.rgb;
if (!rgb) { rgb = this.rgb; }
return [rgb[2], rgb[1], rgb[0]];
}
@@ -249,7 +256,7 @@ class Color {
}
getBlueComplementary(rgb) {
if (!rgb) rgb = this.rgb;
if (!rgb) { rgb = this.rgb; }
return [rgb[1], rgb[0], rgb[2]];
}
@@ -261,8 +268,8 @@ class Color {
getGrayscale(rgb) {
var gray = parseInt(rgb[0] * 0.3 + rgb[1] * 0.59 + rgb[2] * 0.11, 10);
if (gray < 0) gray = 0;
if (gray > 255) gray = 255;
if (gray < 0) { gray = 0; }
if (gray > 255) { gray = 255; }
return [gray, gray, gray];
}
@@ -276,8 +283,8 @@ class Color {
hsl = [hsl[0], hsl[1], hsl[2] + light];
let rgb = this.getRGBFromHSL(hsl);
for (let i = 0; i < rgb.length; i++) {
if (rgb[i] < 0) rgb[i] = 0;
if (rgb[i] > 255) rgb[i] = 255;
if (rgb[i] < 0) { rgb[i] = 0; }
if (rgb[i] > 255) { rgb[i] = 255; }
}
return rgb;
}
@@ -312,8 +319,8 @@ class Color {
getChangeHueFromHSL(degrees, hsl) {
hsl[0] += degrees;
if (hsl[0] > 360) hsl[0] -= 360;
else if (hsl[0] < 0) hsl[0] += 360;
if (hsl[0] > 360) { hsl[0] -= 360; }
else if (hsl[0] < 0) { hsl[0] += 360; }
return this.getRGBFromHSL(hsl);
}
@@ -326,8 +333,8 @@ class Color {
getChangeHueFromRGB(degrees, rgb) {
const hsl = this.getHSLFromRGB(rgb);
hsl[0] += degrees;
if (hsl[0] > 360) hsl[0] -= 360;
else if (hsl[0] < 0) hsl[0] += 360;
if (hsl[0] > 360) { hsl[0] -= 360; }
else if (hsl[0] < 0) { hsl[0] += 360; }
return this.getRGBFromHSL(hsl);
}
@@ -340,8 +347,8 @@ class Color {
getChangeHueFromHex(degrees, hex) {
const hsl = this.getHSLFromHex(hex);
hsl[0] += degrees;
if (hsl[0] > 360) hsl[0] -= 360;
else if (hsl[0] < 0) hsl[0] += 360;
if (hsl[0] > 360) { hsl[0] -= 360; }
else if (hsl[0] < 0) { hsl[0] += 360; }
return this.getHexFromHSL(hsl);
}
@@ -352,29 +359,29 @@ class Color {
let v = hsv[2];
h += 0.8 * percent;
if (h > 360) h -= 360;
else if (h < 0) h += 360;
if (h > 360) { h -= 360; }
else if (h < 0) { h += 360; }
if (hsv[0] > 240 || hsv[0] < 60) {
if (percent > 0) s -= 0.7 * percent;
else s -= 0.7 * percent;
if (s > 100) s = 100;
else if (s < 0) s = 0;
if (percent > 0) { s -= 0.7 * percent; }
else { s -= 0.7 * percent; }
if (s > 100) { s = 100; }
else if (s < 0) { s = 0; }
if (percent < 0) v += 0.4 * percent;
else v += 0.3 * percent;
if (v > 100) v = 100;
else if (v < 0) v = 0;
if (percent < 0) { v += 0.4 * percent; }
else { v += 0.3 * percent; }
if (v > 100) { v = 100; }
else if (v < 0) { v = 0; }
} else {
if (percent > 0) s += 0.7 * percent;
else s += 0.7 * percent;
if (s > 100) s = 100;
else if (s < 0) s = 0;
if (percent > 0) { s += 0.7 * percent; }
else { s += 0.7 * percent; }
if (s > 100) { s = 100; }
else if (s < 0) { s = 0; }
if (percent < 0) v -= 0.4 * percent;
else v -= 0.3 * percent;
if (v > 100) v = 100;
else if (v < 0) v = 0;
if (percent < 0) { v -= 0.4 * percent; }
else { v -= 0.3 * percent; }
if (v > 100) { v = 100; }
else if (v < 0) { v = 0; }
}
return this.getRGBFromHSV([h, s, v]);
src/views/js/colorpicker.class.js
+14 -32
View File
@@ -39,7 +39,7 @@ class Colorpicker extends Color {
}
setNegativeColor(rgb) {
if (!rgb) rgb = this.rgb;
if (!rgb) { rgb = this.rgb; }
const negative = this.getNegativeColor(rgb);
this.setNewColor(this.getHexFromRGB(negative));
return negative;
@@ -54,22 +54,25 @@ class Colorpicker extends Color {
this.isDark = this.isDarkColor(this.rgb);
for (let i = 0, total = Object.keys(this.rgbhtml).length; i < total; i++) {
if (total - 2 <= i)
if (total - 2 <= i) {
this.rgbhtml[Object.keys(this.rgbhtml)[i]].value =
this.rgba[Math.floor(i / 3)] * 255;
}
else {
if (i === 9 && this.rgba[3].toString().length > 4)
if (i === 9 && this.rgba[3].toString().length > 4) {
this.rgbhtml[Object.keys(this.rgbhtml)[i]].value =
this.rgba[Math.floor(i / 3)].toFixed(2);
else
}
else {
this.rgbhtml[Object.keys(this.rgbhtml)[i]].value =
this.rgba[Math.floor(i / 3)];
}
}
}
this.hex_value.value = this.hex;
this.body.classList.toggle("darkMode", this.isDark);
this.body.style.background = this.getCSSFromRGBA(this.rgba);
if (this.isShadingActive) this.changeShading();
if (this.isShadingActive) { this.changeShading(); }
if (this.colorfullApp) {
if (this.isDark) {
@@ -99,8 +102,8 @@ class Colorpicker extends Color {
saveColor(hex) {
let newHistory = [];
for (let i = 0; i < 9; i++) {
if (i === 0) newHistory[i] = hex;
if (this.history.length > i) newHistory[i + 1] = this.history[i];
if (i === 0) { newHistory[i] = hex; }
if (this.history.length > i) { newHistory[i + 1] = this.history[i]; }
}
this.history = newHistory;
@@ -120,28 +123,6 @@ class Colorpicker extends Color {
window.api.send("clipboard", this.getCSSFromRGBA(this.rgba));
}
toggleOpacity() {
this.activeAlpha = document
.querySelector("#opacity_button")
.classList.toggle("active");
document
.querySelector(".main")
.classList.toggle("opacity", this.activeAlpha);
if (!this.activeAlpha) {
let restore = () => {
if (this.alpha >= 1) {
this.alpha = 1;
return;
}
this.alpha = Math.round((this.alpha + 0.01) * 100) / 100;
this.setNewColor(this.hex);
setTimeout(restore, 5);
};
restore();
}
return this.activeAlpha;
}
changeShading() {
let shading = document.querySelectorAll(
"header .shades aside, header .tints aside, header .naturals aside"
@@ -160,7 +141,7 @@ class Colorpicker extends Color {
let hex = this.getLightnessFromHex(light, this.hex);
html += `<aside id="shade${shades}" data-color="${hex}" style="background: ${hex}"></aside>`;
light += 2;
if (total === shades) document.querySelector(".shades").innerHTML = html;
if (total === shades) { document.querySelector(".shades").innerHTML = html; }
}
for (
@@ -171,7 +152,7 @@ class Colorpicker extends Color {
let hex = this.getChangeHueFromHex(degrees, this.hex);
html += `<aside id="tint${tints}" data-color="${hex}" style="background: ${hex}"></aside>`;
degrees += 10;
if (total === tints) document.querySelector(".tints").innerHTML = html;
if (total === tints) { document.querySelector(".tints").innerHTML = html; }
}
for (
@@ -182,8 +163,9 @@ class Colorpicker extends Color {
let hex = this.getHexFromRGB(this.getNaturalFromRGB(percent, this.rgb));
html += `<aside id="natural${naturals}" data-color="${hex}" style="background: ${hex}"></aside>`;
percent += 8;
if (total === naturals)
if (total === naturals) {
document.querySelector(".naturals").innerHTML = html;
}
}
shading = document.querySelectorAll(
src/views/js/colorpicker.events.js
+41 -36
View File
@@ -1,6 +1,7 @@
"use strict";
let cp, cm;
let cp;
let cm;
document.addEventListener(
"DOMContentLoaded",
@@ -15,8 +16,9 @@ window.api.on("init", (event, config) => {
colorfullApp: config.colorfullApp,
});
cm = new ContextMenu();
if (config.posButton === "right")
if (config.posButton === "right") {
document.querySelector(".toolbar").classList.add("setRight");
}
cm.initButtonsType(config.typeButton, "colorpicker");
initTools(config.tools);
initToolsEvent();
@@ -36,7 +38,6 @@ window.api.on("shortNegative", () => cp.setNegativeColor());
window.api.on("shortPin", () => togglePin());
window.api.on("shortShading", () => toggleShading());
window.api.on("shortRandom", () => toggleRandom());
window.api.on("shortOpacity", () => toggleOpacity());
window.api.on("shortApply", () => applyColor());
window.api.on("hasLooseFocus", (event, looseFocus) =>
@@ -44,9 +45,10 @@ window.api.on("hasLooseFocus", (event, looseFocus) =>
);
window.api.on("changePosition", (event, position) => {
if (position === "right")
if (position === "right") {
document.querySelector(".toolbar").classList.add("setRight");
else document.querySelector(".toolbar").classList.remove("setRight");
}
else { document.querySelector(".toolbar").classList.remove("setRight"); }
});
window.api.on("changeTypeIcons", (event, type) =>
@@ -65,16 +67,19 @@ function initTools(tools) {
tags: { title: "Open Colorsbook", icon: "fa-bookmark" },
shade: { title: "Toggle Shading", icon: "fa-tint" },
random: { title: "Set Random Color", icon: "fa-random" },
opacity: { title: "Toggle Opacity", icon: "fa-sliders-h" },
clean: { title: "Focus Mode", icon: "fa-adjust" },
apply: { title: "Get Clipboard's Colors", icon: "fa-clone" },
settings: { title: "Open Settings", icon: "fa-cog" },
};
for (let tool of tools) {
html += `<p id="${tool}_button" title="${allTools[tool].title}"><i class="fas ${allTools[tool].icon}"></i></p>`;
if (allTools[tool] !== undefined) {
html += `<p id="${tool}_button" title="${allTools[tool].title}"><i class="fas ${allTools[tool].icon}"></i></p>`;
}
}
document.querySelector("#tools").innerHTML = html;
}
@@ -97,7 +102,7 @@ function togglePin() {
function toggleShading() {
let bool = document.querySelector("#shade_button").classList.toggle("active");
if (bool) cp.changeShading();
if (bool) { cp.changeShading(); }
cp.isShadingActive = bool;
window.api.send("shadingActive", bool);
document.querySelector("header").classList.toggle("shading");
@@ -110,36 +115,36 @@ function toggleRandom() {
cp.setNewRGBColor([r, g, b]);
}
function toggleOpacity() {
let bool = cp.toggleOpacity();
window.api.send("opacityActive", bool);
}
function toggleClean() {
let bool = document.querySelector("#clean_button").classList.toggle("active");
document.querySelector("body").classList.toggle("clean");
}
function initToolsEvent() {
if (document.querySelector("#top_button"))
if (document.querySelector("#top_button")) {
document.querySelector("#top_button").onclick = () => togglePin();
if (document.querySelector("#picker_button"))
}
if (document.querySelector("#picker_button")) {
document.querySelector("#picker_button").onclick = () =>
window.api.send("launchPicker");
if (document.querySelector("#tags_button"))
}
if (document.querySelector("#tags_button")) {
document.querySelector("#tags_button").onclick = () =>
window.api.send("launchColorsbook");
if (document.querySelector("#shade_button"))
}
if (document.querySelector("#shade_button")) {
document.querySelector("#shade_button").onclick = () => toggleShading();
if (document.querySelector("#random_button"))
}
if (document.querySelector("#random_button")) {
document.querySelector("#random_button").onclick = () => toggleRandom();
if (document.querySelector("#opacity_button"))
document.querySelector("#opacity_button").onclick = () => toggleOpacity();
if (document.querySelector("#clean_button"))
}
if (document.querySelector("#clean_button")) {
document.querySelector("#clean_button").onclick = () => toggleClean();
if (document.querySelector("#settings_button"))
}
if (document.querySelector("#settings_button")) {
document.querySelector("#settings_button").onclick = () =>
window.api.send("showPreferences");
}
}
function initEvents() {
@@ -150,8 +155,8 @@ function initEvents() {
document
.querySelector(".toolbar")
.addEventListener("dblclick", function (event) {
if (event.target !== this) return;
window.api.send(`maximize-colorpicker`);
if (event.target !== this) { return; }
window.api.send("maximize-colorpicker");
});
document.querySelector(".red_bar input").oninput = function () {
@@ -175,38 +180,38 @@ function initEvents() {
document.querySelector("#red_value").oninput = function () {
let red = this.value;
if (red > 255) red = 255;
if (red < 0) red = 0;
if (red > 255) { red = 255; }
if (red < 0) { red = 0; }
cp.setNewRGBColor([red, cp.green, cp.blue]);
};
document.querySelector("#green_value").oninput = function () {
let green = this.value;
if (green > 255) green = 255;
if (green < 0) green = 0;
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;
if (blue > 255) { blue = 255; }
if (blue < 0) { blue = 0; }
cp.setNewRGBColor([cp.red, cp.green, blue]);
};
document.querySelector("#alpha_value").oninput = function () {
let alpha = this.value;
if (alpha === "0.") return;
if (alpha === "1.") return cp.setNewAlphaColor(1);
if (isNaN(alpha) || alpha.length > 4) return cp.setNewAlphaColor(0);
if (alpha > 1) alpha = 1;
if (alpha < 0) alpha = 0;
if (alpha === "0.") { return; }
if (alpha === "1.") { return cp.setNewAlphaColor(1); }
if (isNaN(alpha) || alpha.length > 4) { return cp.setNewAlphaColor(0); }
if (alpha > 1) { alpha = 1; }
if (alpha < 0) { alpha = 0; }
cp.setNewAlphaColor(alpha);
};
document.querySelector("#hex_value").oninput = function () {
let hex = this.value.replace("#", "");
if (hex.length !== 6) return;
if (hex.length !== 6) { return; }
cp.setNewColor(hex);
};
src/views/js/colorsbook.js
+15 -12
View File
@@ -2,10 +2,10 @@
let cm;
let colorsbook = {},
categoryActive,
categoryFocused,
colorFocused;
let colorsbook = {};
let categoryActive;
let categoryFocused;
let colorFocused;
document.addEventListener(
"DOMContentLoaded",
@@ -16,8 +16,9 @@ document.addEventListener(
window.api.on("init", (event, config) => {
cm = new ContextMenu();
colorsbook = config.colors;
if (config.posButton === "right")
if (config.posButton === "right") {
document.querySelector(".toolbar").classList.add("setRight");
}
cm.initButtonsType(config.typeButton, "colorsbook");
initColorsbook(colorsbook, 0);
initEvents();
@@ -30,9 +31,10 @@ window.api.on("changeTypeIcons", (event, type) =>
cm.initButtonsType(type, "colorsbook")
);
window.api.on("changePosition", (event, position) => {
if (position === "right")
if (position === "right") {
document.querySelector(".toolbar").classList.add("setRight");
else document.querySelector(".toolbar").classList.remove("setRight");
}
else { document.querySelector(".toolbar").classList.remove("setRight"); }
});
window.api.on("deleteColor", () => deleteColor());
@@ -45,8 +47,9 @@ function initColorsbook(colorsbook, activeAt) {
categoryActive = category;
initColors(colorsbook[category]);
categories += `<li title="${category}" class="active" style="background: ${colorsbook[category][0]}">${category}</li>`;
} else
} else {
categories += `<li title="${category}" style="background: ${colorsbook[category][0]}">${category}</li>`;
}
}
categories += '<li id="new-categorie"><i class="fa fa-plus"></i></li>';
document.querySelector("#categories").innerHTML = categories;
@@ -77,7 +80,7 @@ function initColors(colors) {
}
function addColor(color) {
if (!categoryActive) categoryActive = Object.values(colorsbook).length - 1;
if (!categoryActive) { categoryActive = Object.values(colorsbook).length - 1; }
colorsbook[categoryActive].push(color);
initColorsbook(colorsbook, categoryActive);
initEvents();
@@ -101,7 +104,7 @@ function addCategory(name) {
}
function deleteCategory() {
delete colorsbook[categoryFocused];
colorsbook[categoryFocused] = undefined;
categoryActive = false;
initColorsbook(colorsbook);
initEvents();
@@ -166,9 +169,9 @@ document
if (event.key === "Enter") {
const regex = /^([0-9a-fA-F]{3}|([0-9a-fA-F]{6}))$/g;
let color = this.value.replace("#", "");
if (!regex.test(color)) return;
if (!regex.test(color)) { return; }
this.value = "";
addColor("#" + color);
addColor(`#${color}`);
this.parentNode.classList.toggle("active");
}
});
src/views/js/picker.js
+2 -2
View File
@@ -1,6 +1,6 @@
document.querySelector(
"#picker"
).style.border = `10px solid rgba(200, 200, 200, 0.3)`;
).style.border = "10px solid rgba(200, 200, 200, 0.3)";
document.addEventListener(
"DOMContentLoaded",
@@ -10,7 +10,7 @@ document.addEventListener(
document.addEventListener(
"keydown",
(event) => {
if (event.key === "Escape") window.api.send("closePicker");
if (event.key === "Escape") { window.api.send("closePicker"); }
},
false
);
src/views/js/settings.js
+9 -6
View File
@@ -63,8 +63,9 @@ document.addEventListener(
for (let el of document.querySelectorAll("header li")) {
el.addEventListener("click", function (event) {
document.querySelector(`#${tabActive}-tab`).classList.remove("active");
if (document.querySelector("header li.active"))
if (document.querySelector("header li.active")) {
document.querySelector("header li.active").classList.remove("active");
}
this.classList.add("active");
tabActive = this.id;
document.querySelector(`#${tabActive}-tab`).classList.add("active");
@@ -81,10 +82,12 @@ window.api.on("init", (event, config) => {
document
.querySelector(`#type-icons li[data-type="${config.typeButton}"]`)
.classList.add("active");
if (config.colorfullApp)
if (config.colorfullApp) {
document.querySelector("#colorfull-app").classList.add("active");
if (config.realtime)
}
if (config.realtime) {
document.querySelector("#picker-realtime").classList.add("active");
}
});
function initTools(selectedTools) {
@@ -96,17 +99,17 @@ function initTools(selectedTools) {
tags: { title: "Open Colorsbook", icon: "fa-bookmark" },
shade: { title: "Toggle Shading", icon: "fa-tint" },
random: { title: "Set Random Color", icon: "fa-random" },
opacity: { title: "Toggle Opacity", icon: "fa-sliders-h" },
clean: { title: "Focus Mode", icon: "fa-adjust" },
settings: { title: "Open Settings", icon: "fa-cog" },
};
for (let tool of selectedTools) {
if (tool !== "apply")
if (tools[tool] !== undefined && tool !== "apply") {
htmlSelected += `<p id="${tool}_button" class="tools" title="${tools[tool].title}"><i class="fa ${tools[tool].icon}"></i></p>`;
}
}
for (let tool in tools) {
if (selectedTools.indexOf(tool) === -1) {
if (tools[tool] !== undefined && selectedTools.indexOf(tool) === -1) {
htmlAll += `<p id="${tool}_button" class="tools" title="${tools[tool].title}"><i class="fa ${tools[tool].icon}"></i></p>`;
}
}
src/views/js/util.class.js
+9 -8
View File
@@ -1,7 +1,7 @@
"use strict";
class ContextMenu {
constructor() {}
constructor() { }
openMenu(type) {
window.api.send("openMenu", type);
@@ -9,30 +9,31 @@ class ContextMenu {
initButtonsType(type, name) {
const appButtons = document.querySelector("#app_buttons");
const minimize = document.querySelector("#minimize");
const maximize = document.querySelector("#maximize");
const close = document.querySelector("#close");
switch (type) {
case "windows":
case "windows": {
appButtons.classList = "windows";
appButtons.innerHTML =
'<div id="minimize"></div><div id="maximize"></div><div id="close"></div>';
break;
case "linux":
}
case "linux": {
appButtons.classList = "windows";
appButtons.innerHTML =
'<div id="minimize"></div><div id="maximize"></div><div id="close"></div>';
break;
}
default:
appButtons.classList = "darwin";
appButtons.innerHTML =
'<div id="minimize"></div><div id="maximize"></div><div id="close"></div>';
}
document.querySelector("#close").onclick = () =>
document.querySelector("#close").onclick = () => {
window.api.send(`close-${name}`);
document.querySelector("#minimize").onclick = () =>
}
document.querySelector("#minimize").onclick = () => {
window.api.send(`minimize-${name}`);
}
document.querySelector("#maximize").onclick = function () {
window.api.send(`maximize-${name}`);
};