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

Util changes

Browse Source
This commit is contained in:
Leamsi Escribano 2021-06-28 19:54:54 -04:00
parent 5eee1b941e
commit ec9dbee493
6 changed files with 111 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,40 +8,3 @@ 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');
}
}
}

35
js/Util.js Normal file
View File

@ -0,0 +1,35 @@
// Acts as a public static class
class Util {
static getElement(elementOrElementId) {
return typeof elementOrElementId
? document.getElementById(elementOrElementId)
: elementOrElementId;
}
static getText(elementId) {
return this.getElement(elementId).textContent;
}
static setText(elementId, text) {
this.getElement(elementId).textContent = text;
}
static getValue(elementId) {
return this.getElement(elementId).value;
}
static setValue(elementId, value) {
this.getElement(elementId).value = value;
}
//add class .selected to specified element
static select(elementId) {
this.getElement(elementId).classList.add('selected');
}
//remove .selected class from specified element
static deselect(elementId) {
this.getElement(elementId).classList.remove('selected');
}
//toggle the status of the .selected class on the specified element
static toggle(elementId) {
this.getElement(elementId).classList.toggle('selected');
}
}

5
js/_newPixel.js
View File

@ -209,8 +209,9 @@ function newPixel (width, height, editorMode, fileContent = null) {
function newFromTemplate(preset, x, y) { function newFromTemplate(preset, x, y) {
if (preset != '') { if (preset != '') {
setText('palette-button-splash', presets[preset].palette); const presetProperties = presetsModule.propertiesOf(preset);
setText('palette-button', presets[preset].palette); Util.setText('palette-button-splash', presetProperties.palette);
Util.setText('palette-button', presetProperties.palette);
x = presets[preset].width; x = presets[preset].width;
y = presets[preset].height; y = presets[preset].height;

44
js/_palettes.js
View File

@ -16,25 +16,25 @@
//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) { if (palettes[paletteName].specified) {
Utility().setText('palette-button', paletteName); Util.setText('palette-button', paletteName);
Utility().setText('palette-button-splash', paletteName) Util.setText('palette-button-splash', paletteName)
//Show empty palette option //Show empty palette option
noPaletteButton.style.display = 'block'; noPaletteButton.style.display = 'block';
} }
const buttonEvent = () => { const buttonEvent = () => {
//hide the dropdown menu //hide the dropdown menu
Utility().deselect('palette-menu'); Util.deselect('palette-menu');
Utility().deselect('palette-button'); Util.deselect('palette-button');
Utility().deselect('palette-menu-splash'); Util.deselect('palette-menu-splash');
Utility().deselect('palette-button-splash'); Util.deselect('palette-button-splash');
//show empty palette option //show empty palette option
noPaletteButton.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
Utility().setText('palette-button', paletteName); Util.setText('palette-button', paletteName);
Utility().setText('palette-button-splash', paletteName); Util.setText('palette-button-splash', paletteName);
} }
// Making a copy for the splash page too // Making a copy for the splash page too
@ -52,15 +52,15 @@
document.getElementById('load-palette-browse-holder').click(); document.getElementById('load-palette-browse-holder').click();
} }
const clickPaletteButtonEvent = (e) => { const clickPaletteButtonEvent = (e) => {
Utility().toggle('palette-button'); Util.toggle('palette-button');
Utility().toggle('palette-menu'); Util.toggle('palette-menu');
Utility().deselect('preset-button'); Util.deselect('preset-button');
Utility().deselect('preset-menu'); Util.deselect('preset-menu');
// Splash version // Splash version
Utility().toggle('palette-button-splash'); Util.toggle('palette-button-splash');
Utility().toggle('palette-menu-splash'); Util.toggle('palette-menu-splash');
e.stopPropagation(); e.stopPropagation();
} }
@ -74,18 +74,18 @@
noPaletteButton.addEventListener('click', () => { noPaletteButton.addEventListener('click', () => {
noPaletteButton.style.display = 'none'; noPaletteButton.style.display = 'none';
Utility().setText('palette-button', 'Choose a palette...'); Util.setText('palette-button', 'Choose a palette...');
}) })
newPixelElement.addEventListener('click', () => { newPixelElement.addEventListener('click', () => {
Utility().deselect('editor-mode-menu'); Util.deselect('editor-mode-menu');
Utility().deselect('preset-button'); Util.deselect('preset-button');
Utility().deselect('preset-menu'); Util.deselect('preset-menu');
Utility().deselect('palette-button'); Util.deselect('palette-button');
Utility().deselect('palette-menu'); Util.deselect('palette-menu');
// Splash version // Splash version
Utility().deselect('palette-button-splash'); Util.deselect('palette-button-splash');
Utility().deselect('palette-menu-splash'); Util.deselect('palette-menu-splash');
}) })
})(); })();

56
js/_presets.js
View File

@ -1,21 +1,13 @@
(() => { const presetsModule = (() => {
const presets = { const presets = {
'Gameboy Color': { 'Gameboy Color': {width: 240, height: 203, palette: 'Gameboy Color'},
width: 240, 'PICO-8': {width: 128, height: 128, palette: 'PICO-8'},
height: 203, 'Commodore 64': {width: 40, height: 80, palette: 'Commodore 64'}
palette: 'Gameboy Color'
},
'PICO-8': {
width: 128,
height: 128,
palette: 'PICO-8'
},
'Commodore 64': {
width: 40,
height: 80,
palette: 'Commodore 64'
}
}; };
function instrumentPresetMenu() {
console.info("Initializing presets..");
// Add a button for all the presets available
const presetsMenu = document.getElementById('preset-menu'); const presetsMenu = document.getElementById('preset-menu');
Object.keys(presets).forEach((presetName,) => { Object.keys(presets).forEach((presetName,) => {
@ -26,31 +18,43 @@
button.addEventListener('click', () => { button.addEventListener('click', () => {
//change dimentions on new pixel form //change dimentions on new pixel form
Utility().setValue('size-width', presets[presetName].width); Util.setValue('size-width', presets[presetName].width);
Utility().setValue('size-height', presets[presetName].height); Util.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
Utility().setText('palette-button', presets[presetName].palette); Util.setText('palette-button', presets[presetName].palette);
//hide the dropdown menu //hide the dropdown menu
Utility().deselect('preset-menu'); Util.deselect('preset-menu');
Utility().deselect('preset-button'); Util.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
Utility().setText('preset-button', presetName); Util.setText('preset-button', presetName);
}); });
}); });
const presetButton = document.getElementById('preset-button'); const presetButton = document.getElementById('preset-button');
presetButton.addEventListener('click', (e) => { presetButton.addEventListener('click', (e) => {
//open or close the preset menu //open or close the preset menu
Utility().toggle('preset-button'); Util.toggle('preset-button');
Utility().toggle('preset-menu'); Util.toggle('preset-menu');
//close the palette menu //close the palette menu
Utility().deselect('palette-button'); Util.deselect('palette-button');
Utility().deselect('palette-menu'); Util.deselect('palette-menu');
e.stopPropagation(); e.stopPropagation();
}); });
}
function propertiesOf(presetId) {
return presets[presetId];
}
return {
propertiesOf,
instrumentPresetMenu
};
})(); })();

4
js/pixel-editor.js
View File

@ -14,6 +14,7 @@
//=include _pixelEditorUtility.js //=include _pixelEditorUtility.js
//=include sortable.js //=include sortable.js
//=include _algorithms.js //=include _algorithms.js
//=include Util.js
/**init**/ /**init**/
//=include _consts.js //=include _consts.js
@ -82,3 +83,6 @@
/**feature toggles**/ /**feature toggles**/
//=include _featureToggles.js //=include _featureToggles.js
// Controls execution of this preset module
presetsModule.instrumentPresetMenu();