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

fixed jshint complaints

Browse Source
This commit is contained in:
juliandescottes 2012-09-11 00:52:09 +02:00
parent 5666733f98
commit a8394d22b1
7 changed files with 216 additions and 226 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Makefile
View File

@ -1,2 +1,2 @@
test: test:
jshint js/*.js --config js/.jshintrc jshint js/*.js

30
js/Constants.js
View File

@ -1,19 +1,19 @@
var Constants = { var Constants = {
DEFAULT_PEN_COLOR : '#000000', DEFAULT_PEN_COLOR : '#000000',
TRANSPARENT_COLOR : 'TRANSPARENT', TRANSPARENT_COLOR : 'TRANSPARENT',
/* /*
* Fake semi-transparent color used to highlight transparent * Fake semi-transparent color used to highlight transparent
* strokes and rectangles: * strokes and rectangles:
*/ */
SELECTION_TRANSPARENT_COLOR: 'rgba(255, 255, 255, 0.6)', SELECTION_TRANSPARENT_COLOR: 'rgba(255, 255, 255, 0.6)',
/* /*
* Default entry point for piskel web service: * Default entry point for piskel web service:
*/ */
PISKEL_SERVICE_URL: 'http://2.piskel-app.appspot.com', PISKEL_SERVICE_URL: 'http://2.piskel-app.appspot.com',
GRID_STROKE_WIDTH: 1, GRID_STROKE_WIDTH: 1,
GRID_STROKE_COLOR: "lightgray" GRID_STROKE_COLOR: "lightgray"
}; };

64
js/Events.js
View File

@ -1,40 +1,40 @@
Events = { Events = {
TOOL_SELECTED : "TOOL_SELECTED", TOOL_SELECTED : "TOOL_SELECTED",
TOOL_RELEASED : "TOOL_RELEASED", TOOL_RELEASED : "TOOL_RELEASED",
COLOR_SELECTED: "COLOR_SELECTED", COLOR_SELECTED: "COLOR_SELECTED",
/** /**
* When this event is emitted, a request is sent to the localstorage * When this event is emitted, a request is sent to the localstorage
* Service to save the current framesheet. The storage service * Service to save the current framesheet. The storage service
* may not immediately store data (internal throttling of requests). * may not immediately store data (internal throttling of requests).
*/ */
LOCALSTORAGE_REQUEST: "LOCALSTORAGE_REQUEST", LOCALSTORAGE_REQUEST: "LOCALSTORAGE_REQUEST",
CANVAS_RIGHT_CLICKED: "CANVAS_RIGHT_CLICKED", CANVAS_RIGHT_CLICKED: "CANVAS_RIGHT_CLICKED",
/** /**
* Event to request a refresh of the display. * Event to request a refresh of the display.
* A bit overkill but, it's just workaround in our current drawing system. * A bit overkill but, it's just workaround in our current drawing system.
* TODO: Remove or rework when redraw system is refactored. * TODO: Remove or rework when redraw system is refactored.
*/ */
REFRESH: "REFRESH", REFRESH: "REFRESH",
/** /**
* Temporary event to bind the redraw of right preview film to the canvas. * Temporary event to bind the redraw of right preview film to the canvas.
* This redraw should be driven by model updates. * This redraw should be driven by model updates.
* TODO(vincz): Remove. * TODO(vincz): Remove.
*/ */
REDRAW_PREVIEWFILM: "REDRAW_PREVIEWFILM", REDRAW_PREVIEWFILM: "REDRAW_PREVIEWFILM",
GRID_DISPLAY_STATE_CHANGED: "GRID_DISPLAY_STATE_CHANGED", GRID_DISPLAY_STATE_CHANGED: "GRID_DISPLAY_STATE_CHANGED",
/** /**
* The framesheet was reseted and is now probably drastically different. * The framesheet was reseted and is now probably drastically different.
* Number of frames, content of frames, color used for the palette may have changed. * Number of frames, content of frames, color used for the palette may have changed.
*/ */
FRAMESHEET_RESET: "FRAMESHEET_RESET", FRAMESHEET_RESET: "FRAMESHEET_RESET",
SHOW_NOTIFICATION: "SHOW_NOTIFICATION", SHOW_NOTIFICATION: "SHOW_NOTIFICATION",
HIDE_NOTIFICATION: "HIDE_NOTIFICATION" HIDE_NOTIFICATION: "HIDE_NOTIFICATION"
}; };

116
js/LocalStorageService.js
View File

@ -8,20 +8,20 @@ $.namespace("pskl");
pskl.LocalStorageService = (function() { pskl.LocalStorageService = (function() {
var frameSheet_; var frameSheet_;
/** /**
* @private * @private
*/ */
var localStorageThrottler_ = null; var localStorageThrottler_ = null;
/** /**
* @private * @private
*/ */
var persistToLocalStorageRequest_ = function() { var persistToLocalStorageRequest_ = function() {
// Persist to localStorage when drawing. We throttle localStorage accesses // Persist to localStorage when drawing. We throttle localStorage accesses
// for high frequency drawing (eg mousemove). // for high frequency drawing (eg mousemove).
if(localStorageThrottler_ != null) { if(localStorageThrottler_ !== null) {
window.clearTimeout(localStorageThrottler_); window.clearTimeout(localStorageThrottler_);
} }
localStorageThrottler_ = window.setTimeout(function() { localStorageThrottler_ = window.setTimeout(function() {
@ -31,63 +31,63 @@ pskl.LocalStorageService = (function() {
}; };
/** /**
* @private * @private
*/ */
var persistToLocalStorage_ = function() { var persistToLocalStorage_ = function() {
console.log('[LocalStorage service]: Snapshot stored') console.log('[LocalStorage service]: Snapshot stored');
window.localStorage['snapShot'] = frameSheet_.serialize(); window.localStorage.snapShot = frameSheet_.serialize();
}; };
/** /**
* @private * @private
*/ */
var restoreFromLocalStorage_ = function() { var restoreFromLocalStorage_ = function() {
frameSheet_.deserialize(window.localStorage['snapShot']); frameSheet_.deserialize(window.localStorage.snapShot);
}; };
/** /**
* @private * @private
*/ */
var cleanLocalStorage_ = function() { var cleanLocalStorage_ = function() {
console.log('[LocalStorage service]: Snapshot removed') console.log('[LocalStorage service]: Snapshot removed');
delete window.localStorage['snapShot']; delete window.localStorage.snapShot;
}; };
return { return {
init: function(frameSheet) { init: function(frameSheet) {
if(frameSheet == undefined) { if(frameSheet === undefined) {
throw "Bad LocalStorageService initialization: <undefined frameSheet>" throw "Bad LocalStorageService initialization: <undefined frameSheet>";
} }
frameSheet_ = frameSheet; frameSheet_ = frameSheet;
$.subscribe(Events.LOCALSTORAGE_REQUEST, persistToLocalStorageRequest_); $.subscribe(Events.LOCALSTORAGE_REQUEST, persistToLocalStorageRequest_);
}, },
// TODO(vincz): Find a good place to put this UI rendering, a service should not render UI. // TODO(vincz): Find a good place to put this UI rendering, a service should not render UI.
displayRestoreNotification: function() { displayRestoreNotification: function() {
if(window.localStorage && window.localStorage['snapShot']) { if(window.localStorage && window.localStorage['snapShot']) {
var reloadLink = "<a href='#' class='localstorage-restore onclick='piskel.restoreFromLocalStorage()'>reload</a>"; var reloadLink = "<a href='#' class='localstorage-restore onclick='piskel.restoreFromLocalStorage()'>reload</a>";
var discardLink = "<a href='#' class='localstorage-discard' onclick='piskel.cleanLocalStorage()'>discard</a>"; var discardLink = "<a href='#' class='localstorage-discard' onclick='piskel.cleanLocalStorage()'>discard</a>";
var content = "Non saved version found. " + reloadLink + " or " + discardLink; var content = "Non saved version found. " + reloadLink + " or " + discardLink;
$.publish(Events.SHOW_NOTIFICATION, [{ $.publish(Events.SHOW_NOTIFICATION, [{
"content": content, "content": content,
"behavior": function(rootNode) { "behavior": function(rootNode) {
rootNode = $(rootNode); rootNode = $(rootNode);
rootNode.click(function(evt) { rootNode.click(function(evt) {
var target = $(evt.target); var target = $(evt.target);
if(target.hasClass("localstorage-restore")) { if(target.hasClass("localstorage-restore")) {
restoreFromLocalStorage_(); restoreFromLocalStorage_();
} }
else if (target.hasClass("localstorage-discard")) { else if (target.hasClass("localstorage-discard")) {
cleanLocalStorage_(); cleanLocalStorage_();
} }
$.publish(Events.HIDE_NOTIFICATION); $.publish(Events.HIDE_NOTIFICATION);
}); });
} }
}]); }]);
} }
} }
}; };
})(); })();

90
js/Palette.js
View File

@ -7,37 +7,37 @@
$.namespace("pskl"); $.namespace("pskl");
pskl.Palette = (function() { pskl.Palette = (function() {
var paletteRoot, var paletteRoot,
paletteColors = []; paletteColors = [];
/** /**
* @private * @private
*/ */
var onPickerChange_ = function(evt, isPrimary) { var 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) { var 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>'); 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); addColorToPalette_(color);
} }
} }
}; };
/** /**
* @private * @private
*/ */
var addColorToPalette_ = function (color) { var addColorToPalette_ = function (color) {
if (paletteColors.indexOf(color) == -1 && color != Constants.TRANSPARENT_COLOR) { if (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);
@ -77,37 +77,37 @@ pskl.Palette = (function() {
} else { } else {
colorPicker[0].color.fromString(color); colorPicker[0].color.fromString(color);
} }
} };
return { return {
init: function(framesheet) { init: function(framesheet) {
paletteRoot = $("#palette"); paletteRoot = $("#palette");
// Initialize palette: // Initialize palette:
createPalette_(framesheet.getUsedColors()); createPalette_(framesheet.getUsedColors());
$.subscribe(Events.FRAMESHEET_RESET, function(evt) { $.subscribe(Events.FRAMESHEET_RESET, function(evt) {
createPalette_(framesheet.getUsedColors()); createPalette_(framesheet.getUsedColors());
}); });
paletteRoot.mouseup(onPaletteColorClick_); paletteRoot.mouseup(onPaletteColorClick_);
$.subscribe(Events.COLOR_SELECTED, function(evt, color) { $.subscribe(Events.COLOR_SELECTED, function(evt, color) {
addColorToPalette_(color); addColorToPalette_(color);
}); });
// Initialize colorpicker: // Initialize colorpicker:
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}, onPickerChange_);
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}, onPickerChange_);
} }
}; };
})(); })();

136
js/ToolSelector.js
View File

@ -8,93 +8,83 @@
$.namespace("pskl"); $.namespace("pskl");
pskl.ToolSelector = (function() { pskl.ToolSelector = (function() {
var toolInstances = { var toolInstances = {
"simplePen" : new pskl.drawingtools.SimplePen(), "simplePen" : new pskl.drawingtools.SimplePen(),
"eraser" : new pskl.drawingtools.Eraser(), "eraser" : new pskl.drawingtools.Eraser(),
"paintBucket" : new pskl.drawingtools.PaintBucket(), "paintBucket" : new pskl.drawingtools.PaintBucket(),
"stroke" : new pskl.drawingtools.Stroke(), "stroke" : new pskl.drawingtools.Stroke(),
"rectangle" : new pskl.drawingtools.Rectangle(), "rectangle" : new pskl.drawingtools.Rectangle(),
"move" : new pskl.drawingtools.Move() "move" : new pskl.drawingtools.Move()
}; };
var currentSelectedTool = toolInstances.simplePen; var currentSelectedTool = toolInstances.simplePen;
var previousSelectedTool = toolInstances.simplePen; var previousSelectedTool = toolInstances.simplePen;
var selectTool_ = function(tool) { var activateToolOnStage_ = function(tool) {
var maincontainer = $("body"); var stage = $("body");
var previousSelectedToolClass = maincontainer.data("selected-tool-class");
if(previousSelectedToolClass) {
maincontainer.removeClass(previousSelectedToolClass);
}
maincontainer.addClass(toolBehavior.toolId);
$("#drawing-canvas-container").data("selected-tool-class", toolBehavior.toolId);
};
var activateToolOnStage_ = function(tool) {
var stage = $("body");
var previousSelectedToolClass = stage.data("selected-tool-class"); var previousSelectedToolClass = stage.data("selected-tool-class");
if(previousSelectedToolClass) { if(previousSelectedToolClass) {
stage.removeClass(previousSelectedToolClass); stage.removeClass(previousSelectedToolClass);
} }
stage.addClass(tool.toolId); stage.addClass(tool.toolId);
stage.data("selected-tool-class", tool.toolId); stage.data("selected-tool-class", tool.toolId);
}; };
var selectTool_ = function(tool) { var selectTool_ = function(tool) {
console.log("Selecting Tool:" , currentSelectedTool); console.log("Selecting Tool:" , currentSelectedTool);
currentSelectedTool = tool; currentSelectedTool = tool;
activateToolOnStage_(currentSelectedTool); activateToolOnStage_(currentSelectedTool);
$.publish(Events.TOOL_SELECTED, [tool]); $.publish(Events.TOOL_SELECTED, [tool]);
}; };
/** /**
* @private * @private
*/ */
var onToolIconClicked_ = function(evt) { var onToolIconClicked_ = function(evt) {
var target = $(evt.target); var target = $(evt.target);
var clickedTool = target.closest(".tool-icon"); var clickedTool = target.closest(".tool-icon");
if(clickedTool.length) { if(clickedTool.length) {
for(var tool in toolInstances) { for(var tool in toolInstances) {
if (toolInstances[tool].toolId == clickedTool.data()["toolId"]) { if (toolInstances[tool].toolId == clickedTool.data().toolId) {
selectTool_(toolInstances[tool]); selectTool_(toolInstances[tool]);
// Show tool as selected: // Show tool as selected:
$("#tools-container .tool-icon.selected").removeClass("selected"); $("#tools-container .tool-icon.selected").removeClass("selected");
clickedTool.addClass("selected"); clickedTool.addClass("selected");
} }
} }
} }
}; };
/** /**
* Get state for the checkbox that control the display of the grid * Get state for the checkbox that control the display of the grid
* on the drawing canvas. * on the drawing canvas.
* @private * @private
*/ */
var isShowGridChecked_ = function() { var isShowGridChecked_ = function() {
var showGridCheckbox = $('#show-grid'); var showGridCheckbox = $('#show-grid');
var isChecked = showGridCheckbox.is(':checked'); var isChecked = showGridCheckbox.is(':checked');
return isChecked; return isChecked;
}; };
return { return {
init: function() { init: function() {
// Initialize tool: // Initialize tool:
// Set SimplePen as default selected tool: // Set SimplePen as default selected tool:
selectTool_(toolInstances.simplePen); selectTool_(toolInstances.simplePen);
// Activate listener on tool panel: // Activate listener on tool panel:
$("#tools-container").click(onToolIconClicked_); $("#tools-container").click(onToolIconClicked_);
// Show/hide the grid on drawing canvas: // Show/hide the grid on drawing canvas:
$.publish(Events.GRID_DISPLAY_STATE_CHANGED, [isShowGridChecked_()]) $.publish(Events.GRID_DISPLAY_STATE_CHANGED, [isShowGridChecked_()])
$('#show-grid').change(function(evt) { $('#show-grid').change(function(evt) {
var checked = isShowGridChecked_(); var checked = isShowGridChecked_();
$.publish(Events.GRID_DISPLAY_STATE_CHANGED, [checked]) $.publish(Events.GRID_DISPLAY_STATE_CHANGED, [checked])
}); });
} }
}; };
})(); })();

4
js/utils.js
View File

@ -16,7 +16,7 @@ jQuery.namespace = function() {
* *
* @require Constants * @require Constants
*/ */
(function(ns) { // namespace: pskl.utils (function() { // namespace: pskl.utils
var ns = $.namespace("pskl.utils"); var ns = $.namespace("pskl.utils");
@ -35,5 +35,5 @@ jQuery.namespace = function() {
//prototypeskl.ToolBehavior.Eraser.prototype.constructor = pskl.ToolBehavior.Eraser; //prototypeskl.ToolBehavior.Eraser.prototype.constructor = pskl.ToolBehavior.Eraser;
}; };
})() })();