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

Merge pull request #116 from juliandescottes/merge-piskelapp-changes

Browse Source 
Merge piskelapp changes
This commit is contained in:
grosbouddha 2013-07-18 16:39:38 -07:00
commit 9a68da8bda
4 changed files with 83 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
css/style.css
View File

@ -30,6 +30,24 @@ body {
bottom: 0;
}
.piskel-name-container {
overflow:hidden;
position:fixed;
top:10px;
left:10px;
color:white;
font-family:Tahoma;
z-index: 10000;
}
.piskel-name-container #piskel-name {
border :none;
color : lightgrey;
background: transparent;
font-size:16pt;
}
.column {
display: inline-block;
}

10
index.html
View File

@ -16,6 +16,9 @@
<link rel="stylesheet" type="text/css" href="css/preview-film-section.css">
</head>
<body>
<div class="piskel-name-container">
<input readonly id="piskel-name" type="text" value=""/>
</div>
<div id="main-wrapper" class="main-wrapper">
<div class="sticky-section left-sticky-section" id="tool-section">
<div class="sticky-section-wrap">
@ -41,11 +44,11 @@
<div class="vertical-centerer">
<div id="settings" class="tool-icon gear-icon" title="Preferences" rel="tooltip" data-placement="left"></div>
<a class="tool-icon gallery-icon" title="Visit gallery" href="http://juliandescottes.github.io/piskel-website/" rel="tooltip" data-placement="left" target="_blank"></a>
<div class="tool-icon save-icon" title="Save to gallery" onclick="piskel.storeSheet()" rel="tooltip" data-placement="left" ></div>
<div class="tool-icon upload-cloud-icon" title="Upload as an animated GIF" onclick="piskel.uploadAsAnimatedGIF()" rel="tooltip" data-placement="left">
<div class="tool-icon save-icon" title="Save to gallery" onclick="pskl.app.storeSheet()" rel="tooltip" data-placement="left" ></div>
<div class="tool-icon upload-cloud-icon" title="Upload as an animated GIF" onclick="pskl.app.uploadAsAnimatedGIF()" rel="tooltip" data-placement="left">
<span class="label">GIF</span>
</div>
<div class="tool-icon upload-cloud-icon" title="Upload as a spritesheet PNG" onclick="piskel.uploadAsSpritesheetPNG()" rel="tooltip" data-placement="left">
<div class="tool-icon upload-cloud-icon" title="Upload as a spritesheet PNG" onclick="pskl.app.uploadAsSpritesheetPNG()" rel="tooltip" data-placement="left">
<span class="label">PNG</span>
</div>
</div>
@ -183,4 +186,3 @@
<script src="js/piskel.js"></script>
</body>
</html>

79
js/piskel.js
View File

@ -2,10 +2,8 @@
* @require Constants
* @require Events
*/
$.namespace("pskl");
(function () {
var ns = $.namespace("pskl");
/**
* FrameSheetModel instance.
*/
@ -13,13 +11,18 @@ $.namespace("pskl");
/**
* Main application controller
*/
var piskel = {
ns.app = {
init : function () {
var frameSize = this.readSizeFromURL_();
frameSheet = new pskl.model.FrameSheet(frameSize.height, frameSize.width);
frameSheet.addEmptyFrame();
/**
* True when piskel is running in static mode (no back end needed).
* 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'));
@ -54,14 +57,20 @@ $.namespace("pskl");
this.localStorageService = new pskl.service.LocalStorageService(frameSheet);
this.localStorageService.init();
// TODO: Add comments
var framesheetId = this.readFramesheetIdFromURL_();
if (framesheetId) {
$.publish(Events.SHOW_NOTIFICATION, [{"content": "Loading animation with id : [" + framesheetId + "]"}]);
this.loadFramesheetFromService(framesheetId);
if (this.isStaticVersion) {
var framesheetId = this.readFramesheetIdFromURL_();
if (framesheetId) {
$.publish(Events.SHOW_NOTIFICATION, [{"content": "Loading animation with id : [" + framesheetId + "]"}]);
this.loadFramesheetFromService(framesheetId);
} else {
this.finishInit();
this.localStorageService.displayRestoreNotification();
}
} else {
if (pskl.framesheetData_) {
frameSheet.load(pskl.framesheetData_);
}
this.finishInit();
this.localStorageService.displayRestoreNotification();
}
var drawingLoop = new pskl.rendering.DrawingLoop();
@ -131,33 +140,61 @@ $.namespace("pskl");
xhr.onload = function(e) {
var res = JSON.parse(this.responseText);
frameSheet.load(res.framesheet);
piskel.animationController.setFPS(res.fps);
pskl.app.animationController.setFPS(res.fps);
$.publish(Events.HIDE_NOTIFICATION);
piskel.finishInit();
pskl.app.finishInit();
};
xhr.onerror = function () {
$.publish(Events.HIDE_NOTIFICATION);
piskel.finishInit();
pskl.app.finishInit();
};
xhr.send();
},
getFirstFrameAsPNGData_ : function () {
var tmpSheet = new pskl.model.FrameSheet(frameSheet.getWidth(), frameSheet.getHeight());
tmpSheet.addFrame(frameSheet.getFrameByIndex(0));
return (new pskl.rendering.SpritesheetRenderer(tmpSheet)).renderAsImageDataSpritesheetPNG();
},
// TODO(julz): Create package ?
storeSheet : function (event) {
var xhr = new XMLHttpRequest();
var formData = new FormData();
formData.append('framesheet_content', frameSheet.serialize());
formData.append('fps_speed', $('#preview-fps').val());
xhr.open('POST', Constants.PISKEL_SERVICE_URL + "/store", true);
if (this.isStaticVersion) {
// anonymous save on old app-engine backend
xhr.open('POST', Constants.PISKEL_SERVICE_URL + "/store", true);
} else {
// additional values only used with latest app-engine backend
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) {
if (this.status == 200) {
var baseUrl = window.location.href.replace(window.location.search, "");
window.location.href = baseUrl + "?frameId=" + this.responseText;
if (pskl.app.isStaticVersion) {
var baseUrl = window.location.href.replace(window.location.search, "");
window.location.href = baseUrl + "?frameId=" + this.responseText;
} else {
$.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.send(formData);
if(event) {
@ -185,7 +222,7 @@ $.namespace("pskl");
},
uploadAsAnimatedGIF : function () {
var fps = piskel.animationController.fps;
var fps = pskl.app.animationController.fps;
var imageData = (new pskl.rendering.SpritesheetRenderer(frameSheet)).renderAsImageDataAnimatedGIF(fps);
this.uploadToScreenletstore(imageData);
},
@ -206,8 +243,6 @@ $.namespace("pskl");
}
};
// TODO(grosbouddha): Remove this window.piskel global (eventually pskl.piskel or pskl.app instead)
window.piskel = piskel;
piskel.init();
pskl.app.init();
})();

4
js/service/LocalStorageService.js
View File

@ -63,8 +63,8 @@
*/
ns.LocalStorageService.prototype.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 reloadLink = "<a href='#' class='localstorage-restore onclick='pskl.app.restoreFromLocalStorage()'>reload</a>";
var discardLink = "<a href='#' class='localstorage-discard' onclick='pskl.app.cleanLocalStorage()'>discard</a>";
var content = "Non saved version found. " + reloadLink + " or " + discardLink;
$.publish(Events.SHOW_NOTIFICATION, [{