From 224273e7cee95e9843b287d1e777ff746d746c99 Mon Sep 17 00:00:00 2001
From: unsettledgames <47360416+unsettledgames@users.noreply.github.com>
Date: Thu, 18 Feb 2021 22:28:52 +0100
Subject: [PATCH] Binded new pixel events to splash page and to create dialogue
---
css/pixel-editor.scss | 4 +++-
js/_createButton.js | 2 --
js/_editorMode.js | 24 +++++++++++++++++++++---
js/_loadPalette.js | 4 ++--
js/_newPixel.js | 8 ++++++--
js/_palettes.js | 42 +++++++++++++++++++-----------------------
views/pixel-editor.hbs | 6 +++---
7 files changed, 54 insertions(+), 36 deletions(-)
diff --git a/css/pixel-editor.scss b/css/pixel-editor.scss
index 63ae9db..c07f5b0 100644
--- a/css/pixel-editor.scss
+++ b/css/pixel-editor.scss
@@ -1709,8 +1709,10 @@ div#pb-options {
text-align: center;
height:25px;
cursor:pointer;
-
+ z-index:1;
+
p {
+ z-index:0;
-ms-transform: translateY(-60%);
transform: translateY(-60%);
}
diff --git a/js/_createButton.js b/js/_createButton.js
index e694a4e..e84dd6b 100644
--- a/js/_createButton.js
+++ b/js/_createButton.js
@@ -1,5 +1,3 @@
-// OPTIMIZABLE: palette is known here, so why not pass it to _newPixel.js?
-
function create(isSplash) {
var splashPostfix = '';
// If I'm creating from the splash menu, I append '-splash' so I get the corresponding values
diff --git a/js/_editorMode.js b/js/_editorMode.js
index 32df107..b9b2d29 100644
--- a/js/_editorMode.js
+++ b/js/_editorMode.js
@@ -8,11 +8,29 @@ let modes = {
}
let infoBox = document.getElementById('editor-mode-info');
+let currentSplashButton;
-function switchMode(currentMode, mustConfirm = true) {
+function splashMode(mouseEvent, mode) {
+ if (currentSplashButton == undefined) {
+ currentSplashButton = mouseEvent.target;
+ return;
+ }
+
+ if (mode !== pixelEditorMode) {
+ console.log("Mode target: " + mouseEvent.target);
+ // Remove selected class to old button
+ currentSplashButton.classList.remove("sp-interface-selected");
+ // Add selected class to new button
+ mouseEvent.target.classList.add("sp-interface-selected");
+ }
+
+ currentSplashButton = mouseEvent.target;
+}
+
+function switchMode(mustConfirm = true) {
//switch to advanced mode
- if (currentMode == 'Basic') {
+ if (pixelEditorMode == 'Basic') {
// Switch to advanced ez pez lemon squez
document.getElementById('switch-mode-button').innerHTML = 'Switch to basic mode';
// Show the layer menus
@@ -56,7 +74,7 @@ function switchMode(currentMode, mustConfirm = true) {
}
on('click', 'switch-mode-button', function (e) {
- switchMode(pixelEditorMode);
+ switchMode();
});
// Makes the menu open
diff --git a/js/_loadPalette.js b/js/_loadPalette.js
index 3ceec09..035bd2a 100644
--- a/js/_loadPalette.js
+++ b/js/_loadPalette.js
@@ -26,8 +26,6 @@ document.getElementById('load-palette-browse-holder').addEventListener('change',
var colorPalette = [];
var imagePixelData = loadPaletteContext.getImageData(0,0,this.width, this.height).data;
- console.log(imagePixelData);
-
//loop through pixels looking for colors to add to palette
for (var i = 0; i < imagePixelData.length; i += 4) {
var color = '#'+rgbToHex(imagePixelData[i],imagePixelData[i + 1],imagePixelData[i + 2]);
@@ -40,6 +38,8 @@ document.getElementById('load-palette-browse-holder').addEventListener('change',
palettes['Loaded palette'] = {};
palettes['Loaded palette'].colors = colorPalette;
setText('palette-button', 'Loaded palette');
+ setText('palette-button-splash', 'Loaded palette');
+ toggle('palette-menu-splash');
};
img.src = e.target.result;
};
diff --git a/js/_newPixel.js b/js/_newPixel.js
index 46181a6..647a523 100644
--- a/js/_newPixel.js
+++ b/js/_newPixel.js
@@ -95,7 +95,11 @@ function newPixel (width, height, editorMode, fileContent = null) {
}
//add colors from selected palette
- var selectedPalette = getText('palette-button');
+ var selectedPalette;
+ if (!firstPixel)
+ var selectedPalette = getText('palette-button');
+ else
+ var selectedPalette = getText('palette-button-splash');
// If the user selected a palette and isn't opening a file, I load the selected palette
if (selectedPalette != 'Choose a palette...' && fileContent == null) {
@@ -103,7 +107,7 @@ function newPixel (width, height, editorMode, fileContent = null) {
//if this palette isnt the one specified in the url, then reset the url
if (!palettes[selectedPalette].specified)
history.pushState(null, null, '/pixel-editor/app');
-
+
//fill the palette with specified colours
createColorPalette(palettes[selectedPalette].colors,true);
}
diff --git a/js/_palettes.js b/js/_palettes.js
index 243a214..f0505bf 100644
--- a/js/_palettes.js
+++ b/js/_palettes.js
@@ -1,5 +1,3 @@
-const { on } = require("gulp");
-
//populate palettes list in new pixel menu
Object.keys(palettes).forEach(function(paletteName,index) {
@@ -16,7 +14,6 @@ Object.keys(palettes).forEach(function(paletteName,index) {
setText('palette-button-splash', paletteName)
//Show empty palette option
document.getElementById('no-palette-button').style.display = 'block';
- document.getElementById('no-palette-button-splash').style.display = 'block';
}
var buttonEvent = function() {
@@ -29,7 +26,6 @@ Object.keys(palettes).forEach(function(paletteName,index) {
//show empty palette option
document.getElementById('no-palette-button').style.display = 'block';
- document.getElementById('no-palette-button-splash').style.display = 'block';
//set the text of the dropdown to the newly selected preset
setText('palette-button', paletteName);
@@ -49,23 +45,16 @@ Object.keys(palettes).forEach(function(paletteName,index) {
splashPalettes.appendChild(copyButton);
});
-//select no palette
-on('click', 'no-palette-button', function () {
+var noPaletteButtonClickEvent = function () {
document.getElementById('no-palette-button').style.display = 'none';
setText('palette-button', 'Choose a palette...');
+}
- // Same for splash page
- document.getElementById('no-palette-button-splash').style.display = 'none';
- setText('palette-button-splash', 'Choose a palette...');
-});
-
-//select load palette
-on('click', 'load-palette-button', function () {
+var loadPaletteButtonEvent = function () {
document.getElementById('load-palette-browse-holder').click();
-});
+}
-
-on('click', 'palette-button', function (e){
+var clickPaletteButtonEvent = function (e){
toggle('palette-button');
toggle('palette-menu');
@@ -76,11 +65,20 @@ on('click', 'palette-button', function (e){
toggle('palette-button-splash');
toggle('palette-menu-splash');
- deselect('preset-button-splash');
- deselect('preset-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');
@@ -92,6 +90,4 @@ on('click', 'new-pixel', function (){
// Splash version
deselect('palette-button-splash');
deselect('palette-menu-splash');
-});
-
-// ISSUE: use the same functions for the splash menu
\ No newline at end of file
+});
\ No newline at end of file
diff --git a/views/pixel-editor.hbs b/views/pixel-editor.hbs
index 4e61b2c..864a874 100644
--- a/views/pixel-editor.hbs
+++ b/views/pixel-editor.hbs
@@ -337,8 +337,8 @@
Editor mode
@@ -349,7 +349,7 @@
Palette
-
+
Creating a new pixel will discard your current one.