Merged

js/app.js

@@ -10,12 +10,19 @@
   ns.app = {
 
     init : function () {
+      /**
+       * 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.isAppEngineVersion = !!pskl.appEngineToken_;
+
       this.shortcutService = new pskl.service.keyboard.ShortcutService();
       this.shortcutService.init();
 
       var size = this.readSizeFromURL_();
-      var piskel = new pskl.model.Piskel(size.width, size.height);
-      piskel.setDescriptor("New Piskel", "Some text ...");
+
+      var descriptor = new pskl.model.piskel.Descriptor('New Piskel', '');
+      var piskel = new pskl.model.Piskel(size.width, size.height, descriptor);
 
       var layer = new pskl.model.Layer("Layer 1");
       var frame = new pskl.model.Frame(size.width, size.height);
@@ -65,31 +72,31 @@
       this.imageUploadService = new pskl.service.ImageUploadService();
       this.imageUploadService.init();
 
-
       this.cheatsheetService = new pskl.service.keyboard.CheatsheetService();
       this.cheatsheetService.init();
 
+      if (this.isAppEngineVersion) {
+        this.storageService = new pskl.service.AppEngineStorageService(this.piskelController);
+      } else {
+        this.storageService = new pskl.service.GithubStorageService(this.piskelController);
+      }
+      this.storageService.init();
+
 
       var drawingLoop = new pskl.rendering.DrawingLoop();
       drawingLoop.addCallback(this.render, this);
       drawingLoop.start();
 
-      this.initBootstrapTooltips_();
+      this.initTooltips_();
 
-      /**
-       * 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_;
-
-      if (this.isStaticVersion) {
-        this.finishInitStatic_();
-      } else {
+      if (this.isAppEngineVersion) {
         this.finishInitAppEngine_();
+      } else {
+        this.finishInitGithub_();
       }
     },
 
-    finishInitStatic_ : function () {
+    finishInitGithub_ : function () {
       var framesheetId = this.readFramesheetIdFromURL_();
       if (framesheetId) {
         $.publish(Events.SHOW_NOTIFICATION, [{
@@ -102,15 +109,16 @@
     },
 
     finishInitAppEngine_ : function () {
-      if (pskl.framesheetData_ && pskl.framesheetData_.content) {
-        pskl.utils.serialization.Deserializer.deserialize(pskl.framesheetData_.content, function (piskel) {
+      if (pskl.appEnginePiskelData_ && pskl.appEnginePiskelData_.piskel) {
+        pskl.utils.serialization.Deserializer.deserialize(pskl.appEnginePiskelData_.piskel, function (piskel) {
+          piskel.setDescriptor(pskl.appEnginePiskelData_.descriptor);
           pskl.app.piskelController.setPiskel(piskel);
-          pskl.app.animationController.setFPS(pskl.framesheetData_.fps);
+          pskl.app.animationController.setFPS(pskl.appEnginePiskelData_.fps);
         });
       }
     },
 
-    initBootstrapTooltips_ : function () {
+    initTooltips_ : function () {
       $('body').tooltip({
         selector: '[rel=tooltip]'
       });
@@ -123,8 +131,8 @@
     },
 
     readSizeFromURL_ : function () {
-      var sizeParam = this.readUrlParameter_("size"),
-        size;
+      var sizeParam = this.readUrlParameter_("size");
+      var size;
       // parameter expected as size=64x48 => size=widthxheight
       var parts = sizeParam.split("x");
       if (parts && parts.length == 2 && !isNaN(parts[0]) && !isNaN(parts[1])) {
@@ -149,13 +157,12 @@
     },
 
     readUrlParameter_ : function (paramName) {
-      var searchString = window.location.search.substring(1),
-        i, val, params = searchString.split("&");
-
-      for (i = 0; i < params.length; i++) {
-        val = params[i].split("=");
-        if (val[0] == paramName) {
-          return window.unescape(val[1]);
+      var searchString = window.location.search.substring(1);
+      var params = searchString.split("&");
+      for (var i = 0; i < params.length; i++) {
+        var param = params[i].split("=");
+        if (param[0] == paramName) {
+          return window.unescape(param[1]);
         }
       }
       return "";
@@ -182,65 +189,8 @@
       xhr.send();
     },
 
-    storeSheet : function (event) {
-      if (this.isStaticVersion) {
-        this.storeSheetStatic_();
-      } else {
-        this.storeSheetAppEngine_();
-      }
-
-      if(event) {
-        event.stopPropagation();
-        event.preventDefault();
-      }
-      return false;
-    },
-
-    storeSheetStatic_ : function () {
-      var xhr = new XMLHttpRequest();
-      var formData = new FormData();
-      formData.append('framesheet_content', this.piskelController.serialize());
-      formData.append('fps_speed', $('#preview-fps').val());
-
-      xhr.open('POST', Constants.STATIC.URL.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;
-        } else {
-          this.onerror(e);
-        }
-      };
-      xhr.onerror = function(e) {
-        $.publish(Events.SHOW_NOTIFICATION, [{"content": "Saving failed ("+this.status+")"}]);
-      };
-      xhr.send(formData);
-    },
-
-    storeSheetAppEngine_ : function () {
-      var xhr = new XMLHttpRequest();
-      var formData = new FormData();
-      formData.append('framesheet_content', this.piskelController.serialize());
-      formData.append('fps_speed', $('#preview-fps').val());
-      formData.append('name', $('#piskel-name').val());
-      formData.append('frames', this.piskelController.getFrameCount());
-      formData.append('preview', this.getFirstFrameAsPng());
-      formData.append('framesheet', this.getFramesheetAsPng());
-
-      xhr.open('POST', Constants.APPENGINE.URL.SAVE, true);
-
-      xhr.onload = function(e) {
-        if (this.status == 200) {
-          $.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);
+    store : function (callbacks) {
+      this.storageService.store(callbacks);
     },
 
     getFirstFrameAsPng : function () {

js/controller/NotificationController.js

@@ -15,6 +15,8 @@
    * @private
    */
   ns.NotificationController.prototype.displayMessage_ = function (evt, messageInfo) {
+    this.removeMessage_();
+
     var message = document.createElement('div');
     message.id = "user-message";
     message.className = "user-message";

js/controller/settings/ImportController.js

@@ -154,7 +154,9 @@
         var frame = pskl.utils.FrameUtils.createFromImage(image);
 
         var layer = pskl.model.Layer.fromFrames('Layer 1', [frame]);
-        var piskel = pskl.model.Piskel.fromLayers([layer]);
+
+        var descriptor = new pskl.model.piskel.Descriptor('Imported piskel', '');
+        var piskel = pskl.model.Piskel.fromLayers([layer], descriptor);
 
         pskl.app.piskelController.setPiskel(piskel);
         pskl.app.animationController.setFPS(Constants.DEFAULT.FPS);

js/controller/settings/SaveController.js

@@ -1,5 +1,5 @@
 (function () {
-  var ns = $.namespace("pskl.controller.settings");
+  var ns = $.namespace('pskl.controller.settings');
 
   ns.SaveController = function (piskelController) {
     this.piskelController = piskelController;
@@ -9,10 +9,67 @@
    * @public
    */
   ns.SaveController.prototype.init = function () {
-    this.titleInput = document.getElementById("save-title");
-    this.descriptionInput = document.getElementById("save-description");
+    this.saveForm = $('form[name=save-form]');
+    this.nameInput =  $('#save-name');
+    this.descriptionInput = $('#save-description');
+    this.isPublicCheckbox = $('input[name=save-public-checkbox]');
+    this.saveButton = $('#save-button');
+    this.status = $('#save-status');
 
-    this.titleInput.value = this.piskelController.piskel.getDescriptor().name;
-    this.descriptionInput.value = this.piskelController.piskel.getDescriptor().description;
+    var descriptor = this.piskelController.piskel.getDescriptor();
+    this.nameInput.val(descriptor.name);
+    this.descriptionInput.val(descriptor.description);
+
+    this.isPublicCheckbox.prop('checked', descriptor.isPublic);
+
+    if (!pskl.app.isAppEngineVersion) {
+      this.nameInput.attr('disabled', 'disabled');
+      this.descriptionInput.attr('disabled', 'disabled');
+      this.isPublicCheckbox.attr('disabled', 'disabled');
+    }
+
+    this.saveForm.submit(this.onSaveFormSubmit_.bind(this));
+  };
+
+  ns.SaveController.prototype.onSaveFormSubmit_ = function (evt) {
+    evt.preventDefault();
+    evt.stopPropagation();
+
+    var name = this.nameInput.val();
+    var description = this.descriptionInput.val();
+    var isPublic = !!this.isPublicCheckbox.prop('checked');
+
+    var descriptor = new pskl.model.piskel.Descriptor(name, description, isPublic);
+    this.piskelController.piskel.setDescriptor(descriptor);
+
+    this.beforeSaving_();
+    pskl.app.store({
+      success : this.onSaveSuccess_.bind(this),
+      error : this.onSaveError_.bind(this),
+      after : this.afterSaving_.bind(this)
+    });
+  };
+
+  ns.SaveController.prototype.beforeSaving_ = function () {
+    this.saveButton.attr('disabled', true);
+    this.status.html('Saving ...');
+    $('.piskel-name').get(0).classList.add('piskel-name-saving');
+  };
+
+  ns.SaveController.prototype.onSaveSuccess_ = function () {
+    $.publish(Events.CLOSE_SETTINGS_DRAWER);
+    $.publish(Events.SHOW_NOTIFICATION, [{"content": "Successfully saved !"}]);
+  };
+
+  ns.SaveController.prototype.onSaveError_ = function (status) {
+    $.publish(Events.SHOW_NOTIFICATION, [{"content": "Saving failed ("+status+")"}]);
+  };
+
+  ns.SaveController.prototype.afterSaving_ = function () {
+    this.saveButton.attr('disabled', false);
+    this.status.html('');
+    $('.piskel-name').get(0).classList.remove('piskel-name-saving');
+
+    window.setTimeout($.publish.bind($, Events.HIDE_NOTIFICATION), 2000);
   };
 })();

js/lib/iframeLoader.js

@@ -37,7 +37,11 @@
   var storeFrame = function (iframe) {
     var script=document.createElement("script");
     script.setAttribute("type", "text/html");
-    script.setAttribute("id", iframe.getAttribute("src"));
+    if (window.pskl && window.pskl.appEngineToken_) {
+      script.setAttribute("id", iframe.getAttribute("src").replace('../',''));
+    } else {
+      script.setAttribute("id", iframe.getAttribute("src"));
+    }
     script.innerHTML = iframe.contentWindow.document.body.innerHTML;
     iframe.parentNode.removeChild(iframe);
     document.body.appendChild(script);

js/model/Piskel.js

@@ -8,8 +8,8 @@
    * @param {String} name
    * @param {String} description
    */
-  ns.Piskel = function (width, height) {
-    if (width && height) {
+  ns.Piskel = function (width, height, descriptor) {
+    if (width && height && descriptor) {
       /** @type {Array} */
       this.layers = [];
 
@@ -19,7 +19,7 @@
       /** @type {Number} */
       this.height = height;
 
-      this.descriptor = null;
+      this.descriptor = descriptor;
     } else {
       throw 'Missing arguments in Piskel constructor : ' + Array.prototype.join.call(arguments, ",");
     }
@@ -31,11 +31,11 @@
    * @param  {Array<pskl.model.Layer>} layers
    * @return {pskl.model.Piskel}
    */
-  ns.Piskel.fromLayers = function (layers) {
+  ns.Piskel.fromLayers = function (layers, descriptor) {
     var piskel = null;
     if (layers.length > 0 && layers[0].length() > 0) {
       var sampleFrame = layers[0].getFrameAt(0);
-      piskel = new pskl.model.Piskel(sampleFrame.getWidth(), sampleFrame.getHeight());
+      piskel = new pskl.model.Piskel(sampleFrame.getWidth(), sampleFrame.getHeight(), descriptor);
       layers.forEach(piskel.addLayer.bind(piskel));
     } else {
       throw 'Piskel.fromLayers expects array of non empty pskl.model.Layer as first argument';
@@ -104,11 +104,9 @@
     return this.descriptor;
   };
 
-  ns.Piskel.prototype.setDescriptor = function (name, desc) {
-    this.descriptor = {
-      name : name,
-      description : desc
-    };
+  ns.Piskel.prototype.setDescriptor = function (descriptor) {
+    this.descriptor = descriptor;
+    var appEngineEditorHeader = $('.piskel-name').html(this.descriptor.name);
   };
 
 })();

js/model/piskel/Descriptor.js

@@ -0,0 +1,9 @@
+(function () {
+  var ns = $.namespace('pskl.model.piskel');
+
+  ns.Descriptor = function (name, description, isPublic) {
+    this.name = name;
+    this.description = description;
+    this.isPublic = isPublic;
+  };
+})();

js/rendering/DrawingLoop.js

@@ -6,6 +6,7 @@
     this.isRunning = false;
     this.previousTime = 0;
     this.callbacks = [];
+    this.i = 0;
   };
 
   ns.DrawingLoop.prototype.addCallback = function (callback, scope, args) {
@@ -33,7 +34,10 @@
   ns.DrawingLoop.prototype.loop_ = function () {
     var currentTime = Date.now();
     var delta = currentTime - this.previousTime;
-    this.executeCallbacks_(delta);
+    this.i++;
+    if(this.i%2 === 0) {
+      this.executeCallbacks_(delta);
+    }
     this.previousTime = currentTime;
     this.requestAnimationFrame.call(window, this.loop_.bind(this));
   };

js/service/AppEngineStorageService.js

@@ -0,0 +1,49 @@
+(function () {
+  var ns = $.namespace('pskl.service');
+
+  ns.AppEngineStorageService = function (piskelController) {
+    this.piskelController = piskelController;
+  };
+
+  ns.AppEngineStorageService.prototype.init = function () {};
+
+  ns.AppEngineStorageService.prototype.store = function (callbacks) {
+    var formData = this.prepareFormData_();
+
+    var xhr = new XMLHttpRequest();
+    xhr.open('POST', Constants.APPENGINE.URL.SAVE, true);
+
+    xhr.onload = function(e) {
+      if (this.status == 200) {
+        callbacks.success();
+        callbacks.after();
+      } else {
+        this.onerror(e);
+      }
+    };
+    xhr.onerror = function(e) {
+      callbacks.error(this.status);
+      callbacks.after();
+    };
+    xhr.send(formData);
+  };
+
+  ns.AppEngineStorageService.prototype.prepareFormData_ = function () {
+    var piskel = this.piskelController.piskel;
+    var descriptor = piskel.getDescriptor();
+
+    var formData = new FormData();
+    formData.append('framesheet', this.piskelController.serialize());
+    formData.append('fps', this.piskelController.getFPS());
+    formData.append('name', descriptor.name);
+    formData.append('description', descriptor.description);
+    if (descriptor.isPublic) {
+      formData.append('public', true);
+    }
+    formData.append('frames', this.piskelController.getFrameCount());
+    formData.append('first_frame_as_png', pskl.app.getFirstFrameAsPng());
+    formData.append('framesheet_as_png', pskl.app.getFramesheetAsPng());
+
+    return formData;
+  };
+})();

js/service/GithubStorageService.js

@@ -0,0 +1,31 @@
+(function () {
+  var ns = $.namespace('pskl.service');
+
+  ns.GithubStorageService = function (piskelController) {
+    this.piskelController = piskelController;
+  };
+
+  ns.GithubStorageService.prototype.init = function () {};
+
+  ns.GithubStorageService.prototype.store = function (callbacks) {
+    var xhr = new XMLHttpRequest();
+    var formData = new FormData();
+    formData.append('framesheet_content', this.piskelController.serialize());
+    formData.append('fps_speed', this.piskelController.getFPS());
+
+    xhr.open('POST', Constants.STATIC.URL.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;
+      } else {
+        this.onerror(e);
+      }
+    };
+    xhr.onerror = function(e) {
+      $.publish(Events.SHOW_NOTIFICATION, [{"content": "Saving failed ("+this.status+")"}]);
+    };
+    xhr.send(formData);
+  };
+})();

js/service/HistoryService.js

@@ -2,11 +2,13 @@
   var ns = $.namespace("pskl.service");
   ns.HistoryService = function (piskelController) {
     this.piskelController = piskelController;
+    this.saveState__b = this.saveState.bind(this);
   };
 
   ns.HistoryService.prototype.init = function () {
 
-    $.subscribe(Events.TOOL_RELEASED, this.saveState.bind(this));
+    $.subscribe(Events.PISKEL_RESET, this.saveState__b);
+    $.subscribe(Events.TOOL_RELEASED, this.saveState__b);
 
     pskl.app.shortcutService.addShortcut('ctrl+Z', this.undo.bind(this));
     pskl.app.shortcutService.addShortcut('ctrl+Y', this.redo.bind(this));
@@ -18,12 +20,16 @@
 
   ns.HistoryService.prototype.undo = function () {
     this.piskelController.getCurrentFrame().loadPreviousState();
+    $.unsubscribe(Events.PISKEL_RESET, this.saveState__b);
     $.publish(Events.PISKEL_RESET);
+    $.subscribe(Events.PISKEL_RESET, this.saveState__b);
   };
 
   ns.HistoryService.prototype.redo = function () {
     this.piskelController.getCurrentFrame().loadNextState();
+    $.unsubscribe(Events.PISKEL_RESET, this.saveState__b);
     $.publish(Events.PISKEL_RESET);
+    $.subscribe(Events.PISKEL_RESET, this.saveState__b);
   };
 
 })();

js/service/LocalStorageService.js

@@ -45,6 +45,7 @@
    */
   ns.LocalStorageService.prototype.restoreFromLocalStorage_ = function() {
     var framesheet = JSON.parse(window.localStorage.snapShot);
+
     pskl.utils.serialization.Deserializer.deserialize(framesheet, function (piskel) {
       pskl.app.piskelController.setPiskel(piskel);
     });

js/service/keyboard/ShortcutService.js

@@ -54,28 +54,36 @@
    * @private
    */
   ns.ShortcutService.prototype.onKeyUp_ = function(evt) {
-    // jquery names FTW ...
-    var keycode = evt.which;
-    var charkey = pskl.service.keyboard.KeycodeTranslator.toChar(keycode);
+    if (!this.isInInput_(evt)) {
+      // jquery names FTW ...
+      var keycode = evt.which;
+      var targetTagName = evt.target.nodeName.toUpperCase();
+      var charkey = pskl.service.keyboard.KeycodeTranslator.toChar(keycode);
 
-    var keyShortcuts = this.shortcuts_[charkey];
-    if(keyShortcuts) {
-      var cb;
-      if (this.isCtrlKeyPressed_(evt)) {
-        cb = keyShortcuts.ctrl;
-      } else if (this.isShiftKeyPressed_(evt)) {
-        cb = keyShortcuts.shift;
-      } else {
-        cb = keyShortcuts.normal;
-      }
+      var keyShortcuts = this.shortcuts_[charkey];
+      if(keyShortcuts) {
+        var cb;
+        if (this.isCtrlKeyPressed_(evt)) {
+          cb = keyShortcuts.ctrl;
+        } else if (this.isShiftKeyPressed_(evt)) {
+          cb = keyShortcuts.shift;
+        } else {
+          cb = keyShortcuts.normal;
+        }
 
-      if(cb) {
-        cb(charkey);
-        evt.preventDefault();
+        if(cb) {
+          cb(charkey);
+          evt.preventDefault();
+        }
       }
     }
   };
 
+  ns.ShortcutService.prototype.isInInput_ = function (evt) {
+    var targetTagName = evt.target.nodeName.toUpperCase();
+    return targetTagName === 'INPUT' || targetTagName === 'TEXTAREA';
+  };
+
   ns.ShortcutService.prototype.isCtrlKeyPressed_ = function (evt) {
     return this.isMac_() ? evt.metaKey : evt.ctrlKey;
   };

js/utils/serialization/Deserializer.js

@@ -23,7 +23,9 @@
   ns.Deserializer.prototype.deserialize = function () {
     var data = this.data_;
     var piskelData = data.piskel;
-    this.piskel_ = new pskl.model.Piskel(piskelData.width, piskelData.height);
+
+    var descriptor = new pskl.model.piskel.Descriptor('Deserialized piskel', '');
+    this.piskel_ = new pskl.model.Piskel(piskelData.width, piskelData.height, descriptor);
 
     this.layersToLoad_ = piskelData.layers.length;
 

js/utils/serialization/backward/Deserializer_v0.js

@@ -11,8 +11,9 @@
     var frames = pixelGrids.map(function (grid) {
       return pskl.model.Frame.fromPixelGrid(grid);
     });
+    var descriptor = new pskl.model.piskel.Descriptor('Deserialized piskel', '');
     var layer = pskl.model.Layer.fromFrames('Layer 1', frames);
 
-    this.callback_(pskl.model.Piskel.fromLayers([layer]));
+    this.callback_(pskl.model.Piskel.fromLayers([layer], descriptor));
   };
 })();

js/utils/serialization/backward/Deserializer_v1.js

@@ -8,7 +8,8 @@
 
   ns.Deserializer_v1.prototype.deserialize = function () {
     var piskelData = this.data_.piskel;
-    var piskel = new pskl.model.Piskel(piskelData.width, piskelData.height);
+    var descriptor = new pskl.model.piskel.Descriptor('Deserialized piskel', '');
+    var piskel = new pskl.model.Piskel(piskelData.width, piskelData.height, descriptor);
 
     piskelData.layers.forEach(function (serializedLayer) {
       var layer = this.deserializeLayer(serializedLayer);