Merge pull request #153 from juliandescottes/feature-local-storage

Feature local storage

.gitignore

@@ -15,5 +15,8 @@ npm-debug.log
 # builds
 build
 
+# marked as private
+*.private.*
+
 # Closure compiler generated JS binary.
 closure_compiled_binary.js

Gruntfile.js

@@ -65,7 +65,7 @@ module.exports = function(grunt) {
       }
     },
     ghost : {
-      'default' : getGhostConfig(3000),
+      'default' : getGhostConfig(5000),
       local : getGhostConfig(50)
     },
     concat : {

css/settings.css

@@ -56,6 +56,13 @@
   position: relative;
 }
 
+.tool-icon.local-storage-icon {
+  background-image: url(../img/local-storage-icon.png);
+  background-position: 10px 12px;
+  background-size: 30px;
+  position: relative;
+}
+
 .tool-icon.import-icon {
   background-image: url(../img/import-icon.png);
   background-position: 10px 5px;
@@ -247,12 +254,10 @@
 }
 
 #save-status {
-  margin-left: 10px;
+  margin-top: 10px;
 }
 .status {
   height: 1.5rem;
-
-  word-break : break-all;
   vertical-align: middle;
   font-weight: normal;
   text-shadow: none;
@@ -265,3 +270,32 @@
 [name*=checkbox] {
   vertical-align: middle;
 }
+
+.local-piskels-list {
+  width: 100%;
+}
+
+.local-piskel-item {
+  height: 3em;
+}
+
+.local-piskel-name {
+  width: 40%;
+}
+
+.local-piskel-save-date {
+  font-weight : normal;
+}
+
+.local-piskels-list a {
+  text-decoration: none;
+}
+.local-piskels-list a:hover {
+  text-decoration: underline;
+}
+.local-piskel-load-link {
+  color : gold;
+}
+.local-piskel-delete-link {
+  color : red;
+}

css/spectrum/spectrum-overrides.css

@@ -25,13 +25,18 @@
 
 /* Remove the padding on the input container */
 .sp-replacer {
-  padding: 3px;
+  padding: 4px;
   height: 100%;
   border-width: 0;
   box-sizing: border-box;
   -moz-box-sizing:border-box;
   background-color: #444;
 }
+
+.sp-replacer:hover {
+  background-color: #888;
+}
+
 /* Hide the triangle */
 .sp-dd {
   display: none;

css/tools.css

@@ -136,6 +136,36 @@
   cursor: url(../img/icons/dropper.png) 0 15, pointer;
 }
 
+.swap-colors-icon {
+  background-image: url(../img/tools/swap-arrow-square-small-grey.png);
+  position: relative;
+  top: 50px;
+  left: 6px;
+  height: 18px;
+  width: 18px;
+  background-size: 18px;
+  opacity : 0.3;
+  cursor : pointer;
+}
+
+.swap-colors-icon:hover {
+  opacity : 1;
+}
+
+.tool-color-picker {
+  position:relative;
+}
+
+.tool-color-picker:nth-child(1) {
+  z-index : 100;
+}
+
+.tool-color-picker:nth-child(2) {
+  z-index : 90;
+  margin-top: 20px;
+  margin-left:-20px;
+}
+
 .tool-color-picker input {
   width: 16px;
   height: 16px;
@@ -155,6 +185,7 @@
 
 .palette-wrapper {
   margin-top: 10px;
+  margin-left: 10px;
 }
 
 .palette-color[data-color=TRANSPARENT] {

index.html

@@ -55,6 +55,7 @@
             <iframe src="templates/settings/resize.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
             <iframe src="templates/settings/export-gif.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
             <iframe src="templates/settings/import.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
+            <iframe src="templates/settings/localstorage.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
             <iframe src="templates/settings/save.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
           </div>
         </div>

js/Events.js

@@ -29,6 +29,8 @@ var Events = {
    */
   PISKEL_RESET: "PISKEL_RESET",
 
+  PISKEL_SAVED: "PISKEL_SAVED",
+
   FRAME_SIZE_CHANGED : "FRAME_SIZE_CHANGED",
 
   SELECTION_CREATED: "SELECTION_CREATED",

js/app.js

@@ -75,6 +75,9 @@
       this.cheatsheetService = new pskl.service.keyboard.CheatsheetService();
       this.cheatsheetService.init();
 
+      this.savedStatusService = new pskl.service.SavedStatusService(this.piskelController);
+      this.savedStatusService.init();
+
       if (this.isAppEngineVersion) {
         this.storageService = new pskl.service.AppEngineStorageService(this.piskelController);
       } else {
@@ -103,8 +106,6 @@
           "content" : "Loading animation with id : [" + framesheetId + "]"
         }]);
         this.loadFramesheetFromService(framesheetId);
-      } else {
-        this.localStorageService.displayRestoreNotification();
       }
     },
 
@@ -118,6 +119,10 @@
       }
     },
 
+    isLoggedIn : function () {
+      return pskl.appEnginePiskelData_ && pskl.appEnginePiskelData_.isLoggedIn;
+    },
+
     initTooltips_ : function () {
       $('body').tooltip({
         selector: '[rel=tooltip]'

js/controller/PaletteController.js

@@ -43,6 +43,8 @@
     secondaryColorPicker.change({isPrimary : false}, $.proxy(this.onPickerChange_, this));
     this.setTitleOnPicker_(Constants.TRANSPARENT_COLOR, secondaryColorPicker);
 
+    var swapColorsIcon = $('.swap-colors-icon');
+    swapColorsIcon.click(this.swapColors.bind(this));
   };
 
   /**

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/controller/settings/SaveController.js

@@ -13,7 +13,12 @@
     this.nameInput =  $('#save-name');
     this.descriptionInput = $('#save-description');
     this.isPublicCheckbox = $('input[name=save-public-checkbox]');
-    this.saveButton = $('#save-button');
+    this.saveCloudButton = $('#save-cloud-button');
+    this.saveLocalButton = $('#save-local-button');
+
+    // Only available in app-engine mode ...
+    this.piskelName = $('.piskel-name').get(0);
+
     this.status = $('#save-status');
 
     var descriptor = this.piskelController.piskel.getDescriptor();
@@ -22,21 +27,22 @@
 
     this.isPublicCheckbox.prop('checked', descriptor.isPublic);
 
-    if (!pskl.app.isAppEngineVersion) {
+    if (!pskl.app.isLoggedIn()) {
-      this.nameInput.attr('disabled', 'disabled');
+      this.saveCloudButton.attr('disabled', 'disabled');
-      this.descriptionInput.attr('disabled', 'disabled');
+      this.status.html('You are not logged in. Only Local Save is available.');
-      this.isPublicCheckbox.attr('disabled', 'disabled');
+    } else {
+      this.saveForm.submit(this.onSaveFormSubmit_.bind(this));
     }
 
-    this.saveForm.submit(this.onSaveFormSubmit_.bind(this));
+    this.saveLocalButton.click(this.onSaveLocalClick_.bind(this));
   };
 
   ns.SaveController.prototype.onSaveFormSubmit_ = function (evt) {
     evt.preventDefault();
     evt.stopPropagation();
 
-    var name = this.nameInput.val();
+    var name = this.getName();
-    var description = this.descriptionInput.val();
+    var description = this.getDescription();
     var isPublic = !!this.isPublicCheckbox.prop('checked');
 
     var descriptor = new pskl.model.piskel.Descriptor(name, description, isPublic);
@@ -50,15 +56,46 @@
     });
   };
 
+  ns.SaveController.prototype.onSaveLocalClick_ = function (evt) {
+    var localStorageService = pskl.app.localStorageService;
+    var isOk = true;
+    var name = this.getName();
+    var description = this.getDescription();
+    if (localStorageService.getPiskel(name)) {
+      isOk = window.confirm('There is already a piskel saved as ' + name + '. Override ?');
+    }
+
+    if (isOk) {
+      this.beforeSaving_();
+      localStorageService.save(name, description, pskl.app.piskelController.serialize());
+      window.setTimeout(function () {
+        this.onSaveSuccess_();
+        this.afterSaving_();
+      }.bind(this), 1000);
+    }
+  };
+
+  ns.SaveController.prototype.getName = function () {
+    return this.nameInput.val();
+  };
+
+  ns.SaveController.prototype.getDescription = function () {
+    return this.descriptionInput.val();
+  };
+
   ns.SaveController.prototype.beforeSaving_ = function () {
-    this.saveButton.attr('disabled', true);
+    this.saveCloudButton.attr('disabled', true);
     this.status.html('Saving ...');
-    $('.piskel-name').get(0).classList.add('piskel-name-saving');
+
+    if (this.piskelName) {
+      this.piskelName.classList.add('piskel-name-saving');
+    }
   };
 
   ns.SaveController.prototype.onSaveSuccess_ = function () {
     $.publish(Events.CLOSE_SETTINGS_DRAWER);
     $.publish(Events.SHOW_NOTIFICATION, [{"content": "Successfully saved !"}]);
+    $.publish(Events.PISKEL_SAVED);
   };
 
   ns.SaveController.prototype.onSaveError_ = function (status) {
@@ -66,9 +103,12 @@
   };
 
   ns.SaveController.prototype.afterSaving_ = function () {
-    this.saveButton.attr('disabled', false);
+    this.saveCloudButton.attr('disabled', false);
     this.status.html('');
-    $('.piskel-name').get(0).classList.remove('piskel-name-saving');
+
+    if (this.piskelName) {
+      this.piskelName.classList.remove('piskel-name-saving');
+    }
 
     window.setTimeout($.publish.bind($, Events.HIDE_NOTIFICATION), 2000);
   };

js/controller/settings/SettingsController.js

@@ -18,6 +18,10 @@
       template : 'templates/settings/import.html',
       controller : ns.ImportController
     },
+    'localstorage' : {
+      template : 'templates/settings/localstorage.html',
+      controller : ns.LocalStorageController
+    },
     'save' : {
       template : 'templates/settings/save.html',
       controller : ns.SaveController

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)

js/service/LocalStorageService.js

@@ -7,83 +7,74 @@
       throw "Bad LocalStorageService initialization: <undefined piskelController>";
     }
     this.piskelController = piskelController;
-    this.localStorageThrottler_ = null;
   };
 
-  /**
+  ns.LocalStorageService.prototype.init = function() {};
-   * @public
+
-   */
+// localStorage.setItem('piskel_bkp', pskl.app.piskelController.serialize())
-  ns.LocalStorageService.prototype.init = function(piskelController) {
+
-    $.subscribe(Events.LOCALSTORAGE_REQUEST, $.proxy(this.persistToLocalStorageRequest_, this));
+  ns.LocalStorageService.prototype.save = function(name, description, piskel) {
+    this.removeFromKeys_(name);
+    this.addToKeys_(name, description, Date.now());
+    window.localStorage.setItem('piskel.' + name, piskel);
   };
 
-  /**
+  ns.LocalStorageService.prototype.load = function(name) {
-   * @private
+    var piskelString = this.getPiskel(name);
-   */
+    var key = this.getKey_(name);
-  ns.LocalStorageService.prototype.persistToLocalStorageRequest_ = function () {
-    // Persist to localStorage when drawing. We throttle localStorage accesses
-    // for high frequency drawing (eg mousemove).
-    if(this.localStorageThrottler_ !== null) {
-      window.clearTimeout(this.localStorageThrottler_);
-    }
-    this.localStorageThrottler_ = window.setTimeout($.proxy(function() {
-      this.persistToLocalStorage_();
-      this.localStorageThrottler_ = null;
-    }, this), 1000);
-  };
 
-  /**
+    pskl.utils.serialization.Deserializer.deserialize(JSON.parse(piskelString), function (piskel) {
-   * @private
+      piskel.setDescriptor(new pskl.model.piskel.Descriptor(name, key.description, true));
-   */
-  ns.LocalStorageService.prototype.persistToLocalStorage_ = function() {
-    console.log('[LocalStorage service]: Snapshot stored');
-    window.localStorage.snapShot = this.piskelController.serialize();
-  };
-
-  /**
-   * @private
-   */
-  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);
     });
   };
 
-  /**
+  ns.LocalStorageService.prototype.remove = function(name) {
-   * @private
+    this.removeFromKeys_(name);
-   */
+    window.localStorage.removeItem('piskel.' + name);
-  ns.LocalStorageService.prototype.cleanLocalStorage_ = function() {
-    console.log('[LocalStorage service]: Snapshot removed');
-    delete window.localStorage.snapShot;
   };
 
-  /**
+  ns.LocalStorageService.prototype.saveKeys_ = function(keys) {
-   * @public
+    window.localStorage.setItem('piskel.keys', JSON.stringify(keys));
-   */
+  };
-  ns.LocalStorageService.prototype.displayRestoreNotification = function() {
-    if(window.localStorage && window.localStorage.snapShot) {
-      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, [{
+  ns.LocalStorageService.prototype.removeFromKeys_ = function(name) {
-        "content": content,
+    var keys = this.getKeys();
-        "behavior": $.proxy(function(rootNode) {
+    var otherKeys = keys.filter(function (key) {
-          rootNode = $(rootNode);
+      return key.name !== name;
-          rootNode.click($.proxy(function(evt) {
+    });
-            var target = $(evt.target);
+
-            if(target.hasClass("localstorage-restore")) {
+    this.saveKeys_(otherKeys);
-              this.restoreFromLocalStorage_();
+  };
-            }
+
-            else if (target.hasClass("localstorage-discard")) {
+  ns.LocalStorageService.prototype.getKey_ = function(name) {
-              this.cleanLocalStorage_();
+    var matches = this.getKeys().filter(function (key) {
-            }
+      return key.name === name;
-            $.publish(Events.HIDE_NOTIFICATION);
+    });
-          }, this));
+    if (matches.length > 0) {
-        }, this)
+      return matches[0];
-      }]);
+    } else {
+      return null;
     }
   };
+
+  ns.LocalStorageService.prototype.addToKeys_ = function(name, description, date) {
+    var keys = this.getKeys();
+    keys.push({
+      name : name,
+      description : description,
+      date : date
+    });
+    this.saveKeys_(keys);
+  };
+
+  ns.LocalStorageService.prototype.getPiskel = function(name) {
+    return window.localStorage.getItem('piskel.' + name);
+  };
+
+  ns.LocalStorageService.prototype.getKeys = function(name) {
+    var keysString = window.localStorage.getItem('piskel.keys');
+    return JSON.parse(keysString) || [];
+  };
+
 })();

js/service/SavedStatusService.js

@@ -0,0 +1,64 @@
+(function () {
+  var ns = $.namespace('pskl.service');
+
+  ns.SavedStatusService = function (piskelController) {
+    this.piskelController_ = piskelController;
+  };
+
+  ns.SavedStatusService.prototype.init = function () {
+    $.subscribe(Events.TOOL_RELEASED, this.onToolReleased.bind(this));
+    $.subscribe(Events.PISKEL_RESET, this.onPiskelReset.bind(this));
+
+    $.subscribe(Events.PISKEL_SAVED, this.onPiskelSaved.bind(this));
+
+    window.addEventListener("beforeunload", this.onBeforeUnload.bind(this));
+  };
+
+  ns.SavedStatusService.prototype.onPiskelReset = function () {
+    var piskel = this.piskelController_.piskel;
+    // A first PISKEL_RESET is triggered during the load of a new Piskel, it should be ignored
+    // putting a firstResetDone flag as a nasty workaround for this
+    if (piskel.firstResetDone_) {
+      this.updateDirtyStatus(true);
+    } else {
+      piskel.firstResetDone_ = true;
+    }
+  };
+
+  ns.SavedStatusService.prototype.onToolReleased = function () {
+    this.updateDirtyStatus(true);
+  };
+
+  ns.SavedStatusService.prototype.onPiskelSaved = function () {
+    this.updateDirtyStatus(false);
+  };
+
+  ns.SavedStatusService.prototype.updateDirtyStatus = function (status) {
+    var piskel = this.piskelController_.piskel;
+    if (piskel.isDirty_ !== status) {
+      // Redraw piskel name only if dirty status actually changed
+      piskel.isDirty_ = status;
+      this.updatePiskelName();
+    }
+  };
+
+  ns.SavedStatusService.prototype.updatePiskelName = function () {
+    var piskel = this.piskelController_.piskel;
+    var name = piskel.getDescriptor().name;
+    if (piskel.isDirty_) {
+      $('.piskel-name').html(name + ' *');
+    } else {
+      $('.piskel-name').html(name);
+    }
+  };
+
+  ns.SavedStatusService.prototype.onBeforeUnload = function (evt) {
+    var piskel = this.piskelController_.piskel;
+    if (piskel.isDirty_) {
+      var confirmationMessage = "Your Piskel seem to have unsaved changes";
+
+      (evt || window.event).returnValue = confirmationMessage;
+      return confirmationMessage;
+    }
+  };
+})();

js/utils/serialization/Deserializer.js

@@ -20,11 +20,12 @@
     deserializer.deserialize();
   };
 
-  ns.Deserializer.prototype.deserialize = function () {
+  ns.Deserializer.prototype.deserialize = function (name) {
     var data = this.data_;
     var piskelData = data.piskel;
+    name = name || 'Deserialized piskel';
 
-    var descriptor = new pskl.model.piskel.Descriptor('Deserialized piskel', '');
+    var descriptor = new pskl.model.piskel.Descriptor(name, '');
     this.piskel_ = new pskl.model.Piskel(piskelData.width, piskelData.height, descriptor);
 
     this.layersToLoad_ = piskelData.layers.length;

piskel-script-list.js

@@ -72,6 +72,7 @@ exports.scripts = [
   "js/controller/settings/ApplicationSettingsController.js",
   "js/controller/settings/ResizeController.js",
   "js/controller/settings/GifExportController.js",
+  "js/controller/settings/LocalStorageController.js",
   "js/controller/settings/SaveController.js",
   "js/controller/settings/ImportController.js",
   // Settings controller
@@ -82,6 +83,7 @@ exports.scripts = [
   "js/service/GithubStorageService.js",
   "js/service/AppEngineStorageService.js",
   "js/service/HistoryService.js",
+  "js/service/SavedStatusService.js",
   "js/service/keyboard/ShortcutService.js",
   "js/service/keyboard/KeycodeTranslator.js",
   "js/service/keyboard/CheatsheetService.js",

resources/swap-arrow-square.svg

@@ -0,0 +1,80 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="744.09448819"
+   height="1052.3622047"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="swap-arrow-square.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.98994949"
+     inkscape:cx="394.04689"
+     inkscape:cy="437.49995"
+     inkscape:document-units="px"
+     inkscape:current-layer="g3903"
+     showgrid="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1148"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       id="g3863"
+       transform="matrix(1.0584227,0.8783336,-0.88927511,1.0454,500.51129,-281.01924)" />
+    <g
+       id="g3903"
+       transform="matrix(1.0752324,0,0,1.1512202,-10.080657,-112.64735)">
+      <path
+         sodipodi:nodetypes="cccc"
+         inkscape:connector-curvature="0"
+         id="path3015"
+         d="m 134.94957,482.97409 77.33565,-84.65176 90.19445,84.65176 c -55.58473,1.43563 -111.94607,1.12702 -167.5301,0 z"
+         style="opacity:0.98999999;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.91215169px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+      <path
+         style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.02133131px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         d="m 454.32064,637.60642 c 0,0 -209.21865,11.0537 -216.48659,-180.84972 l -55.19052,0.25672 c 0.0919,230.63552 273.06531,236.67753 273.06531,236.67753 z"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="ccccc"
+         id="path2995-0" />
+      <path
+         sodipodi:nodetypes="cccc"
+         inkscape:connector-curvature="0"
+         id="path3015-5"
+         d="m 420.44925,576.40133 84.53491,77.33565 -84.53491,90.19445 c -1.43564,-55.58473 -1.12702,-111.94607 0,-167.5301 z"
+         style="opacity:0.98999999;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.91215169px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+    </g>
+  </g>
+</svg>

resources/swap-arrow.svg

@@ -0,0 +1,80 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="744.09448819"
+   height="1052.3622047"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="New document 1">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.4"
+     inkscape:cx="205.60891"
+     inkscape:cy="475.62016"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1148"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       id="g3866"
+       transform="matrix(0.76563359,0.64327693,-0.64327693,0.76563359,437.69481,-47.0057)">
+      <path
+         sodipodi:nodetypes="cccc"
+         inkscape:connector-curvature="0"
+         id="path3015"
+         d="m 130,570.36218 0,-60 63.85714,0 c -20.96635,20.14932 -41.98769,40.84088 -63.85714,60 z"
+         style="opacity:0.98999999;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+      <path
+         sodipodi:nodetypes="cccc"
+         inkscape:connector-curvature="0"
+         id="path3015-7"
+         d="m 469.84542,570.36218 0,-60 -63.85714,0 c 20.96635,20.14932 41.98769,40.84088 63.85714,60 z"
+         style="opacity:0.98999999;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+      <g
+         id="g3863">
+        <path
+           style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.73463827px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+           d="m 449.48174,512.15368 c 0,0 -145.41018,128.54808 -299.94302,0 L 150,552.36218 c 154.5622,109.35713 300,0 300,0 z"
+           inkscape:connector-curvature="0"
+           sodipodi:nodetypes="ccccc"
+           id="path2995-0" />
+      </g>
+    </g>
+  </g>
+</svg>

templates/drawing-tools.html

@@ -3,12 +3,28 @@
     <div class="vertical-centerer">
       <ul id="tools-container" class="tools-wrapper"></ul>
       <div class="palette-wrapper">
-        <div class="tool-icon tool-color-picker">
+        <div
+          class="tool-icon tool-color-picker"
+          title="Primary - left mouse button"
+          rel="tooltip"
+          data-placement="right"
+        >
           <input id="color-picker" class="color" type="text"/>
         </div>
-        <div class="tool-icon tool-color-picker">
+        <div
+          class="tool-icon tool-color-picker"
+          title="Secondary - right mouse button"
+          rel="tooltip"
+          data-placement="right"
+        >
           <input id="secondary-color-picker" class="secondary-color-picker color" type="text" />
         </div>
+        <div
+          class="swap-colors-icon"
+          title="Swap colors (X)"
+          rel="tooltip"
+          data-placement="right"
+        ></div>
       </div>
     </div>
   </div>

templates/settings.html

@@ -27,6 +27,13 @@
     rel="tooltip" data-placement="left">
   </div>
 
+  <div
+    data-setting="localstorage"
+    class="tool-icon local-storage-icon"
+    title="Browse piskels saved locally"
+    rel="tooltip" data-placement="left">
+  </div>
+
   <div
     data-setting="gif"
     class="tool-icon upload-cloud-icon"

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>

templates/settings/save.html

@@ -15,8 +15,9 @@
           Public : <input type="checkbox" value="1" name="save-public-checkbox"/>
         </label>
       </div>
-      <input type="submit" class="button button-primary" id="save-button" value="Save" />
+      <input type="submit" class="button button-primary" id="save-cloud-button" value="Upload" />
-      <span id="save-status" class="status"></span>
+      <input type="button" class="button" id="save-local-button" value="Local save" />
+      <div id="save-status" class="status"></div>
     </form>
   </div>
 </div>