mirror/pixel-editor
1
0
Fork 0
mirror of https://github.com/lospec/pixel-editor.git synced 2023-08-10 21:12:51 +03:00
Code Issues Projects Releases Wiki Activity

Global scope cleaning

Browse Source
This commit is contained in:
Leamsi Escribano 2021-06-26 16:51:56 -04:00
parent 096d62cab9
commit 03036ca57b
3 changed files with 164 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
_ext/scripts/utilities/getSetText.js
View File

@ -8,3 +8,41 @@ function setText(elementId, text) {
var element = (typeof elementId == 'string' ? document.getElementById(elementId) : elementId); var element = (typeof elementId == 'string' ? document.getElementById(elementId) : elementId);
element.textContent = text; 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');
}
}
}

116
js/_palettes.js
View File

@ -1,93 +1,91 @@
//populate palettes list in new pixel menu //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'); Object.keys(palettes).forEach((paletteName,) => {
var splashPalettes = document.getElementById('palette-menu-splash');
//create button const button = document.createElement('button');
var button = document.createElement('button');
button.appendChild(document.createTextNode(paletteName)); button.appendChild(document.createTextNode(paletteName));
//if the palette was specified by the user, change the dropdown to it //if the palette was specified by the user, change the dropdown to it
if (palettes[paletteName].specified == true) { if (palettes[paletteName].specified) {
setText('palette-button', paletteName); Utility().setText('palette-button', paletteName);
setText('palette-button-splash', paletteName) Utility().setText('palette-button-splash', paletteName)
//Show empty palette option //Show empty palette option
document.getElementById('no-palette-button').style.display = 'block'; noPaletteButton.style.display = 'block';
} }
var buttonEvent = function() { const buttonEvent = () => {
//hide the dropdown menu //hide the dropdown menu
deselect('palette-menu'); Utility().deselect('palette-menu');
deselect('palette-button'); Utility().deselect('palette-button');
deselect('palette-menu-splash'); Utility().deselect('palette-menu-splash');
deselect('palette-button-splash'); Utility().deselect('palette-button-splash');
//show empty palette option //show empty palette option
document.getElementById('no-palette-button').style.display = 'block'; noPaletteButton.style.display = 'block';
//set the text of the dropdown to the newly selected preset //set the text of the dropdown to the newly selected preset
setText('palette-button', paletteName); Utility().setText('palette-button', paletteName);
setText('palette-button-splash', paletteName); Utility().setText('palette-button-splash', paletteName);
}; }
on('click', button, buttonEvent);
//insert new element
palettesMenu.appendChild(button);
// Making a copy for the splash page too // Making a copy for the splash page too
var copyButton = button.cloneNode(true); const copyButton = button.cloneNode(true);
// Attaching the same event copyButton.addEventListener('click', buttonEvent);
on('click', copyButton, buttonEvent); button.addEventListener('click', buttonEvent);
// Appending it to the splash palette menu // Appending it to the splash palette menu
splashPalettes.appendChild(copyButton); splashPalettes.appendChild(copyButton);
palettesMenu.appendChild(button);
}); });
var noPaletteButtonClickEvent = function () {
document.getElementById('no-palette-button').style.display = 'none';
setText('palette-button', 'Choose a palette...');
}
var loadPaletteButtonEvent = function () { const loadPaletteButtonEvent = () => {
document.getElementById('load-palette-browse-holder').click(); document.getElementById('load-palette-browse-holder').click();
} }
const clickPaletteButtonEvent = (e) => {
Utility().toggle('palette-button');
Utility().toggle('palette-menu');
var clickPaletteButtonEvent = function (e){ Utility().deselect('preset-button');
toggle('palette-button'); Utility().deselect('preset-menu');
toggle('palette-menu');
deselect('preset-button');
deselect('preset-menu');
// Splash version // Splash version
toggle('palette-button-splash'); Utility().toggle('palette-button-splash');
toggle('palette-menu-splash'); Utility().toggle('palette-menu-splash');
e.stopPropagation(); e.stopPropagation();
} }
// Load Palettes
//select no palette loadPaletteButton.addEventListener('click', loadPaletteButtonEvent);
on('click', 'no-palette-button', noPaletteButtonClickEvent); loadPaletteButtonSplash.addEventListener('click', loadPaletteButtonEvent);
//select load palette
on('click', 'load-palette-button', loadPaletteButtonEvent);
//select load palette
on('click', 'load-palette-button-splash', loadPaletteButtonEvent);
// Palette menu click // Palette menu click
on('click', 'palette-button', clickPaletteButtonEvent); paletteButtonSplash.addEventListener('click', clickPaletteButtonEvent);
on('click', 'palette-button-splash', clickPaletteButtonEvent); paletteButton.addEventListener('click', clickPaletteButtonEvent);
on('click', 'new-pixel', function (){ noPaletteButton.addEventListener('click', () => {
deselect('editor-mode-menu'); noPaletteButton.style.display = 'none';
deselect('preset-button'); Utility().setText('palette-button', 'Choose a palette...');
deselect('preset-menu'); })
deselect('palette-button');
deselect('palette-menu'); newPixelElement.addEventListener('click', () => {
Utility().deselect('editor-mode-menu');
Utility().deselect('preset-button');
Utility().deselect('preset-menu');
Utility().deselect('palette-button');
Utility().deselect('palette-menu');
// Splash version // Splash version
deselect('palette-button-splash'); Utility().deselect('palette-button-splash');
deselect('palette-menu-splash'); Utility().deselect('palette-menu-splash');
}); })
})();

47
js/_presets.js
View File

@ -1,5 +1,5 @@
//presets (() => {
var presets = { const presets = {
'Gameboy Color': { 'Gameboy Color': {
width: 240, width: 240,
height: 203, height: 203,
@ -16,48 +16,41 @@ var presets = {
palette: 'Commodore 64' palette: 'Commodore 64'
} }
}; };
const presetsMenu = document.getElementById('preset-menu');
Object.keys(presets).forEach((presetName,) => {
//populate preset list in new pixel menu const button = document.createElement('button');
Object.keys(presets).forEach(function(presetName,index) {
var presetsMenu = document.getElementById('preset-menu');
//create button
var button = document.createElement('button');
button.appendChild(document.createTextNode(presetName)); button.appendChild(document.createTextNode(presetName));
//insert new element
presetsMenu.appendChild(button); presetsMenu.appendChild(button);
//add click event listener button.addEventListener('click', () => {
on('click', button, function() {
//change dimentions on new pixel form //change dimentions on new pixel form
setValue('size-width', presets[presetName].width); Utility().setValue('size-width', presets[presetName].width);
setValue('size-height', presets[presetName].height); Utility().setValue('size-height', presets[presetName].height);
//set the text of the dropdown to the newly selected preset //set the text of the dropdown to the newly selected preset
setText('palette-button', presets[presetName].palette); Utility().setText('palette-button', presets[presetName].palette);
//hide the dropdown menu //hide the dropdown menu
deselect('preset-menu'); Utility().deselect('preset-menu');
deselect('preset-button'); Utility().deselect('preset-button');
//set the text of the dropdown to the newly selected preset //set the text of the dropdown to the newly selected preset
setText('preset-button', presetName); Utility().setText('preset-button', presetName);
});
}); });
});
on('click', 'preset-button', function (e){ const presetButton = document.getElementById('preset-button');
presetButton.addEventListener('click', (e) => {
//open or close the preset menu //open or close the preset menu
toggle('preset-button'); Utility().toggle('preset-button');
toggle('preset-menu'); Utility().toggle('preset-menu');
//close the palette menu //close the palette menu
deselect('palette-button'); Utility().deselect('palette-button');
deselect('palette-menu'); Utility().deselect('palette-menu');
//stop the click from propogating to the parent element
e.stopPropagation(); e.stopPropagation();
}); });
})();