Various bug fixes

- Added missing files from previous commit
- Fixed move cursor that would remain after using a Selection tool
- Switched to mousedown for Tool Selection to avoid missed clicks

js/controller/ToolController.js

@@ -36,7 +36,7 @@
     // Set SimplePen as default selected tool:
     this.selectTool_(this.tools[0]);
     // Activate listener on tool panel:
-    $("#tool-section").click($.proxy(this.onToolIconClicked_, this));
+    $("#tool-section").mousedown($.proxy(this.onToolIconClicked_, this));
   };
 
   /**
@@ -47,6 +47,7 @@
     var previousSelectedToolClass = stage.data("selected-tool-class");
     if(previousSelectedToolClass) {
       stage.removeClass(previousSelectedToolClass);
+      stage.removeClass(pskl.drawingtools.Move.TOOL_ID);
     }
     stage.addClass(tool.instance.toolId);
     stage.data("selected-tool-class", tool.instance.toolId);

js/controller/settings/LocalStorageController.js

@@ -0,0 +1,70 @@
+(function () {
+  var ns = $.namespace("pskl.controller.settings");
+
+  ns.LocalStorageController = function () {};
+
+  /**
+   * @public
+   */
+  ns.LocalStorageController.prototype.init = function() {
+    this.localStorageItemTemplate_ = pskl.utils.Template.get("local-storage-item-template");
+    this.service_ = pskl.app.localStorageService;
+    this.piskelsList = $('.local-piskels-list');
+
+    this.fillLocalPiskelsList_();
+
+    this.piskelsList.click(this.onPiskelsListClick_.bind(this));
+  };
+
+  ns.LocalStorageController.prototype.onPiskelsListClick_ = function (evt) {
+    var action = evt.target.getAttribute('data-action');
+    var name = evt.target.getAttribute('data-name');
+    if (action === 'load') {
+      if (window.confirm('This will erase your current piskel. Continue ?')) {
+        this.service_.load(name);
+        $.publish(Events.CLOSE_SETTINGS_DRAWER);
+      }
+    } else if (action === 'delete') {
+      if (window.confirm('This will permanently DELETE this piskel from your computer. Continue ?')) {
+        this.service_.remove(name);
+        $.publish(Events.CLOSE_SETTINGS_DRAWER);
+      }
+    }
+  };
+
+  ns.LocalStorageController.prototype.fillLocalPiskelsList_ = function () {
+    var html = "";
+    var keys = this.service_.getKeys();
+
+    var pad = function (num) {
+      if (num < 10) {
+        return "0" + num;
+      } else {
+        return "" + num;
+      }
+    };
+
+
+    keys.sort(function (k1, k2) {
+      if (k1.date < k2.date) {return 1;}
+      if (k1.date > k2.date) {return -1;}
+      return 0;
+    });
+
+    keys.forEach((function (key) {
+      var date = new Date(key.date);
+      var formattedDate = pskl.utils.Template.replace("{{Y}}/{{M}}/{{D}} {{H}}:{{m}}", {
+        Y : date.getFullYear(),
+        M : pad(date.getMonth() + 1),
+        D : pad(date.getDate()),
+        H : pad(date.getHours()),
+        m : pad(date.getMinutes())
+      });
+      html += pskl.utils.Template.replace(this.localStorageItemTemplate_, {name : key.name, date : formattedDate});
+    }).bind(this));
+
+    var tableBody_ = this.piskelsList.get(0).tBodies[0];
+    tableBody_.innerHTML = html;
+  };
+
+})();

js/drawingtools/Move.js

@@ -7,7 +7,7 @@
   var ns = $.namespace("pskl.drawingtools");
 
   ns.Move = function() {
-    this.toolId = "tool-move";
+    this.toolId = ns.Move.TOOL_ID;
     this.helpText = "Move tool";
 
     // Stroke's first point coordinates (set in applyToolAt)
@@ -15,6 +15,8 @@
     this.startRow = null;
   };
 
+  ns.Move.TOOL_ID = "tool-move";
+
   pskl.utils.inherit(ns.Move, ns.BaseTool);
 
   /**

js/drawingtools/selectiontools/BaseSelect.js

@@ -7,7 +7,7 @@
   var ns = $.namespace("pskl.drawingtools");
 
   ns.BaseSelect = function() {
-    this.secondaryToolId = "tool-move";
+    this.secondaryToolId = pskl.drawingtools.Move.TOOL_ID;
     this.BodyRoot = $('body');
 
     // Select's first point coordinates (set in applyToolAt)

templates/settings/localstorage.html

@@ -0,0 +1,18 @@
+<div class="settings-section">
+  <div class="settings-title">
+    Browse Local Piskels
+  </div>
+  <div class="settings-item">
+    <table class="local-piskels-list">
+      <tbody></tbody>
+    </table>
+  </div>
+  <script type="text/template" id="local-storage-item-template">
+    <tr class="local-piskel-item">
+      <td class="local-piskel-name">{{name}}</td>
+      <td class="local-piskel-save-date">{{date}}</td>
+      <td><a class="local-piskel-load-link" data-action="load" data-name="{{name}}" href="javascript:void(0);">load</a></td>
+      <td><a class="local-piskel-delete-link" data-action="delete" data-name="{{name}}" href="javascript:void(0);">x</a></td>
+    </tr>
+  </script>
+</div>