mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
Prototypization of PaletteController
I love new words
This commit is contained in:
Vince
parent
b671d46dbf
commit
5b9bc6edb1
@ -1,112 +1,113 @@
|
||||
/*
|
||||
* @provide pskl.Palette
|
||||
*
|
||||
* @require Constants
|
||||
* @require Events
|
||||
*/
|
||||
$.namespace("pskl");
|
||||
(function () {
|
||||
var ns = $.namespace("pskl.controller");
|
||||
|
||||
pskl.Palette = (function() {
|
||||
|
||||
var paletteRoot,
|
||||
paletteColors = [];
|
||||
ns.PaletteController = function () {
|
||||
this.paletteRoot = null;
|
||||
this.paletteColors = [];
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
var onPickerChange_ = function(evt, isPrimary) {
|
||||
var inputPicker = $(evt.target);
|
||||
$.publish(Events.COLOR_SELECTED, [inputPicker.val(), evt.data.isPrimary]);
|
||||
};
|
||||
ns.PaletteController.prototype.onPickerChange_ = function(evt, isPrimary) {
|
||||
var inputPicker = $(evt.target);
|
||||
$.publish(Events.COLOR_SELECTED, [inputPicker.val(), evt.data.isPrimary]);
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
var createPalette_ = function (colors) {
|
||||
* @private
|
||||
*/
|
||||
ns.PaletteController.prototype.createPalette_ = function (colors) {
|
||||
// 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) {
|
||||
if(color != Constants.TRANSPARENT_COLOR) {
|
||||
addColorToPalette_(color);
|
||||
this.addColorToPalette_(color);
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
var addColorToPalette_ = function (color) {
|
||||
if (paletteColors.indexOf(color) == -1 && color != Constants.TRANSPARENT_COLOR) {
|
||||
var colorEl = document.createElement("li");
|
||||
colorEl.className = "palette-color";
|
||||
colorEl.setAttribute("data-color", color);
|
||||
colorEl.setAttribute("title", color);
|
||||
colorEl.style.background = color;
|
||||
paletteRoot[0].appendChild(colorEl);
|
||||
paletteColors.push(color);
|
||||
}
|
||||
};
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
ns.PaletteController.prototype.addColorToPalette_ = function (color) {
|
||||
if (this.paletteColors.indexOf(color) == -1 && color != Constants.TRANSPARENT_COLOR) {
|
||||
var colorEl = document.createElement("li");
|
||||
colorEl.className = "palette-color";
|
||||
colorEl.setAttribute("data-color", color);
|
||||
colorEl.setAttribute("title", color);
|
||||
colorEl.style.background = color;
|
||||
this.paletteRoot.append(colorEl);
|
||||
this.paletteColors.push(color);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
var onPaletteColorClick_ = function (event) {
|
||||
var selectedColor = $(event.target).data("color");
|
||||
if (event.which == 1) { // left button
|
||||
updateColorPicker(selectedColor, $('#color-picker'));
|
||||
$.publish(Events.COLOR_SELECTED, [selectedColor, true]);
|
||||
} else if (event.which == 3) { // right button
|
||||
updateColorPicker(selectedColor, $('#secondary-color-picker'));
|
||||
$.publish(Events.COLOR_SELECTED, [selectedColor, false]);
|
||||
}
|
||||
};
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
ns.PaletteController.prototype.onPaletteColorClick_ = function (event) {
|
||||
var selectedColor = $(event.target).data("color");
|
||||
if (event.which == 1) { // left button
|
||||
this.updateColorPicker_(selectedColor, $('#color-picker'));
|
||||
$.publish(Events.COLOR_SELECTED, [selectedColor, true]);
|
||||
} else if (event.which == 3) { // right button
|
||||
this.updateColorPicker_(selectedColor, $('#secondary-color-picker'));
|
||||
$.publish(Events.COLOR_SELECTED, [selectedColor, false]);
|
||||
}
|
||||
};
|
||||
|
||||
var updateColorPicker = function (color, colorPicker) {
|
||||
if (color == Constants.TRANSPARENT_COLOR) {
|
||||
// We can set the current palette color to transparent.
|
||||
// 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
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
ns.PaletteController.prototype.updateColorPicker_ = function (color, colorPicker) {
|
||||
if (color == Constants.TRANSPARENT_COLOR) {
|
||||
// We can set the current palette color to transparent.
|
||||
// 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.
|
||||
// We set its background to white and insert the
|
||||
// string "TRANSPARENT" to mimic this state:
|
||||
colorPicker[0].color.fromString("#fff");
|
||||
colorPicker.val(Constants.TRANSPARENT_COLOR);
|
||||
} else {
|
||||
colorPicker[0].color.fromString(color);
|
||||
}
|
||||
};
|
||||
// The colorpicker can't be set to a transparent state.
|
||||
// We set its background to white and insert the
|
||||
// string "TRANSPARENT" to mimic this state:
|
||||
colorPicker[0].color.fromString("#fff");
|
||||
colorPicker.val(Constants.TRANSPARENT_COLOR);
|
||||
} else {
|
||||
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:
|
||||
createPalette_(framesheet.getUsedColors());
|
||||
// Initialize palette:
|
||||
this.createPalette_(this.framesheet.getUsedColors());
|
||||
|
||||
$.subscribe(Events.FRAMESHEET_RESET, function(evt) {
|
||||
createPalette_(framesheet.getUsedColors());
|
||||
});
|
||||
$.subscribe(Events.FRAMESHEET_RESET, $.proxy(function(evt) {
|
||||
this.createPalette_(this.framesheet.getUsedColors());
|
||||
}, this));
|
||||
|
||||
paletteRoot.mouseup(onPaletteColorClick_);
|
||||
$.subscribe(Events.COLOR_SELECTED, function(evt, color) {
|
||||
addColorToPalette_(color);
|
||||
});
|
||||
this.paletteRoot.mouseup($.proxy(this.onPaletteColorClick_, this));
|
||||
|
||||
$.subscribe(Events.COLOR_SELECTED, $.proxy(function(evt, color) {
|
||||
this.addColorToPalette_(color);
|
||||
}, this));
|
||||
|
||||
// Initialize colorpicker:
|
||||
var colorPicker = $('#color-picker');
|
||||
colorPicker.val(Constants.DEFAULT_PEN_COLOR);
|
||||
colorPicker.change({isPrimary : true}, onPickerChange_);
|
||||
// Initialize colorpickers:
|
||||
var colorPicker = $('#color-picker');
|
||||
colorPicker.val(Constants.DEFAULT_PEN_COLOR);
|
||||
colorPicker.change({isPrimary : true}, $.proxy(this.onPickerChange_, this));
|
||||
|
||||
|
||||
var secondaryColorPicker = $('#secondary-color-picker');
|
||||
secondaryColorPicker.val(Constants.TRANSPARENT_COLOR);
|
||||
secondaryColorPicker.change({isPrimary : false}, onPickerChange_);
|
||||
var secondaryColorPicker = $('#secondary-color-picker');
|
||||
secondaryColorPicker.val(Constants.TRANSPARENT_COLOR);
|
||||
secondaryColorPicker.change({isPrimary : false}, $.proxy(this.onPickerChange_, this));
|
||||
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
|
||||
@ -71,7 +71,7 @@ $.namespace("pskl");
|
||||
|
||||
this.KeyboardEventService = new pskl.service.KeyboardEventService();
|
||||
this.KeyboardEventService.init();
|
||||
|
||||
|
||||
pskl.NotificationService.init();
|
||||
this.localStorageService = new pskl.service.LocalStorageService(frameSheet);
|
||||
this.localStorageService.init();
|
||||
@ -149,7 +149,8 @@ $.namespace("pskl");
|
||||
var toolController = new pskl.controller.ToolController();
|
||||
toolController.init();
|
||||
|
||||
pskl.Palette.init(frameSheet);
|
||||
var paletteController = new pskl.controller.PaletteController();
|
||||
paletteController.init(frameSheet);
|
||||
},
|
||||
|
||||
getFramesheetIdFromUrl : function() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user