127 lines
3.9 KiB
JavaScript
127 lines
3.9 KiB
JavaScript
const colors = ['#ff0000', '#00ff00', '#0000ff'];
|
|
let colorsChanged = true;
|
|
|
|
function updateUi() {
|
|
const radios = document.getElementsByName('gradient_type');
|
|
document.getElementById('config_linear').style.display = radios[0].checked ? 'unset' : 'none';
|
|
document.getElementById('config_radial').style.display = radios[1].checked ? 'unset' : 'none';
|
|
document.getElementById('config_conic').style.display = radios[2].checked ? 'unset' : 'none';
|
|
|
|
if (colorsChanged) {
|
|
colorsChanged = false;
|
|
const list = document.getElementById('color-list');
|
|
while (list.lastChild) list.lastChild.remove();
|
|
for (let i in colors) {
|
|
i = Number(i);
|
|
const color = colors[i];
|
|
|
|
let colorInput = document.createElement('input');
|
|
colorInput.type = 'color';
|
|
colorInput.value = color;
|
|
colorInput.onchange = (e) => changeColor(i, e.currentTarget.value);
|
|
list.appendChild(colorInput);
|
|
|
|
let button1 = document.createElement('button');
|
|
button1.innerText = '^';
|
|
button1.disabled = i == 0;
|
|
button1.onclick = () => moveUp(i);
|
|
list.appendChild(button1);
|
|
|
|
let button2 = document.createElement('button');
|
|
button2.innerText = 'v';
|
|
button2.disabled = i == colors.length - 1;
|
|
button2.onclick = () => moveDown(i);
|
|
list.appendChild(button2);
|
|
|
|
let button3 = document.createElement('button');
|
|
button3.innerText = 'Delete';
|
|
button3.onclick = () => removeColor(i);
|
|
list.appendChild(button3);
|
|
|
|
list.appendChild(document.createElement('br'));
|
|
}
|
|
}
|
|
|
|
document.getElementById('custom_pos_inputs').hidden = !document.getElementById('conic_custom_position').checked;
|
|
|
|
const css = generateCss();
|
|
if (css) {
|
|
document.getElementById('preview').style.backgroundImage = css;
|
|
document.getElementById('output').value = css;
|
|
}
|
|
}
|
|
|
|
function removeColor(index) {
|
|
colorsChanged = true;
|
|
colors.splice(index, 1);
|
|
updateUi();
|
|
}
|
|
|
|
function appendColor() {
|
|
colorsChanged = true;
|
|
colors.push('#ffbbaa');
|
|
updateUi();
|
|
}
|
|
|
|
function changeColor(index, color) {
|
|
colorsChanged = true;
|
|
colors[index] = color;
|
|
updateUi();
|
|
}
|
|
|
|
function moveUp(index) {
|
|
colorsChanged = true;
|
|
[colors[index], colors[index - 1]] = [colors[index - 1], colors[index]];
|
|
updateUi();
|
|
}
|
|
|
|
function moveDown(index) {
|
|
colorsChanged = true;
|
|
[colors[index], colors[index + 1]] = [colors[index + 1], colors[index]];
|
|
updateUi();
|
|
}
|
|
|
|
/**
|
|
* @returns {string}
|
|
*/
|
|
function generateCss() {
|
|
const radios = document.getElementsByName('gradient_type');
|
|
if (radios[0].checked) return generateCssLinear();
|
|
if (radios[1].checked) return generateCssRadial();
|
|
if (radios[2].checked) return generateCssConic();
|
|
return '';
|
|
}
|
|
|
|
/**
|
|
* @returns {string}
|
|
*/
|
|
function generateCssLinear() {
|
|
const rotation = document.getElementById('rotation').value;
|
|
return `linear-gradient(${rotation}deg,${colors.join(',')})`;
|
|
}
|
|
/**
|
|
* @returns {string}
|
|
*/
|
|
function generateCssRadial() {
|
|
let radios = document.getElementsByName('radial_mode');
|
|
const mode = Array.from(radios).find(r => r.checked).value ?? 'circle';
|
|
radios = document.getElementsByName('radial_pos');
|
|
const pos = Array.from(radios).find(r => r.checked).value ?? 'center';
|
|
return `radial-gradient(${mode} at ${pos}, ${colors.join(',')})`;
|
|
}
|
|
/**
|
|
* @returns {string}
|
|
*/
|
|
function generateCssConic() {
|
|
const rotation = document.getElementById('rotation_conic').value;
|
|
const showCustomPos = document.getElementById('conic_custom_position').checked;
|
|
const x = document.getElementById('conic_x').value;
|
|
const y = document.getElementById('conic_y').value;
|
|
return `conic-gradient(from ${rotation}deg${showCustomPos ? ` at ${x}% ${y}%` : ''}, ${colors.join(',')})`;
|
|
}
|
|
|
|
// Initial update
|
|
setTimeout(() => {
|
|
updateUi();
|
|
}, 0);
|