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..3600c233 100644
--- a/js/piskel.js
+++ b/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 = "reload";
+ var discardLink = "discard";
+ 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) {