2013-10-08 19:39:07 +04:00
|
|
|
/*global window, document, Ghost, $, _, Backbone, JST, NProgress */
|
2013-07-11 23:02:18 +04:00
|
|
|
(function () {
|
|
|
|
"use strict";
|
|
|
|
|
|
|
|
var ContentList,
|
|
|
|
ContentItem,
|
2013-09-04 20:21:50 +04:00
|
|
|
PreviewContainer;
|
2013-07-11 23:02:18 +04:00
|
|
|
|
|
|
|
// Base view
|
|
|
|
// ----------
|
|
|
|
Ghost.Views.Blog = Ghost.View.extend({
|
|
|
|
initialize: function (options) {
|
2013-10-31 22:02:34 +04:00
|
|
|
/*jslint unparam:true*/
|
2013-10-08 19:39:07 +04:00
|
|
|
this.listenTo(this.collection, 'request', function () {
|
|
|
|
NProgress.start();
|
|
|
|
});
|
|
|
|
this.listenTo(this.collection, 'sync', function () {
|
|
|
|
NProgress.done();
|
|
|
|
});
|
2013-07-11 23:02:18 +04:00
|
|
|
this.addSubview(new PreviewContainer({ el: '.js-content-preview', collection: this.collection })).render();
|
|
|
|
this.addSubview(new ContentList({ el: '.js-content-list', collection: this.collection })).render();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// Content list (sidebar)
|
|
|
|
// -----------------------
|
|
|
|
ContentList = Ghost.View.extend({
|
|
|
|
|
2013-09-16 03:34:23 +04:00
|
|
|
isLoading: false,
|
|
|
|
|
2013-07-11 23:02:18 +04:00
|
|
|
events: {
|
|
|
|
'click .content-list-content' : 'scrollHandler'
|
|
|
|
},
|
|
|
|
|
2013-10-31 22:02:34 +04:00
|
|
|
initialize: function () {
|
2013-09-04 20:21:50 +04:00
|
|
|
this.$('.content-list-content').scrollClass({target: '.content-list', offset: 10});
|
2013-07-11 23:02:18 +04:00
|
|
|
this.listenTo(this.collection, 'remove', this.showNext);
|
2013-10-24 10:19:09 +04:00
|
|
|
this.listenTo(this.collection, 'add', this.renderPost);
|
2013-09-16 03:34:23 +04:00
|
|
|
// Can't use backbone event bind (see: http://stackoverflow.com/questions/13480843/backbone-scroll-event-not-firing)
|
|
|
|
this.$('.content-list-content').scroll($.proxy(this.checkScroll, this));
|
2013-07-11 23:02:18 +04:00
|
|
|
},
|
|
|
|
|
|
|
|
showNext: function () {
|
2013-09-16 03:34:23 +04:00
|
|
|
if (this.isLoading) { return; }
|
2013-09-27 08:44:01 +04:00
|
|
|
|
|
|
|
if (!this.collection.length) {
|
|
|
|
return Backbone.trigger('blog:activeItem', null);
|
|
|
|
}
|
|
|
|
|
2013-10-17 23:49:48 +04:00
|
|
|
var id = this.collection.at(0) ? this.collection.at(0).id : false;
|
2013-07-11 23:02:18 +04:00
|
|
|
if (id) {
|
|
|
|
Backbone.trigger('blog:activeItem', id);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2013-09-16 03:34:23 +04:00
|
|
|
reportLoadError: function (response) {
|
|
|
|
var message = 'A problem was encountered while loading more posts';
|
|
|
|
|
|
|
|
if (response) {
|
|
|
|
// Get message from response
|
|
|
|
message += '; ' + Ghost.Views.Utils.getRequestErrorMessage(response);
|
|
|
|
} else {
|
|
|
|
message += '.';
|
|
|
|
}
|
|
|
|
|
|
|
|
Ghost.notifications.addItem({
|
|
|
|
type: 'error',
|
|
|
|
message: message,
|
|
|
|
status: 'passive'
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
checkScroll: function (event) {
|
|
|
|
var self = this,
|
|
|
|
element = event.target,
|
|
|
|
triggerPoint = 100;
|
|
|
|
|
|
|
|
// If we haven't passed our threshold, exit
|
|
|
|
if (this.isLoading || (element.scrollTop + element.clientHeight + triggerPoint <= element.scrollHeight)) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
// If we've loaded the max number of pages, exit
|
|
|
|
if (this.collection.currentPage >= this.collection.totalPages) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Load moar posts!
|
|
|
|
this.isLoading = true;
|
|
|
|
this.collection.fetch({
|
2013-10-17 23:49:48 +04:00
|
|
|
update: true,
|
|
|
|
remove: false,
|
2013-09-16 03:34:23 +04:00
|
|
|
data: {
|
|
|
|
status: 'all',
|
|
|
|
page: (self.collection.currentPage + 1),
|
2013-10-17 09:21:56 +04:00
|
|
|
where: { page: 'all' },
|
2013-09-16 03:34:23 +04:00
|
|
|
orderBy: ['updated_at', 'DESC']
|
|
|
|
}
|
|
|
|
}).then(function onSuccess(response) {
|
2013-10-31 22:02:34 +04:00
|
|
|
/*jslint unparam:true*/
|
2013-09-16 03:34:23 +04:00
|
|
|
self.render();
|
|
|
|
self.isLoading = false;
|
|
|
|
}, function onError(e) {
|
|
|
|
self.reportLoadError(e);
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2013-10-24 10:19:09 +04:00
|
|
|
renderPost: function (model) {
|
|
|
|
this.$('ol').append(this.addSubview(new ContentItem({model: model})).render().el);
|
|
|
|
},
|
|
|
|
|
2013-07-11 23:02:18 +04:00
|
|
|
render: function () {
|
2013-10-24 10:19:09 +04:00
|
|
|
var $list = this.$('ol');
|
|
|
|
|
|
|
|
// Clear out any pre-existing subviews.
|
|
|
|
this.removeSubviews();
|
|
|
|
|
2013-07-11 23:02:18 +04:00
|
|
|
this.collection.each(function (model) {
|
2013-10-24 10:19:09 +04:00
|
|
|
$list.append(this.addSubview(new ContentItem({model: model})).render().el);
|
2013-07-11 23:02:18 +04:00
|
|
|
}, this);
|
|
|
|
this.showNext();
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
// Content Item
|
|
|
|
// -----------------------
|
|
|
|
ContentItem = Ghost.View.extend({
|
|
|
|
|
|
|
|
tagName: 'li',
|
|
|
|
|
|
|
|
events: {
|
|
|
|
'click a': 'setActiveItem'
|
|
|
|
},
|
|
|
|
|
|
|
|
active: false,
|
|
|
|
|
|
|
|
initialize: function () {
|
|
|
|
this.listenTo(Backbone, 'blog:activeItem', this.checkActive);
|
2013-12-18 19:23:35 +04:00
|
|
|
this.listenTo(this.model, 'change:page change:featured', this.render);
|
2013-07-11 23:02:18 +04:00
|
|
|
this.listenTo(this.model, 'destroy', this.removeItem);
|
|
|
|
},
|
|
|
|
|
|
|
|
removeItem: function () {
|
2013-08-20 22:52:44 +04:00
|
|
|
var self = this;
|
2013-07-11 23:02:18 +04:00
|
|
|
$.when(this.$el.slideUp()).then(function () {
|
2013-08-20 22:52:44 +04:00
|
|
|
self.remove();
|
2013-07-11 23:02:18 +04:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
// If the current item isn't active, we trigger the event to
|
|
|
|
// notify a change in which item we're viewing.
|
|
|
|
setActiveItem: function (e) {
|
|
|
|
e.preventDefault();
|
|
|
|
if (this.active !== true) {
|
|
|
|
Backbone.trigger('blog:activeItem', this.model.id);
|
|
|
|
this.render();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
// Checks whether this item is active and doesn't match the current id.
|
|
|
|
checkActive: function (id) {
|
|
|
|
if (this.model.id !== id) {
|
|
|
|
if (this.active) {
|
|
|
|
this.active = false;
|
|
|
|
this.$el.removeClass('active');
|
|
|
|
this.render();
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
this.active = true;
|
|
|
|
this.$el.addClass('active');
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
showPreview: function (e) {
|
|
|
|
var item = $(e.currentTarget);
|
|
|
|
this.$('.content-list-content li').removeClass('active');
|
|
|
|
item.addClass('active');
|
|
|
|
Backbone.trigger('blog:activeItem', item.data('id'));
|
|
|
|
},
|
|
|
|
|
|
|
|
templateName: "list-item",
|
|
|
|
|
2013-08-02 02:33:06 +04:00
|
|
|
templateData: function () {
|
|
|
|
return _.extend({active: this.active}, this.model.toJSON());
|
2013-07-11 23:02:18 +04:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
// Content preview
|
|
|
|
// ----------------
|
|
|
|
PreviewContainer = Ghost.View.extend({
|
|
|
|
|
|
|
|
activeId: null,
|
|
|
|
|
|
|
|
events: {
|
2013-10-16 17:07:57 +04:00
|
|
|
'click .post-controls .post-edit' : 'editPost',
|
|
|
|
'click .featured' : 'toggleFeatured',
|
|
|
|
'click .unfeatured' : 'toggleFeatured'
|
2013-07-11 23:02:18 +04:00
|
|
|
},
|
|
|
|
|
2013-10-31 22:02:34 +04:00
|
|
|
initialize: function () {
|
2013-07-11 23:02:18 +04:00
|
|
|
this.listenTo(Backbone, 'blog:activeItem', this.setActivePreview);
|
|
|
|
},
|
|
|
|
|
|
|
|
setActivePreview: function (id) {
|
|
|
|
if (this.activeId !== id) {
|
|
|
|
this.activeId = id;
|
|
|
|
this.render();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
editPost: function (e) {
|
|
|
|
e.preventDefault();
|
|
|
|
// for now this will disable "open in new tab", but when we have a Router implemented
|
|
|
|
// it can go back to being a normal link to '#/ghost/editor/X'
|
2013-11-27 06:00:55 +04:00
|
|
|
window.location = Ghost.paths.ghostRoot + '/ghost/editor/' + this.model.get('id') + '/';
|
2013-07-11 23:02:18 +04:00
|
|
|
},
|
|
|
|
|
2013-10-16 17:07:57 +04:00
|
|
|
toggleFeatured: function (e) {
|
|
|
|
var self = this,
|
|
|
|
featured = !self.model.get('featured'),
|
|
|
|
featuredEl = $(e.currentTarget),
|
|
|
|
model = this.collection.get(this.activeId);
|
|
|
|
|
|
|
|
model.save({
|
|
|
|
featured: featured
|
|
|
|
}, {
|
2013-10-31 22:02:34 +04:00
|
|
|
success : function () {
|
2013-10-16 17:07:57 +04:00
|
|
|
featuredEl.removeClass("featured unfeatured").addClass(featured ? "featured" : "unfeatured");
|
|
|
|
Ghost.notifications.addItem({
|
|
|
|
type: 'success',
|
|
|
|
message: "Post successfully marked as " + (featured ? "featured" : "not featured") + ".",
|
|
|
|
status: 'passive'
|
|
|
|
});
|
|
|
|
},
|
|
|
|
error : function (model, xhr) {
|
2013-10-31 22:02:34 +04:00
|
|
|
/*jslint unparam:true*/
|
2013-10-16 17:07:57 +04:00
|
|
|
Ghost.notifications.addItem({
|
|
|
|
type: 'error',
|
|
|
|
message: Ghost.Views.Utils.getRequestErrorMessage(xhr),
|
|
|
|
status: 'passive'
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2013-07-11 23:02:18 +04:00
|
|
|
templateName: "preview",
|
|
|
|
|
|
|
|
render: function () {
|
2013-09-27 08:44:01 +04:00
|
|
|
this.model = this.collection.get(this.activeId);
|
|
|
|
this.$el.html(this.template(this.templateData()));
|
|
|
|
|
2013-09-04 20:21:50 +04:00
|
|
|
this.$('.content-preview-content').scrollClass({target: '.content-preview', offset: 10});
|
2013-07-11 23:02:18 +04:00
|
|
|
this.$('.wrapper').on('click', 'a', function (e) {
|
|
|
|
$(e.currentTarget).attr('target', '_blank');
|
|
|
|
});
|
2013-09-13 21:29:08 +04:00
|
|
|
|
2013-12-15 15:36:01 +04:00
|
|
|
if (this.model !== undefined) {
|
2013-09-13 21:29:08 +04:00
|
|
|
this.addSubview(new Ghost.View.PostSettings({el: $('.post-controls'), model: this.model})).render();
|
|
|
|
}
|
|
|
|
|
2013-07-11 23:02:18 +04:00
|
|
|
Ghost.temporary.initToggles(this.$el);
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
2013-10-16 17:07:57 +04:00
|
|
|
}());
|