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

Issue #277 : Cleanup save controller

Browse Source
This commit is contained in:
jdescottes 2015-09-30 00:46:58 +02:00
parent acb6fd2172
commit a286d5926a
4 changed files with 117 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

195
src/js/controller/settings/SaveController.js
View File

@ -1,6 +1,14 @@
(function () { (function () {
var ns = $.namespace('pskl.controller.settings'); var ns = $.namespace('pskl.controller.settings');
var PARTIALS = {
DESKTOP : 'save-desktop-partial',
GALLERY : 'save-gallery-partial',
GALLERY_UNAVAILABLE : 'save-gallery-unavailable-partial',
LOCALSTORAGE : 'save-localstorage-partial',
FILEDOWNLOAD : 'save-file-download-partial'
};
ns.SaveController = function (piskelController) { ns.SaveController = function (piskelController) {
this.piskelController = piskelController; this.piskelController = piskelController;
}; };
@ -11,81 +19,67 @@
* @public * @public
*/ */
ns.SaveController.prototype.init = function () { ns.SaveController.prototype.init = function () {
var saveForm = document.querySelector('.save-form'); this.saveForm = document.querySelector('.save-form');
this.getPartials_().forEach(function (partial) { this.insertSavePartials_();
pskl.utils.Template.insert(saveForm, 'beforeend', partial);
});
this.piskelName = document.querySelector('.piskel-name'); this.piskelName = document.querySelector('.piskel-name');
this.saveFileStatus = document.querySelector('#save-file-status');
this.descriptionInput = document.querySelector('#save-description'); this.descriptionInput = document.querySelector('#save-description');
this.nameInput = document.querySelector('#save-name'); this.nameInput = document.querySelector('#save-name');
this.isPublicCheckbox = document.querySelector('input[name=save-public-checkbox]');
this.updateDescriptorInputs_();
this.saveFileButton = document.querySelector('#save-file-button'); this.saveLocalStorageButton = document.querySelector('#save-localstorage-button');
this.saveBrowserButton = document.querySelector('#save-browser-button'); this.saveGalleryButton = document.querySelector('#save-gallery-button');
this.saveDesktopButton = document.querySelector('#save-desktop-button');
this.saveDesktopAsNewButton = document.querySelector('#save-desktop-as-new-button');
this.saveFileDownloadButton = document.querySelector('#save-file-download-button');
var descriptor = this.piskelController.getPiskel().getDescriptor(); this.safeAddEventListener_(this.saveLocalStorageButton, 'click', this.saveToLocalStorage_);
this.descriptionInput.value = descriptor.description; this.safeAddEventListener_(this.saveGalleryButton, 'click', this.saveToGallery_);
this.nameInput.value = descriptor.name; this.safeAddEventListener_(this.saveDesktopButton, 'click', this.saveToDesktop_);
this.safeAddEventListener_(this.saveDesktopAsNewButton, 'click', this.saveToDesktopAsNew_);
this.safeAddEventListener_(this.saveFileDownloadButton, 'click', this.saveToFileDownload_);
this.addEventListener(this.saveFileButton, 'click', this.saveFile_); this.addEventListener(this.saveForm, 'submit', this.onSaveFormSubmit_);
this.addEventListener(this.saveBrowserButton, 'click', this.saveBrowser_);
this.addEventListener('form[name=save-form]', 'submit', this.onSaveFormSubmit_);
if (pskl.app.isLoggedIn()) {
this.authenticatedUserInit_();
}
if (pskl.utils.Environment.detectNodeWebkit()) {
this.desktopApplicationInit_();
}
$.subscribe(Events.BEFORE_SAVING_PISKEL, this.disableSaveButtons_.bind(this));
$.subscribe(Events.AFTER_SAVING_PISKEL, this.enableSaveButtons_.bind(this));
if (pskl.app.storageService.isSaving()) { if (pskl.app.storageService.isSaving()) {
this.disableSaveButtons_(); this.disableSaveButtons_();
} }
$.subscribe(Events.BEFORE_SAVING_PISKEL, this.disableSaveButtons_.bind(this));
$.subscribe(Events.AFTER_SAVING_PISKEL, this.enableSaveButtons_.bind(this));
}; };
ns.SaveController.prototype.authenticatedUserInit_ = function () { ns.SaveController.prototype.insertSavePartials_ = function () {
var descriptor = this.piskelController.getPiskel().getDescriptor(); this.getPartials_().forEach(function (partial) {
this.isPublicCheckbox = document.querySelector('input[name=save-public-checkbox]'); pskl.utils.Template.insert(this.saveForm, 'beforeend', partial);
if (descriptor.isPublic) { }.bind(this));
this.isPublicCheckbox.setAttribute('checked', true);
}
this.saveOnlineButton = document.querySelector('#save-online-button');
this.addEventListener(this.saveOnlineButton, 'click', this.saveOnline_);
};
ns.SaveController.prototype.desktopApplicationInit_ = function () {
this.saveAsNewButton = document.querySelector('#save-as-button');
this.addEventListener('#save-as-button', 'click', this.saveAs_);
}; };
ns.SaveController.prototype.getPartials_ = function () { ns.SaveController.prototype.getPartials_ = function () {
var partials = [];
if (pskl.utils.Environment.detectNodeWebkit()) { if (pskl.utils.Environment.detectNodeWebkit()) {
partials = [ return [PARTIALS.DESKTOP, PARTIALS.LOCALSTORAGE, PARTIALS.GALLERY_UNAVAILABLE];
'save-file-nw-partial',
'save-localstorage-partial',
'save-online-unavailable-partial'
];
} else if (pskl.app.isLoggedIn()) {
partials = [
'save-online-partial',
'save-localstorage-partial',
'save-file-partial'
];
} else {
partials = [
'save-file-partial',
'save-localstorage-partial',
'save-online-unavailable-partial'
];
} }
return partials; if (pskl.app.isLoggedIn()) {
return [PARTIALS.GALLERY, PARTIALS.LOCALSTORAGE, PARTIALS.FILEDOWNLOAD];
}
return [PARTIALS.FILEDOWNLOAD, PARTIALS.LOCALSTORAGE, PARTIALS.GALLERY_UNAVAILABLE];
};
ns.SaveController.prototype.updateDescriptorInputs_ = function (evt) {
var descriptor = this.piskelController.getPiskel().getDescriptor();
this.descriptionInput.value = descriptor.description;
this.nameInput.value = descriptor.name;
if (descriptor.isPublic) {
this.isPublicCheckbox.setAttribute('checked', true);
}
if (!pskl.app.isLoggedIn()) {
var isPublicCheckboxContainer = document.querySelector('.save-public-section');
isPublicCheckboxContainer.style.display = 'none';
}
}; };
ns.SaveController.prototype.onSaveFormSubmit_ = function (evt) { ns.SaveController.prototype.onSaveFormSubmit_ = function (evt) {
@ -93,63 +87,42 @@
evt.stopPropagation(); evt.stopPropagation();
if (pskl.app.isLoggedIn()) { if (pskl.app.isLoggedIn()) {
this.saveOnline_(); this.saveToGallery_();
} else { } else {
this.saveLocal_(); this.saveToLocalStorage_();
} }
}; };
ns.SaveController.prototype.saveOnline_ = function () { ns.SaveController.prototype.saveToFileDownload_ = function () {
this.beforeSaving_(); this.saveTo_('saveToFileDownload', false);
var piskel = this.piskelController.getPiskel();
pskl.app.storageService.saveToGallery(piskel).then(this.onSaveSuccess_);
}; };
ns.SaveController.prototype.saveBrowser_ = function () { ns.SaveController.prototype.saveToGallery_ = function () {
this.beforeSaving_(); this.saveTo_('saveToGallery', false);
var piskel = this.piskelController.getPiskel();
pskl.app.storageService.saveToLocalStorage(piskel).then(this.onSaveSuccess_);
}; };
ns.SaveController.prototype.saveFile_ = function () { ns.SaveController.prototype.saveToLocalStorage_ = function () {
if (pskl.utils.Environment.detectNodeWebkit()) { this.saveTo_('saveToLocalStorage', false);
this.saveFileDesktop_();
} else {
this.saveFileBrowser_();
}
}; };
ns.SaveController.prototype.saveFileBrowser_ = function () { ns.SaveController.prototype.saveToDesktop_ = function () {
this.beforeSaving_(); this.saveTo_('saveToDesktop', false);
var piskel = this.piskelController.getPiskel();
pskl.app.storageService.saveToFileBrowser(piskel).then(this.onSaveSuccess_);
}; };
ns.SaveController.prototype.saveFileDesktop_ = function () { ns.SaveController.prototype.saveToDesktopAsNew_ = function () {
this.beforeSaving_(); this.saveTo_('saveToDesktop', true);
var piskel = this.piskelController.getPiskel();
pskl.app.storageService.saveToFileNodeWebkit(piskel).then(this.onSaveSuccess_);
}; };
ns.SaveController.prototype.saveAs_ = function () { ns.SaveController.prototype.saveTo_ = function (methodName, saveAsNew) {
this.beforeSaving_();
var piskel = this.piskelController.getPiskel(); var piskel = this.piskelController.getPiskel();
pskl.app.storageService.saveToFileNodeWebkit(piskel, true).then(this.onSaveSuccess_); piskel.setDescriptor(this.getDescriptor_());
pskl.app.storageService[methodName](piskel, !!saveAsNew).then(this.onSaveSuccess_);
}; };
ns.SaveController.prototype.getDescriptor_ = function () { ns.SaveController.prototype.getDescriptor_ = function () {
var name = this.getName_(); var name = this.nameInput.value;
var description = this.getDescription_(); var description = this.descriptionInput.value;
var isPublic = this.isPublic_(); return new pskl.model.piskel.Descriptor(name, description, this.isPublic_());
return new pskl.model.piskel.Descriptor(name, description, isPublic);
};
ns.SaveController.prototype.getName_ = function () {
return this.nameInput.value;
};
ns.SaveController.prototype.getDescription_ = function () {
return this.descriptionInput.value;
}; };
ns.SaveController.prototype.isPublic_ = function () { ns.SaveController.prototype.isPublic_ = function () {
@ -164,28 +137,22 @@
$.publish(Events.CLOSE_SETTINGS_DRAWER); $.publish(Events.CLOSE_SETTINGS_DRAWER);
}; };
ns.SaveController.prototype.beforeSaving_ = function () {
this.piskelController.getPiskel().setDescriptor(this.getDescriptor_());
};
ns.SaveController.prototype.disableSaveButtons_ = function () { ns.SaveController.prototype.disableSaveButtons_ = function () {
this.setDisabled_(this.saveFileButton, true); this.setDisabled_(this.saveLocalStorageButton, true);
this.setDisabled_(this.saveBrowserButton, true); this.setDisabled_(this.saveGalleryButton, true);
this.setDisabled_(this.saveOnlineButton, true); this.setDisabled_(this.saveDesktopButton, true);
this.setDisabled_(this.saveAsNewButton, true); this.setDisabled_(this.saveDesktopAsNewButton, true);
this.setDisabled_(this.saveFileDownloadButton, true);
}; };
ns.SaveController.prototype.enableSaveButtons_ = function () { ns.SaveController.prototype.enableSaveButtons_ = function () {
this.setDisabled_(this.saveFileButton, false); this.setDisabled_(this.saveLocalStorageButton, false);
this.setDisabled_(this.saveBrowserButton, false); this.setDisabled_(this.saveGalleryButton, false);
this.setDisabled_(this.saveOnlineButton, false); this.setDisabled_(this.saveDesktopButton, false);
this.setDisabled_(this.saveAsNewButton, false); this.setDisabled_(this.saveDesktopAsNewButton, false);
this.setDisabled_(this.saveFileDownloadButton, false);
}; };
/**
* Safely update the disabled attribute on a HTML element.
* Noop if the element is falsy
*/
ns.SaveController.prototype.setDisabled_ = function (element, isDisabled) { ns.SaveController.prototype.setDisabled_ = function (element, isDisabled) {
if (!element) { if (!element) {
return; return;
@ -198,4 +165,10 @@
} }
}; };
ns.SaveController.prototype.safeAddEventListener_ = function (element, type, callback) {
if (element) {
this.addEventListener(element, type, callback);
}
};
})(); })();

8
src/js/service/storage/StorageService.js
View File

@ -30,11 +30,11 @@
return this.delegateSave_(pskl.app.localStorageService, piskel); return this.delegateSave_(pskl.app.localStorageService, piskel);
}; };
ns.StorageService.prototype.saveToFileBrowser = function (piskel) { ns.StorageService.prototype.saveToFileDownload = function (piskel) {
return this.delegateSave_(pskl.app.fileDownloadStorageService, piskel); return this.delegateSave_(pskl.app.fileDownloadStorageService, piskel);
}; };
ns.StorageService.prototype.saveToFileNodeWebkit = function (piskel, saveAsNew) { ns.StorageService.prototype.saveToDesktop = function (piskel, saveAsNew) {
return this.delegateSave_(pskl.app.desktopStorageService, piskel, saveAsNew); return this.delegateSave_(pskl.app.desktopStorageService, piskel, saveAsNew);
}; };
@ -59,7 +59,7 @@
if (pskl.app.isLoggedIn()) { if (pskl.app.isLoggedIn()) {
this.saveToGallery(this.piskelController.getPiskel()); this.saveToGallery(this.piskelController.getPiskel());
} else if (pskl.utils.Environment.detectNodeWebkit()) { } else if (pskl.utils.Environment.detectNodeWebkit()) {
this.saveToFileNodeWebkit(this.piskelController.getPiskel()); this.saveToDesktop(this.piskelController.getPiskel());
} else { } else {
this.saveToLocalStorage(this.piskelController.getPiskel()); this.saveToLocalStorage(this.piskelController.getPiskel());
} }
@ -67,7 +67,7 @@
ns.StorageService.prototype.onSaveAsKey_ = function () { ns.StorageService.prototype.onSaveAsKey_ = function () {
if (pskl.utils.Environment.detectNodeWebkit()) { if (pskl.utils.Environment.detectNodeWebkit()) {
this.saveToFileNodeWebkit(this.piskelController.getPiskel(), true); this.saveToDesktop(this.piskelController.getPiskel(), true);
} }
// no other implementation for now // no other implementation for now
}; };

46
src/templates/settings/save.html
View File

@ -1,6 +1,6 @@
<div class="settings-section setting-save-section"> <div class="settings-section setting-save-section">
<form action="" method="POST" class="save-form" name="save-form"> <form action="" method="POST" class="save-form" name="save-form">
<div class="settings-title">Describe your piskel</div> <div class="settings-title">Sprite Information</div>
<div class="settings-item"> <div class="settings-item">
<div class="settings-form-section" style="overflow:hidden"> <div class="settings-form-section" style="overflow:hidden">
<label class="row" style="line-height:20px;">Title : </label> <label class="row" style="line-height:20px;">Title : </label>
@ -20,52 +20,48 @@
<!-- PARTIALS --> <!-- PARTIALS -->
<!-- save-online-partial --> <!-- save-gallery-partial -->
<script type="text/template" id="save-online-partial"> <script type="text/template" id="save-gallery-partial">
<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-online-button" value="Save to your gallery" /> <input type="button" class="button button-primary" id="save-gallery-button" value="Save to your gallery" />
<div id="save-online-status" class="save-status"> <div class="save-status">Your piskel will be stored online in your gallery.</div>
<span>Your piskel will be stored online in your gallery.</span>
</div>
</div> </div>
</script> </script>
<script type="text/template" id="save-online-unavailable-partial"> <!-- save-gallery-unavailable-partial -->
<script type="text/template" id="save-gallery-unavailable-partial">
<div class="settings-title">Save online</div> <div class="settings-title">Save online</div>
<div class="settings-item"> <div class="settings-item">
<div id="save-online-status" class="save-status"> <div class="save-status">Login to <a href="http://piskelapp.com" target="_blank">piskelapp.com</a> to save and share your sprites online.</div>
<span>Login to <a href="http://piskelapp.com" target="_blank">piskelapp.com</a> to save and share your sprites online !</span>
</div>
</div> </div>
</script> </script>
<!-- save-localstorage-partial --> <!-- save-localstorage-partial -->
<script type="text/template" id="save-localstorage-partial"> <script type="text/template" id="save-localstorage-partial">
<div id="save-in-browser"> <div class="settings-title">Save offline in Browser</div>
<div class="settings-title">Save offline in Browser</div> <div class="settings-item">
<div class="settings-item"> <input type="button" class="button button-primary" id="save-localstorage-button" value="Save in Browser" />
<input type="button" class="button button-primary" id="save-browser-button" value="Save in Browser" /> <div class="save-status">Your piskel will be saved locally and will only be accessible from this browser.</div>
<div id="save-browser-status" class="save-status">Your piskel will be saved locally and will only be accessible from this browser.</div>
</div>
</div> </div>
</script> </script>
<!-- save-file-partial --> <!-- save-desktop-partial -->
<script type="text/template" id="save-file-nw-partial"> <script type="text/template" id="save-desktop-partial">
<div class="settings-title">Save as File</div> <div class="settings-title">Save as File</div>
<div class="settings-item"> <div class="settings-item">
<input type="button" class="button button-primary" id="save-file-button" value="Save" /> <input type="button" class="button button-primary" id="save-desktop-button" value="Save" />
<input type="button" class="button button-primary" id="save-as-button" value="Save as ..." /> <input type="button" class="button button-primary" id="save-desktop-as-new-button" value="Save as ..." />
<div id="save-file-status" class="save-status">Your sprite will be saved as a .piskel file.</div> <div class="save-status">Your sprite will be saved as a .piskel file.</div>
</div> </div>
</script> </script>
<script type="text/template" id="save-file-partial"> <!-- save-file-download-partial -->
<script type="text/template" id="save-file-download-partial">
<div class="settings-title">Save offline as File</div> <div class="settings-title">Save offline as File</div>
<div class="settings-item"> <div class="settings-item">
<input type="button" class="button button-primary" id="save-file-button" value="Save as .piskel" /> <input type="button" class="button button-primary" id="save-file-download-button" value="Save as .piskel" />
<div id="save-file-status" class="save-status">Your sprite will be downloaded as a .piskel file.</div> <div class="save-status">Your sprite will be downloaded as a .piskel file.</div>
</div> </div>
</script> </script>
</div> </div>

16
test/js/service/storage/StorageServiceTest.js
View File

@ -54,19 +54,19 @@ describe("Storage Service test suite", function() {
}); });
// DesktopStorage // DesktopStorage
it("calls DesktopStorage#save in saveToFileNodeWebkit", function(done) { it("calls DesktopStorage#save in saveToDesktop", function(done) {
checkSubServiceSuccessfulSave(pskl.app.desktopStorageService, 'saveToFileNodeWebkit', done); checkSubServiceSuccessfulSave(pskl.app.desktopStorageService, 'saveToDesktop', done);
}); });
it("calls DesktopStorage#save in saveToFileNodeWebkit - error case", function(done) { it("calls DesktopStorage#save in saveToDesktop - error case", function(done) {
checkSubServiceFailedSave(pskl.app.desktopStorageService, 'saveToFileNodeWebkit', done); checkSubServiceFailedSave(pskl.app.desktopStorageService, 'saveToDesktop', done);
}); });
// FileDownloadStorage // FileDownloadStorage
it("calls FileDownloadStorage#save in saveToFileBrowser", function(done) { it("calls FileDownloadStorage#save in saveToFileDownload", function(done) {
checkSubServiceSuccessfulSave(pskl.app.fileDownloadStorageService, 'saveToFileBrowser', done); checkSubServiceSuccessfulSave(pskl.app.fileDownloadStorageService, 'saveToFileDownload', done);
}); });
it("calls FileDownloadStorage#save in saveToFileBrowser - error case", function(done) { it("calls FileDownloadStorage#save in saveToFileDownload - error case", function(done) {
checkSubServiceFailedSave(pskl.app.fileDownloadStorageService, 'saveToFileBrowser', done); checkSubServiceFailedSave(pskl.app.fileDownloadStorageService, 'saveToFileDownload', done);
}); });
// LocalStorage // LocalStorage