96 lines
2.5 KiB
JavaScript
96 lines
2.5 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;
|
|
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'));
|
|
}
|
|
}
|
|
}
|
|
|
|
function removeColor(index) {
|
|
colorsChanged = true;
|
|
colors.splice(index, 1);
|
|
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();
|
|
}
|
|
|
|
/**
|
|
* @returns {string}
|
|
*/
|
|
function generateCssLinear() {
|
|
|
|
}
|
|
/**
|
|
* @returns {string}
|
|
*/
|
|
function generateCssRadial() {
|
|
|
|
}
|
|
/**
|
|
* @returns {string}
|
|
*/
|
|
function generateCssConic() {
|
|
|
|
}
|
|
|
|
// Initial update
|
|
setTimeout(() => {
|
|
updateUi();
|
|
}, 0);
|