JS: Making a Color Picker from Scratch, part 2

The final product
class Picker {
constructor(target, width, height) {
this.target = target;
this.width = width;
this.height = height;
this.target.width = width;
this.target.height = height;
//Get context
this.context = this.target.getContext("2d");
//mouse
this.mouseState = "none";
//color selector circle
this.pickerCircle = { x: 10, y: 10, width: 6, height: 6 };
this.clicked = false;
//hue slider
this.hueRange = document.getElementById("hueslider");
//color
this.swatch = "swatch btn";
this.hue;
this.saturation;
this.lightness;
this.red;
this.green;
this.blue;
this.hexcode;
//*interface*//
this.rgbahsl = document.getElementById("rgbahsl");
this.rgba = document.getElementById("rgba");
this.r = document.getElementById("r");
this.g = document.getElementById("g");
this.b = document.getElementById("b");
this.hsl = document.getElementById("hsl");
this.h = document.getElementById("h");
this.s = document.getElementById("s");
this.l = document.getElementById("l");
this.hex = document.getElementById("hexcode");
//Colors
this.oldcolor = document.getElementById("oldcolor");
this.newcolor = document.getElementById("newcolor");
//OK/Cancel
this.confirmBtn = document.getElementById("confirm-btn");
this.cancelBtn = document.getElementById("cancel-btn");
}
}
drawHueGrad() {
//hue slider gradient
this.hueRange.style.background = "linear-gradient(90deg, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%)"
}
drawHSLGrad() {
//draw hsl gradient
for (let row = 0; row < this.height; row++) {
let grad = this.context.createLinearGradient(0, 0, this.width, 0);
grad.addColorStop(0, 'hsl(' + this.hue + ', 0%, ' + ((row / this.height) * 100) + '%)');
grad.addColorStop(1, 'hsl(' + this.hue + ', 100%, ' + ((row / this.height) * 100) + '%)');
this.context.fillStyle = grad;
this.context.fillRect(0, row, this.width, 1);
}
calcSelector() {
this.pickerCircle.x = Math.round(this.saturation * this.width / 100) - 3;
this.pickerCircle.y = Math.round(this.lightness * this.height / 100) - 3;
}
drawHSLGrad() {
...
this.calcSelector(); //draw selector
this.context.beginPath();
...
}
this.target.addEventListener("mousedown", (e) => {
this.handleMouseDown(e);
});
window.addEventListener("mousemove", (e) => {
this.handleMouseMove(e);
});
window.addEventListener("mouseup", (e) => {
this.handleMouseUp(e);
});
selectSL(x, y) {
this.saturation = Math.round(x / this.width * 100);
this.lightness = Math.round(y / this.height * 100);
this.drawHSLGrad();
//set newcolor
this.HSLToRGB();
this.RGBToHex();
this.updateColor();
}
handleMouseDown(e) {
this.clicked = true;
this.selectSL(e.offsetX, e.offsetY);
}
handleMouseMove(e) {
if (this.clicked) {
let canvasXOffset = this.target.getBoundingClientRect().left - document.getElementsByTagName("html")[0].getBoundingClientRect().left;
let canvasYOffset = this.target.getBoundingClientRect().top - document.getElementsByTagName("html")[0].getBoundingClientRect().top;
let canvasX = e.pageX - canvasXOffset;
let canvasY = e.pageY - canvasYOffset;
//constrain coordinates
if (canvasX > this.width) { canvasX = this.width }
if (canvasX < 0) { canvasX = 0 }
if (canvasY > this.height) { canvasY = this.height }
if (canvasY < 0) { canvasY = 0 }
this.selectSL(canvasX, canvasY);
}
}
handleMouseUp(e) {
this.clicked = false;
}

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

7 Most Common Node.js Interview Questions Every Aspirant Should Know

Accessing the Qlik Engine API From React Using Qlik Hooks

35 HTML Input Design For Website

//platform.twitter.com/widgets.js from Twitter https://twitter.com/UKCareGuide

Adding Routes to Hapi js server

Enzyme And React Testing library

News App using React Native and NYTimes Top Stories API

How to Installing Solidity on your Windows? (Clearly)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Tom Cantwell

Tom Cantwell

More from Medium

Context and ‘this’ Basics in JS

7 Advantages of Angular Over React for Ruby on Rails Developers

7 Advantages of Angular Over React for Ruby on Rails Developers

How to hide all event photos in RPG Maker in one (very simple) command

Immer In JavaScript : Alternative to Spread