save-panel : added piskel descriptor

css/forms.css

@@ -1,3 +1,7 @@
+.row {
+  display: block;
+}
+
 .textfield {
   background : black;
   border : 1px solid #888;

css/settings.css

@@ -51,6 +51,10 @@
   text-shadow: 1px 1px #000;
 }
 
+.settings-section .button {
+  margin: 0;
+}
+
 .settings-title {
   margin-top: 20px;
   margin-bottom: 10px;
@@ -61,6 +65,10 @@
 
 .settings-item {}
 
+.settings-form-section {
+  margin-bottom: 10px;
+}
+
 .background-picker-wrapper {
   overflow: hidden;
   padding: 10px 5px 20px 5px;

js/app.js

@@ -14,8 +14,9 @@
       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,7 +66,6 @@
       this.imageUploadService = new pskl.service.ImageUploadService();
       this.imageUploadService.init();
 
-
       this.cheatsheetService = new pskl.service.keyboard.CheatsheetService();
       this.cheatsheetService.init();
 
@@ -74,7 +74,7 @@
       drawingLoop.addCallback(this.render, this);
       drawingLoop.start();
 
-      this.initBootstrapTooltips_();
+      this.initTooltips_();
 
       /**
        * True when piskel is running in static mode (no back end needed).
@@ -110,7 +110,7 @@
       }
     },
 
-    initBootstrapTooltips_ : function () {
+    initTooltips_ : function () {
       $('body').tooltip({
         selector: '[rel=tooltip]'
       });
@@ -123,8 +123,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 +149,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 "";

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,12 @@
    * @public
    */
   ns.SaveController.prototype.init = function () {
-    this.titleInput = document.getElementById("save-title");
-    this.descriptionInput = document.getElementById("save-description");
+    this.titleInput = $('#save-title');
+    this.descriptionInput = $('#save-description');
+    this.saveForm = $('form[name=save-form]');
 
-    this.titleInput.value = this.piskelController.piskel.getDescriptor().name;
-    this.descriptionInput.value = this.piskelController.piskel.getDescriptor().description;
+    var descriptor = this.piskelController.piskel.getDescriptor();
+    this.titleInput.val(descriptor.name);
+    this.descriptionInput.val(descriptor.description);
   };
 })();

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,8 @@
     return this.descriptor;
   };
 
-  ns.Piskel.prototype.setDescriptor = function (name, desc) {
-    this.descriptor = {
-      name : name,
-      description : desc
-    };
+  ns.Piskel.prototype.setDescriptor = function (name, description) {
+    this.descriptor = new pskl.model.piskel.Descriptor(name, description);
   };
 
 })();

js/model/piskel/Descriptor.js

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

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/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;
 

piskel-script-list.js

@@ -37,6 +37,7 @@ exports.scripts = [
   // Models
   "js/model/Frame.js",
   "js/model/Layer.js",
+  "js/model/piskel/Descriptor.js",
   "js/model/Piskel.js",
 
   // Selection

templates/settings/save.html

@@ -2,15 +2,20 @@
   <div class="settings-title">Save</div>
   <div class="settings-item">
     <form action="" method="POST" name="save-form">
-      <div class="row">
-        <label>Title : </label>
+      <div class="settings-form-section">
+        <label class="row">Title : </label>
+        <input id="save-title" type="text" style="width :100%;"/>
       </div>
-      <input id="save-title" type="text" style="width :100%;"/>
-      <div class="row">
-        <label>Description :</label>
+      <div class="settings-form-section">
+        <label class="row">Description :</label>
+        <textarea id="save-description" style="width :100%;" placeholder="Your piskel in a few words"></textarea>
       </div>
-      <textarea id="save-description" style="width :100%;"></textarea>
-      <input type="submit" class="button button-primary gif-upload-button" value="Save" />
+      <div class="settings-form-section">
+        <label class="row">
+          Public <input type="checkbox" value="1" name="save-public-checkbox"/>
+        </label>
+      </div>
+      <input type="submit" class="button button-primary save-button" value="Save" />
     </form>
   </div>
 </div>