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

Prototypization of PaletteController

Browse Source 
I love new words
This commit is contained in:
Vince 2012-09-16 13:50:40 +02:00
parent b671d46dbf
commit 5b9bc6edb1
2 changed files with 88 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

169
js/controller/PaletteController.js
View File

@ -1,112 +1,113 @@
/* (function () {
* @provide pskl.Palette var ns = $.namespace("pskl.controller");
*
* @require Constants
* @require Events
*/
$.namespace("pskl");
pskl.Palette = (function() { ns.PaletteController = function () {
this.paletteRoot = null;
var paletteRoot, this.paletteColors = [];
paletteColors = []; };
/** /**
* @private * @private
*/ */
var onPickerChange_ = function(evt, isPrimary) { ns.PaletteController.prototype.onPickerChange_ = function(evt, isPrimary) {
var inputPicker = $(evt.target); var inputPicker = $(evt.target);
$.publish(Events.COLOR_SELECTED, [inputPicker.val(), evt.data.isPrimary]); $.publish(Events.COLOR_SELECTED, [inputPicker.val(), evt.data.isPrimary]);
}; };
/** /**
* @private * @private
*/ */
var createPalette_ = function (colors) { ns.PaletteController.prototype.createPalette_ = function (colors) {
// Always adding transparent color // Always adding transparent color
paletteRoot.html('<span class="palette-color transparent-color" data-color="TRANSPARENT" title="Transparent"></span>'); this.paletteRoot.html('<span class="palette-color transparent-color" data-color="TRANSPARENT" title="Transparent"></span>');
for(var color in colors) { for(var color in colors) {
if(color != Constants.TRANSPARENT_COLOR) { if(color != Constants.TRANSPARENT_COLOR) {
addColorToPalette_(color); this.addColorToPalette_(color);
} }
} }
}; };
/** /**
* @private * @private
*/ */
var addColorToPalette_ = function (color) { ns.PaletteController.prototype.addColorToPalette_ = function (color) {
if (paletteColors.indexOf(color) == -1 && color != Constants.TRANSPARENT_COLOR) { if (this.paletteColors.indexOf(color) == -1 && color != Constants.TRANSPARENT_COLOR) {
var colorEl = document.createElement("li"); var colorEl = document.createElement("li");
colorEl.className = "palette-color"; colorEl.className = "palette-color";
colorEl.setAttribute("data-color", color); colorEl.setAttribute("data-color", color);
colorEl.setAttribute("title", color); colorEl.setAttribute("title", color);
colorEl.style.background = color; colorEl.style.background = color;
paletteRoot[0].appendChild(colorEl); this.paletteRoot.append(colorEl);
paletteColors.push(color); this.paletteColors.push(color);
} }
}; };
/** /**
* @private * @private
*/ */
var onPaletteColorClick_ = function (event) { ns.PaletteController.prototype.onPaletteColorClick_ = function (event) {
var selectedColor = $(event.target).data("color"); var selectedColor = $(event.target).data("color");
if (event.which == 1) { // left button if (event.which == 1) { // left button
updateColorPicker(selectedColor, $('#color-picker')); this.updateColorPicker_(selectedColor, $('#color-picker'));
$.publish(Events.COLOR_SELECTED, [selectedColor, true]); $.publish(Events.COLOR_SELECTED, [selectedColor, true]);
} else if (event.which == 3) { // right button } else if (event.which == 3) { // right button
updateColorPicker(selectedColor, $('#secondary-color-picker')); this.updateColorPicker_(selectedColor, $('#secondary-color-picker'));
$.publish(Events.COLOR_SELECTED, [selectedColor, false]); $.publish(Events.COLOR_SELECTED, [selectedColor, false]);
} }
}; };
var updateColorPicker = function (color, colorPicker) { /**
if (color == Constants.TRANSPARENT_COLOR) { * @private
// We can set the current palette color to transparent. */
// You can then combine this transparent color with an advanced ns.PaletteController.prototype.updateColorPicker_ = function (color, colorPicker) {
// tool for customized deletions. if (color == Constants.TRANSPARENT_COLOR) {
// Eg: bucket + transparent: Delete a colored area // We can set the current palette color to transparent.
// Stroke + transparent: hollow out the equivalent of a stroke // You can then combine this transparent color with an advanced
// tool for customized deletions.
// Eg: bucket + transparent: Delete a colored area
// Stroke + transparent: hollow out the equivalent of a stroke
// The colorpicker can't be set to a transparent state. // The colorpicker can't be set to a transparent state.
// We set its background to white and insert the // We set its background to white and insert the
// string "TRANSPARENT" to mimic this state: // string "TRANSPARENT" to mimic this state:
colorPicker[0].color.fromString("#fff"); colorPicker[0].color.fromString("#fff");
colorPicker.val(Constants.TRANSPARENT_COLOR); colorPicker.val(Constants.TRANSPARENT_COLOR);
} else { } else {
colorPicker[0].color.fromString(color); colorPicker[0].color.fromString(color);
} }
}; };
return { /**
init: function(framesheet) { * @public
*/
ns.PaletteController.prototype.init = function(framesheet) {
paletteRoot = $("#palette"); this.paletteRoot = $("#palette");
this.framesheet = framesheet;
// Initialize palette: // Initialize palette:
createPalette_(framesheet.getUsedColors()); this.createPalette_(this.framesheet.getUsedColors());
$.subscribe(Events.FRAMESHEET_RESET, function(evt) { $.subscribe(Events.FRAMESHEET_RESET, $.proxy(function(evt) {
createPalette_(framesheet.getUsedColors()); this.createPalette_(this.framesheet.getUsedColors());
}); }, this));
paletteRoot.mouseup(onPaletteColorClick_); this.paletteRoot.mouseup($.proxy(this.onPaletteColorClick_, this));
$.subscribe(Events.COLOR_SELECTED, function(evt, color) {
addColorToPalette_(color); $.subscribe(Events.COLOR_SELECTED, $.proxy(function(evt, color) {
}); this.addColorToPalette_(color);
}, this));
// Initialize colorpicker: // Initialize colorpickers:
var colorPicker = $('#color-picker'); var colorPicker = $('#color-picker');
colorPicker.val(Constants.DEFAULT_PEN_COLOR); colorPicker.val(Constants.DEFAULT_PEN_COLOR);
colorPicker.change({isPrimary : true}, onPickerChange_); colorPicker.change({isPrimary : true}, $.proxy(this.onPickerChange_, this));
var secondaryColorPicker = $('#secondary-color-picker'); var secondaryColorPicker = $('#secondary-color-picker');
secondaryColorPicker.val(Constants.TRANSPARENT_COLOR); secondaryColorPicker.val(Constants.TRANSPARENT_COLOR);
secondaryColorPicker.change({isPrimary : false}, onPickerChange_); secondaryColorPicker.change({isPrimary : false}, $.proxy(this.onPickerChange_, this));
}
}; };
})(); })();

5
js/piskel.js
View File

@ -71,7 +71,7 @@ $.namespace("pskl");
this.KeyboardEventService = new pskl.service.KeyboardEventService(); this.KeyboardEventService = new pskl.service.KeyboardEventService();
this.KeyboardEventService.init(); this.KeyboardEventService.init();
pskl.NotificationService.init(); pskl.NotificationService.init();
this.localStorageService = new pskl.service.LocalStorageService(frameSheet); this.localStorageService = new pskl.service.LocalStorageService(frameSheet);
this.localStorageService.init(); this.localStorageService.init();
@ -149,7 +149,8 @@ $.namespace("pskl");
var toolController = new pskl.controller.ToolController(); var toolController = new pskl.controller.ToolController();
toolController.init(); toolController.init();
pskl.Palette.init(frameSheet); var paletteController = new pskl.controller.PaletteController();
paletteController.init(frameSheet);
}, },
getFramesheetIdFromUrl : function() { getFramesheetIdFromUrl : function() {