Merge pull request #8 from grosbouddha/localstorage-basic

Adding localstorage support

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;

js/piskel.js

@@ -40,7 +40,10 @@
         } else {
           return "#" + color;
         }
-      }
+      },
+
+      // setTimeout/setInterval references:
+      localStorageThrottler = null
       ;
 
 
@@ -55,6 +58,36 @@
       this.initPreviewSlideshow();
       this.initAnimationPreview();
       this.initColorPicker();
+      this.initLocalStorageBackup();    
+    },
+
+    initLocalStorageBackup: function() {
+      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) {
@@ -137,6 +170,15 @@
       this.createPreviews();
     },
 
+    initPreviewSlideshow: function() {
+      var addFrameButton = $('add-frame-button');
+      addFrameButton.addEventListener('mousedown', function() {
+        frameSheet.addEmptyFrame();
+        piskel.setActiveFrameAndRedraw(frameSheet.getFrameCount() - 1);
+      });
+      this.createPreviews();
+    },
+
     initAnimationPreview : function() {
       var scope = this;
 
@@ -328,7 +370,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) {