Skip to content

Commit

Permalink
Issue #277 : Add global StorageService, enable CTRL+S
Browse files Browse the repository at this point in the history
  • Loading branch information
@juliandescottes
juliandescottes committed Oct 5, 2015
1 parent 8bb4d1a commit ee958a4
Show file tree
Hide file tree
Showing 11 changed files with 350 additions and 259 deletions.
2 changes: 2 additions & 0 deletions src/js/Events.js
View file
Expand Up @@ -41,6 +41,8 @@ var Events = {
HISTORY_STATE_LOADED: 'HISTORY_STATE_LOADED',

PISKEL_SAVED: 'PISKEL_SAVED',
BEFORE_SAVING_PISKEL: 'BEFORE_SAVING_PISKEL',
AFTER_SAVING_PISKEL: 'AFTER_SAVING_PISKEL',

FRAME_SIZE_CHANGED : 'FRAME_SIZE_CHANGED',

Expand Down
12 changes: 9 additions & 3 deletions src/js/app.js
View file
Expand Up @@ -109,15 +109,21 @@
this.canvasBackgroundController = new pskl.controller.CanvasBackgroundController();
this.canvasBackgroundController.init();

this.galleryStorageService = new pskl.service.storage.GalleryStorageService(this.piskelController);
this.galleryStorageService.init();

this.localStorageService = new pskl.service.storage.LocalStorageService(this.piskelController);
this.localStorageService.init();

this.fileDownloadStorageService = new pskl.service.storage.FileDownloadStorageService(this.piskelController);
this.fileDownloadStorageService.init();

this.desktopStorageService = new pskl.service.storage.DesktopStorageService(this.piskelController);
this.desktopStorageService.init();

this.galleryStorageService = new pskl.service.storage.GalleryStorageService(this.piskelController);
this.galleryStorageService.init();

this.storageService = new pskl.service.storage.StorageService(this.piskelController);
this.storageService.init();

this.imageUploadService = new pskl.service.ImageUploadService();
this.imageUploadService.init();

Expand Down
211 changes: 94 additions & 117 deletions src/js/controller/settings/SaveController.js
View file
Expand Up @@ -11,52 +11,61 @@
* @public
*/
ns.SaveController.prototype.init = function () {
// timestamp used to generate unique name when saving as .piskel
this.timestamp = new Date();

this.insertPartials_();
var saveForm = document.querySelector('.save-form');
this.getPartials_().forEach(function (partial) {
pskl.utils.Template.insert(saveForm, 'beforeend', partial);
});

// Only available in app-engine mode
this.piskelName = document.querySelector('.piskel-name');
this.saveOnlineStatus = document.querySelector('#save-online-status');
this.saveFileStatus = document.querySelector('#save-file-status');
this.descriptionInput = document.querySelector('#save-description');
this.nameInput = document.querySelector('#save-name');
this.saveOnlineButton = document.querySelector('#save-online-button');
this.isPublicCheckbox = document.querySelector('input[name=save-public-checkbox]');

this.saveFileButton = document.querySelector('#save-file-button');
this.saveBrowserButton = document.querySelector('#save-browser-button');

var descriptor = this.piskelController.getPiskel().getDescriptor();
this.descriptionInput.value = descriptor.description;
this.nameInput.value = descriptor.name;
if (descriptor.isPublic) {
this.isPublicCheckbox.setAttribute('checked', true);

this.addEventListener(this.saveFileButton, 'click', this.saveFile_);
this.addEventListener(this.saveBrowserButton, 'click', this.saveBrowser_);
this.addEventListener('form[name=save-form]', 'submit', this.onSaveFormSubmit_);

$.subscribe(Events.BEFORE_SAVING_PISKEL, this.disableSaveButtons_.bind(this));
$.subscribe(Events.AFTER_SAVING_PISKEL, this.enableSaveButtons_.bind(this));

if (pskl.app.isLoggedIn()) {
this.authenticatedUserInit_();
}

if (pskl.utils.Environment.detectNodeWebkit()) {
this.addEventListener('#save-as-button', 'click', this.saveAs_);
this.desktopApplicationInit_();
}
};

this.addEventListener('#save-file-button', 'click', this.saveFile_);
this.addEventListener('#save-browser-button', 'click', this.saveLocal_);
ns.SaveController.prototype.authenticatedUserInit_ = function () {
var descriptor = this.piskelController.getPiskel().getDescriptor();
this.isPublicCheckbox = document.querySelector('input[name=save-public-checkbox]');
if (descriptor.isPublic) {
this.isPublicCheckbox.setAttribute('checked', true);
}
this.saveOnlineButton = document.querySelector('#save-online-button');
this.addEventListener(this.saveOnlineButton, 'click', this.saveOnline_);
this.addEventListener('form[name=save-form]', 'submit', this.onSaveFormSubmit_);
};

if (pskl.app.isLoggedIn()) {
pskl.utils.Template.insert(this.saveOnlineStatus, 'beforeend', 'save-online-status-partial');
} else {
pskl.utils.Template.insert(this.saveOnlineStatus, 'beforeend', 'save-please-login-partial');
var container = document.querySelector('.setting-save-section');
container.classList.add('anonymous');
}
ns.SaveController.prototype.desktopApplicationInit_ = function () {
this.saveAsNewButton = document.querySelector('#save-as-button');
this.addEventListener('#save-as-button', 'click', this.saveAs_);
};

ns.SaveController.prototype.insertPartials_ = function () {
ns.SaveController.prototype.getPartials_ = function () {
var partials = [];
if (pskl.utils.Environment.detectNodeWebkit()) {
partials = [
'save-file-nw-partial',
'save-localstorage-partial',
'save-online-partial'
'save-online-unavailable-partial'
];
} else if (pskl.app.isLoggedIn()) {
partials = [
Expand All @@ -68,21 +77,11 @@
partials = [
'save-file-partial',
'save-localstorage-partial',
'save-online-partial'
'save-online-unavailable-partial'
];
}

var container = document.querySelector('.save-form');
partials.forEach(function (partial) {
pskl.utils.Template.insert(container, 'beforeend', partial);
});

};

ns.SaveController.prototype.getLocalFilename_ = function () {
var piskelName = this.getName();
var timestamp = pskl.utils.DateUtils.format(this.timestamp, '{{Y}}{{M}}{{D}}-{{H}}{{m}}{{s}}');
return piskelName + '-' + timestamp + '.piskel';
return partials;
};

ns.SaveController.prototype.onSaveFormSubmit_ = function (evt) {
Expand All @@ -94,127 +93,105 @@
} else {
this.saveLocal_();
}

};

ns.SaveController.prototype.saveOnline_ = function () {
var name = this.getName();

if (!name) {
name = window.prompt('Please specify a name', 'New piskel');
}

if (name) {
var description = this.getDescription();
var isPublic = this.isPublic_();

var descriptor = new pskl.model.piskel.Descriptor(name, description, isPublic);
this.piskelController.getPiskel().setDescriptor(descriptor);

this.beforeSaving_();

this.saveOnlineButton.setAttribute('disabled', true);
this.saveOnlineStatus.innerHTML = 'Saving ...';

pskl.app.storageService.store({
success : this.onSaveSuccess_.bind(this),
error : this.onSaveError_.bind(this),
after : this.afterOnlineSaving_.bind(this)
});
}
this.beforeSaving_();
var piskel = this.piskelController.getPiskel();
pskl.app.storageService.saveToGallery(piskel).then(this.onSaveSuccess_);
};

ns.SaveController.prototype.saveLocal_ = function () {
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), 500);
}
ns.SaveController.prototype.saveBrowser_ = function () {
this.beforeSaving_();
var piskel = this.piskelController.getPiskel();
pskl.app.storageService.saveToLocalStorage(piskel).then(this.onSaveSuccess_);
};

ns.SaveController.prototype.saveFile_ = function () {
// detect if this is running in NodeWebkit
if (pskl.utils.Environment.detectNodeWebkit()) {
pskl.app.desktopStorageService.save();
this.saveFileDesktop_();
} else {
this.saveFileBrowser_();
}
};

ns.SaveController.prototype.saveAs_ = function () {
pskl.app.desktopStorageService.savePiskelAs();
};

ns.SaveController.prototype.saveFileBrowser_ = function () {
this.beforeSaving_();
pskl.utils.BlobUtils.stringToBlob(pskl.app.piskelController.serialize(), function(blob) {
pskl.utils.FileUtils.downloadAsFile(blob, this.getLocalFilename_());
this.onSaveSuccess_();
this.afterSaving_();
}.bind(this), 'application/piskel+json');
var piskel = this.piskelController.getPiskel();
pskl.app.storageService.saveToFileBrowser(piskel).then(this.onSaveSuccess_);
};

ns.SaveController.prototype.getName = function () {
return this.nameInput.value;
ns.SaveController.prototype.saveFileDesktop_ = function () {
this.beforeSaving_();
var piskel = this.piskelController.getPiskel();
pskl.app.storageService.saveToFileNodeWebkit(piskel).then(this.onSaveSuccess_);
};

ns.SaveController.prototype.getDescription = function () {
return this.descriptionInput.value;
ns.SaveController.prototype.saveAs_ = function () {
this.beforeSaving_();
var piskel = this.piskelController.getPiskel();
pskl.app.storageService.saveToFileNodeWebkit(piskel, true).then(this.onSaveSuccess_);
};

ns.SaveController.prototype.isPublic_ = function () {
return !!this.isPublicCheckbox.checked;
ns.SaveController.prototype.getDescriptor_ = function () {
var name = this.getName_();
var description = this.getDescription_();
var isPublic = this.isPublic_();
return new pskl.model.piskel.Descriptor(name, description, isPublic);
};

ns.SaveController.prototype.beforeSaving_ = function () {
this.updatePiskelDescriptor_();
ns.SaveController.prototype.getName_ = function () {
return this.nameInput.value;
};

if (this.piskelName) {
this.piskelName.classList.add('piskel-name-saving');
}
ns.SaveController.prototype.getDescription_ = function () {
return this.descriptionInput.value;
};

ns.SaveController.prototype.updatePiskelDescriptor_ = function () {
var name = this.getName();
var description = this.getDescription();
var isPublic = this.isPublic_();
ns.SaveController.prototype.isPublic_ = function () {
if (!this.isPublicCheckbox) {
return true;
}

var descriptor = new pskl.model.piskel.Descriptor(name, description, isPublic);
this.piskelController.getPiskel().setDescriptor(descriptor);
return !!this.isPublicCheckbox.checked;
};

ns.SaveController.prototype.onSaveSuccess_ = function () {
$.publish(Events.CLOSE_SETTINGS_DRAWER);
$.publish(Events.SHOW_NOTIFICATION, [{'content': 'Successfully saved !'}]);
$.publish(Events.PISKEL_SAVED);
};

ns.SaveController.prototype.onSaveError_ = function (status) {
$.publish(Events.SHOW_NOTIFICATION, [{'content': 'Saving failed (' + status + ')'}]);
ns.SaveController.prototype.beforeSaving_ = function () {
this.piskelController.getPiskel().setDescriptor(this.getDescriptor_());
};

ns.SaveController.prototype.disableSaveButtons_ = function () {
this.setDisabled_(this.saveFileButton, true);
this.setDisabled_(this.saveBrowserButton, true);
this.setDisabled_(this.saveOnlineButton, true);
this.setDisabled_(this.saveAsNewButton, true);
};

ns.SaveController.prototype.afterOnlineSaving_ = function () {
this.saveOnlineButton.setAttribute('disabled', false);
this.saveOnlineStatus.innerHTML = '';
this.afterSaving_();
ns.SaveController.prototype.enableSaveButtons_ = function () {
this.setDisabled_(this.saveFileButton, false);
this.setDisabled_(this.saveBrowserButton, false);
this.setDisabled_(this.saveOnlineButton, false);
this.setDisabled_(this.saveAsNewButton, false);
};

ns.SaveController.prototype.afterSaving_ = function () {
if (this.piskelName) {
this.piskelName.classList.remove('piskel-name-saving');
/**
* Safely update the disabled attribute on a HTML element.
* Noop if the element is falsy
*/
ns.SaveController.prototype.setDisabled_ = function (element, isDisabled) {
if (!element) {
return;
}

window.setTimeout($.publish.bind($, Events.HIDE_NOTIFICATION), 5000);
if (isDisabled) {
element.setAttribute('disabled', 'disabled');
} else {
element.removeAttribute('disabled');
}
};

})();

0 comments on commit ee958a4

Please sign in to comment.