mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity

Added localstorage save + read

Browse Source
This commit is contained in:
jdescottes 2014-02-10 01:00:16 +01:00
parent 676bf1c7fd
commit 85084b8279
10 changed files with 169 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
css/settings.css
View File

@ -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;
@ -264,4 +269,33 @@
[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;
}

5
index.html
View File

@ -9,8 +9,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div
id="loading-mask"
<div
id="loading-mask"
style="
position:fixed;
top:0;right:0;bottom:0;left:0;
@ -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>

6
js/app.js
View File

@ -103,8 +103,6 @@
"content" : "Loading animation with id : [" + framesheetId + "]"
}]);
this.loadFramesheetFromService(framesheetId);
} else {
this.localStorageService.displayRestoreNotification();
}
},
@ -118,6 +116,10 @@
}
},
isLoggedIn : function () {
return pskl.appEnginePiskelData_ && pskl.appEnginePiskelData_.isLoggedIn;
},
initTooltips_ : function () {
$('body').tooltip({
selector: '[rel=tooltip]'

63
js/controller/settings/SaveController.js
View File

@ -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) {
this.nameInput.attr('disabled', 'disabled');
this.descriptionInput.attr('disabled', 'disabled');
this.isPublicCheckbox.attr('disabled', 'disabled');
if (!pskl.app.isLoggedIn()) {
this.saveCloudButton.attr('disabled', 'disabled');
this.status.html('You are not logged in. Only Local Save is available.');
} 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 description = this.descriptionInput.val();
var name = this.getName();
var description = this.getDescription();
var isPublic = !!this.isPublicCheckbox.prop('checked');
var descriptor = new pskl.model.piskel.Descriptor(name, description, isPublic);
@ -50,10 +56,40 @@
});
};
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 () {
@ -66,9 +102,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);
};

4
js/controller/settings/SettingsController.js
View File

@ -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

121
js/service/LocalStorageService.js
View File

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

5
js/utils/serialization/Deserializer.js
View File

@ -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;

1
piskel-script-list.js
View File

@ -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

7
templates/settings.html
View File

@ -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"

5
templates/settings/save.html
View File

@ -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" />
<span id="save-status" class="status"></span>
<input type="submit" class="button button-primary" id="save-cloud-button" value="Upload" />
<input type="button" class="button" id="save-local-button" value="Local save" />
<div id="save-status" class="status"></div>
</form>
</div>
</div>