From 03036ca57bca8c7053a9049d5e0afeae75b9e24c Mon Sep 17 00:00:00 2001 From: Leamsi Escribano Date: Sat, 26 Jun 2021 16:51:56 -0400 Subject: [PATCH] Global scope cleaning --- _ext/scripts/utilities/getSetText.js | 38 +++++++ js/_palettes.js | 160 +++++++++++++-------------- js/_presets.js | 101 ++++++++--------- 3 files changed, 164 insertions(+), 135 deletions(-) diff --git a/_ext/scripts/utilities/getSetText.js b/_ext/scripts/utilities/getSetText.js index 4604c19..3fd676a 100644 --- a/_ext/scripts/utilities/getSetText.js +++ b/_ext/scripts/utilities/getSetText.js @@ -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'); + } + } +} \ No newline at end of file diff --git a/js/_palettes.js b/js/_palettes.js index f0505bf..904ad0e 100644 --- a/js/_palettes.js +++ b/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'); -}); \ No newline at end of file + // Splash version + Utility().deselect('palette-button-splash'); + Utility().deselect('palette-menu-splash'); + }) +})(); \ No newline at end of file diff --git a/js/_presets.js b/js/_presets.js index 90b9664..2df10a3 100644 --- a/js/_presets.js +++ b/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(); + }); +})(); \ No newline at end of file