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 branch 'master' into master

Browse Source
This commit is contained in:
Lospec 2020-03-07 17:52:45 -05:00 committed by GitHub
commit 7c29ba2d35
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 96 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
_ext/sass/_colors.scss
View File

@ -1,6 +1,8 @@
$base-color: #332f35; $base-color: #332f35;
$shop: #b63831; $shop: #b63831;
$red: #e3474a; $red: #e3474a;
$orange: #df7c25;
$green: #70a630;
$palettes: ( $palettes: (
base: ( base: (
@ -28,9 +30,13 @@ $palettes: (
background: ( background: (
default: darken($base-color, 3%), default: darken($base-color, 3%),
hover: darken($base-color, 1.5%), hover: darken($base-color, 1.5%),
highlight: lighten($base-color, 3%),
highlight-hover: lighten($base-color, 5%),
), ),
foreground: ( foreground: (
default: lighten($base-color, 50%), default: lighten($base-color, 50%),
symbol: lighten($base-color, 8%),
text: lighten($base-color, 50%),
hover: lighten($base-color, 100%), hover: lighten($base-color, 100%),
) )
), ),
@ -48,11 +54,16 @@ $palettes: (
background: ( background: (
default: lighten($base-color, 10%), default: lighten($base-color, 10%),
hover: lighten($base-color, 15%), hover: lighten($base-color, 15%),
weak: lighten($base-color, 5%),
), ),
foreground: ( foreground: (
default: lighten($base-color, 80%), default: lighten($base-color, 50%),
dropdown: lighten($base-color, 50%), dropdown: lighten($base-color, 50%),
text: lighten($base-color, 100%), text: lighten($base-color, 60%),
symbol: lighten($base-color, 50%),
indent: lighten($base-color, 5%),
weak: lighten($base-color, 25%),
hover: lighten($base-color, 75%),
) )
), ),
selectedTool: ( selectedTool: (
@ -81,6 +92,7 @@ $palettes: (
), ),
foreground: ( foreground: (
default: #fff, default: #fff,
text: lighten($base-color, 40%),
symbol: lighten($base-color, 5%), symbol: lighten($base-color, 5%),
symbol-hover: lighten($base-color, 20%), symbol-hover: lighten($base-color, 20%),
weak: lighten($base-color, 20%), weak: lighten($base-color, 20%),
@ -102,9 +114,19 @@ $palettes: (
button-hover: lighten($base-color, 70%), button-hover: lighten($base-color, 70%),
) )
), ),
indent-darker: (
background: (
default: darken($base-color, 8%),
),
foreground: (
default: lighten($base-color, 15%),
)
),
footer: ( footer: (
background: ( background: (
default: darken($base-color, 9%), default: darken($base-color, 9%),
hover: darken($base-color, 2%),
), ),
foreground: ( foreground: (
default: lighten($base-color, 20%), default: lighten($base-color, 20%),

32
css/pixel-editor.scss
View File

@ -138,7 +138,7 @@ svg {
float: left; float: left;
height: 100%; height: 100%;
} }
li button { li button, li a {
color: color(menu, foreground); color: color(menu, foreground);
height: 100%; height: 100%;
padding: 17px; padding: 17px;
@ -167,15 +167,21 @@ svg {
padding-bottom: 2px; padding-bottom: 2px;
li { li {
width: 100%; width: 100%;
button { button, a {
width: 100%; width: 100%;
text-align: left; text-align: left;
padding: 8px 32px 8px 16px; padding: 8px 32px 8px 16px;
font-size: 1em;
&:hover { &:hover {
background-color: color(menu, background, hover); background-color: color(menu, background, hover);
color: color(menu, foreground, hover); color: color(menu, foreground, hover);
} }
} }
a {
display: block;
text-decoration: none;
box-sizing: border-box;
}
} }
} }
.disabled { .disabled {
@ -226,7 +232,7 @@ svg {
li { li {
width: 48px; width: 48px;
flex-basis: 48px; flex-basis: 48px;
&:not(.noshrink) { &:not(.noshrink) {
flex-grow: 1; flex-grow: 1;
} }
@ -234,7 +240,7 @@ svg {
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
} }
} }
} }
//added when the color is a duplicate of another //added when the color is a duplicate of another
@ -327,7 +333,7 @@ svg {
#add-color-button { #add-color-button {
background: color(base); background: color(base);
path { path {
fill: #6f6873; fill: #6f6873;
} }
@ -498,7 +504,7 @@ svg {
border-bottom: dotted 1px color(base, foreground, text); border-bottom: dotted 1px color(base, foreground, text);
} }
} }
.close-button { .close-button {
width: 32px; width: 32px;
height: 32px; height: 32px;
@ -522,7 +528,7 @@ svg {
} }
} }
} }
button.default { button.default {
float: right; float: right;
background: color(button); background: color(button);
@ -536,7 +542,7 @@ svg {
background: color(button, background, hover); background: color(button, background, hover);
} }
} }
input { input {
background: color(indent); background: color(indent);
border: none; border: none;
@ -547,7 +553,7 @@ svg {
width: 60px; width: 60px;
text-align: center; text-align: center;
} }
.dropdown-button { .dropdown-button {
background: color(button) url('/pixel-editor/dropdown-arrow.png') right center no-repeat; background: color(button) url('/pixel-editor/dropdown-arrow.png') right center no-repeat;
border: none; border: none;
@ -565,7 +571,7 @@ svg {
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
} }
} }
.dropdown-menu { .dropdown-menu {
background: color(button); background: color(button);
border: none; border: none;
@ -581,7 +587,7 @@ svg {
&.selected { &.selected {
display: block; display: block;
} }
button { button {
background: color(button); background: color(button);
border: none; border: none;
@ -707,7 +713,7 @@ svg {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
div { div {
width: 400px; width: 400px;
background-color: color(base); background-color: color(base);
@ -718,7 +724,7 @@ svg {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
margin: -120px 0 0 -220px; margin: -120px 0 0 -220px;
} }
} }

80
js/_fileMenu.js
View File

@ -2,41 +2,41 @@ var mainMenuItems = document.getElementById("main-menu").children;
//for each button in main menu (starting at 1 to avoid logo) //for each button in main menu (starting at 1 to avoid logo)
for (var i = 1; i < mainMenuItems.length; i++) { for (var i = 1; i < mainMenuItems.length; i++) {
//get the button that's in the list item //get the button that's in the list item
var menuItem = mainMenuItems[i]; var menuItem = mainMenuItems[i];
var menuButton = menuItem.children[0]; var menuButton = menuItem.children[0];
console.log(mainMenuItems) console.log(mainMenuItems)
//when you click a main menu items button //when you click a main menu items button
on('click', menuButton, function (e, button) { on('click', menuButton, function (e, button) {
console.log('parent ', button.parentElement) console.log('parent ', button.parentElement)
select(button.parentElement); select(button.parentElement);
}); });
var subMenu = menuItem.children[1]; var subMenu = menuItem.children[1];
var subMenuItems = subMenu.children; var subMenuItems = subMenu.children;
//when you click an item within a menu button //when you click an item within a menu button
for (var j = 0; j < subMenuItems.length; j++) { for (var j = 0; j < subMenuItems.length; j++) {
var subMenuItem = subMenuItems[j]; var subMenuItem = subMenuItems[j];
var subMenuButton = subMenuItem.children[0]; var subMenuButton = subMenuItem.children[0];
subMenuButton.addEventListener("click", function () { subMenuButton.addEventListener("click", function (e) {
switch(this.textContent) { switch(this.textContent) {
//File Menu //File Menu
case 'New': case 'New':
showDialogue('new-pixel'); showDialogue('new-pixel');
break; break;
case 'Open': case 'Open':
//if a document exists //if a document exists
if (documentCreated) { if (documentCreated) {
//check if the user wants to overwrite //check if the user wants to overwrite
@ -47,12 +47,12 @@ for (var i = 1; i < mainMenuItems.length; i++) {
else else
//open file selection dialog //open file selection dialog
document.getElementById("open-image-browse-holder").click(); document.getElementById("open-image-browse-holder").click();
break; break;
case 'Save as...': case 'Save as...':
if (documentCreated) { if (documentCreated) {
//create name //create name
var selectedPalette = getText('palette-button'); var selectedPalette = getText('palette-button');
if (selectedPalette != 'Choose a palette...'){ if (selectedPalette != 'Choose a palette...'){
@ -62,38 +62,34 @@ for (var i = 1; i < mainMenuItems.length; i++) {
var fileName = 'pixel-'+canvasSize[0]+'x'+canvasSize[1]+'.png'; var fileName = 'pixel-'+canvasSize[0]+'x'+canvasSize[1]+'.png';
selectedPalette = 'none'; selectedPalette = 'none';
} }
//set download link //set download link
var linkHolder = document.getElementById("save-image-link-holder"); var linkHolder = document.getElementById("save-image-link-holder");
linkHolder.href = canvas.toDataURL(); linkHolder.href = canvas.toDataURL();
linkHolder.download = fileName; linkHolder.download = fileName;
linkHolder.click(); linkHolder.click();
//track google event //track google event
ga('send', 'event', 'Pixel Editor Save', selectedPalette, canvasSize[0]+'/'+canvasSize[1]); /*global ga*/ ga('send', 'event', 'Pixel Editor Save', selectedPalette, canvasSize[0]+'/'+canvasSize[1]); /*global ga*/
} }
break; break;
case 'Exit': case 'Exit':
console.log('exit')
//if a document exists, make sure they want to delete it //if a document exists, make sure they want to delete it
if (documentCreated && confirm('Exiting will discard your current pixel. Are you sure you want to do that?')) { if (documentCreated) {
//skip onbeforeunload prompt //ask user if they want to leave
window.onbeforeunload = null; if (confirm('Exiting will discard your current pixel. Are you sure you want to do that?'))
//skip onbeforeunload prompt
//go back to main site window.onbeforeunload = null;
window.location.href = "https://lospec.com/pixel-editor"; else
e.preventDefault();
} }
else {
//skip onbeforeunload prompt
window.onbeforeunload = null;
//go back to main site
window.location.href = "https://lospec.com/pixel-editor";
}
break; break;
//Edit Menu //Edit Menu
case 'Undo': case 'Undo':
@ -102,17 +98,17 @@ for (var i = 1; i < mainMenuItems.length; i++) {
case 'Redo': case 'Redo':
redo(); redo();
break; break;
//Palette Menu //Palette Menu
case 'Add color': case 'Add color':
addColor('#eeeeee'); addColor('#eeeeee');
break; break;
//Help Menu //Help Menu
case 'Settings': case 'Settings':
//fill form with current settings values //fill form with current settings values
setValue('setting-numberOfHistoryStates', settings.numberOfHistoryStates); setValue('setting-numberOfHistoryStates', settings.numberOfHistoryStates);
showDialogue('settings'); showDialogue('settings');
break; break;
//Help Menu //Help Menu
@ -126,7 +122,7 @@ for (var i = 1; i < mainMenuItems.length; i++) {
showDialogue('changelog'); showDialogue('changelog');
break; break;
} }
closeMenu(); closeMenu();
}); });
} }
@ -137,4 +133,4 @@ function closeMenu () {
for (var i = 0; i < mainMenuItems.length; i++) { for (var i = 0; i < mainMenuItems.length; i++) {
deselect(mainMenuItems[i]); deselect(mainMenuItems[i]);
} }
} }

30
views/pixel-editor.hbs
View File

@ -11,7 +11,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>{{title}}</title> <title>{{title}}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,700,900" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,700,900" rel="stylesheet">
<link rel='stylesheet' href='/pixel-editor/pixel-editor.css' /> <link rel='stylesheet' href='/pixel-editor/pixel-editor.css' />
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW"> <meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
{{{google-analytics}}} {{{google-analytics}}}
@ -19,7 +19,7 @@
</head> </head>
<body oncontextmenu="return false;"> <body oncontextmenu="return false;">
<div id="compatibility-warning"> <div id="compatibility-warning">
<div><div> <div><div>
<p><strong>Warning: a modern, desktop, web browser is required to use this tool.</strong></p> <p><strong>Warning: a modern, desktop, web browser is required to use this tool.</strong></p>
@ -28,7 +28,7 @@
</div></div> </div></div>
</div> </div>
<script src="/javascripts/checkCompatibilityPixelEditor.js"></script> <script src="/javascripts/checkCompatibilityPixelEditor.js"></script>
<div class="preload"> <div class="preload">
<img src="/pixel-editor/dropdown-arrow.png" /> <img src="/pixel-editor/dropdown-arrow.png" />
<img src="/pixel-editor/dropdown-arrow-hover.png" /> <img src="/pixel-editor/dropdown-arrow-hover.png" />
@ -51,7 +51,7 @@
<li><button>New</button></li> <li><button>New</button></li>
<li><button>Open</button></li> <li><button>Open</button></li>
<li><button id="save-as-button" class="disabled">Save as...</button></li> <li><button id="save-as-button" class="disabled">Save as...</button></li>
<li><button>Exit</button></li> <li><a href="/pixel-editor">Exit</a></li>
</ul> </ul>
</li> </li>
<li> <li>
@ -107,12 +107,12 @@
</ul> </ul>
<ul id="colors-menu"> <ul id="colors-menu">
{{! {{!
<li class="noshrink"><button id="current-color" class="jscolor {valueElement: 'current-color-value', styleElement: 'current-color-preview', onFineChange:'setColor(this)', width:151, position: 'left', padding:0, <li class="noshrink"><button id="current-color" class="jscolor {valueElement: 'current-color-value', styleElement: 'current-color-preview', onFineChange:'setColor(this)', width:151, position: 'left', padding:0,
borderWidth:14, borderColor: '#332f35',backgroundColor: '#332f35', insetColor:'transparent'}"><div id="current-color-preview"></div></button><input id="current-color-value" class="color-value" value="#000000" autocomplete="off" /></li> borderWidth:14, borderColor: '#332f35',backgroundColor: '#332f35', insetColor:'transparent'}"><div id="current-color-preview"></div></button><input id="current-color-value" class="color-value" value="#000000" autocomplete="off" /></li>
}} }}
<li class="noshrink"><button title="Add Current Color To Palette" id="add-color-button">{{svg "./plus.svg" width="30" height="30"}}</button></li> <li class="noshrink"><button title="Add Current Color To Palette" id="add-color-button">{{svg "./plus.svg" width="30" height="30"}}</button></li>
</ul> </ul>
<div id="eyedropper-preview"></div> <div id="eyedropper-preview"></div>
@ -138,16 +138,16 @@
<div id="duplicate-color-warning" title="Color is a duplicate of another in palette">{{svg "warning.svg" width="14" height="12" }}</div> <div id="duplicate-color-warning" title="Color is a duplicate of another in palette">{{svg "warning.svg" width="14" height="12" }}</div>
<button class="delete-color-button">{{svg "trash.svg" width="20" height="20" }}</button> <button class="delete-color-button">{{svg "trash.svg" width="20" height="20" }}</button>
</div> </div>
<div class="color-edit-button"> <div class="color-edit-button">
{{svg "adjust.svg" width="20" height="20" }} {{svg "adjust.svg" width="20" height="20" }}
</div> </div>
<div id="pop-up-container"> <div id="pop-up-container">
<div id="new-pixel"> <div id="new-pixel">
<button class="close-button">{{svg "x.svg" width="20" height="20"}}</button> <button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
<h1>New Pixel</h1> <h1>New Pixel</h1>
<h2>Preset</h2> <h2>Preset</h2>
<button id="preset-button" class="dropdown-button">Choose a preset...</button> <button id="preset-button" class="dropdown-button">Choose a preset...</button>
<div id="preset-menu" class="dropdown-menu"></div> <div id="preset-menu" class="dropdown-menu"></div>
@ -221,11 +221,11 @@
<div id="settings"> <div id="settings">
<button class="close-button">{{svg "x.svg" width="20" height="20"}}</button> <button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
<h1>Settings</h1> <h1>Settings</h1>
<div id="settings-container"> <div id="settings-container">
<label for="setting-numberOfHistoryStates">Number of History States</label> <input id="setting-numberOfHistoryStates" value="20" autocomplete="off" /> <label for="setting-numberOfHistoryStates">Number of History States</label> <input id="setting-numberOfHistoryStates" value="20" autocomplete="off" />
</div> </div>
<p id="cookies-disabled-warning">Your browsers cookies are disabled, settings will be lost upon closing this page.</p> <p id="cookies-disabled-warning">Your browsers cookies are disabled, settings will be lost upon closing this page.</p>
<div> <div>
@ -238,12 +238,12 @@
<script> <script>
palettes = { {{#palettes}} palettes = { {{#palettes}}
'{{name}}': { '{{title}}': {
colors: '{{colors}}'.split(',') colors: '{{colors}}'.split(',')
}, },
{{/palettes}} {{/palettes}}
{{#specifiedPalette}} {{#specifiedPalette}}
'{{name}}': { '{{title}}': {
colors: '{{colors}}'.split(','), colors: '{{colors}}'.split(','),
specified: true specified: true
} }
@ -254,7 +254,7 @@
{{else}} {{else}}
var specifiedDimentions = false; var specifiedDimentions = false;
{{/if}} {{/if}}
{{#specifiedPalette}} {{#specifiedPalette}}
var keepUrl = true; var keepUrl = true;
{{/specifiedPalette}} {{/specifiedPalette}}