91 lines
3.4 KiB
JavaScript
91 lines
3.4 KiB
JavaScript
//populate palettes list in new pixel menu
|
|
(() => {
|
|
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) {
|
|
Util.setText('palette-button', paletteName);
|
|
Util.setText('palette-button-splash', paletteName)
|
|
//Show empty palette option
|
|
noPaletteButton.style.display = 'block';
|
|
}
|
|
|
|
const buttonEvent = () => {
|
|
//hide the dropdown menu
|
|
Util.deselect('palette-menu');
|
|
Util.deselect('palette-button');
|
|
Util.deselect('palette-menu-splash');
|
|
Util.deselect('palette-button-splash');
|
|
|
|
//show empty palette option
|
|
noPaletteButton.style.display = 'block';
|
|
|
|
//set the text of the dropdown to the newly selected preset
|
|
Util.setText('palette-button', paletteName);
|
|
Util.setText('palette-button-splash', paletteName);
|
|
}
|
|
|
|
// 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) => {
|
|
Util.toggle('palette-button');
|
|
Util.toggle('palette-menu');
|
|
|
|
Util.deselect('preset-button');
|
|
Util.deselect('preset-menu');
|
|
|
|
// Splash version
|
|
Util.toggle('palette-button-splash');
|
|
Util.toggle('palette-menu-splash');
|
|
|
|
e.stopPropagation();
|
|
}
|
|
// 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';
|
|
Util.setText('palette-button', 'Choose a palette...');
|
|
})
|
|
|
|
newPixelElement.addEventListener('click', () => {
|
|
Util.deselect('editor-mode-menu');
|
|
Util.deselect('preset-button');
|
|
Util.deselect('preset-menu');
|
|
Util.deselect('palette-button');
|
|
Util.deselect('palette-menu');
|
|
|
|
// Splash version
|
|
Util.deselect('palette-button-splash');
|
|
Util.deselect('palette-menu-splash');
|
|
})
|
|
})();
|