diff --git a/ghost/admin/admin-ui-temp.js b/ghost/admin/admin-ui-temp.js index c3c19a6ea7..bf90f9e170 100644 --- a/ghost/admin/admin-ui-temp.js +++ b/ghost/admin/admin-ui-temp.js @@ -38,10 +38,50 @@ $(window).one('centered', fadeInAndFocus); // Allow notifications to be dismissed - $(document).on('click', '.js-notification .close', function () { + $(document).on('click', '.js-notification.notification-passive .close', function () { $(this).parent().fadeOut(200, function () { $(this).remove(); }); }); + $(document).on('click', '.js-notification.notification-persistent .close', function () { + var self = this; + $.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(); }); + } + }); + }); + + + /** + * Example of how to add a persistent notification. + */ + // $(document).on('click', '.add-persistent-notification', function (event) { + // event.preventDefault(); + // var msg = { + // type: 'error', + // message: 'This is an error', + // status: 'persistent', + // id: 'per-' + $('.notification-persistent').length + 1 + // }; + + // $.ajax({ + // type: "POST", + // url: '/api/v0.1/notifications/', + // data: msg + // }).done(function (result) { + // var fcv; + // fcv = new Ghost.Views.FlashCollectionView({ + // model: [msg] + // }); + // console.log(fcv); + // }); + // }); + $(document).ready(function () { // ## Set interactions for all menus @@ -79,4 +119,4 @@ }); -}()); \ No newline at end of file +}()); diff --git a/ghost/admin/views/editor.js b/ghost/admin/views/editor.js index 3e89b03235..732973bd45 100644 --- a/ghost/admin/views/editor.js +++ b/ghost/admin/views/editor.js @@ -1,6 +1,6 @@ // # Article Editor -/*global window, document, $, _, Backbone, Ghost, Showdown, CodeMirror, shortcut, Countable */ +/*global window, document, $, _, Backbone, Ghost, Showdown, CodeMirror, shortcut, Countable, JST */ (function () { "use strict"; @@ -93,26 +93,55 @@ this.savePost({ status: keys[newIndex] }).then(function () { - window.alert('Your post: ' + model.get('title') + ' has been ' + keys[newIndex]); + this.addSubview(new Ghost.Views.FlashCollectionView({ + 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]); }); }, handleStatus: function (e) { e.preventDefault(); var status = $(e.currentTarget).attr('data-set-status'), - model = this.model; + model = this.model, + self = this; if (status === 'publish-on') { - return window.alert('Scheduled publishing not supported yet.'); + this.addSubview(new Ghost.Views.FlashCollectionView({ + model: [{ + type: 'alert', + message: 'Scheduled publishing not supported yet.', + status: 'passive' + }] + })); + // return window.alert('Scheduled publishing not supported yet.'); } if (status === 'queue') { - return window.alert('Scheduled publishing not supported yet.'); + this.addSubview(new Ghost.Views.FlashCollectionView({ + model: [{ + type: 'alert', + message: 'Scheduled publishing not supported yet.', + status: 'passive' + }] + })); + // return window.alert('Scheduled publishing not supported yet.'); } this.savePost({ status: status }).then(function () { - window.alert('Your post: ' + model.get('title') + ' has been ' + status); + self.addSubview(new Ghost.Views.FlashCollectionView({ + model: [{ + type: 'success', + message: 'Your post: ' + model.get('title') + ' has been ' + status, + status: 'passive' + }] + })); + // window.alert('Your post: ' + model.get('title') + ' has been ' + status); }); }, @@ -120,11 +149,26 @@ if (e) { e.preventDefault(); } - var model = this.model; + var model = this.model, + self = this; this.savePost().then(function () { - window.alert('Your post was saved as ' + model.get('status')); + self.addSubview(new Ghost.Views.FlashCollectionView({ + model: [{ + type: 'success', + message: 'Your post was saved as ' + model.get('status'), + status: 'passive' + }] + })); + // window.alert('Your post was saved as ' + model.get('status')); }, function () { - window.alert(model.validationError); + self.addSubview(new Ghost.Views.FlashCollectionView({ + model: [{ + type: 'error', + message: model.validationError, + status: 'passive' + }] + })); + // window.alert(model.validationError); }); }, @@ -254,4 +298,52 @@ } }); -}()); \ No newline at end of file + /** + * 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); + } + }); + +}());