disable gallery save when if spritesheet size too big (WIP)

This commit is contained in:
juliandescottes 2016-12-21 17:44:33 +01:00 committed by Julian Descottes
parent e97a641e95
commit 184b2e48aa
3 changed files with 40 additions and 2 deletions

View File

@ -50,7 +50,10 @@ var Constants = {
DRAWING_TEST_FOLDER : 'drawing',
// Maximum size of a sprite that can be saved on piskelapp datastore.
APPENGINE_SAVE_LIMIT : 1000,
// This size will be compared to the length of the stringified serialization of the sprite.
// This is an approximation at best but gives correct results in most cases.
// The datastore limit is 1 MiB, which we roughly approximate to 1 million characters.
APPENGINE_SAVE_LIMIT : 1 * 1000 * 1000,
// SERVICE URLS
APPENGINE_SAVE_URL : 'save',

View File

@ -19,6 +19,8 @@
* @public
*/
ns.SaveController.prototype.init = function () {
this.getPiskelSize_().then(this.onPiskelSizeCalculated_.bind(this));
this.saveForm = document.querySelector('.save-form');
this.insertSavePartials_();
@ -50,6 +52,37 @@
$.subscribe(Events.AFTER_SAVING_PISKEL, this.enableSaveButtons_.bind(this));
};
/**
* Retrieve the size of the spritesheet that will be saved.
* Not completely accurate, as the size canbe impacted by whatever the user enters
* in the name and description fields on the save panel, but should give a rough idea.
*
* @return {Promise} promise that will resolve the spritesheet size {Number}
*/
ns.SaveController.prototype.getPiskelSize_ = function () {
var piskelController = this.piskelController;
return new Promise(function (resolve, reject) {
window.setTimeout(function () {
try {
var spritesheetSize = JSON.stringify(piskelController.serialize()).length;
resolve(spritesheetSize);
} catch (e) {
reject(e);
}
}, 100);
});
};
ns.SaveController.prototype.onPiskelSizeCalculated_ = function (spritesheetSize) {
if (this.saveGalleryButton && spritesheetSize > Constants.APPENGINE_SAVE_LIMIT) {
this.saveGalleryButton.setAttribute('disabled', true);
document.querySelector('.save-online-status').innerHTML =
'<div class="icon-common-warning-red" style="float:left; margin-top: 10px">&nbsp;</div>' +
'<div style="overflow: hidden; padding-left: 10px">This sprite is too big to be saved on the gallery. ' +
'Try saving it as a .piskel file.</div>';
}
};
ns.SaveController.prototype.insertSavePartials_ = function () {
this.getPartials_().forEach(function (partial) {
pskl.utils.Template.insert(this.saveForm, 'beforeend', partial);
@ -65,6 +98,8 @@
return [PARTIALS.GALLERY, PARTIALS.LOCALSTORAGE, PARTIALS.FILEDOWNLOAD];
}
// Uncomment this line to test the online save section locally.
// return [PARTIALS.FILEDOWNLOAD, PARTIALS.LOCALSTORAGE, PARTIALS.GALLERY];
return [PARTIALS.FILEDOWNLOAD, PARTIALS.LOCALSTORAGE, PARTIALS.GALLERY_UNAVAILABLE];
};

View File

@ -26,7 +26,7 @@
<div class="settings-title">Save online</div>
<div class="settings-item">
<input type="button" class="button button-primary" id="save-gallery-button" value="Save to your gallery" />
<div class="save-status">Your piskel will be stored online in your gallery.</div>
<div class="save-status save-online-status">Your piskel will be stored online in your gallery.</div>
</div>
</script>