mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
Updated
This commit is contained in:
jdescottes
parent
9bdd17d456
commit
3f130c08cb
10
build/piskel-packaged-min.js
vendored
10
build/piskel-packaged-min.js
vendored
File diff suppressed because one or more lines are too long
@ -13774,6 +13774,8 @@ var Constants = {
|
||||
DEFAULT_PEN_COLOR : '#000000',
|
||||
TRANSPARENT_COLOR : 'rgba(0, 0, 0, 0)',
|
||||
|
||||
NO_PALETTE_ID : '__no-palette',
|
||||
|
||||
// Used for Spectrum input
|
||||
PREFERRED_COLOR_FORMAT : 'rgb',
|
||||
|
||||
@ -13903,7 +13905,7 @@ if (typeof Function.prototype.bind !== "function") {
|
||||
if (r > 255 || g > 255 || b > 255) {
|
||||
throw "Invalid color component";
|
||||
}
|
||||
|
||||
|
||||
return ((r << 16) | (g << 8) | b).toString(16);
|
||||
};
|
||||
|
||||
@ -14519,10 +14521,12 @@ if (typeof Function.prototype.bind !== "function") {
|
||||
ns.UserSettings = {
|
||||
GRID_WIDTH : 'GRID_WIDTH',
|
||||
CANVAS_BACKGROUND : 'CANVAS_BACKGROUND',
|
||||
SELECTED_PALETTE : 'SELECTED_PALETTE',
|
||||
|
||||
KEY_TO_DEFAULT_VALUE_MAP_ : {
|
||||
'GRID_WIDTH' : 0,
|
||||
'CANVAS_BACKGROUND' : 'medium-canvas-background'
|
||||
'CANVAS_BACKGROUND' : 'lowcont-dark-canvas-background',
|
||||
'SELECTED_PALETTE' : Constants.NO_PALETTE_ID
|
||||
},
|
||||
|
||||
/**
|
||||
@ -17163,8 +17167,6 @@ if (typeof Function.prototype.bind !== "function") {
|
||||
;(function () {
|
||||
var ns = $.namespace('pskl.controller');
|
||||
|
||||
var NO_PALETTE_ID = '__no-palette';
|
||||
|
||||
ns.PalettesListController = function () {
|
||||
|
||||
};
|
||||
@ -17172,8 +17174,8 @@ if (typeof Function.prototype.bind !== "function") {
|
||||
ns.PalettesListController.prototype.init = function () {
|
||||
this.paletteColorTemplate_ = pskl.utils.Template.get('palette-color-template');
|
||||
this.colorListContainer_ = document.querySelector('.palettes-list-colors');
|
||||
this.colorPaletteSelect_ = document.querySelector('.palette-picker');
|
||||
this.paletteListOptGroup_ = document.querySelector('.palette-picker-group');
|
||||
this.colorPaletteSelect_ = document.querySelector('.palettes-list-select');
|
||||
this.paletteListOptGroup_ = document.querySelector('.palettes-list-select-group');
|
||||
|
||||
this.colorPaletteSelect_.addEventListener('change', this.onPaletteSelected_.bind(this));
|
||||
this.colorListContainer_.addEventListener('mouseup', this.onColorContainerMouseup.bind(this));
|
||||
@ -17184,12 +17186,13 @@ if (typeof Function.prototype.bind !== "function") {
|
||||
$.subscribe(Events.SECONDARY_COLOR_SELECTED, this.onColorUpdated.bind(this, 'secondary'));
|
||||
|
||||
this.fillPaletteList();
|
||||
this.selectPaletteFromUserSettings();
|
||||
this.fillColorListContainer();
|
||||
};
|
||||
|
||||
ns.PalettesListController.prototype.fillPaletteList = function () {
|
||||
var palettes = [{
|
||||
id : NO_PALETTE_ID,
|
||||
id : Constants.NO_PALETTE_ID,
|
||||
name : 'No palette'
|
||||
}];
|
||||
palettes = palettes.concat(this.retrievePalettes());
|
||||
@ -17220,17 +17223,28 @@ if (typeof Function.prototype.bind !== "function") {
|
||||
return palette;
|
||||
};
|
||||
|
||||
ns.PalettesListController.prototype.selectPalette = function (paletteId) {
|
||||
this.colorPaletteSelect_.value = paletteId;
|
||||
};
|
||||
|
||||
ns.PalettesListController.prototype.selectPaletteFromUserSettings = function () {
|
||||
this.selectPalette(pskl.UserSettings.get(pskl.UserSettings.SELECTED_PALETTE));
|
||||
};
|
||||
|
||||
ns.PalettesListController.prototype.onPaletteSelected_ = function (evt) {
|
||||
var paletteId = this.colorPaletteSelect_.value;
|
||||
if (paletteId === '__manage-palettes') {
|
||||
console.log('DISPLAY DIALOG');
|
||||
$.publish(Events.DIALOG_DISPLAY, 'manage-palettes');
|
||||
this.colorPaletteSelect_.value = NO_PALETTE_ID;
|
||||
this.selectPaletteFromUserSettings();
|
||||
} else {
|
||||
pskl.UserSettings.set(pskl.UserSettings.SELECTED_PALETTE, paletteId);
|
||||
}
|
||||
|
||||
|
||||
this.fillColorListContainer();
|
||||
};
|
||||
|
||||
|
||||
|
||||
ns.PalettesListController.prototype.onColorContainerContextMenu = function (event) {
|
||||
event.preventDefault();
|
||||
};
|
||||
@ -17271,6 +17285,8 @@ if (typeof Function.prototype.bind !== "function") {
|
||||
|
||||
ns.PalettesListController.prototype.onPaletteListUpdated = function () {
|
||||
this.fillPaletteList();
|
||||
this.selectPaletteFromUserSettings();
|
||||
this.fillColorListContainer();
|
||||
};
|
||||
|
||||
ns.PalettesListController.prototype.getPaletteById = function (paletteId, palettes) {
|
||||
@ -18147,6 +18163,10 @@ if (typeof Function.prototype.bind !== "function") {
|
||||
}
|
||||
};
|
||||
|
||||
ns.PaletteManagerController.prototype.destroy = function () {
|
||||
this.destroySpectrumPickers();
|
||||
};
|
||||
|
||||
ns.PaletteManagerController.prototype.closeDialog = function () {
|
||||
$.publish(Events.DIALOG_HIDE);
|
||||
};
|
||||
@ -18180,6 +18200,9 @@ if (typeof Function.prototype.bind !== "function") {
|
||||
};
|
||||
|
||||
ns.PaletteManagerController.prototype.refreshPaletteDetails = function () {
|
||||
// Destroy and disconnect events
|
||||
this.destroySpectrumPickers();
|
||||
|
||||
this.createPaletteHeadMarkup();
|
||||
this.createPaletteBodyMarkup();
|
||||
this.initPaletteDetailsEvents();
|
||||
@ -18275,7 +18298,7 @@ if (typeof Function.prototype.bind !== "function") {
|
||||
} else if (target.classList.contains('palette-manager-palette-button')) {
|
||||
var action = target.dataset.action;
|
||||
if (action === 'save') {
|
||||
this.savePalette(this.getSelectedPalette().id);
|
||||
this.savePaletteAndRedraw(this.getSelectedPalette().id);
|
||||
} else if (action === 'revert') {
|
||||
this.revertChanges();
|
||||
} else if (action === 'delete') {
|
||||
@ -18284,9 +18307,13 @@ if (typeof Function.prototype.bind !== "function") {
|
||||
}
|
||||
};
|
||||
|
||||
ns.PaletteManagerController.prototype.getSpectrumSelector_ = function () {
|
||||
return ':not(.' + NEW_COLOR_CLASS + ')>.palette-manager-color-square';
|
||||
};
|
||||
|
||||
ns.PaletteManagerController.prototype.initPaletteCardsSpectrum = function () {
|
||||
var oSelf = this;
|
||||
var colorSquares = $(':not(.' + NEW_COLOR_CLASS + ')>.palette-manager-color-square');
|
||||
var colorSquares = $(this.getSpectrumSelector_());
|
||||
colorSquares.spectrum({
|
||||
clickoutFiresChange : true,
|
||||
showInput: true,
|
||||
@ -18306,6 +18333,13 @@ if (typeof Function.prototype.bind !== "function") {
|
||||
});
|
||||
};
|
||||
|
||||
ns.PaletteManagerController.prototype.destroySpectrumPickers = function () {
|
||||
var sp = $(this.getSpectrumSelector_());
|
||||
if (sp) {
|
||||
sp.spectrum("destroy");
|
||||
}
|
||||
};
|
||||
|
||||
ns.PaletteManagerController.prototype.updateColorInSelectedPalette = function (colorId, color) {
|
||||
var palette = this.getSelectedPalette();
|
||||
palette.colors.splice(colorId, 1, '#' + (color.toHex().toUpperCase()));
|
||||
@ -18487,9 +18521,14 @@ if (typeof Function.prototype.bind !== "function") {
|
||||
var config = dialogs[dialogId];
|
||||
if (config) {
|
||||
this.dialogContainer_.innerHTML = pskl.utils.Template.get(config.template);
|
||||
(new config.controller(this.piskelController)).init();
|
||||
var controller = new config.controller(this.piskelController);
|
||||
controller.init();
|
||||
|
||||
this.showDialogWrapper_();
|
||||
this.currentDialog_ = dialogId;
|
||||
this.currentDialog_ = {
|
||||
id : dialogId,
|
||||
controller : controller
|
||||
};
|
||||
} else {
|
||||
console.error('Could not find dialog configuration for dialogId : ' + dialogId);
|
||||
}
|
||||
@ -18502,17 +18541,22 @@ if (typeof Function.prototype.bind !== "function") {
|
||||
|
||||
ns.DialogsController.prototype.showDialogWrapper_ = function () {
|
||||
pskl.app.shortcutService.addShortcut('ESC', this.hideDialog.bind(this));
|
||||
this.dialogWrapper_.style.display = 'block';
|
||||
this.dialogWrapper_.classList.add('show');
|
||||
};
|
||||
|
||||
ns.DialogsController.prototype.hideDialog = function () {
|
||||
var currentDialog = this.currentDialog_;
|
||||
if (currentDialog) {
|
||||
currentDialog.controller.destroy();
|
||||
}
|
||||
|
||||
this.hideDialogWrapper_();
|
||||
this.currentDialog_ = null;
|
||||
};
|
||||
|
||||
ns.DialogsController.prototype.hideDialogWrapper_ = function () {
|
||||
pskl.app.shortcutService.removeShortcut('ESC');
|
||||
this.dialogWrapper_.style.display = 'none';
|
||||
this.dialogWrapper_.classList.remove('show');
|
||||
};
|
||||
|
||||
ns.DialogsController.prototype.isDisplayed = function () {
|
||||
|
||||
@ -1018,19 +1018,34 @@ body {
|
||||
left: 0;
|
||||
|
||||
padding: 50px 150px;
|
||||
overflow: hidden;
|
||||
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing : border-box;
|
||||
|
||||
background-color: rgba(0,0,0,0.8);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
|
||||
transition: opacity 0.5s;
|
||||
|
||||
|
||||
color: white;
|
||||
background: rgba(0,0,0,0.5);
|
||||
display : none;
|
||||
}
|
||||
|
||||
#dialog-container-wrapper.show {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
|
||||
#dialog-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
margin-top: -1500px;
|
||||
transition:margin-top 0.5s;
|
||||
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing : border-box;
|
||||
|
||||
@ -1038,6 +1053,12 @@ body {
|
||||
background: rgba(0,0,0,0.9);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.show #dialog-container {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
.palette-manager-wrapper {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
@ -1342,6 +1363,12 @@ body {
|
||||
.palettes-list-container {
|
||||
}
|
||||
|
||||
.palettes-list-select {
|
||||
float:right;
|
||||
max-width:90px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.palettes-title {
|
||||
background-size: 22px;
|
||||
background-repeat: no-repeat;
|
||||
@ -1350,6 +1377,7 @@ body {
|
||||
|
||||
.palettes-list-colors {
|
||||
overflow:hidden;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.palettes-list-color {
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
<div class="toolbox-container palettes-list-container">
|
||||
<h3 class="toolbox-title palettes-title" style="overflow:hidden">
|
||||
<span style="line-height:24px ">Palettes</span>
|
||||
<select class="palette-picker" style="float:right; max-width:90px;">
|
||||
<optgroup class="palette-picker-group" label="Available palettes">
|
||||
<option value="__no-palette">No palette</option>
|
||||
<select class="palettes-list-select">
|
||||
<optgroup class="palettes-list-select-group" label="Available palettes">
|
||||
</optgroup>
|
||||
<optgroup label="Admin">
|
||||
<option value="__manage-palettes">Create and Manage palettes</option>
|
||||
@ -19,7 +18,3 @@
|
||||
<div data-color="{{color}}" style="background:{{color}}"></div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/template" id="no-palette-selected-template">
|
||||
<div class="palette-not-selected">No palette selected</div>
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user