diff --git a/_ext/scripts/utilities/getSetText.js b/_ext/scripts/utilities/getSetText.js index d0cef13..fbee0f9 100644 --- a/_ext/scripts/utilities/getSetText.js +++ b/_ext/scripts/utilities/getSetText.js @@ -7,41 +7,4 @@ function getText(elementId) { 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'); - } - } } \ No newline at end of file diff --git a/js/Util.js b/js/Util.js new file mode 100644 index 0000000..760ca03 --- /dev/null +++ b/js/Util.js @@ -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'); + } +} \ No newline at end of file diff --git a/js/_newPixel.js b/js/_newPixel.js index 22c423f..35a165d 100644 --- a/js/_newPixel.js +++ b/js/_newPixel.js @@ -209,8 +209,9 @@ function newPixel (width, height, editorMode, fileContent = null) { function newFromTemplate(preset, x, y) { if (preset != '') { - setText('palette-button-splash', presets[preset].palette); - setText('palette-button', presets[preset].palette); + const presetProperties = presetsModule.propertiesOf(preset); + Util.setText('palette-button-splash', presetProperties.palette); + Util.setText('palette-button', presetProperties.palette); x = presets[preset].width; y = presets[preset].height; diff --git a/js/_palettes.js b/js/_palettes.js index cc0539c..bcf69c0 100644 --- a/js/_palettes.js +++ b/js/_palettes.js @@ -16,25 +16,25 @@ //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) + 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 - Utility().deselect('palette-menu'); - Utility().deselect('palette-button'); - Utility().deselect('palette-menu-splash'); - Utility().deselect('palette-button-splash'); + 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 - Utility().setText('palette-button', paletteName); - Utility().setText('palette-button-splash', paletteName); + Util.setText('palette-button', paletteName); + Util.setText('palette-button-splash', paletteName); } // Making a copy for the splash page too @@ -52,15 +52,15 @@ document.getElementById('load-palette-browse-holder').click(); } const clickPaletteButtonEvent = (e) => { - Utility().toggle('palette-button'); - Utility().toggle('palette-menu'); + Util.toggle('palette-button'); + Util.toggle('palette-menu'); - Utility().deselect('preset-button'); - Utility().deselect('preset-menu'); + Util.deselect('preset-button'); + Util.deselect('preset-menu'); // Splash version - Utility().toggle('palette-button-splash'); - Utility().toggle('palette-menu-splash'); + Util.toggle('palette-button-splash'); + Util.toggle('palette-menu-splash'); e.stopPropagation(); } @@ -74,18 +74,18 @@ noPaletteButton.addEventListener('click', () => { noPaletteButton.style.display = 'none'; - Utility().setText('palette-button', 'Choose a palette...'); + Util.setText('palette-button', 'Choose a palette...'); }) newPixelElement.addEventListener('click', () => { - Utility().deselect('editor-mode-menu'); - Utility().deselect('preset-button'); - Utility().deselect('preset-menu'); - Utility().deselect('palette-button'); - Utility().deselect('palette-menu'); + Util.deselect('editor-mode-menu'); + Util.deselect('preset-button'); + Util.deselect('preset-menu'); + Util.deselect('palette-button'); + Util.deselect('palette-menu'); // Splash version - Utility().deselect('palette-button-splash'); - Utility().deselect('palette-menu-splash'); + Util.deselect('palette-button-splash'); + Util.deselect('palette-menu-splash'); }) })(); \ No newline at end of file diff --git a/js/_presets.js b/js/_presets.js index cf16933..63ea9db 100644 --- a/js/_presets.js +++ b/js/_presets.js @@ -1,56 +1,60 @@ -(() => { +const presetsModule = (() => { 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' - } + '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)); + function instrumentPresetMenu() { + console.info("Initializing presets.."); + // Add a button for all the presets available + const presetsMenu = document.getElementById('preset-menu'); + Object.keys(presets).forEach((presetName,) => { - presetsMenu.appendChild(button); + const button = document.createElement('button'); + button.appendChild(document.createTextNode(presetName)); - button.addEventListener('click', () => { - //change dimentions on new pixel form - Utility().setValue('size-width', presets[presetName].width); - Utility().setValue('size-height', presets[presetName].height); + presetsMenu.appendChild(button); - //set the text of the dropdown to the newly selected preset - Utility().setText('palette-button', presets[presetName].palette); + button.addEventListener('click', () => { + //change dimentions on new pixel form + Util.setValue('size-width', presets[presetName].width); + Util.setValue('size-height', presets[presetName].height); - //hide the dropdown menu - Utility().deselect('preset-menu'); - Utility().deselect('preset-button'); + //set the text of the dropdown to the newly selected preset + Util.setText('palette-button', presets[presetName].palette); - //set the text of the dropdown to the newly selected preset - Utility().setText('preset-button', presetName); + //hide the dropdown menu + Util.deselect('preset-menu'); + Util.deselect('preset-button'); + //set the text of the dropdown to the newly selected preset + Util.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'); + const presetButton = document.getElementById('preset-button'); + presetButton.addEventListener('click', (e) => { + //open or close the preset menu + Util.toggle('preset-button'); + Util.toggle('preset-menu'); - e.stopPropagation(); - }); + //close the palette menu + Util.deselect('palette-button'); + Util.deselect('palette-menu'); + + e.stopPropagation(); + }); + } + + function propertiesOf(presetId) { + return presets[presetId]; + } + + return { + propertiesOf, + instrumentPresetMenu + }; + })(); \ No newline at end of file diff --git a/js/pixel-editor.js b/js/pixel-editor.js index 1945fca..4b4f333 100644 --- a/js/pixel-editor.js +++ b/js/pixel-editor.js @@ -14,6 +14,7 @@ //=include _pixelEditorUtility.js //=include sortable.js //=include _algorithms.js +//=include Util.js /**init**/ //=include _consts.js @@ -82,3 +83,6 @@ /**feature toggles**/ //=include _featureToggles.js + +// Controls execution of this preset module +presetsModule.instrumentPresetMenu(); \ No newline at end of file