mirror of
https://github.com/lospec/pixel-editor.git
synced 2023-08-10 21:12:51 +03:00
Global scope cleaning
This commit is contained in:
Leamsi Escribano
parent
096d62cab9
commit
03036ca57b
@ -8,3 +8,41 @@ function setText(elementId, text) {
|
||||
var element = (typeof elementId == 'string' ? document.getElementById(elementId) : elementId);
|
||||
element.textContent = text;
|
||||
}
|
||||
|
||||
// Leaving this here for now, not removing old functions to avoid breaks until full transition
|
||||
const Utility = () => {
|
||||
return {
|
||||
getText: (elementId) => {
|
||||
const element = (typeof elementId == 'string' ? document.getElementById(elementId) : elementId);
|
||||
return element.textContent;
|
||||
},
|
||||
setText: (elementId, text) => {
|
||||
const element = (typeof elementId == 'string' ? document.getElementById(elementId) : elementId);
|
||||
element.textContent = text;
|
||||
},
|
||||
getValue: (elementId) => {
|
||||
const element = (typeof elementId == 'string' ? document.getElementById(elementId) : elementId);
|
||||
console.log("setting: " + elementId + ": " + element.value);
|
||||
return element.value;
|
||||
},
|
||||
setValue: (elementId, value) => {
|
||||
const element = (typeof elementId == 'string' ? document.getElementById(elementId) : elementId);
|
||||
element.value = value;
|
||||
},
|
||||
//add class .selected to specified element
|
||||
select: (elementId) => {
|
||||
const element = (typeof elementId == 'string' ? document.getElementById(elementId) : elementId);
|
||||
element.classList.add('selected');
|
||||
},
|
||||
//remove .selected class from specified element
|
||||
deselect: (elementId) => {
|
||||
const element = (typeof elementId == 'string' ? document.getElementById(elementId) : elementId);
|
||||
element.classList.remove('selected');
|
||||
},
|
||||
//toggle the status of the .selected class on the specified element
|
||||
toggle: (elementId) => {
|
||||
const element = (typeof elementId == 'string' ? document.getElementById(elementId) : elementId);
|
||||
element.classList.toggle('selected');
|
||||
}
|
||||
}
|
||||
}
|
||||
160
js/_palettes.js
160
js/_palettes.js
@ -1,93 +1,91 @@
|
||||
//populate palettes list in new pixel menu
|
||||
Object.keys(palettes).forEach(function(paletteName,index) {
|
||||
(() => {
|
||||
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');
|
||||
|
||||
var palettesMenu = document.getElementById('palette-menu');
|
||||
var splashPalettes = document.getElementById('palette-menu-splash');
|
||||
Object.keys(palettes).forEach((paletteName,) => {
|
||||
|
||||
//create button
|
||||
var button = document.createElement('button');
|
||||
button.appendChild(document.createTextNode(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 == true) {
|
||||
setText('palette-button', paletteName);
|
||||
setText('palette-button-splash', paletteName)
|
||||
//Show empty palette option
|
||||
document.getElementById('no-palette-button').style.display = 'block';
|
||||
//if the palette was specified by the user, change the dropdown to it
|
||||
if (palettes[paletteName].specified) {
|
||||
Utility().setText('palette-button', paletteName);
|
||||
Utility().setText('palette-button-splash', paletteName)
|
||||
//Show empty palette option
|
||||
noPaletteButton.style.display = 'block';
|
||||
}
|
||||
|
||||
const buttonEvent = () => {
|
||||
//hide the dropdown menu
|
||||
Utility().deselect('palette-menu');
|
||||
Utility().deselect('palette-button');
|
||||
Utility().deselect('palette-menu-splash');
|
||||
Utility().deselect('palette-button-splash');
|
||||
|
||||
//show empty palette option
|
||||
noPaletteButton.style.display = 'block';
|
||||
|
||||
//set the text of the dropdown to the newly selected preset
|
||||
Utility().setText('palette-button', paletteName);
|
||||
Utility().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) => {
|
||||
Utility().toggle('palette-button');
|
||||
Utility().toggle('palette-menu');
|
||||
|
||||
var buttonEvent = function() {
|
||||
Utility().deselect('preset-button');
|
||||
Utility().deselect('preset-menu');
|
||||
|
||||
//hide the dropdown menu
|
||||
deselect('palette-menu');
|
||||
deselect('palette-button');
|
||||
deselect('palette-menu-splash');
|
||||
deselect('palette-button-splash');
|
||||
// Splash version
|
||||
Utility().toggle('palette-button-splash');
|
||||
Utility().toggle('palette-menu-splash');
|
||||
|
||||
//show empty palette option
|
||||
document.getElementById('no-palette-button').style.display = 'block';
|
||||
e.stopPropagation();
|
||||
}
|
||||
// Load Palettes
|
||||
loadPaletteButton.addEventListener('click', loadPaletteButtonEvent);
|
||||
loadPaletteButtonSplash.addEventListener('click', loadPaletteButtonEvent);
|
||||
|
||||
//set the text of the dropdown to the newly selected preset
|
||||
setText('palette-button', paletteName);
|
||||
setText('palette-button-splash', paletteName);
|
||||
};
|
||||
// Palette menu click
|
||||
paletteButtonSplash.addEventListener('click', clickPaletteButtonEvent);
|
||||
paletteButton.addEventListener('click', clickPaletteButtonEvent);
|
||||
|
||||
on('click', button, buttonEvent);
|
||||
noPaletteButton.addEventListener('click', () => {
|
||||
noPaletteButton.style.display = 'none';
|
||||
Utility().setText('palette-button', 'Choose a palette...');
|
||||
})
|
||||
|
||||
//insert new element
|
||||
palettesMenu.appendChild(button);
|
||||
newPixelElement.addEventListener('click', () => {
|
||||
Utility().deselect('editor-mode-menu');
|
||||
Utility().deselect('preset-button');
|
||||
Utility().deselect('preset-menu');
|
||||
Utility().deselect('palette-button');
|
||||
Utility().deselect('palette-menu');
|
||||
|
||||
// Making a copy for the splash page too
|
||||
var copyButton = button.cloneNode(true);
|
||||
// Attaching the same event
|
||||
on('click', copyButton, buttonEvent);
|
||||
// Appending it to the splash palette menu
|
||||
splashPalettes.appendChild(copyButton);
|
||||
});
|
||||
|
||||
var noPaletteButtonClickEvent = function () {
|
||||
document.getElementById('no-palette-button').style.display = 'none';
|
||||
setText('palette-button', 'Choose a palette...');
|
||||
}
|
||||
|
||||
var loadPaletteButtonEvent = function () {
|
||||
document.getElementById('load-palette-browse-holder').click();
|
||||
}
|
||||
|
||||
var clickPaletteButtonEvent = function (e){
|
||||
toggle('palette-button');
|
||||
toggle('palette-menu');
|
||||
|
||||
deselect('preset-button');
|
||||
deselect('preset-menu');
|
||||
|
||||
// Splash version
|
||||
toggle('palette-button-splash');
|
||||
toggle('palette-menu-splash');
|
||||
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
//select no palette
|
||||
on('click', 'no-palette-button', noPaletteButtonClickEvent);
|
||||
|
||||
//select load palette
|
||||
on('click', 'load-palette-button', loadPaletteButtonEvent);
|
||||
//select load palette
|
||||
on('click', 'load-palette-button-splash', loadPaletteButtonEvent);
|
||||
|
||||
// Palette menu click
|
||||
on('click', 'palette-button', clickPaletteButtonEvent);
|
||||
on('click', 'palette-button-splash', clickPaletteButtonEvent);
|
||||
|
||||
on('click', 'new-pixel', function (){
|
||||
deselect('editor-mode-menu');
|
||||
deselect('preset-button');
|
||||
deselect('preset-menu');
|
||||
deselect('palette-button');
|
||||
deselect('palette-menu');
|
||||
|
||||
// Splash version
|
||||
deselect('palette-button-splash');
|
||||
deselect('palette-menu-splash');
|
||||
});
|
||||
// Splash version
|
||||
Utility().deselect('palette-button-splash');
|
||||
Utility().deselect('palette-menu-splash');
|
||||
})
|
||||
})();
|
||||
101
js/_presets.js
101
js/_presets.js
@ -1,63 +1,56 @@
|
||||
//presets
|
||||
var presets = {
|
||||
'Gameboy Color': {
|
||||
width: 240,
|
||||
height: 203,
|
||||
palette: 'Gameboy Color'
|
||||
},
|
||||
'PICO-8': {
|
||||
width: 128,
|
||||
height: 128,
|
||||
palette: 'PICO-8'
|
||||
},
|
||||
'Commodore 64': {
|
||||
width: 40,
|
||||
height: 80,
|
||||
palette: 'Commodore 64'
|
||||
}
|
||||
};
|
||||
(() => {
|
||||
const presets = {
|
||||
'Gameboy Color': {
|
||||
width: 240,
|
||||
height: 203,
|
||||
palette: 'Gameboy Color'
|
||||
},
|
||||
'PICO-8': {
|
||||
width: 128,
|
||||
height: 128,
|
||||
palette: 'PICO-8'
|
||||
},
|
||||
'Commodore 64': {
|
||||
width: 40,
|
||||
height: 80,
|
||||
palette: 'Commodore 64'
|
||||
}
|
||||
};
|
||||
const presetsMenu = document.getElementById('preset-menu');
|
||||
Object.keys(presets).forEach((presetName,) => {
|
||||
|
||||
const button = document.createElement('button');
|
||||
button.appendChild(document.createTextNode(presetName));
|
||||
|
||||
//populate preset list in new pixel menu
|
||||
Object.keys(presets).forEach(function(presetName,index) {
|
||||
presetsMenu.appendChild(button);
|
||||
|
||||
var presetsMenu = document.getElementById('preset-menu');
|
||||
button.addEventListener('click', () => {
|
||||
//change dimentions on new pixel form
|
||||
Utility().setValue('size-width', presets[presetName].width);
|
||||
Utility().setValue('size-height', presets[presetName].height);
|
||||
|
||||
//create button
|
||||
var button = document.createElement('button');
|
||||
button.appendChild(document.createTextNode(presetName));
|
||||
//set the text of the dropdown to the newly selected preset
|
||||
Utility().setText('palette-button', presets[presetName].palette);
|
||||
|
||||
//insert new element
|
||||
presetsMenu.appendChild(button);
|
||||
//hide the dropdown menu
|
||||
Utility().deselect('preset-menu');
|
||||
Utility().deselect('preset-button');
|
||||
|
||||
//add click event listener
|
||||
on('click', button, function() {
|
||||
//set the text of the dropdown to the newly selected preset
|
||||
Utility().setText('preset-button', presetName);
|
||||
|
||||
//change dimentions on new pixel form
|
||||
setValue('size-width', presets[presetName].width);
|
||||
setValue('size-height', presets[presetName].height);
|
||||
|
||||
//set the text of the dropdown to the newly selected preset
|
||||
setText('palette-button', presets[presetName].palette);
|
||||
|
||||
//hide the dropdown menu
|
||||
deselect('preset-menu');
|
||||
deselect('preset-button');
|
||||
|
||||
//set the text of the dropdown to the newly selected preset
|
||||
setText('preset-button', presetName);
|
||||
});
|
||||
});
|
||||
const presetButton = document.getElementById('preset-button');
|
||||
presetButton.addEventListener('click', (e) => {
|
||||
//open or close the preset menu
|
||||
Utility().toggle('preset-button');
|
||||
Utility().toggle('preset-menu');
|
||||
|
||||
});
|
||||
//close the palette menu
|
||||
Utility().deselect('palette-button');
|
||||
Utility().deselect('palette-menu');
|
||||
|
||||
on('click', 'preset-button', function (e){
|
||||
//open or close the preset menu
|
||||
toggle('preset-button');
|
||||
toggle('preset-menu');
|
||||
|
||||
//close the palette menu
|
||||
deselect('palette-button');
|
||||
deselect('palette-menu');
|
||||
|
||||
//stop the click from propogating to the parent element
|
||||
e.stopPropagation();
|
||||
});
|
||||
e.stopPropagation();
|
||||
});
|
||||
})();
|
||||
Loading…
Reference in New Issue
Block a user