mirror of
https://github.com/lospec/pixel-editor.git
synced 2023-08-10 21:12:51 +03:00
Started binding splash page events (new custom pixel section)
This commit is contained in:
unsettledgames
parent
9c2677ea6e
commit
1302fc9bd6
@ -805,7 +805,6 @@ svg {
|
||||
*/
|
||||
|
||||
button.default {
|
||||
float: right;
|
||||
background: $basehover;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
@ -1553,9 +1552,10 @@ div#pb-options {
|
||||
|
||||
background-color: #232125 !important;
|
||||
opacity: 1 !important;
|
||||
overflow-y: scroll;
|
||||
|
||||
#splash-input {
|
||||
width:70%;
|
||||
width:74%;
|
||||
height:100vh !important;
|
||||
color:$baselink;
|
||||
|
||||
@ -1608,11 +1608,12 @@ div#pb-options {
|
||||
}
|
||||
}
|
||||
|
||||
#sp-quickstart {
|
||||
position:relative;
|
||||
width: 70%;
|
||||
margin-top:-20px;
|
||||
margin-left:20px
|
||||
#sp-quickstart-container {
|
||||
left:250px;
|
||||
height:65vh;
|
||||
width:650px;
|
||||
display:inline;
|
||||
float:right;
|
||||
}
|
||||
|
||||
#sp-quickstart-title {
|
||||
@ -1630,7 +1631,7 @@ div#pb-options {
|
||||
width:100px;
|
||||
height:100px;
|
||||
border-radius:5%;
|
||||
margin-right:40px;
|
||||
margin-right:30px;
|
||||
margin-top:30px;
|
||||
background-color:$basecolor;
|
||||
float:left;
|
||||
@ -1655,29 +1656,48 @@ div#pb-options {
|
||||
|
||||
#sp-newpixel {
|
||||
display: inline-block;
|
||||
width:35%;
|
||||
width:220px;
|
||||
height:64vh;
|
||||
padding:20px;
|
||||
position:relative;
|
||||
background-color:$basecolor;
|
||||
top:-47px;
|
||||
|
||||
.sp-np-entry {
|
||||
width:100%;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
input {
|
||||
border:none;
|
||||
background-color: #232125;
|
||||
color:$basetext;
|
||||
font-size:14px;
|
||||
width:40px;
|
||||
padding:7px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
#create-button {
|
||||
font-size:18px;
|
||||
width:150px;
|
||||
margin-top:40px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#sp-mode-palette {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
float:bottom;
|
||||
font-size:18px;
|
||||
font-size:16px;
|
||||
font-weight: bold;
|
||||
|
||||
div.button-menu {
|
||||
border:3px solid $basetextweak;
|
||||
border:2px solid $basetextweak;
|
||||
border-radius:5px;
|
||||
position:relative;
|
||||
display:inline-block;
|
||||
padding: 0 0 0 0;
|
||||
text-align:left;
|
||||
-ms-transform: translateY(38%);
|
||||
transform: translateY(38%);
|
||||
|
||||
div {
|
||||
border:none;
|
||||
@ -1687,12 +1707,12 @@ div#pb-options {
|
||||
width:100px;
|
||||
float:left;
|
||||
text-align: center;
|
||||
height:30px;
|
||||
height:25px;
|
||||
cursor:pointer;
|
||||
|
||||
p {
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
-ms-transform: translateY(-60%);
|
||||
transform: translateY(-60%);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1723,7 +1743,7 @@ div#pb-options {
|
||||
line-height: 1.5;
|
||||
position:absolute;
|
||||
top:40px;
|
||||
right:40px;
|
||||
right:0px;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
background: #232125;
|
||||
|
||||
@ -1,3 +1,43 @@
|
||||
// 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
|
||||
if (isSplash) {
|
||||
splashPostfix = '-splash';
|
||||
}
|
||||
|
||||
var width = getValue('size-width' + splashPostfix);
|
||||
var height = getValue('size-height' + splashPostfix);
|
||||
|
||||
// If I'm creating from the splash screen, I use the splashMode variable
|
||||
var mode = isSplash ? splashMode : getValue('editor-mode');
|
||||
|
||||
newPixel(width, height, mode);
|
||||
|
||||
// If I'm not creating from the splash page, then this is not the first project I've created
|
||||
if (!isSplash)
|
||||
document.getElementById('new-pixel-warning').style.display = 'block';
|
||||
|
||||
//get selected palette name
|
||||
var selectedPalette = getText('palette-button' + splashPostfix);
|
||||
if (selectedPalette == 'Choose a palette...')
|
||||
selectedPalette = 'none';
|
||||
|
||||
//track google event
|
||||
ga('send', 'event', 'Pixel Editor New', selectedPalette, width+'/'+height); /*global ga*/
|
||||
|
||||
|
||||
//reset new form
|
||||
setValue('size-width', 64);
|
||||
setValue('size-height', 64);
|
||||
setValue("editor-mode", 'Advanced')
|
||||
|
||||
setText('editor-mode-button', 'Choose a mode...');
|
||||
setText('palette-button', 'Choose a palette...');
|
||||
setText('preset-button', 'Choose a preset...');
|
||||
}
|
||||
|
||||
/** Triggered when the "Create" button in the new pixel dialogue is pressed
|
||||
*
|
||||
*/
|
||||
@ -29,3 +69,35 @@ on('click', 'create-button', function (){
|
||||
setText('palette-button', 'Choose a palette...');
|
||||
setText('preset-button', 'Choose a preset...');
|
||||
});
|
||||
|
||||
/** Triggered when the "Create" button in the new pixel dialogue is pressed
|
||||
*
|
||||
*/
|
||||
on('click', 'create-button-splash', function (){
|
||||
// Getting the values of the form
|
||||
var width = getValue('size-width-splash');
|
||||
var height = getValue('size-height-splash');
|
||||
var mode = 'basic';
|
||||
|
||||
// Creating a new pixel with those properties
|
||||
newPixel(width, height, mode);
|
||||
document.getElementById('new-pixel-warning').style.display = 'block';
|
||||
|
||||
//get selected palette name
|
||||
/*var selectedPalette = getText('palette-button');
|
||||
if (selectedPalette == 'Choose a palette...') */
|
||||
selectedPalette = 'none';
|
||||
|
||||
//track google event
|
||||
ga('send', 'event', 'Pixel Editor New', selectedPalette, width+'/'+height); /*global ga*/
|
||||
|
||||
|
||||
//reset new form
|
||||
setValue('size-width-splash', 64);
|
||||
setValue('size-height-splash', 64);
|
||||
/*setValue("editor-mode", 'Advanced')
|
||||
|
||||
setText('editor-mode-button', 'Choose a mode...');
|
||||
setText('palette-button', 'Choose a palette...');
|
||||
setText('preset-button', 'Choose a preset...');*/
|
||||
});
|
||||
|
||||
@ -1,40 +1,62 @@
|
||||
const { on } = require("gulp");
|
||||
|
||||
//populate palettes list in new pixel menu
|
||||
Object.keys(palettes).forEach(function(paletteName,index) {
|
||||
|
||||
var palettesMenu = document.getElementById('palette-menu');
|
||||
var splashPalettes = document.getElementById('palette-menu-splash');
|
||||
|
||||
//create button
|
||||
var button = document.createElement('button');
|
||||
button.appendChild(document.createTextNode(paletteName));
|
||||
|
||||
//insert new element
|
||||
palettesMenu.appendChild(button);
|
||||
|
||||
//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';
|
||||
document.getElementById('no-palette-button-splash').style.display = 'block';
|
||||
}
|
||||
|
||||
on('click', button, function() {
|
||||
var buttonEvent = function() {
|
||||
|
||||
//hide the dropdown menu
|
||||
deselect('palette-menu');
|
||||
deselect('palette-button');
|
||||
deselect('palette-menu-splash');
|
||||
deselect('palette-button-splash');
|
||||
|
||||
//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);
|
||||
});
|
||||
setText('palette-button-splash', paletteName);
|
||||
};
|
||||
|
||||
on('click', button, buttonEvent);
|
||||
|
||||
//insert new element
|
||||
palettesMenu.appendChild(button);
|
||||
|
||||
// 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);
|
||||
});
|
||||
|
||||
//select no palette
|
||||
on('click', 'no-palette-button', 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
|
||||
@ -43,13 +65,20 @@ on('click', 'load-palette-button', function () {
|
||||
});
|
||||
|
||||
|
||||
|
||||
on('click', 'palette-button', function (e){
|
||||
toggle('palette-button');
|
||||
toggle('palette-menu');
|
||||
|
||||
deselect('preset-button');
|
||||
deselect('preset-menu');
|
||||
|
||||
// Splash version
|
||||
toggle('palette-button-splash');
|
||||
toggle('palette-menu-splash');
|
||||
|
||||
deselect('preset-button-splash');
|
||||
deselect('preset-menu-splash');
|
||||
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
@ -59,4 +88,10 @@ on('click', 'new-pixel', function (){
|
||||
deselect('preset-menu');
|
||||
deselect('palette-button');
|
||||
deselect('palette-menu');
|
||||
|
||||
// Splash version
|
||||
deselect('palette-button-splash');
|
||||
deselect('palette-menu-splash');
|
||||
});
|
||||
|
||||
// ISSUE: use the same functions for the splash menu
|
||||
@ -246,9 +246,9 @@
|
||||
<h2>Size</h2>
|
||||
<input id="size-width" value="{{#if width}}{{width}}{{else}}64{{/if}}" autocomplete="off" />{{svg "x.svg" width="16" height="16" class="dimentions-x"}}<input id="size-height" value="{{#if height}}{{height}}{{else}}64{{/if}}" autocomplete="off" />
|
||||
<h2>Palette</h2>
|
||||
<!--<button id="palette-button" class="dropdown-button">Choose a palette...</button>
|
||||
<button id="palette-button" class="dropdown-button">Choose a palette...</button>
|
||||
<div id="palette-menu" class="dropdown-menu"><button id="no-palette-button">Empty Palette</button><button id="load-palette-button">Load palette...</button></div>
|
||||
-->
|
||||
|
||||
<div id="new-pixel-warning">Creating a new pixel will discard your current one.</div>
|
||||
<div>
|
||||
<button id="create-button" class="default">Create</button>
|
||||
@ -261,7 +261,7 @@
|
||||
<div id="latest-update">
|
||||
<h1>Latest updates</h1>
|
||||
<strong>Hey! Unsettled here.</strong><br><br>
|
||||
Welcome to the features-log.html! From now on, it will show all the
|
||||
Welcome to the latest update page! From now on, it will show all the
|
||||
latest features that have been added to the editor, so that everyone knows what's going on.
|
||||
|
||||
<h2>Canvas and sprite resizing</h2>
|
||||
@ -283,7 +283,7 @@
|
||||
|
||||
<h2>Advanced mode: advanced palette editor</h2>
|
||||
If you are a proud user of the advanced mode (Edit->Switch to advance mode if you want to experience the thrill),
|
||||
we (and with we I mean I) have great news: right click on a colour to open the old picker, click on the edit
|
||||
we have great news: right click on a colour to open the old picker, click on the edit
|
||||
colour button if you want to try out the new palette editor. In it, you'll find:
|
||||
|
||||
<h2>Advanced mode: advanced colour picker</h2>
|
||||
@ -331,6 +331,33 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="sp-newpixel">
|
||||
<h1>New Custom Pixel</h1>
|
||||
<!-- Editor mode-->
|
||||
<h2>Editor mode</h2>
|
||||
<div class="sp-np-entry" id="sp-mode-palette">
|
||||
<div class="button-menu">
|
||||
<div class="bm-left"><p>Basic</p></div>
|
||||
<div class="sp-interface-selected bm-right"><p>Advanced</p></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Size</h2>
|
||||
<div class="sp-np-entry">
|
||||
<input id="size-width-splash" value="{{#if width}}{{width}}{{else}}64{{/if}}" autocomplete="off" />{{svg "x.svg" width="16" height="16" class="dimentions-x"}}<input id="size-height-splash" value="{{#if height}}{{height}}{{else}}64{{/if}}" autocomplete="off" />
|
||||
</div>
|
||||
|
||||
<h2>Palette</h2>
|
||||
<button id="palette-button-splash" class="dropdown-button">Choose a palette...</button>
|
||||
<div id="palette-menu-splash" class="dropdown-menu"><button id="no-palette-button-splash">Empty Palette</button><button id="load-palette-button">Load palette...</button></div>
|
||||
|
||||
|
||||
<div id="new-pixel-warning">Creating a new pixel will discard your current one.</div>
|
||||
<div class="sp-np-entry">
|
||||
<button id="create-button-splash" class="default">Create</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id = "sp-quickstart-container">
|
||||
<div id="sp-quickstart-title">
|
||||
Quickstart
|
||||
@ -341,33 +368,12 @@
|
||||
<div class="sp-template"><p><span>New</span> Gameboy</p></div>
|
||||
<div class="sp-template"><p><span>New</span> C64</p></div>
|
||||
<div class="sp-template"><p><span>New</span> Pico8</p></div>
|
||||
<div class="sp-template"><p><span>New</span> 16x16</p></div>
|
||||
<div class="sp-template"><p><span>New</span> 32x32</p></div>
|
||||
<div class="sp-template"><p><span>New</span> 64x64</p></div>
|
||||
<div class="sp-template"><p><span>New</span> 128x128</p></div>
|
||||
<div class="sp-template"><p><span>New</span> 256x256</p></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="sp-newpixel">
|
||||
<h1>New Custom Pixel</h1>
|
||||
<!-- Editor mode-->
|
||||
<h2>Editor mode</h2>
|
||||
<div id="sp-mode-palette">
|
||||
<div class="button-menu">
|
||||
<div class="bm-left"><p>Basic</p></div>
|
||||
<div class="sp-interface-selected bm-right"><p>Advanced</p></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Size</h2>
|
||||
<input id="size-width" value="{{#if width}}{{width}}{{else}}64{{/if}}" autocomplete="off" />{{svg "x.svg" width="16" height="16" class="dimentions-x"}}<input id="size-height" value="{{#if height}}{{height}}{{else}}64{{/if}}" autocomplete="off" />
|
||||
<h2>Palette</h2>
|
||||
<button id="palette-button" class="dropdown-button">Choose a palette...</button>
|
||||
<div id="palette-menu" class="dropdown-menu"><button id="no-palette-button">Empty Palette</button><button id="load-palette-button">Load palette...</button></div>
|
||||
|
||||
<div id="new-pixel-warning">Creating a new pixel will discard your current one.</div>
|
||||
<div>
|
||||
<button id="create-button" class="default">Create</button>
|
||||
<div class="sp-template"><p><span>New</span> 512x512</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user