piskel/js/Palette.js

115 lines
3.3 KiB
JavaScript
Raw Normal View History

/*
* @provide pskl.Palette
*
* @require Constants
* @require Events
*/
$.namespace("pskl");
pskl.Palette = (function() {
var paletteRoot,
paletteColors = [];
/**
* @private
*/
var onPickerChange_ = function(evt, isPrimary) {
var inputPicker = $(evt.target);
$.publish(Events.COLOR_SELECTED, [inputPicker.val(), evt.data.isPrimary]);
};
/**
* @private
*/
var createPalette_ = function (colors) {
// Always adding transparent color
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);
}
}
};
/**
* @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
*/
var onPaletteColorClick_ = function (event) {
var selectedColor = $(event.target).data("color");
if (event.which == 1) { // left button
2012-09-07 01:10:02 +04:00
updateColorPicker(selectedColor, $('#color-picker'));
$.publish(Events.COLOR_SELECTED, [selectedColor, true]);
} else if (event.which == 3) { // right button
2012-09-07 01:10:02 +04:00
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
// 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:
2012-09-07 01:10:02 +04:00
colorPicker[0].color.fromString("#fff");
colorPicker.val(Constants.TRANSPARENT_COLOR);
} else {
2012-09-07 01:10:02 +04:00
colorPicker[0].color.fromString(color);
}
}
return {
init: function(framesheet) {
paletteRoot = $("#palette");
// Initialize palette:
createPalette_(framesheet.getUsedColors());
$.subscribe(Events.FRAMESHEET_RESET, function(evt) {
createPalette_(framesheet.getUsedColors());
});
paletteRoot.mouseup(onPaletteColorClick_);
$.subscribe(Events.COLOR_SELECTED, function(evt, color) {
addColorToPalette_(color);
});
// Initialize colorpicker:
var colorPicker = $('#color-picker');
colorPicker.val(Constants.DEFAULT_PEN_COLOR);
colorPicker.change({isPrimary : true}, onPickerChange_);
var secondaryColorPicker = $('#secondary-color-picker');
secondaryColorPicker.val(Constants.TRANSPARENT_COLOR);
secondaryColorPicker.change({isPrimary : false}, onPickerChange_);
}
};
})();