Started working on the gradient generation

This commit is contained in:
mr. M 2024-10-24 23:53:05 +02:00
parent 8db952694e
commit 6f05fb2acb
No known key found for this signature in database
GPG key ID: CBD57A2AEDBDA1FB

View file

@ -2,7 +2,11 @@
{ {
class ZenThemePicker extends ZenDOMOperatedFeature { class ZenThemePicker extends ZenDOMOperatedFeature {
init() { init() {
ChromeUtils.defineLazyGetter(this, 'panel', () => document.getElementById('PanelUI-zen-gradient-generator'));
ChromeUtils.defineLazyGetter(this, 'toolbox', () => document.getElementById('navigator-toolbox'));
this.initContextMenu(); this.initContextMenu();
this.initThemePicker();
} }
initContextMenu() { initContextMenu() {
@ -13,7 +17,101 @@
`); `);
document.getElementById('toolbar-context-customize').before(menu); document.getElementById('toolbar-context-customize').before(menu);
} }
openThemePicker(event) {
PanelMultiView.openPopup(this.panel, this.toolbox, {
position: 'topright topleft',
triggerEvent: event,
});
}
initThemePicker() {
const themePicker = this.panel.querySelector('.zen-theme-picker-gradient');
themePicker.addEventListener('mousemove', this.onDotMouseMove.bind(this));
themePicker.addEventListener('mouseup', this.onDotMouseUp.bind(this));
}
calculateInitialPosition(color) {
const [r, g, b] = color;
// get the x and y position of the color
const x = r / 255;
const y = g / 255;
return { x, y };
}
getColorFromPosition(x, y) {
// get the color from the x and y position
const r = x * 255;
const g = y * 255;
const b = 0;
return [r, g, b];
}
createDot(color) {
const [r, g, b] = color;
const dot = document.createElement('div');
dot.classList.add('zen-theme-picker-dot');
dot.style.setProperty('--zen-theme-picker-dot-color', `rgb(${r}, ${g}, ${b})`);
const { x, y } = this.calculateInitialPosition(color);
dot.style.left = `${x * 100}%`;
dot.style.top = `${y * 100}%`;
dot.addEventListener('mousedown', this.onDotMouseDown.bind(this));
this.panel.querySelector('.zen-theme-picker-gradient').appendChild(dot);
}
onDotMouseDown(event) {
event.preventDefault();
if (event.button === 2) {
this.draggedDot.remove();
return;
}
this.dragging = true;
this.draggedDot = event.target;
this.draggedDot.style.zIndex = 1;
this.draggedDot.classList.add('dragging');
}
onDotMouseMove(event) {
if (this.dragging) {
event.preventDefault();
const rect = this.panel.getBoundingClientRect();
let x = (event.clientX - rect.left) / rect.width;
let y = (event.clientY - rect.top) / rect.height;
// percentage to pixel
const dotSize = 16;
const maxX = rect.width - dotSize;
const maxY = rect.height - dotSize;
if (x < 0) {
x = 0;
} else if (x > 1) {
x = 1;
}
if (y < 0) {
y = 0;
} else if (y > 1) {
y = 1;
}
const pixelX = x * rect.width - dotSize*2;
const pixelY = y * rect.height - dotSize*2;
this.draggedDot.style.left = `${Math.min(maxX, Math.max(0, pixelX))}px`;
this.draggedDot.style.top = `${Math.min(maxY, Math.max(0, pixelY))}px`;
const color = this.getColorFromPosition(x, y);
this.draggedDot.style.setProperty('--zen-theme-picker-dot-color', `rgb(${color[0]}, ${color[1]}, ${color[2]})`);
}
}
onDotMouseUp(event) {
if (this.dragging) {
event.preventDefault();
this.dragging = false;
this.draggedDot.style.zIndex = 0;
this.draggedDot.classList.remove('dragging');
this.draggedDot = null;
return;
}
this.createDot([Math.random() * 255, Math.random() * 255, Math.random() * 255]);
}
} }
window.ZenThemePicker = new ZenThemePicker(); window.gZenThemePicker = new ZenThemePicker();
} }