From 6cc853404196c85f05a8a944fd7219b6fdc9b8cf Mon Sep 17 00:00:00 2001
From: Vince <grosbouddha@gmail.com>
Date: Wed, 29 Aug 2012 23:01:04 +0200
Subject: [PATCH] Adding localstorage support

---
 css/style.css | 17 +++++++++++++++++
 js/piskel.js  | 45 +++++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 60 insertions(+), 2 deletions(-)

diff --git a/css/style.css b/css/style.css
index 554be333..d9011854 100644
--- a/css/style.css
+++ b/css/style.css
@@ -138,6 +138,23 @@ ul, li {
   width : 200px;
 }
 
+/* User messages */
+.user-message {
+    position: fixed;
+    bottom: 0;
+    left: 40%;
+    background-color: #F9EDBE;
+    padding: 7px 22px;
+    border-top-left-radius: 7px;
+    border-top-right-radius: 7px;
+    font-family: ‘Arial Black’, Gadget, sans-serif;
+    color: #222;
+    border: #F0C36D 1px solid;
+    border-bottom: 0;
+    font-weight: bold;
+    font-size: 14px;  
+}
+
 /* Force apparition of scrollbars on leopard */
 ::-webkit-scrollbar {
     -webkit-appearance: none;
diff --git a/js/piskel.js b/js/piskel.js
index 8c4c0ba2..cb30bbb8 100644
--- a/js/piskel.js
+++ b/js/piskel.js
@@ -40,7 +40,10 @@
         } else {
           return "#" + color;
         }
-      }
+      },
+
+      // setTimeout/setInterval references:
+      localStorageThrottler = null
       ;
 
 
@@ -55,6 +58,33 @@
       this.initPreviewSlideshow();
       this.initAnimationPreview();
       this.initColorPicker();
+
+      if(window.localStorage && window.localStorage['snapShot']) {
+        var message = document.createElement('div');
+        message.id = "user-message";
+        message.className = "user-message";
+        var reloadLink = "<a href='#' onclick='piskel.restoreFromLocalStorage()'>reload</a>";
+        var discardLink = "<a href='#' onclick='piskel.cleanLocalStorage()'>discard</a>";
+        message.innerHTML = "Non saved version found. " + reloadLink + " or " + discardLink;
+        message.onclick = function() {
+          message.parentNode.removeChild(message);
+        };
+        document.body.appendChild(message);
+      }
+    },
+
+    persistToLocalStorage: function() {
+      console.log('persited')
+      window.localStorage['snapShot'] = frameSheet.serialize();
+    },
+
+    restoreFromLocalStorage: function() {
+      frameSheet.deserialize(window.localStorage['snapShot']);
+      this.setActiveFrameAndRedraw(0);
+    },
+
+    cleanLocalStorage: function() {
+      delete window.localStorage['snapShot'];
     },
 
     setActiveFrame: function(index) {
@@ -328,7 +358,18 @@
       if (color != currentFrame[col][row]) {
         currentFrame[col][row] = color;
         this.drawPixelInCanvas(row, col, color, drawingAreaCanvas, drawingCanvasDpi);
-      }      
+      }
+
+      // Persist to localStorage when drawing. We throttle localStorage accesses
+      // for high frequency drawing (eg mousemove).
+      if(localStorageThrottler == null) {
+          localStorageThrottler = window.setTimeout(function() {
+            piskel.persistToLocalStorage();
+            localStorageThrottler = null;
+          }, 1000);
+      }
+      
+           
     },
 
     drawPixelInCanvas : function (row, col, color, canvas, dpi) {