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

Cleanup of piskel.js

Browse Source 
Partial cleanup of piskel:
  new events and constant
  move palette and color picker in ToolSelector
  create Notifcation.js and move user message in it
  create LocalStorageService and move LS stuff in it
This commit is contained in:
Vince
2012-09-03 01:24:55 +02:00
parent 9758aa62d9
commit d7044dc44d
11 changed files with 301 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
js/ToolSelector.js
View File

@ -5,9 +5,12 @@
* @require Events
* @require pskl.drawingtools
*/
$.namespace("pskl");
pskl.ToolSelector = (function() {
var paletteColors = [];
var toolInstances = {
"simplePen" : new pskl.drawingtools.SimplePen(),
"eraser" : new pskl.drawingtools.Eraser(),
@ -19,7 +22,6 @@ pskl.ToolSelector = (function() {
var previousSelectedTool = toolInstances.simplePen;
var selectTool_ = function(tool) {
var maincontainer = $("body");
var previousSelectedToolClass = maincontainer.data("selected-tool-class");
if(previousSelectedToolClass) {
@ -46,6 +48,9 @@ pskl.ToolSelector = (function() {
$.publish(Events.TOOL_SELECTED, [tool]);
};
/**
* @private
*/
var onToolIconClicked_ = function(evt) {
var target = $(evt.target);
var clickedTool = target.closest(".tool-icon");
@ -63,8 +68,76 @@ pskl.ToolSelector = (function() {
}
};
/**
* @private
*/
var onPickerChange_ = function(evt) {
var inputPicker = $(evt.target);
$.publish(Events.COLOR_SELECTED, [inputPicker.val()]);
};
/**
* @private
*/
var addColorToPalette_ = function (color) {
if (paletteColors.indexOf(color) == -1) {
var paletteEl = $("#palette");
var colorEl = document.createElement("li");
colorEl.className = "palette-color";
colorEl.setAttribute("data-color", color);
colorEl.setAttribute("title", color);
colorEl.style.background = color;
paletteEl[0].appendChild(colorEl);
paletteColors.push(color);
}
},
/**
* @private
*/
onPaletteColorClick_ = function (event) {
var selectedColor = $(event.target).data("color");
var colorPicker = $('#color-picker');
if (selectedColor == 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("TRANSPARENT");
} else {
colorPicker[0].color.fromString(selectedColor);
}
$.publish(Events.COLOR_SELECTED, [selectedColor])
};
return {
init: function() {
// Initialize tool:
// Set SimplePen as default selected tool:
selectTool_(toolInstances.simplePen);
// Activate listener on tool panel:
$("#tools-container").click(onToolIconClicked_);
// Initialize colorpicker:
var colorPicker = $('#color-picker');
colorPicker.val(Constants.DEFAULT_PEN_COLOR);
colorPicker.change(onPickerChange_);
// Initialize palette:
$("#palette").click(onPaletteColorClick_);
$.subscribe(Events.COLOR_USED, function(evt, color) {
addColorToPalette_(color);
});
// Special right click handlers (select the eraser tool)
$.subscribe(Events.CANVAS_RIGHT_CLICKED, function() {
previousSelectedTool = currentSelectedTool;
currentSelectedTool = toolInstances.eraser;
@ -75,12 +148,9 @@ pskl.ToolSelector = (function() {
currentSelectedTool = previousSelectedTool;
$.publish(Events.TOOL_SELECTED, [currentSelectedTool]);
});
// Set SimplePen as default selected tool:
selectTool_(toolInstances.simplePen);
// Activate listener on tool panel:
$("#tools-container").click(onToolIconClicked_);
}
};
})()
})();