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:
jshint js/*.js --config js/.jshintrc
jshint js/*.js

30
js/Constants.js
View File

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

64
js/Events.js
View File

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

116
js/LocalStorageService.js
View File

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

90
js/Palette.js
View File

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

136
js/ToolSelector.js
View File

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

4
js/utils.js
View File

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