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) {