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

Added concat and uglify tasks to grunt. Piskel on master will only be able to work in debug mode, by passing ?debug in URL. The minified version is built in /build, which has been added to .gitignore

Browse Source
This commit is contained in:
jdescottes 2013-08-04 18:27:32 +02:00
parent 9a68da8bda
commit 91bacd1dd9
9 changed files with 212 additions and 208 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.gitignore vendored
View File

@ -3,10 +3,14 @@
# nodejs local installs
node_modules
npm-debug.log
# sublime text stuff (the -project should actually be shared, but then we'd have to share the same disk location)
*.sublime-project
*.sublime-workspace
# git stackdumps
*.stackdump
*.stackdump
# builds
build

105
Gruntfile.js
View File

@ -5,56 +5,77 @@
* - run a grunt target defined in Gruntfiles.js, ex: 'grunt lint'
*
* Note: The 'ghost' grunt task have special deps on CasperJS and phantomjs.
* For now, It's configured to run only on TravisCI where these deps are
* For now, It's configured to run only on TravisCI where these deps are
* correctly defined.
* If you run this task locally, it may require some env set up first.
* If you run this task locally, it may require some env set up first.
*/
module.exports = function(grunt) {
grunt.initConfig({
jshint: {
/*options: {
module.exports = function (grunt) {
grunt.initConfig({
jshint : {
/*options: {
"evil": true,
"asi": true,
"smarttabs": true,
"eqnull": true
},*/
files: [
'Gruntfile.js',
'package.json',
'js/**/*.js',
'!js/lib/**/*.js' // Exclude lib folder (note the leading !)
]
},
connect: {
www: {
options: {
base: '.',
port: 4545
}
}
},
ghost: {
dist: {
filesSrc: ['tests/integration/casperjs/*_test.js'],
options: {
args: {
baseUrl: 'http://localhost:' +
'<%= connect.www.options.port %>/'
},
direct: false,
logLevel: 'error',
printCommand: false,
printFilePaths: true
}
}
}
});
files : [
'Gruntfile.js',
'package.json',
'js/**/*.js',
'!js/lib/**/*.js' // Exclude lib folder (note the leading !)
]
},
connect : {
www : {
options : {
base : '.',
port : 4545
}
}
},
ghost : {
dist : {
filesSrc : ['tests/integration/casperjs/*_test.js'],
options : {
args : {
baseUrl : 'http://localhost:' + '<%= connect.www.options.port %>/'
},
direct : false,
logLevel : 'error',
printCommand : false,
printFilePaths : true
}
}
},
concat : {
options : {
separator : ';',
},
dist : {
src : require('./script-load-list.js').scripts,
dest : 'build/piskel-packaged.js',
},
},
uglify : {
options : {
mangle : true
},
my_target : {
files : {
'build/piskel-packaged-min.js' : ['build/piskel-packaged.js']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-ghost');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-ghost');
grunt.registerTask('lint', ['jshint']);
grunt.registerTask('test', ['jshint', 'connect', 'ghost']);
grunt.registerTask('default', ['jshint', 'concat', 'uglify']);
grunt.registerTask('lint', ['jshint']);
grunt.registerTask('test', ['jshint', 'connect', 'ghost']);
};

39
all.html
View File

@ -1,39 +0,0 @@
<!doctype html5>
<html>
<head>
<title>All piskels</title>
</head>
<body>
<script type="text/javascript">
(function () {
var loadAllPiskelIds = function (frameId) {
var xhr = new XMLHttpRequest();
// TODO: Change frameId to framesheetId on the backend
xhr.open('GET', 'http://2.piskel-app.appspot.com/all?l=' + frameId, true);
xhr.responseType = 'text';
xhr.onload = function(e) {
var ul = document.createElement("UL");
var innerHTML = "";
eval("var responseObject = " + this.responseText);
var keys = responseObject.keys;
var baseUrl = window.location.origin + "/piskel/?frameId=";
if (keys) {
for (var i = 0 ; i < keys.length ; i++) {
var key = keys[i];
innerHTML += "<li><a target='_blank' href='"+baseUrl+key+"'>"+key+"</a></li>"
}
}
ul.innerHTML = innerHTML;
document.body.appendChild(ul);
};
xhr.send();
};
loadAllPiskelIds();
})();
</script>
</body>
</html>

100
index.html
View File

@ -119,70 +119,42 @@
</div>
</div>
<!-- Core libraries: -->
<script src="js/lib/jquery-1.8.0.js"></script>
<script src="js/lib/jquery-ui-1.10.3.custom.js"></script>
<script src="js/lib/pubsub.js"></script>
<script src="js/lib/bootstrap/bootstrap.js"></script>
<script type="text/javascript">
(function () {
var loadScript = function (src, callback) {
document.write('<scr'+'ipt src ="'+src+'" onload="'+callback+'"></sc'+'ript>');
};
if (window.location.href.indexOf("debug") != -1) {
window.exports = {};
loadScript("script-load-list.js", "loadDebugScripts()");
window.loadDebugScripts = function () {
exports.scripts.forEach(function (script){
loadScript(script, "done()")
})
}
var loaded = 0;
window.done = function () {
loaded ++;
if (loaded == exports.scripts.length) {
pskl.app.init();
// cleanup
delete window.exports;
delete window.loadDebugScripts;
delete window.done;
}
};
<!-- GIF Encoding libraries -->
<script src="js/lib/gif/GIFEncoder.js"></script>
<script src="js/lib/gif/b64.js"></script>
<script src="js/lib/gif/NeuQuant.js"></script>
<script src="js/lib/gif/LZWEncoder.js"></script>
<!-- Application wide configuration -->
<script src="js/Constants.js"></script>
<script src="js/Events.js"></script>
<!-- Libraries -->
<script src="js/utils/core.js"></script>
<script src="js/utils/PixelUtils.js"></script>
<script src="js/utils/CanvasUtils.js"></script>
<script src="js/utils/UserSettings.js"></script>
<script src="js/lib/jsColor_1_4_0/jscolor.js"></script>
<!-- Application libraries-->
<script src="js/rendering/DrawingLoop.js"></script>
<!-- Models -->
<script src="js/model/Frame.js"></script>
<script src="js/model/FrameSheet.js"></script>
<script src="js/selection/SelectionManager.js"></script>
<script src="js/selection/BaseSelection.js"></script>
<script src="js/selection/RectangularSelection.js"></script>
<script src="js/selection/ShapeSelection.js"></script>
<!-- Rendering -->
<script src="js/rendering/CanvasRenderer.js"></script>
<script src="js/rendering/FrameRenderer.js"></script>
<script src="js/rendering/SpritesheetRenderer.js"></script>
<!-- Controllers -->
<script src="js/controller/DrawingController.js"></script>
<script src="js/controller/PreviewFilmController.js"></script>
<script src="js/controller/AnimatedPreviewController.js"></script>
<script src="js/controller/ToolController.js"></script>
<script src="js/controller/PaletteController.js"></script>
<script src="js/controller/NotificationController.js"></script>
<script src="js/controller/SettingsController.js"></script>
<!-- Services -->
<script src="js/service/LocalStorageService.js"></script>
<script src="js/service/HistoryService.js"></script>
<script src="js/service/KeyboardEventService.js"></script>
<!-- Tools-->
<script src="js/drawingtools/BaseTool.js"></script>
<script src="js/drawingtools/SimplePen.js"></script>
<script src="js/drawingtools/VerticalMirrorPen.js"></script>
<script src="js/drawingtools/Eraser.js"></script>
<script src="js/drawingtools/Stroke.js"></script>
<script src="js/drawingtools/PaintBucket.js"></script>
<script src="js/drawingtools/Rectangle.js"></script>
<script src="js/drawingtools/Circle.js"></script>
<script src="js/drawingtools/Move.js"></script>
<script src="js/drawingtools/selectiontools/BaseSelect.js"></script>
<script src="js/drawingtools/selectiontools/RectangleSelect.js"></script>
<script src="js/drawingtools/selectiontools/ShapeSelect.js"></script>
<script src="js/drawingtools/ColorPicker.js"></script>
<!-- Application controller and initialization -->
<script src="js/piskel.js"></script>
} else {
var script;
if (window.location.href.indexOf("pack") != -1) {
script = "build/piskel-packaged.js";
} else {
script = "build/piskel-packaged-min.js";
}
loadScript(script, "pskl.app.init()");
}
})();
</script>
</body>
</html>

29
js/lib/jsColor_1_4_0/jscolor.js
View File

@ -35,34 +35,7 @@ var jscolor = {
getDir : function() {
if(!jscolor.dir) {
var detected = jscolor.detectDir();
jscolor.dir = detected!==false ? detected : 'jscolor/';
}
return jscolor.dir;
},
detectDir : function() {
var base = location.href;
var e = document.getElementsByTagName('base');
for(var i=0; i<e.length; i+=1) {
if(e[i].href) { base = e[i].href; }
}
var e = document.getElementsByTagName('script');
for(var i=0; i<e.length; i+=1) {
if(e[i].src && /(^|\/)jscolor\.js([?#].*)?$/i.test(e[i].src)) {
var src = new jscolor.URI(e[i].src);
var srcAbs = src.toAbsolute(base);
srcAbs.path = srcAbs.path.replace(/[^\/]+$/, ''); // remove filename
srcAbs.query = null;
srcAbs.fragment = null;
return srcAbs.toString();
}
}
return false;
return "js/lib/jsColor_1_4_0/";
},

56
js/piskel.js
View File

@ -23,7 +23,7 @@
* When started from APP Engine, appEngineToken_ (Boolean) should be set on window.pskl
*/
this.isStaticVersion = !pskl.appEngineToken_;
this.drawingController = new pskl.controller.DrawingController(frameSheet, $('#drawing-canvas-container'));
this.animationController = new pskl.controller.AnimatedPreviewController(frameSheet, $('#preview-canvas-container'));
this.previewsController = new pskl.controller.PreviewFilmController(frameSheet, $('#preview-list'));
@ -60,7 +60,9 @@
if (this.isStaticVersion) {
var framesheetId = this.readFramesheetIdFromURL_();
if (framesheetId) {
$.publish(Events.SHOW_NOTIFICATION, [{"content": "Loading animation with id : [" + framesheetId + "]"}]);
$.publish(Events.SHOW_NOTIFICATION, [{
"content" : "Loading animation with id : [" + framesheetId + "]"
}]);
this.loadFramesheetFromService(framesheetId);
} else {
this.finishInit();
@ -79,7 +81,7 @@
// Init (event-delegated) bootstrap tooltips:
$('body').tooltip({
selector: '[rel=tooltip]'
selector : '[rel=tooltip]'
});
},
@ -87,24 +89,25 @@
this.drawingController.render(delta);
this.animationController.render(delta);
this.previewsController.render(delta);
},
},
finishInit : function () {
var toolController = new pskl.controller.ToolController();
toolController.init();
var paletteController = new pskl.controller.PaletteController();
paletteController.init(frameSheet);
},
readSizeFromURL_ : function () {
var sizeParam = this.readUrlParameter_("size"), size;
var sizeParam = this.readUrlParameter_("size"),
size;
// parameter expected as size=64x48 => size=widthxheight
var parts = sizeParam.split("x");
if (parts && parts.length == 2 && !isNaN(parts[0]) && !isNaN(parts[1])) {
var width = parseInt(parts[0], 10),
height = parseInt(parts[1], 10);
height = parseInt(parts[1], 10);
size = {
height : Math.min(height, Constants.MAX_HEIGHT),
width : Math.min(width, Constants.MAX_WIDTH)
@ -115,15 +118,15 @@
return size;
},
readFramesheetIdFromURL_ : function() {
readFramesheetIdFromURL_ : function () {
return this.readUrlParameter_("frameId");
},
readUrlParameter_ : function (paramName) {
var searchString = window.location.search.substring(1),
i, val, params = searchString.split("&");
i, val, params = searchString.split("&");
for (i=0;i<params.length;i++) {
for (i = 0; i < params.length; i++) {
val = params[i].split("=");
if (val[0] == paramName) {
return unescape(val[1]);
@ -137,7 +140,7 @@
xhr.open('GET', Constants.PISKEL_SERVICE_URL + '/get?l=' + frameId, true);
xhr.responseType = 'text';
xhr.onload = function(e) {
xhr.onload = function (e) {
var res = JSON.parse(this.responseText);
frameSheet.load(res.framesheet);
pskl.app.animationController.setFPS(res.fps);
@ -174,44 +177,48 @@
formData.append('name', $('#piskel-name').val());
formData.append('frames', frameSheet.getFrameCount());
// Get image/png data for first frame
formData.append('preview', this.getFirstFrameAsPNGData_());
xhr.open('POST', "save", true);
}
xhr.onload = function(e) {
xhr.onload = function (e) {
if (this.status == 200) {
if (pskl.app.isStaticVersion) {
var baseUrl = window.location.href.replace(window.location.search, "");
window.location.href = baseUrl + "?frameId=" + this.responseText;
window.location.href = baseUrl + "?frameId=" + this.responseText;
} else {
$.publish(Events.SHOW_NOTIFICATION, [{"content": "Successfully saved !"}]);
$.publish(Events.SHOW_NOTIFICATION, [{
"content" : "Successfully saved !"
}]);
}
} else {
this.onerror(e);
}
};
xhr.onerror = function(e) {
$.publish(Events.SHOW_NOTIFICATION, [{"content": "Saving failed ("+this.status+")"}]);
xhr.onerror = function (e) {
$.publish(Events.SHOW_NOTIFICATION, [{
"content" : "Saving failed (" + this.status + ")"
}]);
};
xhr.send(formData);
if(event) {
if (event) {
event.stopPropagation();
event.preventDefault();
}
return false;
},
uploadToScreenletstore : function(imageData) {
uploadToScreenletstore : function (imageData) {
var xhr = new XMLHttpRequest();
var formData = new FormData();
formData.append('data', imageData);
xhr.open('POST', "http://screenletstore.appspot.com/__/upload", true);
var cloudURL;
var that = this;
xhr.onload = function(e) {
xhr.onload = function (e) {
if (this.status == 200) {
cloudURL = "http://screenletstore.appspot.com/img/" + this.responseText;
that.openWindow(cloudURL);
@ -232,7 +239,7 @@
this.uploadToScreenletstore(imageData);
},
openWindow: function(url) {
openWindow : function (url) {
var options = [
"dialog=yes", "scrollbars=no", "status=no",
"width=" + frameSheet.getWidth() * frameSheet.getFrameCount(),
@ -242,7 +249,4 @@
window.open(url, "piskel-export", options);
}
};
pskl.app.init();
})();

14
js/service/LocalStorageService.js
View File

@ -10,6 +10,13 @@
this.localStorageThrottler_ = null;
};
/**
* @public
*/
ns.LocalStorageService.prototype.init = function(framesheet_) {
$.subscribe(Events.LOCALSTORAGE_REQUEST, $.proxy(this.persistToLocalStorageRequest_, this));
};
/**
* @private
*/
@ -51,13 +58,6 @@
delete window.localStorage.snapShot;
};
/**
* @public
*/
ns.LocalStorageService.prototype.init = function(framesheet_) {
$.subscribe(Events.LOCALSTORAGE_REQUEST, $.proxy(this.persistToLocalStorageRequest_, this));
};
/**
* @public
*/

4
package.json
View File

@ -15,6 +15,8 @@
"grunt": "~0.4.1",
"grunt-contrib-connect": "0.3.0",
"grunt-contrib-jshint": "0.5.4",
"grunt-ghost": "1.0.12"
"grunt-contrib-uglify": "0.2.2",
"grunt-ghost": "1.0.12",
"grunt-contrib-concat": "0.1.2"
}
}

67
script-load-list.js Normal file
View File

@ -0,0 +1,67 @@
// This list is used both by the grunt build and index.html (in debug mode)
exports.scripts = [
// Core libraries
"js/lib/jquery-1.8.0.js","js/lib/jquery-ui-1.10.3.custom.js","js/lib/pubsub.js","js/lib/bootstrap/bootstrap.js",
// GIF Encoding libraries
"js/lib/gif/GIFEncoder.js","js/lib/gif/b64.js","js/lib/gif/NeuQuant.js","js/lib/gif/LZWEncoder.js",
// Application wide configuration
"js/Constants.js",
"js/Events.js",
// Libraries
"js/utils/core.js",
"js/utils/PixelUtils.js",
"js/utils/CanvasUtils.js",
"js/utils/UserSettings.js",
"js/lib/jsColor_1_4_0/jscolor.js",
// Application libraries-->
"js/rendering/DrawingLoop.js",
// Models
"js/model/Frame.js",
"js/model/FrameSheet.js",
"js/selection/SelectionManager.js",
"js/selection/BaseSelection.js",
"js/selection/RectangularSelection.js",
"js/selection/ShapeSelection.js",
// Rendering
"js/rendering/CanvasRenderer.js",
"js/rendering/FrameRenderer.js",
"js/rendering/SpritesheetRenderer.js",
// Controllers
"js/controller/DrawingController.js",
"js/controller/PreviewFilmController.js",
"js/controller/AnimatedPreviewController.js",
"js/controller/ToolController.js",
"js/controller/PaletteController.js",
"js/controller/NotificationController.js",
"js/controller/SettingsController.js",
// Services
"js/service/LocalStorageService.js",
"js/service/HistoryService.js",
"js/service/KeyboardEventService.js",
// Tools
"js/drawingtools/BaseTool.js",
"js/drawingtools/SimplePen.js",
"js/drawingtools/VerticalMirrorPen.js",
"js/drawingtools/Eraser.js",
"js/drawingtools/Stroke.js",
"js/drawingtools/PaintBucket.js",
"js/drawingtools/Rectangle.js",
"js/drawingtools/Circle.js",
"js/drawingtools/Move.js",
"js/drawingtools/selectiontools/BaseSelect.js",
"js/drawingtools/selectiontools/RectangleSelect.js",
"js/drawingtools/selectiontools/ShapeSelect.js",
"js/drawingtools/ColorPicker.js",
// Application controller and initialization
"js/piskel.js"
];