Fixed persistent success notifications

Closes #333
* Refactored the Ghost.Notifications View bundle
* Added a new initialization of the NotificationCollection (hacky, but at least satisfies JSLint). This was needed as the reason the persistent success notification couldn't be dismissed was that prerendered DOM elements weren't picked up as BB Views beforehand, and thus no events were bound to them.
This commit is contained in:
Gabor Javorszky 2013-08-04 19:21:50 +01:00 committed by ErisDS
parent 98dbf8e7ce
commit 50c807cb9a

View File

@ -94,10 +94,6 @@
Ghost.Views.Notification = Ghost.View.extend({ Ghost.Views.Notification = Ghost.View.extend({
templateName: 'notification', templateName: 'notification',
className: 'js-bb-notification', className: 'js-bb-notification',
events: {
'click .js-notification.notification-passive .close': 'closePassive',
'click .js-notification.notification-persistent .close': 'closePersistent'
},
template: function (data) { template: function (data) {
return JST[this.templateName](data); return JST[this.templateName](data);
}, },
@ -105,25 +101,8 @@
var html = this.template(this.model); var html = this.template(this.model);
this.$el.html(html); this.$el.html(html);
return this; return this;
},
closePassive: function (e) {
$(e.currentTarget).parent().fadeOut(200, function () { $(this).remove(); });
},
closePersistent: function (e) {
var self = e.currentTarget;
$.ajax({
type: "DELETE",
url: '/api/v0.1/notifications/' + $(this).data('id')
}).done(function (result) {
if ($(self).parent().parent().hasClass('js-bb-notification')) {
$(self).parent().parent().fadeOut(200, function () { $(self).remove(); });
} else {
$(self).parent().fadeOut(200, function () { $(self).remove(); });
} }
}); });
}
});
/** /**
* This handles Notification groups * This handles Notification groups
@ -137,7 +116,9 @@
'animationend .js-notification': 'removeItem', 'animationend .js-notification': 'removeItem',
'webkitAnimationEnd .js-notification': 'removeItem', 'webkitAnimationEnd .js-notification': 'removeItem',
'oanimationend .js-notification': 'removeItem', 'oanimationend .js-notification': 'removeItem',
'MSAnimationEnd .js-notification': 'removeItem' 'MSAnimationEnd .js-notification': 'removeItem',
'click .js-notification.notification-passive .close': 'closePassive',
'click .js-notification.notification-persistent .close': 'closePersistent'
}, },
render: function () { render: function () {
_.each(this.model, function (item) { _.each(this.model, function (item) {
@ -150,9 +131,41 @@
}, },
removeItem: function (e) { removeItem: function (e) {
e.preventDefault(); e.preventDefault();
var self = e.currentTarget;
if (self.className.indexOf('notification-persistent') !== -1) {
$.ajax({
type: "DELETE",
url: '/api/v0.1/notifications/' + $(self).find('.close').data('id')
}).done(function (result) {
$(e.currentTarget).remove();
});
} else {
$(e.currentTarget).remove(); $(e.currentTarget).remove();
} }
},
closePassive: function (e) {
$(e.currentTarget).parent().fadeOut(200, function () { $(this).remove(); });
},
closePersistent: function (e) {
var self = e.currentTarget;
$.ajax({
type: "DELETE",
url: '/api/v0.1/notifications/' + $(self).data('id')
}).done(function (result) {
if ($(self).parent().parent().hasClass('js-bb-notification')) {
$(self).parent().parent().fadeOut(200, function () { $(self).remove(); });
} else {
$(self).parent().fadeOut(200, function () { $(self).remove(); });
}
}); });
}
});
// This is needed so Backbone recognizes elements already rendered server side
// as valid views, and events are bound
window.notColl = new Ghost.Views.NotificationCollection();
/** /**
* This is the view to generate the markup for the individual * This is the view to generate the markup for the individual