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

Merge pull request #17 from liamortiz/master

Browse Source 
IIFE and CSS Fixes
This commit is contained in:
Nicola 2021-06-30 11:23:33 +02:00 committed by GitHub
commit 143895923a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 2157 additions and 8508 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
css/pixel-editor.scss
View File

@ -1611,22 +1611,38 @@ div#pb-options {
}
#sp-quickstart-container {
height:100%;
max-height: 500px;
width:70%;
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
@ -1658,13 +1674,12 @@ div#pb-options {
display: flex;
align-items: center;
text-transform: uppercase;
position:relative;
width:16%;
min-width: 100px;
border-radius:5%;
margin-right:4%;
margin-top:4%;
background-color:$basecolor;
float:left;
font-size: 18px;
text-align:center;

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');
}
}

10
js/_newPixel.js
View File

@ -209,12 +209,12 @@ 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 = PresetModule.propertiesOf(preset);
Util.setText('palette-button-splash', presetProperties.palette);
Util.setText('palette-button', presetProperties.palette);
x = presets[preset].width;
y = presets[preset].height;
x = presetProperties.width;
y = presetProperties.height;
}
newPixel(x, y, pixelEditorMode == 'Advanced' ? 'Basic' : 'Advanced');
}

116
js/_palettes.js
View File

@ -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');
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)
if (palettes[paletteName].specified) {
Util.setText('palette-button', paletteName);
Util.setText('palette-button-splash', paletteName)
//Show empty palette option
document.getElementById('no-palette-button').style.display = 'block';
noPaletteButton.style.display = 'block';
}
var buttonEvent = function() {
const buttonEvent = () => {
//hide the dropdown menu
deselect('palette-menu');
deselect('palette-button');
deselect('palette-menu-splash');
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
document.getElementById('no-palette-button').style.display = 'block';
noPaletteButton.style.display = 'block';
//set the text of the dropdown to the newly selected preset
setText('palette-button', paletteName);
setText('palette-button-splash', paletteName);
};
on('click', button, buttonEvent);
//insert new element
palettesMenu.appendChild(button);
Util.setText('palette-button', paletteName);
Util.setText('palette-button-splash', paletteName);
}
// Making a copy for the splash page too
var copyButton = button.cloneNode(true);
// Attaching the same event
on('click', copyButton, buttonEvent);
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);
});
var noPaletteButtonClickEvent = function () {
document.getElementById('no-palette-button').style.display = 'none';
setText('palette-button', 'Choose a palette...');
}
var loadPaletteButtonEvent = function () {
const loadPaletteButtonEvent = () => {
document.getElementById('load-palette-browse-holder').click();
}
const clickPaletteButtonEvent = (e) => {
Util.toggle('palette-button');
Util.toggle('palette-menu');
var clickPaletteButtonEvent = function (e){
toggle('palette-button');
toggle('palette-menu');
deselect('preset-button');
deselect('preset-menu');
Util.deselect('preset-button');
Util.deselect('preset-menu');
// Splash version
toggle('palette-button-splash');
toggle('palette-menu-splash');
Util.toggle('palette-button-splash');
Util.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);
// Load Palettes
loadPaletteButton.addEventListener('click', loadPaletteButtonEvent);
loadPaletteButtonSplash.addEventListener('click', loadPaletteButtonEvent);
// Palette menu click
on('click', 'palette-button', clickPaletteButtonEvent);
on('click', 'palette-button-splash', clickPaletteButtonEvent);
paletteButtonSplash.addEventListener('click', clickPaletteButtonEvent);
paletteButton.addEventListener('click', clickPaletteButtonEvent);
on('click', 'new-pixel', function (){
deselect('editor-mode-menu');
deselect('preset-button');
deselect('preset-menu');
deselect('palette-button');
deselect('palette-menu');
noPaletteButton.addEventListener('click', () => {
noPaletteButton.style.display = 'none';
Util.setText('palette-button', 'Choose a palette...');
})
newPixelElement.addEventListener('click', () => {
Util.deselect('editor-mode-menu');
Util.deselect('preset-button');
Util.deselect('preset-menu');
Util.deselect('palette-button');
Util.deselect('palette-menu');
// Splash version
deselect('palette-button-splash');
deselect('palette-menu-splash');
});
Util.deselect('palette-button-splash');
Util.deselect('palette-menu-splash');
})
})();

77
js/_presets.js
View File

@ -1,63 +1,60 @@
//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 PresetModule = (() => {
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'}
};
//populate preset list in new pixel menu
Object.keys(presets).forEach(function(presetName,index) {
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,) => {
var presetsMenu = document.getElementById('preset-menu');
//create button
var button = document.createElement('button');
const button = document.createElement('button');
button.appendChild(document.createTextNode(presetName));
//insert new element
presetsMenu.appendChild(button);
//add click event listener
on('click', button, function() {
button.addEventListener('click', () => {
//change dimentions on new pixel form
setValue('size-width', presets[presetName].width);
setValue('size-height', presets[presetName].height);
Util.setValue('size-width', presets[presetName].width);
Util.setValue('size-height', presets[presetName].height);
//set the text of the dropdown to the newly selected preset
setText('palette-button', presets[presetName].palette);
Util.setText('palette-button', presets[presetName].palette);
//hide the dropdown menu
deselect('preset-menu');
deselect('preset-button');
Util.deselect('preset-menu');
Util.deselect('preset-button');
//set the text of the dropdown to the newly selected preset
setText('preset-button', presetName);
});
Util.setText('preset-button', presetName);
});
});
on('click', 'preset-button', function (e){
const presetButton = document.getElementById('preset-button');
presetButton.addEventListener('click', (e) => {
//open or close the preset menu
toggle('preset-button');
toggle('preset-menu');
Util.toggle('preset-button');
Util.toggle('preset-menu');
//close the palette menu
deselect('palette-button');
deselect('palette-menu');
Util.deselect('palette-button');
Util.deselect('palette-menu');
//stop the click from propogating to the parent element
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 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
PresetModule.instrumentPresetMenu();

10312
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff