mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
Added logic to switch behavior between appengine and static mode. Removed piskel on window in favor of pskl.app
This commit is contained in:
jdescottes
parent
bb1672f6ab
commit
032c8c4485
@ -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;
|
||||
}
|
||||
@ -55,18 +73,16 @@ body {
|
||||
}
|
||||
|
||||
.sticky-section {
|
||||
display: table;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.sticky-section .sticky-section-wrap {
|
||||
display: table;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sticky-section .vertical-centerer {
|
||||
.sticky-section .wrap,
|
||||
.sticky-section .drawer {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@ -82,7 +98,7 @@ body {
|
||||
|
||||
.right-sticky-section.sticky-section {
|
||||
right: 0;
|
||||
width: 47px;
|
||||
width: 50px;
|
||||
|
||||
-webkit-transition: all 200ms ease-out;
|
||||
-moz-transition: all 200ms ease-out;
|
||||
|
||||
90
index.html
90
index.html
@ -18,18 +18,16 @@
|
||||
<body>
|
||||
<div id="main-wrapper" class="main-wrapper">
|
||||
<div class="sticky-section left-sticky-section" id="tool-section">
|
||||
<div class="sticky-section-wrap">
|
||||
<div class="vertical-centerer">
|
||||
<ul id="tools-container" class="tools-wrapper"></ul>
|
||||
<div class="palette-wrapper">
|
||||
<div class="tool-icon tool-color-picker">
|
||||
<input id="color-picker" class="color {hash:true}" type="text" value="" />
|
||||
<input id="secondary-color-picker" class="secondary-color-picker color {hash:true}" type="text" value="" />
|
||||
</div>
|
||||
<div class="tool-icon tool-palette">
|
||||
<div id="palette" class="palette">
|
||||
<span class="tool-icon palette-color transparent-color" data-color="TRANSPARENT" title="Transparent"></span>
|
||||
</div>
|
||||
<div class="wrap">
|
||||
<ul id="tools-container" class="tools-wrapper"></ul>
|
||||
<div class="palette-wrapper">
|
||||
<div class="tool-icon tool-color-picker">
|
||||
<input id="color-picker" class="color {hash:true}" type="text" value="" />
|
||||
<input id="secondary-color-picker" class="secondary-color-picker color {hash:true}" type="text" value="" />
|
||||
</div>
|
||||
<div class="tool-icon tool-palette">
|
||||
<div id="palette" class="palette">
|
||||
<span class="tool-icon palette-color transparent-color" data-color="TRANSPARENT" title="Transparent"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -37,44 +35,42 @@
|
||||
</div>
|
||||
|
||||
<div id="application-action-section" class="sticky-section right-sticky-section">
|
||||
<div class="sticky-section-wrap">
|
||||
<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">
|
||||
<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">
|
||||
<span class="label">PNG</span>
|
||||
</div>
|
||||
<div class="wrap">
|
||||
<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="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="drawer vertical-centerer">
|
||||
<div class="drawer-content">
|
||||
<div class="settings-section">
|
||||
<div class="settings-title">
|
||||
Canvas settings:
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<label>Background:</label>
|
||||
<div id="background-picker-wrapper" class="background-picker-wrapper">
|
||||
<div class="background-picker light-picker-background" data-background-class="light-canvas-background"
|
||||
rel="tooltip" data-placement="bottom" title="light / high contrast">
|
||||
</div>
|
||||
<div class="background-picker medium-picker-background" data-background-class="medium-canvas-background"
|
||||
rel="tooltip" data-placement="bottom" title="medium / high contrast">
|
||||
</div>
|
||||
<div class="background-picker lowcont-medium-picker-background" data-background-class="lowcont-medium-canvas-background"
|
||||
rel="tooltip" data-placement="bottom" title="medium / low contrast">
|
||||
</div>
|
||||
<div class="background-picker lowcont-dark-picker-background" data-background-class="lowcont-dark-canvas-background"
|
||||
rel="tooltip" data-placement="bottom" title="dark / low contrast">
|
||||
</div>
|
||||
<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>
|
||||
<div class="drawer">
|
||||
<div class="drawer-content">
|
||||
<div class="settings-section">
|
||||
<div class="settings-title">
|
||||
Canvas settings:
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<label>Background:</label>
|
||||
<div id="background-picker-wrapper" class="background-picker-wrapper">
|
||||
<div class="background-picker light-picker-background" data-background-class="light-canvas-background"
|
||||
rel="tooltip" data-placement="bottom" title="light / high contrast">
|
||||
</div>
|
||||
<div class="background-picker medium-picker-background" data-background-class="medium-canvas-background"
|
||||
rel="tooltip" data-placement="bottom" title="medium / high contrast">
|
||||
</div>
|
||||
<div class="background-picker lowcont-medium-picker-background" data-background-class="lowcont-medium-canvas-background"
|
||||
rel="tooltip" data-placement="bottom" title="medium / low contrast">
|
||||
</div>
|
||||
<div class="background-picker lowcont-dark-picker-background" data-background-class="lowcont-dark-canvas-background"
|
||||
rel="tooltip" data-placement="bottom" title="dark / low contrast">
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<label for="show-grid">Show grid:</label> <input id="show-grid" type="checkbox"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<label for="show-grid">Show grid:</label> <input id="show-grid" type="checkbox"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
79
js/piskel.js
79
js/piskel.js
@ -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
|
||||
*/
|
||||
this.isStaticVersion = !window._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 (window._framesheetData) {
|
||||
frameSheet.load(window._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();
|
||||
|
||||
})();
|
||||
|
||||
@ -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, [{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user