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 # nodejs local installs
node_modules 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 text stuff (the -project should actually be shared, but then we'd have to share the same disk location)
*.sublime-project *.sublime-project
*.sublime-workspace *.sublime-workspace
# git stackdumps # 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' * - run a grunt target defined in Gruntfiles.js, ex: 'grunt lint'
* *
* Note: The 'ghost' grunt task have special deps on CasperJS and phantomjs. * 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. * 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) { module.exports = function (grunt) {
grunt.initConfig({ grunt.initConfig({
jshint: { jshint : {
/*options: { /*options: {
"evil": true, "evil": true,
"asi": true, "asi": true,
"smarttabs": true, "smarttabs": true,
"eqnull": true "eqnull": true
},*/ },*/
files: [ files : [
'Gruntfile.js', 'Gruntfile.js',
'package.json', 'package.json',
'js/**/*.js', 'js/**/*.js',
'!js/lib/**/*.js' // Exclude lib folder (note the leading !) '!js/lib/**/*.js' // Exclude lib folder (note the leading !)
] ]
}, },
connect: { connect : {
www: { www : {
options: { options : {
base: '.', base : '.',
port: 4545 port : 4545
} }
} }
}, },
ghost: { ghost : {
dist: { dist : {
filesSrc: ['tests/integration/casperjs/*_test.js'], filesSrc : ['tests/integration/casperjs/*_test.js'],
options: { options : {
args: { args : {
baseUrl: 'http://localhost:' + baseUrl : 'http://localhost:' + '<%= connect.www.options.port %>/'
'<%= connect.www.options.port %>/' },
}, direct : false,
direct: false, logLevel : 'error',
logLevel: 'error', printCommand : false,
printCommand: false, printFilePaths : true
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-connect');
grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-ghost'); grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-ghost');
grunt.registerTask('lint', ['jshint']); grunt.registerTask('default', ['jshint', 'concat', 'uglify']);
grunt.registerTask('test', ['jshint', 'connect', 'ghost']); 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>
</div> </div>
<!-- Core libraries: --> <script type="text/javascript">
<script src="js/lib/jquery-1.8.0.js"></script> (function () {
<script src="js/lib/jquery-ui-1.10.3.custom.js"></script> var loadScript = function (src, callback) {
<script src="js/lib/pubsub.js"></script> document.write('<scr'+'ipt src ="'+src+'" onload="'+callback+'"></sc'+'ript>');
<script src="js/lib/bootstrap/bootstrap.js"></script> };
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 --> } else {
<script src="js/lib/gif/GIFEncoder.js"></script> var script;
<script src="js/lib/gif/b64.js"></script> if (window.location.href.indexOf("pack") != -1) {
<script src="js/lib/gif/NeuQuant.js"></script> script = "build/piskel-packaged.js";
<script src="js/lib/gif/LZWEncoder.js"></script> } else {
script = "build/piskel-packaged-min.js";
<!-- Application wide configuration --> }
<script src="js/Constants.js"></script> loadScript(script, "pskl.app.init()");
<script src="js/Events.js"></script> }
})();
<!-- Libraries -->
<script src="js/utils/core.js"></script> </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>
</body> </body>
</html> </html>

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

@ -35,34 +35,7 @@ var jscolor = {
getDir : function() { getDir : function() {
if(!jscolor.dir) { return "js/lib/jsColor_1_4_0/";
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;
}, },

56
js/piskel.js
View File

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

14
js/service/LocalStorageService.js
View File

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

4
package.json
View File

@ -15,6 +15,8 @@
"grunt": "~0.4.1", "grunt": "~0.4.1",
"grunt-contrib-connect": "0.3.0", "grunt-contrib-connect": "0.3.0",
"grunt-contrib-jshint": "0.5.4", "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"
];