mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
display save to gallery warning if performance issue detected
This commit is contained in:
parent
01b9898181
commit
9518d570e6
|
@ -19,8 +19,6 @@
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
ns.SaveController.prototype.init = function () {
|
ns.SaveController.prototype.init = function () {
|
||||||
this.getPiskelSize_().then(this.onPiskelSizeCalculated_.bind(this));
|
|
||||||
|
|
||||||
this.saveForm = document.querySelector('.save-form');
|
this.saveForm = document.querySelector('.save-form');
|
||||||
this.insertSavePartials_();
|
this.insertSavePartials_();
|
||||||
|
|
||||||
|
@ -48,38 +46,17 @@
|
||||||
this.disableSaveButtons_();
|
this.disableSaveButtons_();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.updateSaveToGalleryMessage_();
|
||||||
|
|
||||||
$.subscribe(Events.BEFORE_SAVING_PISKEL, this.disableSaveButtons_.bind(this));
|
$.subscribe(Events.BEFORE_SAVING_PISKEL, this.disableSaveButtons_.bind(this));
|
||||||
$.subscribe(Events.AFTER_SAVING_PISKEL, this.enableSaveButtons_.bind(this));
|
$.subscribe(Events.AFTER_SAVING_PISKEL, this.enableSaveButtons_.bind(this));
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
ns.SaveController.prototype.updateSaveToGalleryMessage_ = function (spritesheetSize) {
|
||||||
* Retrieve the size of the spritesheet that will be saved.
|
if (pskl.app.performanceReportService.hasProblem()) {
|
||||||
* 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 =
|
document.querySelector('.save-online-status').innerHTML =
|
||||||
'<div class="icon-common-warning-red" style="float:left; margin-top: 10px"> </div>' +
|
'<div class="icon-common-warning-red" style="float:left; margin-top: 5px"> </div>' +
|
||||||
'<div style="overflow: hidden; padding-left: 10px">This sprite is too big to be saved on the gallery. ' +
|
'<div style="overflow: hidden; padding-left: 10px">Saving to the gallery might fail due to the sprite size.</div>';
|
||||||
'Try saving it as a .piskel file.</div>';
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -99,7 +76,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// Uncomment this line to test the online save section locally.
|
// Uncomment this line to test the online save section locally.
|
||||||
// return [PARTIALS.FILEDOWNLOAD, PARTIALS.LOCALSTORAGE, PARTIALS.GALLERY];
|
return [PARTIALS.FILEDOWNLOAD, PARTIALS.LOCALSTORAGE, PARTIALS.GALLERY];
|
||||||
return [PARTIALS.FILEDOWNLOAD, PARTIALS.LOCALSTORAGE, PARTIALS.GALLERY_UNAVAILABLE];
|
return [PARTIALS.FILEDOWNLOAD, PARTIALS.LOCALSTORAGE, PARTIALS.GALLERY_UNAVAILABLE];
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -22,4 +22,8 @@
|
||||||
this.currentReport = report;
|
this.currentReport = report;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
ns.PerformanceReportService.prototype.hasProblem = function () {
|
||||||
|
return this.currentReport && this.currentReport.hasProblem();
|
||||||
|
};
|
||||||
})();
|
})();
|
||||||
|
|
|
@ -23,6 +23,10 @@
|
||||||
framesheet_as_png : pskl.app.getFramesheetAsPng()
|
framesheet_as_png : pskl.app.getFramesheetAsPng()
|
||||||
};
|
};
|
||||||
|
|
||||||
|
if (serialized.length > Constants.APPENGINE_SAVE_LIMIT) {
|
||||||
|
deferred.reject('This sprite is too big to be saved on the gallery. Try saving it as a .piskel file.');
|
||||||
|
}
|
||||||
|
|
||||||
if (descriptor.isPublic) {
|
if (descriptor.isPublic) {
|
||||||
data.public = true;
|
data.public = true;
|
||||||
}
|
}
|
||||||
|
|
|
@ -80,7 +80,10 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
ns.StorageService.prototype.onSaveSuccess_ = function () {
|
ns.StorageService.prototype.onSaveSuccess_ = function () {
|
||||||
$.publish(Events.SHOW_NOTIFICATION, [{'content': 'Successfully saved !'}]);
|
$.publish(Events.SHOW_NOTIFICATION, [{
|
||||||
|
content : 'Successfully saved !',
|
||||||
|
hideDelay : 3000
|
||||||
|
}]);
|
||||||
$.publish(Events.PISKEL_SAVED);
|
$.publish(Events.PISKEL_SAVED);
|
||||||
this.afterSaving_();
|
this.afterSaving_();
|
||||||
};
|
};
|
||||||
|
@ -90,14 +93,16 @@
|
||||||
if (errorMessage) {
|
if (errorMessage) {
|
||||||
errorText += ' : ' + errorMessage;
|
errorText += ' : ' + errorMessage;
|
||||||
}
|
}
|
||||||
$.publish(Events.SHOW_NOTIFICATION, [{'content': errorText}]);
|
$.publish(Events.SHOW_NOTIFICATION, [{
|
||||||
|
content : errorText,
|
||||||
|
hideDelay : 10000
|
||||||
|
}]);
|
||||||
this.afterSaving_();
|
this.afterSaving_();
|
||||||
return Q.reject(errorMessage);
|
return Q.reject(errorMessage);
|
||||||
};
|
};
|
||||||
|
|
||||||
ns.StorageService.prototype.afterSaving_ = function () {
|
ns.StorageService.prototype.afterSaving_ = function () {
|
||||||
$.publish(Events.AFTER_SAVING_PISKEL);
|
$.publish(Events.AFTER_SAVING_PISKEL);
|
||||||
window.setTimeout($.publish.bind($, Events.HIDE_NOTIFICATION), 5000);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
ns.StorageService.prototype.setSavingFlag_ = function (savingFlag) {
|
ns.StorageService.prototype.setSavingFlag_ = function (savingFlag) {
|
||||||
|
|
|
@ -26,7 +26,9 @@
|
||||||
<div class="settings-title">Save online</div>
|
<div class="settings-title">Save online</div>
|
||||||
<div class="settings-item">
|
<div class="settings-item">
|
||||||
<input type="button" class="button button-primary" id="save-gallery-button" value="Save to your gallery" />
|
<input type="button" class="button button-primary" id="save-gallery-button" value="Save to your gallery" />
|
||||||
<div class="save-status save-online-status">Your piskel will be stored online in your gallery.</div>
|
<div class="save-status save-online-status">
|
||||||
|
<div>Your piskel will be stored online in your gallery.</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user