0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00

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 338109c762
commit 6c48505701
2 changed files with 42 additions and 27 deletions

View file

@ -94,10 +94,6 @@
Ghost.Views.Notification = Ghost.View.extend({
templateName: 'notification',
className: 'js-bb-notification',
events: {
'click .js-notification.notification-passive .close': 'closePassive',
'click .js-notification.notification-persistent .close': 'closePersistent'
},
template: function (data) {
return JST[this.templateName](data);
},
@ -105,24 +101,7 @@
var html = this.template(this.model);
this.$el.html(html);
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(); });
}
});
}
});
/**
@ -137,7 +116,9 @@
'animationend .js-notification': 'removeItem',
'webkitAnimationEnd .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 () {
_.each(this.model, function (item) {
@ -150,10 +131,42 @@
},
removeItem: function (e) {
e.preventDefault();
$(e.currentTarget).remove();
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();
}
},
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
* modal. Will be included into #modals.

View file

@ -1,8 +1,10 @@
{{#if messages}}
{{#each messages}}
<section class="notification{{#if type}}-{{type}}{{/if}} notification-{{status}} js-notification">
{{message}}
<a class="close" href="#" data-id="{{id}}"><span class="hidden">Close</span></a>
</section>
<div class="js-bb-notification">
<section class="notification{{#if type}}-{{type}}{{/if}} notification-{{status}} js-notification">
{{message}}
<a class="close" href="#" data-id="{{id}}"><span class="hidden">Close</span></a>
</section>
</div>
{{/each}}
{{/if}}