mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity

Feature : Current colors palette

Browse Source 
Created dynamic palette displaying currently used colors.
This palette is now selected by default.

New service UsedColorsService created. Listens to PISKEL_RESET and
TOOL_RELEASED and keeps track of the list of current colors.

Still need to :
- improve sorting of colors
- allow to clone the current color palette as a custom palette
- add proper getter in UsedColorService to get the list of current colors

Also I hardcoded a max-height for the palettes-list as I found no better
way of handling the case of palettes containing many colors.

Maybe should add a limit to the number of colors handled by this automatic
palette.
This commit is contained in:
jdescottes
2014-05-07 00:43:28 +02:00
parent f4108c7dbf
commit 637fa05109
9 changed files with 96 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/js/controller/PalettesListController.js
View File

@ -1,8 +1,9 @@
(function () {
var ns = $.namespace('pskl.controller');
ns.PalettesListController = function () {
ns.PalettesListController = function (paletteController, usedColorService) {
this.usedColorService = usedColorService;
this.paletteController = paletteController;
};
ns.PalettesListController.prototype.init = function () {
@ -16,6 +17,7 @@
this.colorListContainer_.addEventListener('contextmenu', this.onColorContainerContextMenu.bind(this));
$.subscribe(Events.PALETTE_LIST_UPDATED, this.onPaletteListUpdated.bind(this));
$.subscribe(Events.CURRENT_COLORS_UPDATED, this.fillColorListContainer.bind(this));
$.subscribe(Events.PRIMARY_COLOR_SELECTED, this.onColorUpdated.bind(this, 'primary'));
$.subscribe(Events.SECONDARY_COLOR_SELECTED, this.onColorUpdated.bind(this, 'secondary'));
@ -39,15 +41,29 @@
ns.PalettesListController.prototype.fillColorListContainer = function () {
var html = '';
var colors = [];
var palette = this.getSelectedPalette();
if (palette) {
html = palette.colors.map(function (color) {
return pskl.utils.Template.replace(this.paletteColorTemplate_, {color : color});
}.bind(this)).join('');
colors = palette.colors;
} else if (this.colorPaletteSelect_.value === Constants.CURRENT_PALETTE_ID) {
colors = this.usedColorService.currentColors;
}
html = colors.map(function (color) {
return pskl.utils.Template.replace(this.paletteColorTemplate_, {color : color});
}.bind(this)).join('');
this.colorListContainer_.innerHTML = html;
this.onColorUpdated('primary', null, this.paletteController.getPrimaryColor());
this.onColorUpdated('secondary', null, this.paletteController.getSecondaryColor());
var hasScrollbar = colors.length > 20;
if (hasScrollbar && !pskl.utils.UserAgent.isChrome) {
this.colorListContainer_.classList.add('palettes-list-has-scrollbar');
} else {
this.colorListContainer_.classList.remove('palettes-list-has-scrollbar');
}
};
ns.PalettesListController.prototype.getSelectedPalette = function (evt) {
@ -67,7 +83,7 @@
ns.PalettesListController.prototype.onPaletteSelected_ = function (evt) {
var paletteId = this.colorPaletteSelect_.value;
if (paletteId === '__manage-palettes') {
if (paletteId === Constants.PALETTE_MANAGE_ID) {
$.publish(Events.DIALOG_DISPLAY, 'manage-palettes');
this.selectPaletteFromUserSettings();
} else {
@ -112,6 +128,8 @@
this.removeClass_('secondary', '.palettes-list-color');
colorContainer.classList.add('secondary');
colorContainer.classList.remove('primary');
} else {
throw 'No type provided for color update. Expecting "primary" or "secondary"';
}
};