Adding notifications to settings and content pages

Closes #290. In theory.
* moved flashviews to base.js, renamed to notifications
* added failures to post editor screen
* added notifications to settings (success, failure)
* added notifications when deleting posts

Most of these are not visible due to CSS rules, as overhauling that
is a task in and of itself. The notifications do show up in the inspector
though, so all is well.
This commit is contained in:
Gabor Javorszky 2013-07-19 00:53:08 +01:00 committed by ErisDS
parent eca3917d2e
commit 1421bbc675
4 changed files with 124 additions and 58 deletions

View File

@ -72,4 +72,52 @@
}
});
/**
* This is the view to generate the markup for the individual
* notification. Will be included into #flashbar.
*
* States can be
* - persistent
* - passive
*
* Types can be
* - error
* - success
* - alert
* - (empty)
*
*/
Ghost.Views.Notification = Ghost.View.extend({
templateName: 'notification',
className: 'js-bb-notification',
template: function (data) {
return JST[this.templateName](data);
},
render: function() {
var html = this.template(this.model);
this.$el.html(html);
return this;
}
});
/**
* This handles Notification groups
*/
Ghost.Views.NotificationCollection = Ghost.View.extend({
el: '#flashbar',
initialize: function() {
this.render();
},
render: function() {
_.each(this.model, function (item) {
this.renderItem(item);
}, this);
},
renderItem: function (item) {
var itemView = new Ghost.Views.Notification({ model: item });
this.$el.html(itemView.render().el);
}
});
}());

View File

@ -148,8 +148,26 @@
deletePost: function (e) {
e.preventDefault();
if (window.confirm('Are you sure you want to delete this post?')) {
this.model.destroy({
var self = this;
self.model.destroy({
wait: true
}).then(function () {
self.addSubview(new Ghost.Views.NotificationCollection({
model: [{
type: 'success',
message: 'Your post: ' + self.model.get('title') + ' has been deleted',
status: 'passive'
}]
}));
}, function () {
self.addSubview(new Ghost.Views.NotificationCollection({
model: [{
type: 'error',
message: 'Your post: ' + self.model.get('title') + ' has not been deleted.',
status: 'passive'
}]
}));
});
}
},

View File

@ -93,14 +93,21 @@
this.savePost({
status: keys[newIndex]
}).then(function () {
this.addSubview(new Ghost.Views.FlashCollectionView({
this.addSubview(new Ghost.Views.NotificationCollection({
model: [{
type: 'success',
message: 'Your post: ' + model.get('title') + ' has been ' + keys[newIndex],
status: 'passive'
}]
}));
// window.alert('Your post: ' + model.get('title') + ' has been ' + keys[newIndex]);
}, function () {
this.addSubview(new Ghost.Views.NotificationCollection({
model: [{
type: 'error',
message: 'Your post: ' + model.get('title') + ' has not been ' + keys[newIndex],
status: 'passive'
}]
}));
});
},
@ -111,7 +118,7 @@
self = this;
if (status === 'publish-on') {
this.addSubview(new Ghost.Views.FlashCollectionView({
this.addSubview(new Ghost.Views.NotificationCollection({
model: [{
type: 'alert',
message: 'Scheduled publishing not supported yet.',
@ -121,7 +128,7 @@
// return window.alert('Scheduled publishing not supported yet.');
}
if (status === 'queue') {
this.addSubview(new Ghost.Views.FlashCollectionView({
this.addSubview(new Ghost.Views.NotificationCollection({
model: [{
type: 'alert',
message: 'Scheduled publishing not supported yet.',
@ -134,7 +141,7 @@
this.savePost({
status: status
}).then(function () {
self.addSubview(new Ghost.Views.FlashCollectionView({
self.addSubview(new Ghost.Views.NotificationCollection({
model: [{
type: 'success',
message: 'Your post: ' + model.get('title') + ' has been ' + status,
@ -142,6 +149,14 @@
}]
}));
// window.alert('Your post: ' + model.get('title') + ' has been ' + status);
}, function () {
self.addSubview(new Ghost.Views.NotificationCollection({
model: [{
type: 'error',
message: 'Your post: ' + model.get('title') + ' has not been ' + status,
status: 'passive'
}]
}));
});
},
@ -152,7 +167,7 @@
var model = this.model,
self = this;
this.savePost().then(function () {
self.addSubview(new Ghost.Views.FlashCollectionView({
self.addSubview(new Ghost.Views.NotificationCollection({
model: [{
type: 'success',
message: 'Your post was saved as ' + model.get('status'),
@ -161,7 +176,7 @@
}));
// window.alert('Your post was saved as ' + model.get('status'));
}, function () {
self.addSubview(new Ghost.Views.FlashCollectionView({
self.addSubview(new Ghost.Views.NotificationCollection({
model: [{
type: 'error',
message: model.validationError,
@ -298,52 +313,6 @@
}
});
/**
* This is the view to generate the markup for the individual
* notification. Will be included into #flashbar.
*
* States can be
* - persistent
* - passive
*
* Types can be
* - error
* - success
* - alert
* - (empty)
*
*/
Ghost.Views.FlashView = Ghost.View.extend({
templateName: 'notification',
className: 'js-bb-notification',
template: function (data) {
return JST[this.templateName](data);
},
render: function() {
var html = this.template(this.model);
this.$el.html(html);
return this;
}
});
/**
* This handles Notification groups
*/
Ghost.Views.FlashCollectionView = Ghost.View.extend({
el: '#flashbar',
initialize: function() {
this.render();
},
render: function() {
_.each(this.model, function (item) {
this.renderItem(item);
}, this);
},
renderItem: function (item) {
var itemView = new Ghost.Views.FlashView({ model: item });
this.$el.prepend(itemView.render().el);
}
});
}());

View File

@ -86,7 +86,22 @@
email: this.$('#email-address').val()
}, {
success: function () {
window.alert('Saved');
this.addSubview(new Ghost.Views.NotificationCollection({
model: [{
type: 'success',
message: 'Saved',
status: 'passive'
}]
}));
},
error: function () {
this.addSubview(new Ghost.Views.NotificationCollection({
model: [{
type: 'error',
message: 'Something went wrong, not saved :(',
status: 'passive'
}]
}));
}
});
},
@ -110,7 +125,23 @@
description: this.$('#blog-description').val()
}, {
success: function () {
window.alert('Saved');
this.addSubview(new Ghost.Views.NotificationCollection({
model: [{
type: 'success',
message: 'Saved',
status: 'passive'
}]
}));
},
error: function () {
this.addSubview(new Ghost.Views.NotificationCollection({
model: [{
type: 'error',
message: 'Something went wrong, not saved :(',
status: 'passive'
}]
}));
}
});
},