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

Revert "Performance Improvement and Code Structure Changes"

Browse Source
This commit is contained in:
Nicola 2021-06-27 17:46:22 +02:00 committed by GitHub
parent f4841de168
commit bb8d5e467d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 142 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

28
css/pixel-editor.scss
View File

@ -1611,38 +1611,22 @@ div#pb-options {
} }
#sp-quickstart-container { #sp-quickstart-container {
height:100%;
width:70%; width:70%;
max-height: 500px;
float:right; float:right;
position:relative;
padding:40px; padding:40px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */ -moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */ 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 { #sp-quickstart {
display:flex; display:flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
overflow-y:scroll;
height:100%; height:100%;
// Fancy scrollbar // Fancy scrollbar
@ -1672,17 +1656,19 @@ div#pb-options {
.sp-template { .sp-template {
display: flex; display: flex;
align-items: center;
text-transform: uppercase; text-transform: uppercase;
position:relative;
width:16%; width:16%;
border-radius:5%; border-radius:5%;
margin-right:4%; margin-right:4%;
margin-top:4%; margin-top:4%;
background-color:$basecolor; background-color:$basecolor;
align-items: center; float:left;
font-size: 18px; font-size: 18px;
text-align:center; text-align:center;
font-weight: bold; font-weight: bold;
min-width: 100px;
&:hover { &:hover {
cursor:pointer; cursor:pointer;

160
js/_palettes.js
View File

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

99
js/_presets.js
View File

@ -1,56 +1,63 @@
(() => { //presets
const presets = { var presets = {
'Gameboy Color': { 'Gameboy Color': {
width: 240, width: 240,
height: 203, height: 203,
palette: 'Gameboy Color' palette: 'Gameboy Color'
}, },
'PICO-8': { 'PICO-8': {
width: 128, width: 128,
height: 128, height: 128,
palette: 'PICO-8' palette: 'PICO-8'
}, },
'Commodore 64': { 'Commodore 64': {
width: 40, width: 40,
height: 80, height: 80,
palette: 'Commodore 64' palette: 'Commodore 64'
} }
}; };
const presetsMenu = document.getElementById('preset-menu');
Object.keys(presets).forEach((presetName,) => {
const button = document.createElement('button'); //populate preset list in new pixel menu
button.appendChild(document.createTextNode(presetName)); Object.keys(presets).forEach(function(presetName,index) {
presetsMenu.appendChild(button); var presetsMenu = document.getElementById('preset-menu');
button.addEventListener('click', () => { //create button
//change dimentions on new pixel form var button = document.createElement('button');
Utility().setValue('size-width', presets[presetName].width); button.appendChild(document.createTextNode(presetName));
Utility().setValue('size-height', presets[presetName].height);
//set the text of the dropdown to the newly selected preset //insert new element
Utility().setText('palette-button', presets[presetName].palette); presetsMenu.appendChild(button);
//hide the dropdown menu //add click event listener
Utility().deselect('preset-menu'); on('click', button, function() {
Utility().deselect('preset-button');
//set the text of the dropdown to the newly selected preset //change dimentions on new pixel form
Utility().setText('preset-button', presetName); 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(); 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();
});