ZenBrowserMirrors/components
1
0
Fork 0
mirror of https://github.com/zen-browser/components.git synced 2025-07-07 23:49:58 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Choosing colors from the gradient generator now works

Browse source
This commit is contained in:
mr. M 2024-10-25 12:54:43 +02:00
parent 4c79e99adf
commit 23e6294c9a
No known key found for this signature in database
GPG key ID: CBD57A2AEDBDA1FB
1 changed files with 47 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

61
src/ZenGradientGenerator.mjs
View file

@ -1,12 +1,14 @@
{ {
class ZenThemePicker extends ZenDOMOperatedFeature { class ZenThemePicker extends ZenDOMOperatedFeature {
static GRADIENT_IMAGE_URL = 'chrome://browser/content/zen-images/gradient.png';
static MAX_DOTS = 5;
init() { init() {
ChromeUtils.defineLazyGetter(this, 'panel', () => document.getElementById('PanelUI-zen-gradient-generator')); ChromeUtils.defineLazyGetter(this, 'panel', () => document.getElementById('PanelUI-zen-gradient-generator'));
ChromeUtils.defineLazyGetter(this, 'toolbox', () => document.getElementById('navigator-toolbox')); ChromeUtils.defineLazyGetter(this, 'toolbox', () => document.getElementById('navigator-toolbox'));
this.initContextMenu(); this.initCanvas();
this.initThemePicker();
} }
initContextMenu() { initContextMenu() {
@ -25,8 +27,38 @@
}); });
} }
initCanvas() {
this.image = new Image();
this.image.src = ZenThemePicker.GRADIENT_IMAGE_URL;
// wait for the image to load
this.image.onload = this.onImageLoad.bind(this);
}
onImageLoad() {
// resize the image to fit the panel
const imageSize = 300 - 20; // 20 is the padding (10px)
const scale = imageSize / Math.max(this.image.width, this.image.height);
this.image.width *= scale;
this.image.height *= scale;
this.canvas = document.createElement('canvas');
this.canvas.width = this.image.width;
this.canvas.height = this.image.height;
this.panel.appendChild(this.canvas);
this.canvasCtx = this.canvas.getContext('2d');
this.canvasCtx.drawImage(this.image, 0, 0);
this.canvas.setAttribute('hidden', 'true');
// Call the rest of the initialization
this.initContextMenu();
this.initThemePicker();
}
initThemePicker() { initThemePicker() {
const themePicker = this.panel.querySelector('.zen-theme-picker-gradient'); const themePicker = this.panel.querySelector('.zen-theme-picker-gradient');
themePicker.style.setProperty('--zen-theme-picker-gradient-image', `url(${ZenThemePicker.GRADIENT_IMAGE_URL})`);
themePicker.addEventListener('mousemove', this.onDotMouseMove.bind(this)); themePicker.addEventListener('mousemove', this.onDotMouseMove.bind(this));
themePicker.addEventListener('mouseup', this.onDotMouseUp.bind(this)); themePicker.addEventListener('mouseup', this.onDotMouseUp.bind(this));
} }
@ -40,11 +72,9 @@
} }
getColorFromPosition(x, y) { getColorFromPosition(x, y) {
// get the color from the x and y position // get the color from the x and y from the image
const r = x * 255; const imageData = this.canvasCtx.getImageData(x, y, 1, 1);
const g = y * 255; return imageData.data;
const b = 0;
return [r, g, b];
} }
createDot(color) { createDot(color) {
@ -74,7 +104,7 @@
onDotMouseMove(event) { onDotMouseMove(event) {
if (this.dragging) { if (this.dragging) {
event.preventDefault(); event.preventDefault();
const rect = this.panel.getBoundingClientRect(); const rect = this.panel.querySelector('.zen-theme-picker-gradient').getBoundingClientRect();
let x = (event.clientX - rect.left) / rect.width; let x = (event.clientX - rect.left) / rect.width;
let y = (event.clientY - rect.top) / rect.height; let y = (event.clientY - rect.top) / rect.height;
// percentage to pixel // percentage to pixel
@ -82,20 +112,20 @@
const maxX = rect.width - dotSize; const maxX = rect.width - dotSize;
const maxY = rect.height - dotSize; const maxY = rect.height - dotSize;
if (x < 0) { if (x < 0) {
x = 0; x = 0.01;
} else if (x > 1) { } else if (x > 1) {
x = 1; x = 0.99;
} }
if (y < 0) { if (y < 0) {
y = 0; y = 0.01;
} else if (y > 1) { } else if (y > 1) {
y = 1; y = 0.99;
} }
const pixelX = x * rect.width - dotSize*2; const pixelX = x * rect.width - dotSize*2;
const pixelY = y * rect.height - dotSize*2; const pixelY = y * rect.height - dotSize*2;
this.draggedDot.style.left = `${Math.min(maxX, Math.max(0, pixelX))}px`; this.draggedDot.style.left = `${Math.min(maxX, Math.max(0, pixelX))}px`;
this.draggedDot.style.top = `${Math.min(maxY, Math.max(0, pixelY))}px`; this.draggedDot.style.top = `${Math.min(maxY, Math.max(0, pixelY))}px`;
const color = this.getColorFromPosition(x, y); const color = this.getColorFromPosition(pixelX, pixelY);
this.draggedDot.style.setProperty('--zen-theme-picker-dot-color', `rgb(${color[0]}, ${color[1]}, ${color[2]})`); this.draggedDot.style.setProperty('--zen-theme-picker-dot-color', `rgb(${color[0]}, ${color[1]}, ${color[2]})`);
} }
} }
@ -109,7 +139,10 @@
this.draggedDot = null; this.draggedDot = null;
return; return;
} }
this.createDot([Math.random() * 255, Math.random() * 255, Math.random() * 255]); this.numberOfDots = this.panel.querySelectorAll('.zen-theme-picker-dot').length;
if (this.numberOfDots < ZenThemePicker.MAX_DOTS) {
this.createDot([Math.random() * 255, Math.random() * 255, Math.random() * 255]);
}
} }
} }