From bb8d5e467dc84495a29a8eef1872dd1813b7880f Mon Sep 17 00:00:00 2001 From: Nicola <47360416+unsettledgames@users.noreply.github.com> Date: Sun, 27 Jun 2021 17:46:22 +0200 Subject: [PATCH] Revert "Performance Improvement and Code Structure Changes" --- _ext/scripts/utilities/getSetText.js | 38 ------- css/pixel-editor.scss | 28 ++--- js/_palettes.js | 160 ++++++++++++++------------- js/_presets.js | 101 +++++++++-------- 4 files changed, 142 insertions(+), 185 deletions(-) diff --git a/_ext/scripts/utilities/getSetText.js b/_ext/scripts/utilities/getSetText.js index 3fd676a..4604c19 100644 --- a/_ext/scripts/utilities/getSetText.js +++ b/_ext/scripts/utilities/getSetText.js @@ -8,41 +8,3 @@ 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/css/pixel-editor.scss b/css/pixel-editor.scss index b777df1..4c80093 100644 --- a/css/pixel-editor.scss +++ b/css/pixel-editor.scss @@ -1611,38 +1611,22 @@ div#pb-options { } #sp-quickstart-container { + height:100%; width:70%; - max-height: 500px; float:right; + position:relative; padding:40px; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ - - overflow-y: scroll; - &::-webkit-scrollbar { - background: #232125; - width: 0.5em; - } - &::-webkit-scrollbar-track { - margin-top: -0.125em; - width: 0.5em; - } - &::-webkit-scrollbar-thumb { - background: #332f35; - border-radius: 0.25em; - border: solid 0.125em #232125; //same color as scrollbar back to fake padding - } - &::-webkit-scrollbar-corner { - background: #232125; - } } #sp-quickstart { display:flex; flex-direction: row; flex-wrap: wrap; + overflow-y:scroll; height:100%; // Fancy scrollbar @@ -1672,17 +1656,19 @@ div#pb-options { .sp-template { display: flex; + align-items: center; text-transform: uppercase; + position:relative; width:16%; border-radius:5%; margin-right:4%; margin-top:4%; background-color:$basecolor; - align-items: center; + float:left; + font-size: 18px; text-align:center; font-weight: bold; - min-width: 100px; &:hover { cursor:pointer; diff --git a/js/_palettes.js b/js/_palettes.js index 904ad0e..f0505bf 100644 --- a/js/_palettes.js +++ b/js/_palettes.js @@ -1,91 +1,93 @@ //populate palettes list in new pixel menu -(() => { - 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'); +Object.keys(palettes).forEach(function(paletteName,index) { - Object.keys(palettes).forEach((paletteName,) => { + var palettesMenu = document.getElementById('palette-menu'); + var splashPalettes = document.getElementById('palette-menu-splash'); - const button = document.createElement('button'); - button.appendChild(document.createTextNode(paletteName)); + //create button + var 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) { - 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(); + //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'; } - const clickPaletteButtonEvent = (e) => { - Utility().toggle('palette-button'); - Utility().toggle('palette-menu'); - Utility().deselect('preset-button'); - Utility().deselect('preset-menu'); + var buttonEvent = function() { - // Splash version - Utility().toggle('palette-button-splash'); - Utility().toggle('palette-menu-splash'); + //hide the dropdown menu + deselect('palette-menu'); + deselect('palette-button'); + deselect('palette-menu-splash'); + deselect('palette-button-splash'); - e.stopPropagation(); - } - // Load Palettes - loadPaletteButton.addEventListener('click', loadPaletteButtonEvent); - loadPaletteButtonSplash.addEventListener('click', loadPaletteButtonEvent); + //show empty palette option + document.getElementById('no-palette-button').style.display = 'block'; - // Palette menu click - paletteButtonSplash.addEventListener('click', clickPaletteButtonEvent); - paletteButton.addEventListener('click', clickPaletteButtonEvent); + //set the text of the dropdown to the newly selected preset + setText('palette-button', paletteName); + setText('palette-button-splash', paletteName); + }; - noPaletteButton.addEventListener('click', () => { - noPaletteButton.style.display = 'none'; - Utility().setText('palette-button', 'Choose a palette...'); - }) + on('click', button, buttonEvent); - newPixelElement.addEventListener('click', () => { - Utility().deselect('editor-mode-menu'); - Utility().deselect('preset-button'); - Utility().deselect('preset-menu'); - Utility().deselect('palette-button'); - Utility().deselect('palette-menu'); + //insert new element + palettesMenu.appendChild(button); - // Splash version - Utility().deselect('palette-button-splash'); - Utility().deselect('palette-menu-splash'); - }) -})(); \ No newline at end of file + // 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 diff --git a/js/_presets.js b/js/_presets.js index 2df10a3..90b9664 100644 --- a/js/_presets.js +++ b/js/_presets.js @@ -1,56 +1,63 @@ -(() => { - 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)); +//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' + } +}; - presetsMenu.appendChild(button); +//populate preset list in new pixel menu +Object.keys(presets).forEach(function(presetName,index) { - button.addEventListener('click', () => { - //change dimentions on new pixel form - Utility().setValue('size-width', presets[presetName].width); - Utility().setValue('size-height', presets[presetName].height); + var presetsMenu = document.getElementById('preset-menu'); - //set the text of the dropdown to the newly selected preset - Utility().setText('palette-button', presets[presetName].palette); + //create button + var button = document.createElement('button'); + button.appendChild(document.createTextNode(presetName)); - //hide the dropdown menu - Utility().deselect('preset-menu'); - Utility().deselect('preset-button'); + //insert new element + presetsMenu.appendChild(button); - //set the text of the dropdown to the newly selected preset - Utility().setText('preset-button', presetName); + //add click event listener + on('click', button, function() { - }); + //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'); +}); - e.stopPropagation(); - }); -})(); \ No newline at end of file +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(); +});