diff --git a/css/style.css b/css/style.css index e86b4f45..dcdb75eb 100644 --- a/css/style.css +++ b/css/style.css @@ -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; diff --git a/index.html b/index.html index 6f3ac7f2..f4e87260 100644 --- a/index.html +++ b/index.html @@ -18,18 +18,16 @@
-
-
-
    -
    -
    - - -
    -
    -
    - -
    +
    +
      +
      +
      + + +
      +
      +
      +
      @@ -37,44 +35,42 @@
      -
      -
      -
      - -
      -
      - GIF -
      -
      - PNG -
      +
      +
      + +
      +
      + GIF
      -
      -
      -
      -
      - Canvas settings: -
      -
      - -
      -
      -
      -
      -
      -
      -
      -
      -
      +
      + PNG +
      +
      +
      +
      +
      +
      + Canvas settings: +
      +
      + +
      +
      +
      +
      +
      +
      +
      +
      -
      - -
      +
      +
      +
      diff --git a/js/piskel.js b/js/piskel.js index 725d15c9..1f1e1d6f 100644 --- a/js/piskel.js +++ b/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(); })(); diff --git a/js/service/LocalStorageService.js b/js/service/LocalStorageService.js index b95b6bbd..7c50efc4 100644 --- a/js/service/LocalStorageService.js +++ b/js/service/LocalStorageService.js @@ -63,8 +63,8 @@ */ ns.LocalStorageService.prototype.displayRestoreNotification = function() { if(window.localStorage && window.localStorage.snapShot) { - var reloadLink = "reload"; - var discardLink = "discard"; + var reloadLink = "reload"; + var discardLink = "discard"; var content = "Non saved version found. " + reloadLink + " or " + discardLink; $.publish(Events.SHOW_NOTIFICATION, [{