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

4
.gitignore vendored
View File

@ -3,6 +3,7 @@
# 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
@ -10,3 +11,6 @@ node_modules
# git stackdumps
*.stackdump
# builds
build

101
Gruntfile.js
View File

@ -10,51 +10,72 @@
* 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>

98
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>
} 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()");
}
})();
<!-- 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>
</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/";
},

44
js/piskel.js
View File

@ -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]'
});
},
@ -98,12 +100,13 @@
},
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),
@ -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);
@ -180,38 +183,42 @@
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"
];