pixel-editor/js/_palettes.js

91 lines
3.4 KiB
JavaScript
Raw Normal View History

2019-03-27 02:20:54 +03:00
//populate palettes list in new pixel menu
2021-06-27 19:45:32 +03:00
(() => {
const palettesMenu = document.getElementById('palette-menu');
const splashPalettes = document.getElementById('palette-menu-splash');
const noPaletteButton = document.getElementById('no-palette-button');
const newPixelElement = document.getElementById('new-pixel');
const paletteButton = document.getElementById('palette-button');
const paletteButtonSplash = document.getElementById('palette-button-splash');
const loadPaletteButton = document.getElementById('load-palette-button');
const loadPaletteButtonSplash = document.getElementById('load-palette-button-splash');
Object.keys(palettes).forEach((paletteName,) => {
const button = document.createElement('button');
button.appendChild(document.createTextNode(paletteName));
//if the palette was specified by the user, change the dropdown to it
if (palettes[paletteName].specified) {
2021-06-29 02:54:54 +03:00
Util.setText('palette-button', paletteName);
Util.setText('palette-button-splash', paletteName)
2021-06-27 19:45:32 +03:00
//Show empty palette option
noPaletteButton.style.display = 'block';
}
const buttonEvent = () => {
//hide the dropdown menu
2021-06-29 02:54:54 +03:00
Util.deselect('palette-menu');
Util.deselect('palette-button');
Util.deselect('palette-menu-splash');
Util.deselect('palette-button-splash');
2021-06-27 19:45:32 +03:00
//show empty palette option
noPaletteButton.style.display = 'block';
//set the text of the dropdown to the newly selected preset
2021-06-29 02:54:54 +03:00
Util.setText('palette-button', paletteName);
Util.setText('palette-button-splash', paletteName);
2021-06-27 19:45:32 +03:00
}
// Making a copy for the splash page too
const copyButton = button.cloneNode(true);
copyButton.addEventListener('click', buttonEvent);
button.addEventListener('click', buttonEvent);
// Appending it to the splash palette menu
splashPalettes.appendChild(copyButton);
palettesMenu.appendChild(button);
});
const loadPaletteButtonEvent = () => {
document.getElementById('load-palette-browse-holder').click();
}
const clickPaletteButtonEvent = (e) => {
2021-06-29 02:54:54 +03:00
Util.toggle('palette-button');
Util.toggle('palette-menu');
2020-04-04 10:41:56 +03:00
2021-06-29 02:54:54 +03:00
Util.deselect('preset-button');
Util.deselect('preset-menu');
2019-03-27 02:20:54 +03:00
2021-06-27 19:45:32 +03:00
// Splash version
2021-06-29 02:54:54 +03:00
Util.toggle('palette-button-splash');
Util.toggle('palette-menu-splash');
2020-04-04 10:41:56 +03:00
2021-06-27 19:45:32 +03:00
e.stopPropagation();
2020-04-04 10:41:56 +03:00
}
2021-06-27 19:45:32 +03:00
// Load Palettes
loadPaletteButton.addEventListener('click', loadPaletteButtonEvent);
loadPaletteButtonSplash.addEventListener('click', loadPaletteButtonEvent);
// Palette menu click
paletteButtonSplash.addEventListener('click', clickPaletteButtonEvent);
paletteButton.addEventListener('click', clickPaletteButtonEvent);
noPaletteButton.addEventListener('click', () => {
noPaletteButton.style.display = 'none';
2021-06-29 02:54:54 +03:00
Util.setText('palette-button', 'Choose a palette...');
2021-06-27 19:45:32 +03:00
})
newPixelElement.addEventListener('click', () => {
2021-06-29 02:54:54 +03:00
Util.deselect('editor-mode-menu');
Util.deselect('preset-button');
Util.deselect('preset-menu');
Util.deselect('palette-button');
Util.deselect('palette-menu');
2021-06-27 19:45:32 +03:00
// Splash version
2021-06-29 02:54:54 +03:00
Util.deselect('palette-button-splash');
Util.deselect('palette-menu-splash');
2021-06-27 19:45:32 +03:00
})
})();